html { overflow-y:hidden;height:100%; }
body { overflow-y:auto;height:100%; margin:0; padding:0; font-family: Open Sans,Roboto,calibri,sans-serif;
       /* -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; */
}
body::-webkit-scrollbar { width: 8px; height: 8px; }
body::-webkit-scrollbar-track { border-radius: 8px; }
body::-webkit-scrollbar-thumb { border-radius: 5px; background: #eeeeee; box-shadow: inset 0 0 6px rgba(0,0,0,0.5); }

#bg { position:absolute; top:0; left:0; width:100%; height:100%; z-index:-1; }

a { color:#4E90D1; text-decoration:none; font-weight: bold; }
a:hover { color:#4EBFDD; text-decoration:none; font-weight: bold; }

.download {
    cursor:pointer;
    width: fit-content;    
}

.feedbacksContent{
    position:relative;
    min-width:300px;
    max-width:1000px;
    width:70%;
    margin: auto;
}

.demoContent{
    position:relative;
    min-width:300px;
    max-width:1200px;
    width:85%;
    margin: auto;
}

.mainTitle {
    position:relative;
    width:100%;
    font-family: cursive;
    font-style: initial;
    font-size: 48px;
    text-align: center;
}
.mainMenu {
    position:relative;
    width:100%;
    font-family: verdana;
    font-size: 14px;
}
.mainContent {
    position:relative;
    width:calc(100% - 30px);
    font-family: verdana;
    font-size: 12px;
    padding-top: 20px;
    padding-left: 20px;
}

.liquidMenuX {
    background-color: #f5f5f547;
}
.a {
    text-decoration:none;
    font-weight: none;
}
.ver {
    font-size: 50%;
}
.title1{
    color: #0a4e8a;
    padding-top: 4px;
    font-family: verdana;
    font-size: 24px;
    padding-left: 10px;
}
.desc1{
    color:rgb(86, 85, 85);
    padding-top: 6px;
    font-family: verdana;
    font-size: 14px;
    padding-left: 40px;
}
.desc2{
    color:rgba(86, 85, 85, 0.8);
    padding-top: 4px;
    font-family: verdana;
    font-size: 12px;
    padding-left: 50px;
}
.img1{
    margin-bottom: -20px !important;
    padding: 10px;
}
.img2{
    margin-bottom: -5px;
    margin-top: 6px;
    padding-left: 5px;
    padding-right: 15px;
    width:24px;
    height:24px;
}
.code{
    background-color: whitesmoke;
    border:1px solid lightgray;
    padding: 10px;
    overflow: auto;
    box-shadow: 5px 11px 13px rgba(0,0,0,0.2), 0 -1px 0px rgba(0,0,0,0.02)
}
.code::-webkit-scrollbar { width: 6px; height: 6px; }
.code::-webkit-scrollbar-track { border-radius: 6px; }
.code::-webkit-scrollbar-thumb { border-radius: 3px; background: #abbec5; box-shadow: inset 0 0 3px rgba(0,0,0,0.5); }

.hljs::-webkit-scrollbar { width: 6px; height: 6px; }
.hljs::-webkit-scrollbar-track { border-radius: 6px; }
.hljs::-webkit-scrollbar-thumb { border-radius: 3px; background: #abbec5; box-shadow: inset 0 0 3px rgba(0,0,0,0.5); }


.spacer{
    margin-top:30px;
    margin-bottom:20px;
    margin-left:15px;
    border-top:1px solid lightgray;
    width: calc(100% - 50px);
}

.leftMessage {
    font-size:11pt; 
    table-layout:fixed; 
    border-radius: 6px;
    float: left;
    margin-left: 30px;
    background-color: rgba(245, 245, 220, 0.7);
    box-shadow: 5px 11px 13px rgba(0,0,0,0.2), 0 -1px 0px rgba(0,0,0,0.02)
}

.rightMessage {
    font-size:11pt; 
    table-layout:fixed; 
    border-radius: 6px; 
    float: right;
    margin-right: 30px;
    background-color: rgba(100, 148, 237, 0.13);
    box-shadow: 5px 11px 13px rgba(0,0,0,0.2), 0 -1px 0px rgba(0,0,0,0.02)
}

svg {
  height: 50%;
  width: 50%;
}
path {
  fill: white;
  stroke: black;
  stroke-width: 2;
  stroke-linejoin: round;
}
path:hover {
  fill: aliceblue;
  stroke: lightskyblue;
}





/* ============================================================================================================================
== BUBBLE WITH A RIGHT-ANGLED TRIANGLE
** ============================================================================================================================ */

/* THE SPEECH BUBBLE
------------------------------------------------------------------------------------------------------------------------------- */

.triangle-right {
  position:relative;
  padding:15px;
  margin:0.1em 0 0.1em;
  color:#fff;
  background:rgba(50, 148, 0, 0.25); /* default background for browsers without gradient support */
  /* css3 */
  background:-webkit-gradient(linear, 0 0, 0 100%, from(#2e88c4), to(rgba(50, 148, 0, 0.25)));
  background:-moz-linear-gradient(#2e88c4, rgba(50, 148, 0, 0.25));
  background:-o-linear-gradient(#2e88c4, rgba(50, 148, 0, 0.25));
  background:linear-gradient(#2e88c4, rgba(50, 148, 0, 0.25));
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
    box-shadow: 5px 11px 13px rgba(0,0,0,0.2), 0 -1px 0px rgba(0,0,0,0.02)
}

/* Variant : for top positioned triangle
------------------------------------------ */

.triangle-right.top {
  background:-webkit-gradient(linear, 0 0, 0 100%, from(rgba(50, 148, 0, 0.25)), to(#2e88c4));
  background:-moz-linear-gradient(rgba(50, 148, 0, 0.25), #2e88c4);
  background:-o-linear-gradient(rgba(50, 148, 0, 0.25), #2e88c4);
  background:linear-gradient(rgba(50, 148, 0, 0.25), #2e88c4);
  width: max-content;
  margin:auto;
  margin-top: 10px;
}

/* Variant : for left positioned triangle
------------------------------------------ */

.triangle-right.left {
    margin-left:40px;
    background:rgba(255, 244, 0, 0.2);
    color:rgba(0, 0, 0, 0.90);
    width: max-content;
}

/* Variant : for right positioned triangle
------------------------------------------ */

.triangle-right.right {
    margin-right:40px;
    background:rgba(50, 148, 0, 0.25);
    width: max-content;
    float: right;
    text-align:right;
    color:#031b00;
}

/* THE TRIANGLE
------------------------------------------------------------------------------------------------------------------------------- */

.triangle-right:after {
  content:"";
  position:absolute;
  bottom:-20px; /* value = - border-top-width - border-bottom-width */
  left:50px; /* controls horizontal position */
  border-width:20px 0 0 20px; /* vary these values to change the angle of the vertex */
  border-style:solid;
  border-color:rgba(50, 148, 0, 0.25) transparent;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}

/* Variant : top
------------------------------------------ */

.triangle-right.top:after {
  top:-20px; /* value = - border-top-width - border-bottom-width */
  right:50px; /* controls horizontal position */
  bottom:auto;
  left:auto;
  border-width:20px 20px 0 0; /* vary these values to change the angle of the vertex */
  border-color:transparent rgba(50, 148, 0, 0.25);
}

/* Variant : left
------------------------------------------ */

.triangle-right.left:after {
  top:16px;
  left:-40px; /* value = - border-left-width - border-right-width */
  bottom:auto;
  border-width:15px 40px 0 0; /* vary these values to change the angle of the vertex */
  border-color:transparent rgba(255, 244, 0, 0.2);
}

/* Variant : right
------------------------------------------ */

.triangle-right.right:after {
  top:16px;
  right:-40px; /* value = - border-left-width - border-right-width */
  bottom:auto;
  left:auto;
  border-width:15px 0 0 40px; /* vary these values to change the angle of the vertex */
  border-color:transparent rgba(50, 148, 0, 0.25);
}



.bkPanelContainer {
    z-index: -1;
    position: fixed;
    height: 100%;
    width: 100%;
    overflow: hidden;
    display: block;
    filter: opacity(0.4);
    transform: scale(-1, 1);
}

.bkPanel1 {
    z-index: 1;
    position: relative;
    width: 100%;
    height: 50%;
    background-color: rgba(222, 233, 236, 0.74);
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#dedede', Direction=135, Strength=5);
    -moz-box-shadow: 6px 6px 5px #dedede;
    -webkit-box-shadow: 6px 6px 5px #dedede;
    box-shadow: 6px 6px 5px #dedede;
    -moz-transform: scale(2) rotate(10deg) translate(1px, -50px) skew(9deg, -1deg);
    -webkit-transform: scale(2) rotate(10deg) translate(1px, -50px) skew(9deg, -1deg);
    -o-transform: scale(2) rotate(10deg) translate(1px, -50px) skew(9deg, -1deg);
    -ms-transform: scale(2) rotate(10deg) translate(1px, -50px) skew(9deg, -1deg);
    transform: scale(2) rotate(10deg) translate(1px, -50px) skew(9deg, -1deg);
}


.bkPanel2 {
    position: relative;
    border: 0px solid red;
    width: 100%;
    height: 50%;
    z-index: 2;
    background-color: rgba(33, 150, 243, 0.18);
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#dedede', Direction=135, Strength=5);
    box-shadow: -7px -6px 5px #6f6f6f52;
    -moz-box-shadow: 6px 6px 5px #6f6f6f52;
    -webkit-box-shadow: -9px -8px 5px #6f6f6f52;
    -moz-transform: scale(2) rotate(10deg) translate(1px, -50px) skew(9deg, -1deg);
    -webkit-transform: scale(2) rotate(10deg) translate(1px, -50px) skew(9deg, -1deg);
    -o-transform: scale(2) rotate(10deg) translate(1px, -50px) skew(9deg, -1deg);
    -ms-transform: scale(2) rotate(10deg) translate(1px, -50px) skew(9deg, -1deg);
    transform: scale(2) rotate(10deg) translate(1px, 40%) skew(9deg, -1deg);
}


.bkPanel3 {
    position: relative;
    border: 0px solid #FF9800;
    width: 100%;
    height: 50%;
    z-index: 3;
    background-color: #c5ccd2;
    -webkit-box-shadow: 6px 6px 5px #6f6f6f52;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#6f6f6f52', Direction=135, Strength=5);
    box-shadow: -5px -8px 5px #6f6f6f52;
    -moz-box-shadow: 6px 6px 5px #6f6f6f52;
    -moz-transform: scale(2) rotate(10deg) translate(1px, 50px) skew(10deg, -27deg);
    -webkit-transform: scale(2) rotate(10deg) translate(1px, 50px) skew(10deg, -27deg);
    -o-transform: scale(2) rotate(10deg) translate(1px, 50px) skew(10deg, -27deg);
    -ms-transform: scale(2) rotate(10deg) translate(1px, 50px) skew(10deg, -27deg);
    transform: scale(2) rotate(10deg) translate(1px, -16%) skew(4deg, -16deg);
}

.liquidButtonHOver { 
    box-shadow: 5px 6px 6px rgba(0,0,0,0.2), 0 -1px 0px rgba(0,0,0,0.02) 
}