/* BACKGROUND ANIMATION */

@keyframes animate {
    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }
    100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }
}

.background {
    position: fixed; /* relative, fixed */
    width: 100vw;
    height: 100vw; /* 1000px OR 100vh 100% viewpport height, 50 50% viewpport height*/
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    background: #c2ded1;
    overflow: hidden;
		display: block;
		z-index:-10;
}
.background li {
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    animation: animate 19s linear infinite;
}




.background li:nth-child(0) {
    left: 50%;
    width: 146px;
    height: 146px;
    bottom: -146px;
    animation-delay: 1s;
}
.background li:nth-child(1) {
    left: 3%;
    width: 207px;
    height: 207px;
    bottom: -207px;
    animation-delay: 1s;
}
.background li:nth-child(2) {
    left: 62%;
    width: 217px;
    height: 217px;
    bottom: -217px;
    animation-delay: 6s;
}
.background li:nth-child(3) {
    left: 33%;
    width: 141px;
    height: 141px;
    bottom: -141px;
    animation-delay: 11s;
}
.background li:nth-child(4) {
    left: 74%;
    width: 195px;
    height: 195px;
    bottom: -195px;
    animation-delay: 5s;
}
.background li:nth-child(5) {
    left: 23%;
    width: 212px;
    height: 212px;
    bottom: -212px;
    animation-delay: 16s;
}
.background li:nth-child(6) {
    left: 63%;
    width: 170px;
    height: 170px;
    bottom: -170px;
    animation-delay: 26s;
}
.background li:nth-child(7) {
    left: 2%;
    width: 181px;
    height: 181px;
    bottom: -181px;
    animation-delay: 2s;
}
.background li:nth-child(8) {
    left: 43%;
    width: 212px;
    height: 212px;
    bottom: -212px;
    animation-delay: 15s;
}
.background li:nth-child(9) {
    left: 27%;
    width: 215px;
    height: 215px;
    bottom: -215px;
    animation-delay: 39s;
}
.background li:nth-child(10) {
    left: 21%;
    width: 141px;
    height: 141px;
    bottom: -141px;
    animation-delay: 7s;
}
.background li:nth-child(11) {
    left: 77%;
    width: 117px;
    height: 117px;
    bottom: -117px;
    animation-delay: 26s;
}
.background li:nth-child(12) {
    left: 24%;
    width: 160px;
    height: 160px;
    bottom: -160px;
    animation-delay: 35s;
}
.background li:nth-child(13) {
    left: 42%;
    width: 158px;
    height: 158px;
    bottom: -158px;
    animation-delay: 16s;
}
.background li:nth-child(14) {
    left: 45%;
    width: 150px;
    height: 150px;
    bottom: -150px;
    animation-delay: 9s;
}
.background li:nth-child(15) {
    left: 1%;
    width: 135px;
    height: 135px;
    bottom: -135px;
    animation-delay: 8s;
}
.background li:nth-child(16) {
    left: 32%;
    width: 185px;
    height: 185px;
    bottom: -185px;
    animation-delay: 70s;
}
.background li:nth-child(17) {
    left: 50%;
    width: 166px;
    height: 166px;
    bottom: -166px;
    animation-delay: 17s;
}
.background li:nth-child(18) {
    left: 60%;
    width: 156px;
    height: 156px;
    bottom: -156px;
    animation-delay: 22s;
}
.background li:nth-child(19) {
    left: 59%;
    width: 217px;
    height: 217px;
    bottom: -217px;
    animation-delay: 82s;
}
.background li:nth-child(20) {
    left: 7%;
    width: 207px;
    height: 207px;
    bottom: -207px;
    animation-delay: 4s;
}
.background li:nth-child(21) {
    left: 39%;
    width: 146px;
    height: 146px;
    bottom: -146px;
    animation-delay: 67s;
}
.background li:nth-child(22) {
    left: 65%;
    width: 215px;
    height: 215px;
    bottom: -215px;
    animation-delay: 58s;
}
.background li:nth-child(23) {
    left: 3%;
    width: 183px;
    height: 183px;
    bottom: -183px;
    animation-delay: 85s;
}
.background li:nth-child(24) {
    left: 89%;
    width: 103px;
    height: 103px;
    bottom: -103px;
    animation-delay: 55s;
}
.background li:nth-child(25) {
    left: 66%;
    width: 105px;
    height: 105px;
    bottom: -105px;
    animation-delay: 22s;
}
.background li:nth-child(26) {
    left: 72%;
    width: 150px;
    height: 150px;
    bottom: -150px;
    animation-delay: 18s;
}
.background li:nth-child(27) {
    left: 72%;
    width: 199px;
    height: 199px;
    bottom: -199px;
    animation-delay: 64s;
}
.background li:nth-child(28) {
    left: 80%;
    width: 167px;
    height: 167px;
    bottom: -167px;
    animation-delay: 95s;
}
.background li:nth-child(29) {
    left: 18%;
    width: 211px;
    height: 211px;
    bottom: -211px;
    animation-delay: 112s;
}
.background li:nth-child(30) {
    left: 74%;
    width: 175px;
    height: 175px;
    bottom: -175px;
    animation-delay: 109s;
}



/* ---------------------- END BACKGROUND ANIMATION ------------------------ */






.navbar {
	background-color: #B9AA8B;
  /* background-color: #CDC2AE;*/
}





.welcome{
}


/* Mermaid */
/* .clientX > rect {
    fill: red !important;
    stroke: pink !important;
    color: white !important;
} */



/* DRAGGABLE DRAG AND DROP CSS */
/* .box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
} */

/* .drag-over {
    border: dashed 3px red;
} */

/* .TopTitleBar{
  background-color: red ;
  background-color: #8AB1CA
  height: 50px;
  margin-top: 60px;
  margin-bottom: 20px;
}
*/

.form-control {
  margin-left: 30px;
  margin-right: 30px;
  /* margin:25px 25px; // for left and right margin
  margin:0px 0px; // form top and bottom margin */
 }

.live-search-list {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0em;
/* background-color: #2c3e50; */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font-family: 'Lato', sans-serif;
color: #fff;
}

.live-search-list li {
color: fff;
list-style: none;
padding: 0px;
margin: 5px 0px;
}

.title_topic_frame{
  width: 100%;
  /* line-height: 80px; */
  /* margin-left: -50px;
  margin-right: +50px; */
  height: 60px;
  padding-top: 10px;
  background-color: white ;
}

ul{
  margin-right:0px;
  margin-left:0px;
  padding-right: 0px;
  padding-left: 0px;
}


.title_topic{
  /* margin-left: -30px !important; */
  width: 100% ;
  background-color: #6A7E98 ;
  /* background-color: #3B5671 ; */
  /* background-color: #8AB1CA ; */
  height: 45px;
  line-height: 45px;
  text-align: center;
  font-size: 22px;
  font-weight: lighter;
  /* border-radius: 10px; */

  /* top: 60px; */
  /* margin-top: 60px; */
  margin-bottom: 20px;
}

.title_instruction{
  margin-top: 40px;
  color: #003366;
  font-weight: bold;
	margin-left: 20px;
	margin-right: 20px;
}

.subtitle_instruction{
  margin-top: 40px;
  color: grey;
  font-weight: bold;
}

.topic_instruction{
  margin-top: 35px;
  color: grey;
  font-weight: bold;
  margin-left: 20px;
  margin-right: 20px;
}

.code_intro{
  margin-top: 40px;
  color: #003366;
	font-size: 14px;
  /* font-weight: bold; */
	margin-left: 20px;
	margin-right: 20px;
}

/* .code_intro{
	border-radius: 7px;
  margin-top: 20px;
  padding: 15px;
	color: black;
	font-size: 13px;
	margin-left: 20px;
	margin-right: 20px;
} */

.code_frame{
  /* border: 1px solid #5F85A6; */
  border-radius: 7px;
  margin-top: 20px;
  padding: 15px;
  color: #303235;
  background-color: #E5E4E2; /* white: FFFFFF light grey: F7F7F7 medium grey: E5E4E2,*/
  /* FBF9F0 */
  /* E8E9E4 */
  font-size: 13px;
	margin-left: 20px;
	margin-right: 20px;
}

.code_frame_with_subtitles{
  border-radius: 7px;
  margin-top: 20px;
  padding: 15px;
  color: #303235;
  background-color: #E5E4E2; /* white: FFFFFF light grey: F7F7F7 medium grey: E5E4E2,*/
  font-size: 13px;
	margin-left: 20px;
	margin-right: 20px;

  padding-bottom: 0px;
  padding-top: 20px;
  margin-bottom:2px"
}


.image_frame{
  /* text-align: center; */
  /* border: 1px solid #D7D7D7; */
    background-color: #F7F7F7; /* white: FFFFF light grey: F7F7F7 medium grey: E5E4E2,*/
    /* F2F5F8 */
  border-radius: 7px;
  margin-top: 20px;
  padding: 15px;
  color: #303235;
  font-size: 13px;
	margin-left: 20px;
	margin-right: 20px;
}

.span_subtitle_within_code{
  color:#6A7E98;
  font-weight:bold;
  font-size: 14px;
  margin-left:25px
}

code{
  display: block;
  font-family: Arial, Helvetica, sans-serif;
}

code.prettyprint{
  /* background-color: #FFFFFF !important; */
}

.prettyprint{
  /* background-color: #FFFFFF !important;  !!!!!! */
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
}

.welcome_category{
	color: #354259;
	height: 40px;
	font-size: 18px;
}

.welcome_topic{
	background-color: #6A7E98; /* green C2DED1 blue 354259 lightblue 6A7E98*/
	color: white;
	height: 35px;
	font-size: 15px;
	text-align: left;
	padding-left: 10px;
	line-height: 35px; // vertical center for the text
}

.welcome_content{
	/* text-align: center; */
	background-color: WhiteSmoke;
	padding-top: 10px;
	padding-left: 10px;
	color: grey;
	/* height: 100px; */
	font-size: 14px;
}





.buttonX{

                display: inline-block;
                outline: 0;
                cursor: pointer;
                border: none;
                padding: 0 56px;
                height: 45px;
                line-height: 45px;
                border-radius: 7px;
                font-weight: 400;
                font-size: 16px;
                background: #fff;
                color: #696969;
                box-shadow: 0 4px 14px 0 rgb(0 0 0 / 10%);
                transition: background 0.2s ease,color 0.2s ease,box-shadow 0.2s ease;
                :hover{
                    background: rgba(255,255,255,0.9);
                    box-shadow: 0 6px 20px rgb(93 93 93 / 23%);
                }

}



/* NAVIGATION BAR */