/* ---------------------------------------------- */


/* GLOBAL Styles                                  */

#admin-section #SYSGlobalAsyncNotifyIndicator {
    width: 820px !important;
    top: 1px !important;
    left: 260px !important;
}

body {
    font-family: Gentona-Book !important;
    color: black !important;
    letter-spacing: 0.9px! important;
    height: 100% !important;
    margin: 0px;
    padding: 0px;
    height: 100vh;
}

br {
    line-height: 2px;
}

p {
    margin-top: 6px;
    margin-bottom: 8px;
}

ul {
    margin-top: 6px;
    margin-bottom: 8px;
}

h1 {
    font-size: 16px;
}


/* --------------------------------------------- */


/* Projekt Übersicht/Liste Styles                */

.GridProjektSearch {
    display: grid;
    grid-template-areas: "ProjektSearchSearch" "ProjektSearchSubmitButton" "ProjektSearchResultList";
}

.ProjektSearchFormfields {
    width: 100%;
    grid-area: ProjektSearchSearch;
}

.ProjektSearchSubmit {
    width: 100%;
    grid-area: ProjektSearchSubmitButton;
}

.ProjektSearchResultList {
    width: 100%;
    grid-area: ProjektSearchResultList;
}


/* --------------------------------------------- */


/* Global Grid Styles                            */

.GridProjektdauer {
    display: grid;
    grid-template-columns: repeat(14, 1fr);
    grid-auto-rows: minmax(10px, auto);
    grid-template-areas: ".   .   .   .   .   hdt hdt hdt hdm hdm hdm hdj hdj hdj" "dc1 dc1 dc1 dc1 dc1 d1t d1t d1t d1m d1m d1m d1j d1j d1j" "dc2 dc2 dc2 dc2 dc2 d2t d2t d2t d2m d2m d2m d2j d2j d2j";
}

.GridProjektdauerHeaderTag {
    width: 25%;
    grid-area: hdt;
}

.GridProjektdauerHeaderMonat {
    width: 25%;
    grid-area: hdm;
}

.GridProjektdauerHeaderJahr {
    width: 25%;
    grid-area: hdj;
}

.GridProjektdauerSectionBeginn {
    width: 25%;
    grid-area: dc1;
}

.GridProjektdauerBeginnTag {
    grid-area: d1t;
}

.GridProjektdauerBeginnMonat {
    grid-area: d1m;
}

.GridProjektdauerBeginnJahr {
    grid-area: d1j;
}

.GridProjektdauerSectionEnde {
    grid-area: dc2;
}

.GridProjektdauerEndeTag {
    grid-area: d2t;
}

.GridProjektdauerEndeMonat {
    grid-area: d2m;
}

.GridProjektdauerEndeJahr {
    grid-area: d2j;
}

.GridProjektdauerVorzeitig {
    display: grid;
    grid-template-columns: repeat(14, 1fr);
    grid-auto-rows: minmax(10px, auto);
    grid-template-areas: ".   .   .   .   .   hdt hdt hdt hdm hdm hdm hdj hdj hdj" "dc1 dc1 dc1 dc1 dc1 d1t d1t d1t d1m d1m d1m d1j d1j d1j";
}

.GridProjektdauerVorzeitigHeaderTag {
    width: 25%;
    grid-area: hdt;
}

.GridProjektdauerVorzeitigHeaderMonat {
    width: 25%;
    grid-area: hdm;
}

.GridProjektdauerVorzeitigHeaderJahr {
    width: 25%;
    grid-area: hdj;
}

.GridProjektdauerVorzeitigSectionBeginn {
    width: 25%;
    grid-area: dc1;
}

.GridProjektdauerVorzeitigBeginnTag {
    grid-area: d1t;
}

.GridProjektdauerVorzeitigBeginnMonat {
    grid-area: d1m;
}

.GridProjektdauerVorzeitigBeginnJahr {
    grid-area: d1j;
}


/* --------------------------------------------- */


/* Tab Grid Styles                               */


/* --------------------------------------------- */


/* List Grid Styles                              */

.GridProjektNewPartnerKKSearchList {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 33%);
}

.GridProjektNewPartnerBJSearchList {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 33%);
}

.GridProjektNewKooperationspartnerSearchResultList {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 25%);
}

.GridProjektNewKooperationspartnerList {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 25%);
}

.GridProjektNewProjektbeschreibungLinksList {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(1, 100%);
}


/* ---------------------------------------------- */


/* Upload Global Styles                           */

.GlobalUploadDescription {
    flex: 10%;
}

.GlobalUploadSelectButton {
    flex: 10%;
}

.GlobalUploadProgressContainer {
    flex: 70%;
    height: 40px;
}

.GlobalUploadUploadButton {
    flex: 10%;
}

.GlobalUploadProgressBar {
    top: 50%;
    height: 2px;
    width: 0%;
    background: #996699;
}

.GlobalUploadProgressPercentage {
    top: 0%;
    background: #ffffff
}


/* --------------------------------------------- */


/* List Grid Styles                              */

.GridProjektNewPartnerKKSearchList {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 33%);
}

.GridProjektNewPartnerBJSearchList {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 33%);
}

.GridProjektNewKooperationspartnerSearchResultList {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

.GridProjektNewKooperationspartnerList {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}

.GridProjektNewProjektbeschreibungLinksList {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(1, 100%);
}


/* --------------------------------------------- */


/* System AsyncNotifyIndicator Styles            */

#SYSGlobalAsyncNotifyIndicator {
    position: static !important;
}

.IndicatorSuccess {
    background-color: #bad0ba !important;
    color: #5e815e !important;
    height: 100px;
    padding: 25px;
    margin-bottom: 25px;
}

.IndicatorSuccess:hover {
    background-color: #8cb18c !important;
}

.sysIndicatorItem {
    cursor: pointer;
}

.sysIndicatorItem::after {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 20px;
    content: "\f00d";
    position: absolute;
    top: 5px;
    right: 11px;
}

#SYSGlobalAsyncNotifyIndicatorItem__PROJEKTANTRAG_KURZBESCHREIBUNG_SAVE__MovementDIV:hover {
    background-color: #bad0ba !important;
    color: #5e815e !important;
}

.SYSGlobalAsyncNotifyIndicatorItemBKGRDProcessStatus::after {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 20px;
    content: "\f00c";
    display: inline-block;
    margin-left: 15px;
    color: #fff;
}

.SYSGlobalAsyncNotifyIndicatorItemBKGRDProcessStatus {
    color: #fff;
}

#SYSGlobalAsyncNotifyIndicatorItem__PROJEKTANTRAG_KURZBESCHREIBUNG_SAVE__MovementDIV:hover>#SYSGlobalAsyncNotifyIndicatorItem__PROJEKTANTRAG_KURZBESCHREIBUNG_SAVE__Name {
    color: #5e815e;
}

#SYSGlobalAsyncNotifyIndicatorItem__PROJEKTANTRAG_KURZBESCHREIBUNG_SAVE__MovementDIV:hover>#SYSGlobalAsyncNotifyIndicatorItem__PROJEKTANTRAG_KURZBESCHREIBUNG_SAVE__BKGRDProcessStatus {
    color: #5e815e;
}

#SYSGlobalAsyncNotifyIndicatorItem__PROJEKTANTRAG_KURZBESCHREIBUNG_SAVE__MovementDIV:hover>#SYSGlobalAsyncNotifyIndicatorItem__PROJEKTANTRAG_KURZBESCHREIBUNG_SAVE__BKGRDProcessStatus::after {
    color: #5e815e;
}

#SYSGlobalAsyncNotifyIndicatorItem__PROJEKTANTRAG_KURZBESCHREIBUNG_SAVE__MovementDIV:hover #SYSGlobalAsyncNotifyIndicatorItem__PROJEKTANTRAG_KURZBESCHREIBUNG_SAVE__MovementDIV::after {
    color: #5e815e !important;
}

.SYSGlobalAsyncNotifyIndicatorItemProcessStatusIcon img {
    display: none;
}

.SYSGlobalAsyncNotifyIndicatorItemClose {
    position: absolute;
    width: 20px;
    height: 20px;
    right: 1px;
}

#SYSGlobalAsyncNotifyIndicatorItem__PROJEKTANTRAG_KURZBESCHREIBUNG_SAVE__MovementDIV::after {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 20px;
    content: "\f00d";
    position: absolute;
    top: 5px;
    right: 11px;
}

.SYSGlobalAsyncNotifyIndicatorItemName {
    color: #fff;
}

.SYSGlobalAsyncNotifyIndicatorItemBKGRDProcessStatus {
    font-family: Gentona-Book, Lucida Sans Unicode, Lucida Grande, Sans-Serif;
    color: #fff;
}

.xxx::after {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 20px;
    content: "\f110";
    animation: rotate 1.5s linear infinite;
    display: inline-block;
    margin-left: 15px;
}

@keyframes rotate {
    to {
        transform: rotate(360deg);
    }
}


/* --------------------------------------------- */


/* System TAB Styles                             */

.sysTabTableRow div {
    position: static !important;
    width: auto !important;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: inline-block !important;
    font-family: Gentona-Book, Lucida Sans Unicode, Lucida Grande, Sans-Serif !important;
    letter-spacing: 0.9px !important;
    font-weight: normal !important;
    font-size: 16px;
    text-transform: none;
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Old versions of Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.sysTabActiveMiddle {
    display: inline-block;
    position: absolute;
}

.sysTabActiveText {
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    cursor: pointer;
    padding: 20px;
    font-size: 12px;
    color: #000731;
    background-color: #996699;
    color: #fff;
    border: solid 2px #fff;
    border-bottom: 2px #4c4c4c;
}

#ProjektNew_ProjektNewTabContainer_Tabs_Row_TabMiddleTabProjektNewNachAntragsabschluss_SQLTextTabProjektNewNachAntragsabschluss {
    display: none !important;
}

.sysScreenRoot img {
    display: none !important;
}

.sysTabInactiveMiddle {
    display: inline-block;
    width: auto;
    position: absolute;
}

.sysTabInactiveText {
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    cursor: pointer;
    background-color: #eee;
    padding: 20px;
    font-size: 12px;
    color: #000731;
    width: auto;
    border: solid 2px #fff;
    border-bottom: 2px #4c4c4c;
}

.sysTabInactiveText:hover {
    background-color: #996699;
    color: #fff;
    -webkit-transition: background-color 0.4s linear;
    -ms-transition: background-color 0.4s linear;
    transition: background-color 0.4s linear;
}

#sysMenu_sysMenuTable_sysMenuTableRowGlobalRoot_sysMenuTableRowGlobalRootColLink,
#sysMenu_sysMenuTable_sysMenuTableRowProjektRoot_sysMenuTableRowProjektRootColLink,
#sysMenu_sysMenuTable_sysMenuTableRowAntragstellerRoot_sysMenuTableRowAntragstellerRootColLink {
    display: none;
}


/*👉#sysMenu_sysMenuTable_sysMenuTableRowProjektRoot_sysMenuTableRowProjektRootColLink,
#sysMenu_sysMenuTable_sysMenuTableRowGlobalRoot_sysMenuTableRowGlobalRootColLink,
#sysMenu_sysMenuTable_sysMenuTableRowAntragstellerRoot_sysMenuTableRowAntragstellerRootColLink,
#sysMenu_sysMenuTable_sysMenuTableRowProjektUpdate_sysMenuTableRowProjektUpdateColLink,
#sysMenu_sysMenuTable_sysMenuTableRowAntragstellerUpdate_sysMenuTableRowAntragstellerUpdateColLink,
#sysMenu_sysMenuTable_sysMenuTableRowAntragstellerUpdatePartnerKKEinzelperson_sysMenuTableRowAntragstellerUpdatePartnerKKEinzelpersonColLink,
#sysMenu_sysMenuTable_sysMenuTableRowAntragstellerUpdatePartnerKKInstitution_sysMenuTableRowAntragstellerUpdatePartnerKKInstitutionColLink,
#sysMenu_sysMenuTable_sysMenuTableRowAntragstellerUpdatePartnerBJ_sysMenuTableRowAntragstellerUpdatePartnerBJColLink,#sysMenu_sysMenuTable_sysMenuTableRowAntragstellerUpdateProjektleitungAndere_sysMenuTableRowAntragstellerUpdateProjektleitungAndereColLink{
	display: none;
}👈*/

#sysMenu_sysMenuTable_sysMenuTableRowGlobalSettings_sysMenuTableRowGlobalSettingsColLink {
    margin-top: 121px;
}

#sysMenu_sysMenuTable_sysMenuTableRowProjektUpdate_sysMenuTableRowProjektUpdateColLink_sysMenuTableRowProjektUpdateColLinkLink .sysMenuTableLinkHilite {
    display: block !important;
}

#sysMenu_sysMenuTable_sysMenuTableRowProjektUpdate_sysMenuTableRowProjektUpdateColLink_sysMenuTableRowProjektUpdateColLinkLink {
    display: none;
}


/* --------------------------------------------- */


/* sysMenu Styles                                */

.sysMenuTableLinkHilite {
    color: #996699 !important;
    background-color: #F3C7C7;
}

.sysMenuTableLink {
    padding-left: 35px !important;
    padding-right: 35px !important;
    padding-top: 15px;
    padding-bottom: 15px;
    cursor: pointer;
    display: block !important;
    transition: all 0.4s;
}

.sysMenuTableLink:hover {
    background-color: #F3C7C7;
}

.sysMenuTableLink:hover div {
    color: #996699 !important;
}

#admin-section .sysMenuTable {
    width: 236px;
    height: 100%;
    top: 0px;
    left: 0px;
    background-color: #996699;
    padding: 0px;
    /*👉  position: absolute;👈*/
    z-index: 90;
}

.sysMenuTableRowColOpenClose {
    display: none;
}

#admin-section .sysMenuTableRow {
    left: -15px !important;
    margin-left: 0px !important;
    display: block !important;
}

#admin-section .sysMenuTableRowColIcon div {
    background: none !important;
    display: none !important;
}

#admin-section .sysMenuTableRowColLink {
    width: auto;
    left: 45px;
}

#admin-section .sysMenuTableLink {
    color: white;
}

.sysMenuHierarchyLevelImage {
    width: 16px;
    height: 16px;
    background: url("/images/") repeat-y scroll 0 0;
    background-size: 16px 16px;
    position: absolute;
}

.sysMenuOpenCloseImageOpened {
    width: 16px;
    height: 16px;
    background: url("/images/MenuOpenCloseOpened.png") repeat-y scroll 0 0 #2d373c;
    background-size: 16px 16px;
    position: absolute;
    top: -4px;
}

.sysMenuOpenCloseImageClosed {
    width: 16px;
    height: 16px;
    background: url("/images/MenuOpenCloseClosed.png") repeat-y scroll 0 0 #2d373c;
    background-size: 16px 16px;
    position: absolute;
    top: -4px;
}

.sysMenuIconDefaultText {
    width: 16px;
    height: 16px;
    background: url("/images/MenuIconDefaultText.png") repeat-y scroll 0 0;
    background-size: 16px 16px;
}

.sysMenuIconEdit {
    width: 16px;
    height: 16px;
    background: url("/images/MenuIconEdit.png") repeat-y scroll 0 0;
    background-size: 16px 16px;
    position: absolute;
}

.sysMenuIconSearch {
    width: 16px;
    height: 16px;
    background: url("/images/MenuIconSearch.png") repeat-y scroll 0 0;
    background-size: 16px 16px;
    position: absolute;
}

.sysMenuIconContactNew {
    width: 16px;
    height: 16px;
    background: url("/images/MenuIconContactNew.png") repeat-y scroll 0 0;
    background-size: 16px 16px;
    position: absolute;
}

.sysMenuIconArticleNew {
    width: 16px;
    height: 16px;
    background: url("/images/MenuIconArticleNew.png") repeat-y scroll 0 0;
    background-size: 16px 16px;
    position: absolute;
}

.sysMenuIconShipment {
    width: 16px;
    height: 16px;
    background: url("/images/MenuIconShipment.png") repeat-y scroll 0 0;
    background-size: 16px 16px;
    position: absolute;
}


/* --------------------------------------------- */


/* Switch Screen Hide Layer                      */

#admin-section .sysScreenRoot {
    top: 121px;
    left: 261px;
    padding: 0px;
    z-index: 0;
    position: absolute;
    width: 820px;
}


/* --------------------------------------------- */


/* Switch Screen Hide Layer                      */

.sysScreenHideLayer {
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-color: #ffffff;
    padding: 0px;
    z-index: 0;
    position: absolute;
}

.sysScreenHideLayerTable {
    display: table;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    padding: 0px;
    z-index: 0;
}

.sysScreenHideLayerTableRow {
    display: table-row;
    margin: 0px;
    padding: 0px;
    z-index: 0;
}


/* --------------------------------------------- */


/* Default Styles                                */

.DefaultSpacer {
    width: 10px;
    height: 10px;
    background: url("/images/MenuOpenCloseClosed.png") repeat-y scroll 0 0 #efefef;
    background-size: 10px 10px;
}

.DefaultTable {
    display: table;
    width: 800px;
    height: 100px;
    top: 40px;
    left: 280px;
    background-color: #f1f3f4;
    border: 1px solid #d5d5d5;
    border-spacing: 1px;
    border-radius: 0px 5px 5px 0px;
    padding: 1px;
    position: absolute;
}

.DefaultTableRow {
    display: table-row;
    margin: 0px;
    padding: 0px;
    position: absolute;
}

.TableColSpacer {
    float: none;
    display: table-column;
    width: 10px;
    height: 10px;
    left: 100px;
    position: absolute;
}

.TableColSQLText1 {
    float: none;
    display: table-column;
    width: 10px;
    height: 10px;
    left: 200px;
    position: absolute;
}


/* --------------------------------------------- */


/* Form Field Styles                             */

.DefaultFormListTable {
    display: table;
    left: 0px;
    height: 600px;
    background-color: #ffffff;
    padding: 1px;
    position: absolute;
}

.DefaultFormListTableWidth {
    width: 1076px;
}

.DefaultFormListTableRow {
    display: table-row;
    width: 800px;
    margin: 0px;
    padding: 0px;
    position: absolute;
}

.DefaultFormListColDescription {
    display: table-column;
    width: 260px;
    left: 0px;
    position: absolute;
}

.DefaultFormListColSpacer {
    display: table-column;
    width: 10px;
    left: 160px;
    position: absolute;
}

.DefaultFormListColForm {
    display: table-column;
    width: 760px;
    left: 170px;
    position: absolute;
}

.DefaultFormListDescription {
    padding-left: 2px;
    padding-top: 12px;
    font-family: "Verdana", "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 14px;
    color: #000731;
}


/* --------------------------------------------- */


/* System Context Menu Styles                    */

.sysContextMenuTable {
    display: table;
    width: 200px;
    height: 200px;
    border: 1px solid #bbbbbb;
    background-color: #ffffff;
    position: absolute;
    z-index: 100;
}

.sysContextMenuHeaderRow {
    display: table-row;
    margin: 0px;
    padding: 0px;
    height: 22px;
    position: absolute;
    z-index: 100;
}

.sysContextMenuHeaderColDescription {
    float: none;
    display: table-column;
    left: 0px;
    width: 180px;
    padding: 0px 0px 0px 0px;
    position: absolute;
    z-index: 100;
}

.sysContextMenuHeaderDescriptionText {
    padding-left: 8px;
    font-family: "Helvetica", "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 14px;
    position: absolute;
    z-index: 100;
}

.sysContextMenuHeaderColClose {
    float: none;
    display: table-column;
    background: url("/images/context_menu_close.png") repeat-x scroll 0 0 #ffffff;
    left: 185px;
    width: 10px;
    height: 20px;
    padding: 0px 0px 0px 0px;
    position: absolute;
    z-index: 100;
}

.sysContextMenuItemRow {
    display: table-row;
    margin: 0px;
    padding: 0px;
    height: 21px;
    position: absolute;
    z-index: 100;
}

.sysContextMenuItemColDescription {
    float: none;
    display: table-column;
    left: 0px;
    width: 180px;
    height: 21px;
    background-color: #becdd7;
    padding: 0px 0px 0px 0px;
    position: absolute;
    z-index: 100;
}

.sysContextMenuItemDescriptionText {
    padding-left: 8px;
    font-family: "Helvetica", "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 12px;
    height: 21px;
    color: #000731;
    position: absolute;
    z-index: 100;
}

.sysContextMenuItemIconEdit {
    float: none;
    display: table-column;
    background: url("/images/context_menu_edit.png") repeat-x scroll 0 0 #2387aa;
    background-color: #efefef;
    border: 1px dotted #bbbbbb;
    border-right-style: none;
    left: 180px;
    width: 20px;
    height: 20px;
    padding: 0px 0px 0px 0px;
    position: absolute;
    z-index: 100;
}

.sysContextMenuItemIconDelete {
    float: none;
    display: table-column;
    color: #ffffff;
    background: url("/images/context_menu_delete.png") repeat-x scroll 0 0 #ffffff;
    background-color: #efefef;
    border: 1px dotted #bbbbbb;
    border-radius: 0px 0px 0px 8px;
    border-right-style: none;
    left: 180px;
    width: 20px;
    height: 20px;
    padding: 0px 0px 0px 0px;
    position: absolute;
    z-index: 100;
}

.SYSGlobalContextMenuTable tbody tr:hover td {
    background: url("/images/gradhover.png") repeat-x scroll 0 0 #000000;
    color: #333399;
}


/* --------------------------------------------- */


/* Custom Link Styles                            */

.MenuLinkTable {
    display: table;
    width: 160px;
    height: 20px;
    padding: 2px;
    position: absolute;
    z-index: 10;
}

.MenuLinkTableRow {
    display: table-row;
    margin: 0px;
    padding: 0px;
    position: absolute;
    z-index: 10;
}

.MenuLinkDescription {
    float: none;
    display: table-column;
    cursor: pointer;
    height: 18px;
    background-color: #996699;
    border-radius: 1px;
    padding: 7px;
    font-family: "Gentona-Book", "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 13px;
    font-weight: bold;
    color: #ffffff;
    position: absolute;
    z-index: 10;
    transition: 0.3s;
}

.MenuLinkDescription:hover {
    background-color: #c13f60;
}


/* --------------------------------------------- */


/* Tooltip Styles                                */


/*
tooltip {
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -60px;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

*/