style.css

 
/* Prevent loop on shared menu click throught socket.io */
[class~=NotSharedAgain]
{
}
 
/* Global menu icons */
 
[class~=updownGlobalMenuButtonIcon]
{
    background-image: url(/static/images/icons/globalmenu/updown/up_arrow.png);
}
 
[class~=closeUpdownGlobalMenuButtonIcon]
{
    background-image: url(/static/images/icons/globalmenu/updown/down_arrow.png);
}
 
[class~=upArrowButtonIcon]
{
    background-image: url(/static/images/icons/globalmenu/updown/up_arrow.png);
}
 
[class~=actionGlobalMenuButtonIcon]
{
    background-image: url(/static/images/icons/globalmenu/Action.png);
}
 
[class~=closeActionGlobalMenuButtonIcon]
{
    background-image: url(/static/images/icons/globalmenu/closeAction.png);
}
 
[class~=nodeMenuButtonIcon]
{
    background-image: url(/static/images/icons/globalmenu/openNodeMenu.png);
}
 
[class~=closeNodeMenuButtonIcon]
{
    background-image: url(/static/images/icons/globalmenu/closeNodeMenu.png);
}
 
[class~=searchButtonIcon]
{
    background-image: url(/static/images/icons/globalmenu/search.png);
}
 
[class~=closeSearchButtonIcon]
{
    background-image: url(/static/images/icons/globalmenu/closeSearch.png);
}
 
[class~=tagsGlobalMenuButtonIcon]
{
    background-image: url(/static/images/icons/globalmenu/tags.png);
}
 
[class~=closeTagsGlobalMenuButtonIcon]
{
    background-image: url(/static/images/icons/globalmenu/closeTags.png);
}
 
[class~=selectionButtonIcon]
{
    background-image: url(/static/images/icons/globalmenu/selection.png);
}
 
[class~=closeSelectionButtonIcon]
{
    background-image: url(/static/images/icons/globalmenu/closeSelection.png);
}
 
[class~=clearSelectionButtonIcon]
{
    background-image: url(/static/images/icons/globalmenu/clearSelection.png);
}
 
[class~=closeClearSelectionButtonIcon]
{
    background-image: url(/static/images/icons/globalmenu/closeClearSelection.png);
}
 
[class~=nextTilesButtonIcon]
{
    background-image: url(/static/images/icons/globalmenu/nextTiles.png);
}
 
[class~=closeNextTilesButtonIcon]
{
    background-image: url(/static/images/icons/globalmenu/closeNextTiles.png);
}
 
[class~=zoomGlobalMenuButtonIcon]
{
    background-image: url(/static/images/icons/globalmenu/zoommenu/zoom.png);
}
 
[class~=closeZoomGlobalMenuButtonIcon]
{
    background-image: url(/static/images/icons/globalmenu/zoommenu/closeZoom.png);
}
 
[class~=zoomButtonIcon]
{
    background-image: url(/static/images/icons/globalmenu/zoommenu/zoom.png);
}
 
[class~=closezoomButtonIcon]
{
    background-image: url(/static/images/icons/globalmenu/zoommenu/closeZoom.png);
}
 
[class~=disablezoomButtonIcon]
{
    background-image: url(/static/images/icons/globalmenu/zoommenu/disableZoom.png);
}
 
 
[class~=expandZoomButtonIcon]
{
    background-image: url(/static/images/icons/globalmenu/zoommenu/validateZoomSelection.png);
}
 
[class~=explain-zoom]
{
}
 
 
[class~=unzoomButtonIcon]
{
    background-image: url(/static/images/icons/globalmenu/zoommenu/closeZoomButton.png);
}
 
[class~=explain-MS]
{
}
 
[class~=MSButtonIcon]
{
    background-image: url(/static/images/icons/globalmenu/zoommenu/masterslave.png);
}
 
[class~=closeMSButtonIcon]
{
    background-image: url(/static/images/icons/globalmenu/zoommenu/closemasterslave.png);
}
 
[class~=disableMSButtonIcon]
{
    background-image: url(/static/images/icons/globalmenu/zoommenu/disablemasterslave.png);
}
 
[class~=startMSButtonIcon]
{
    background-image: url(/static/images/icons/globalmenu/zoommenu/masterslave.png);
}
 
[class~=AllMSButtonIcon]
{
    background-image: url(/static/images/icons/globalmenu/zoommenu/masterslaveALL.png);
}
 
[class~=zoomNodesButtonIcon]
{
    background-image: url(/static/images/icons/globalmenu/zoommenu/zoomNode.png);
}
 
[class~=closeZoomNodesButtonIcon]
{
    background-image: url(/static/images/icons/globalmenu/zoommenu/closezoomNode.png);
}
 
 
[class~=disablezoomNodesButtonIcon]
{
    background-image: url(/static/images/icons/globalmenu/zoommenu/disablezoomNode.png);
}
 
[class~=stateGlobalMenuButtonIcon]
{
    background-image: url(/static/images/icons/globalmenu/statemenu/showInfo.png);
}
 
[class~=closeStateGlobalMenuButtonIcon]
{
    background-image: url(/static/images/icons/globalmenu/statemenu/closeShowInfo.png);
}
 
[class~=QRcodeButtonIcon]
{
    background-image: url(/static/images/icons/globalmenu/statemenu/QRcode.png);
}
 
[class~=closeQRcodeButtonIcon]
{
    background-image: url(/static/images/icons/globalmenu/statemenu/closeQRcode.png);
}
[class~=OnOffButtonIcon]
{
    background-image: url(/static/images/icons/globalmenu/statemenu/OnOff.png);
}
 
[class~=closeOnOffButtonIcon]
{
    background-image: url(/static/images/icons/globalmenu/statemenu/closeOnOff.png);
}
 
[class~=RotateButtonIcon]
{
    background-image: url(/static/images/icons/globalmenu/Rotate.png);
}
 
[class~=closeRotateButtonIcon]
{
    background-image: url(/static/images/icons/globalmenu/closeRotate.png);
}
 
[class~=managementGlobalMenuButtonIcon]
{
    background-image: url(/static/images/icons/globalmenu/management/options.png);  
}
 
[class~=closeManagementGlobalMenuButtonIcon]
{
    background-image: url(/static/images/icons/globalmenu/management/closeOptions.png); 
}
 
[class~=DrawsButtonIcon]
{
    background-image: url(/static/images/icons/globalmenu/management/drawManagement.png);
}
 
[class~=closeDrawsButtonIcon]
{
    background-image: url(/static/images/icons/globalmenu/management/closeDrawManagement.png);
}
 
 
[class~=brushButtonIcon]
{
    background-image: url(/static/images/icons/globalmenu/brush.png);
}
 
[class~=DrawOnAllNodesIcon]
{
    background-image: url(/static/images/icons/globalmenu/zoommenu/masterslave.png);
}
 
[class~=showInfoButtonIcon]
{
    background-image: url(/static/images/icons/globalmenu/statemenu/showInfo.png);
}
 
[class~=closeShowInfoButtonIcon]
{
    background-image: url(/static/images/icons/globalmenu/statemenu/closeShowInfo.png);
}
 
[class~=refreshButtonIcon]
{
    background-image: url(/static/images/icons/globalmenu/refresh.png);
}
 
[class~=cancelGlobalMenuButtonIcon]
{
    background-image: url(/static/images/icons/globalmenu/cancel/back.png);
}
 
[class~=closeCancelGlobalMenuButtonIcon]
{
    background-image: url(/static/images/icons/globalmenu/cancel/forward.png);
}
 
[class~=moveBackButtonIcon]
{
    background-image: url(/static/images/icons/globalmenu/cancel/back.png);
}
 
[class~=moveForwardButtonIcon]
{
    background-image: url(/static/images/icons/globalmenu/cancel/forward.png);
}
 
[class~=saveButtonIcon]
{
    background-image: url(/static/images/icons/globalmenu/management/save.png);
}
 
[class~=optionsButtonIcon]
{
    background-image: url(/static/images/icons/globalmenu/management/options.png);  
}
 
[class~=closeOptionsButtonIcon]
{
    background-image: url(/static/images/icons/globalmenu/management/closeOptions.png); 
}
 
[class~=helpButtonIcon]
{
    background-image: url(/static/images/icons/globalmenu/management/help.png);
}
 
[class~=closeHelpButtonIcon]
{
    background-image: url(/static/images/icons/globalmenu/management/closeHelp.png);
}
 
[class~=downArrowButtonIcon]
{
    background-image: url(/static/images/icons/globalmenu/updown/down_arrow.png);
}
 
/* Node menu */
 
 
[class~=columnButtonIcon]
{
    background-image: url(/static/images/icons/nodemenu/column.png);
}
[class~=lineButtonIcon]
{
    background-image: url(/static/images/icons/nodemenu/line.png);
}
 
[class~=drawButtonIcon]
{
    background-image: url(/static/images/icons/nodemenu/draw.png);
}
 
[class~=disabledrawButtonIcon]
{
    background-image: url(/static/images/icons/nodemenu/disabledraw.png);
}
 
[class~=transparentButtonIcon]
{
    background-image: url(/static/images/icons/nodemenu/transparent.png);
}
 
[class~=closeTransparentButtonIcon]
{
    background-image: url(/static/images/icons/nodemenu/closeTransparent.png);
}
 
[class~=writeButtonIcon]
{
    background-image: url(/static/images/icons/nodemenu/write.png);
}
 
[class~=closeWriteButtonIcon]
{
    background-image: url(/static/images/icons/nodemenu/closeWrite.png);
}
 
[class~=zoomNodeButtonIcon]
{
    background-image: url(/static/images/tiles/zoomNode.png);
}
 
/* Tag menu */
[class~=managementTagMenuButtonIcon]
{
    background-image: url(/static/images/icons/tagmenu/management/addTag.png);
}
 
[class~=closeManagementTagMenuButtonIcon]
{
    background-image: url(/static/images/icons/tagmenu/management/closeAddTag.png);
}
 
[class~=addTagButtonIcon]
{
    background-image: url(/static/images/icons/tagmenu/management/addTag.png);
}
 
[class~=closeAddTagButtonIcon]
{
    background-image: url(/static/images/icons/tagmenu/management/closeAddTag.png);
}
 
[class~=selectTagButtonIcon]
{
    background-image: url(/static/images/icons/tagmenu/selection/selectTags.png);
}
 
[class~=closeSelectTagButtonIcon]
{
    background-image: url(/static/images/icons/tagmenu/selection/closeSelectTags.png);
}
 
[class~=selectTagMenuButtonIcon]
{
    background-image: url(/static/images/icons/tagmenu/selection/selectTags.png);
}
 
[class~=closeSelectTagMenuButtonIcon]
{
    background-image: url(/static/images/icons/tagmenu/selection/closeSelectTags.png);
}
 
[class~=selectionToTagButtonIcon]
{
    background-image: url(/static/images/icons/tagmenu/selection/selectionToTag.png);
}
 
[class~=closeSelectionToTagButtonIcon]
{
    background-image: url(/static/images/icons/tagmenu/selection/closeSelectionToTag.png);
}
 
[class~=selectMultipleTagsButtonIcon]
{
    background-image: url(/static/images/icons/tagmenu/selection/MultipleTags.png);
}
 
[class~=closeSelectMultipleTagsButtonIcon]
{
    background-image: url(/static/images/icons/tagmenu/selection/closeMultipleTags.png);
}
 
[class~=alignTagButtonIcon]
{
    background-image: url(/static/images/icons/tagmenu/alignTags.png);
}
 
[class~=closeAlignTagButtonIcon]
{
    background-image: url(/static/images/icons/tagmenu/closeAlignTags.png);
}
 
[class~=alignOrderTagsMenuButtonIcon]
{
    background-image: url(/static/images/icons/tagmenu/alignOrderTags.png);
}
 
[class~=closeAlignOrderTagsMenuButtonIcon]
{
    background-image: url(/static/images/icons/tagmenu/closeAlignOrderTags.png);
}
 
[class~=increaseOrderTagsButtonIcon]
{
    background-image: url(/static/images/icons/tagmenu/order/increaseOrderTags.png);
}
 
[class~=closeIncreaseOrderTagsButtonIcon]
{
    background-image: url(/static/images/icons/tagmenu/order/closeIncreaseOrderTags.png);
}
 
[class~=decreaseOrderTagsButtonIcon]
{
    background-image: url(/static/images/icons/tagmenu/order/decreaseOrderTags.png);
}
 
[class~=closeDecreaseOrderTagsButtonIcon]
{
    background-image: url(/static/images/icons/tagmenu/order/closeDecreaseOrderTags.png);
}
 
[class~=hideTagsMenuButtonIcon]
{
    background-image: url(/static/images/icons/tagmenu/HideTag.png);
}
[class~=closeHideTagsMenuButtonIcon]
{
    background-image: url(/static/images/icons/tagmenu/closeHideTag.png);
}
 
[class~=hideTagsButtonIcon]
{
    background-image: url(/static/images/icons/tagmenu/HideTag.png);
}
 
[class~=closeHideTagsButtonIcon]
{
    background-image: url(/static/images/icons/tagmenu/closeHideTag.png);
}
 
[class~=showTagsButtonIcon]
{
    background-image: url(/static/images/icons/tagmenu/hide/showTag.png);
}
 
[class~=closeShowTagsButtonIcon]
{
    background-image: url(/static/images/icons/tagmenu/hide/closeShowTag.png);
}
 
[class~=KillTagButtonIcon]
{
    background-image: url(/static/images/icons/tagmenu/KillTag.png);
}
 
[class~=closeKillTagButtonIcon]
{
    background-image: url(/static/images/icons/tagmenu/closeKillTag.png);
}
 
[class~=removeTagButtonIcon]
{
    background-image: url(/static/images/icons/tagmenu/management/removeTag.png);
}
 
[class~=closeRemoveTagButtonIcon]
{
    background-image: url(/static/images/icons/tagmenu/management/closeRemoveTag.png);
}
 
/* Draw menu */
[class~=paletteButtonIcon]
{
    background-image: url(/static/images/icons/drawmenu/palette.png);
}
[class~=closePaletteButtonIcon]
{
    background-image: url(/static/images/icons/drawmenu/closePalette.png);
}
[class~=lineWidthButtonIcon]
{
    background-image: url(/static/images/icons/drawmenu/lineWidth.png);
}
[class~=closeLineWidthButtonIcon]
{
    background-image: url(/static/images/icons/drawmenu/closeLineWidth.png);
}
[class~=DrawOnNodeButtonIcon]
{
    background-image: url(/static/images/icons/drawmenu/drawonNode.png);
}
 
[class~=BlinkIcon]
{
     animation: Blink 2s infinite;
}
@keyframes Blink{
     0%{opacity: 1;}
     50%{opacity: 0;}
     100%{opacity: 1;}
}
 
[class~=BlinkBorder]
{
    outline: 15pt solid;
    animation: Blink2 2s infinite;
}
@keyframes Blink2{
    50% {
    outline-color: white;
    }
}
 
iframe
{
    -ms-zoom: 1;
        -moz-transform: scale(1);
        -moz-transform-origin: 0 0;
        -o-transform: scale(1);
        -o-transform-origin: 0 0;
        -webkit-transform: scale(1);
        -webkit-transform-origin: 0 0;
    background-color: dimgrey;
}
 
.info
{
    position : absolute;
    height : auto;
    width : auto;
    top: -5%;
    right:0px;
    display: none;
    z-index:160;
    background-color : black;
    text-align: center;
}
 
.handle
{
    position: absolute;
    bottom: 0;
    left:-110px;
    display: block;
    width:100px;
    height:100px;
    z-index:450;
    padding:30px;
    background-repeat: no-repeat;
    background-position: center center;
}
 
.drag-handle-off
{
    background-image: url(/static/images/tiles/drag-handle-off.png);
}
 
.drag-handle-on
{
    background-image: url(/static/images/tiles/drag-handle-on.png);
}
 
.drag-handle-dragging
{
    background-image: url(/static/images/tiles/drag-handle-dragging.png);
}
 
.menu-handle-off
{
    background-image: url(/static/images/tiles/drag-handle-off.png);
}
 
.menu-handle-on
{
    background-image: url(/static/images/tiles/drag-handle-on.png);
}
 
.menu-handle-dragging
{
    background-image: url(/static/images/tiles/drag-handle-dragging.png);
}
 
.drop-down-menu
{
    background-image: url(/static/images/icons/globalmenu/drop-down-arrow.png);
}
 
.drop-up-menu
{
    background-image: url(/static/images/icons/globalmenu/drop-up-arrow.png);
}
 
.drop-right-menu
{
    background-image: url(/static/images/icons/globalmenu/drop-right-arrow.png);
}
 
.drop-left-menu
{
    background-image: url(/static/images/icons/globalmenu/drop-left-arrow.png);
}
 
.rotate
{
    position: absolute;
    bottom: -50;
    display: block;
    width:100px;
    height:100px;
    z-index:450;
    padding:80px;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url(/static/images/tiles/rotate.png);
}
 
#blackboard 
{
    /* background-image: url(bb.jpeg);
    border-radius : 10px 5px 10px 5px;
    border : 50px;
    border : green; */
}
body 
{
    /*background-color : grey;*/
}
#info
{
    background-color : grey;
}
#size
{
    position : fixed;
    width: 20%; /* Largeur */
    height : 100px;
    margin : auto;
    
}
header
{
 
  
    width: 100%; /* Largeur */
    height : 250px;
    margin : auto;
    text-align:center;  
    line-height:100px;
    
}
 
.node
{
    margin-left:50px;
    height: 50px;
    width: 50px;
    background-color : DimGray;
    font-size: 50px;
    /* margin : 160px; */
    border-radius : 10px 5px 10px 5px;
    color : rgb(31,32,43);  
    -moz-user-select : -moz-none;
    -webkit-user-select : -moz-none;
    display: block;
    margin: auto;
    z-index:0;
}
 
.node.ui-draggable
{
    z-index:999;
}
 
.node-ui-draggable
{
    margin-left:50px;
    height: 50px;
    width: 50px;
    background-color : white;
    font-size: 50px;
    /* margin : 160px; */
    border-radius : 10px 5px 10px 5px;
    color : rgb(31,32,43);  
    -moz-user-select : -moz-none;
    -webkit-user-select : -moz-none;
    display: block;
    margin: auto;
    z-index:999;
}
 
.node-ui-draggable-with-border
{
    background-image :url(/static/images/blank.png);
    outline: 10px solid white;
    z-index:999;
}
 
.transparentNode
{
    z-index : 105;
}
 
.progress-status {
    position: fixed;
    left: 25%;
    width: 20%;
    height: 150px;
    background-color: #ddd;
}
 
.progressBar {
    height: 150px;
    background-color: #4CAF50;
    text-align: center;
    line-height: 32px;
    color: black;
}
 
/*add dropdown for options*/
.dropbtn {
    color : red;
    display : inline-block;
}
 
.drop-content {
    color : black;
    display : block;
}
 
section
{
    height : 3000px;
    /*background-color : grey;*/
    margin : 150px;
    padding : 10px;
}   
 
#primaryparent
{
    margin : 0px 0px 0px 270px; 
}
 
img
{
    
}
 
 
.border{
 
    /* margin-left:50px;
    height: 50px;
    width: 50px;
    background-color : yellow;
    font-size: 50px;
    margin : 160px;
     */
    border-radius : 10px 5px 10px 5px;
    background-color : green;
}
.stickers_zone{
    display : flex;
    flex-wrap : wrap;
    flex-direction : column;
    visibility : hidden;    
}
 
.sticker{
    position : absolute;
    width : 50px;
    height : 50px;
    z-index : 110;
}
 
 
.qrcode{
    z-index : 112;
}
 
.temporaire{
     display:none;
}
 
.onoff {
        opacity : 1;
    background-color : green;
    width : 20px;
    left : -20px;
    top : 0px;
    z-index: 103;
    position : absolute;
}
 
.hitbox{
    opacity : 1;
    background-color : saddlebrown;
    width : 60px;
    left : -60px;
    top : 20px;
    position : absolute;
}
 
.tag{
    outline : 10px red none;
    min-width : 300px;
    height : 110px; /* Don’t change it to preserve outline size and position */
    font-size : 75px;
 
}
 
/*OPTIONS PAGE*/
#options
{
    /*text-align: left;*/
}
#options-zone
{
    display: flex;
}
 
 
 
form, select
{
    font-size: 100px;
    height:100;
}
 
[type="number"]
{
    position : relative;
    width : 20%;
    font-size:100px;
    height : 120px;
    margin: 30px;
}
 
input[type="range"], #opacitySlider, #tile-opacity-slider, #zoomSlider, output {
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 20px;
    height: 10px;
    background-image: -webkit-gradient(
        linear,
        left top,
        right top,
        color-stop(0.2, rgb(255, 0, 0)),
        color-stop(0.2, rgb(0, 255, 0))
    );
    position : relative;
    width : 100%;
}
 
input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: rgb(255, 0, 0);
    border: 5px solid #CECECE;
    height: 40px;
    width: 40px;
}
 
.tile-opacity-menu-zone {
    background-color: rgba(0,0,0,0.8);
}
 
input[type="range"]::-moz-range-progress {
    background-color : green;
    height: 15px;
}
input[type="range"]::-moz-range-thumb {
    background-color : lime;
    height: 20px;
}
 
input[type="range"]::-webkit-slider-thumb:before {
    -webkit-appearance: none ;
    background-color: rgba(0,255,0,1);
    border: 1px solid #CECECE;
    height: 15px;
    width: 15px;
}
input[type="range"]::-webkit-slider-thumb:after {
    -webkit-appearance: none ;
    background-color: rgba(255,0, 0,1);
    border: 3px solid #CECECE;
    height: 15px;
    width: 15px;
}
 
[type="checkbox"], [type="radio"] {
    background-color : lime;
    width: 50px;
    height: 50px;
}
 
output
{
    position : relative;
    width : 100%;
}
 
.option-group
{
    padding : 50px;
    position : relative;
    width : 30%;
}
 
.label
{
    font-size: 120px;
    color : darkgray;
}
 
#buttonApply
{
    font-size : 100px;
    height : 200px;
    width : 200px;
    text-align : center;
    position : absolute;
    top : 80%;
    left: 20%;
    background-image: url(/static/images/icons/globalmenu/management/checkOptions.png);
}
 
#buttonCancel
{
    font-size : 100px;
    height : 200px;
    width : 200px;
    text-align : center;
    position : absolute;
    top : 80%;
    left: 30%;
    background-image: url(/static/images/icons/globalmenu/zoommenu/closeZoomButton.png);
}
 
#buttonSave
{
    font-size : 100px;
    height : 200px;
    width : 200px;
    text-align : center;
    position : absolute;
    top : 80%;
    left: 40%;
    background-image: url(/static/images/icons/globalmenu/management/save.png);
}
 
#buttonShare
{
    font-size : 100px;
    height : 200px;
    width : 200px;
    text-align : center;
    position : absolute;
    top : 80%;
    left: 50%;
    background-image: url(/static/images/icons/globalmenu/management/share.png);
}
 
ul.ui-autocomplete.ui-menu{
    font-size:70px;
    z-index:500;
}
 
.warning
{
    text-align : center;
    vertical-align :middle;
    color : red;
    background-image: url(/static/images/warning.png);
}
 
.tag-notif
{
    position: fixed;
    bottom:0;
    width:100%;
    background-color:green;
    height:100px;
    z-index:129;
    font-size:100px;
    text-align:center;
    vertical-align: middle;
}
 
.legend-warning
{
    width: 80%;
    height:100;
    font-size: 100px;
    border: 25px;
    background-color: red;
    margin: auto;
}
 
.option-draws
{
        position : fixed;
    padding : 50px;
}
 
ul.ui-autocomplete.ui-menu{font-size:70px}
 
.blink {
    -webkit-animation: blink 1s step-end infinite;
    animation: blink 1s step-end infinite;
}
@-webkit-keyframes blink { 50% { visibility: hidden; }}
@keyframes blink { 50% { visibility: hidden; }}
 
/*Tooltip and Pointer CSS*/
.ui-corner-all {
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}
.fg-tooltip {
    padding: .2em;
    width: intrinsic;           /* Safari/WebKit utilisent un nom non-standard */
    width: -moz-max-content;    /* Firefox/Gecko */
    width: -webkit-max-content; /* Chrome */
    position: absolute;
    background-color: darkgoldenrod;
    z-index: 280;
}
.fg-tooltip .fg-tooltip-pointer-up, .fg-tooltip .fg-tooltip-pointer-up-inner,
.fg-tooltip .fg-tooltip-pointer-down, .fg-tooltip .fg-tooltip-pointer-down-inner {
    position: absolute;
    width:0;
    height:0;
    border-bottom-width: 0;
    border-color: darkgoldenrod;
    background: none;
    z-index: 180;
}
.fg-tooltip .fg-tooltip-pointer-up {
    border-left: 21px solid transparent;
    border-right: 21px solid transparent;
    border-bottom-width: 42px;
    top: -40px;
    right: auto;
    left: 10%;
    margin-left: 0px;
    z-index: 180;
}
.fg-tooltip .fg-tooltip-pointer-up-inner {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid #fff;
    top: auto;
    bottom: -14px;
    left: -5px;
    z-index: 180;
}
.fg-tooltip .fg-tooltip-pointer-down {
    border-left: 21px solid transparent;
    border-right: 21px solid transparent;
    border-top-width: 42px;
    bottom: -40px;
    right: auto;
    left: 10%;
    margin-left: 0px;
    z-index: 180;
}
.fg-tooltip .fg-tooltip-pointer-down-inner {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid #fff;
    bottom: auto;
    top: -14px;
    left: -5px;
    z-index: 180;
}