/* Back to top button style */
.back-to-top {
    cursor: pointer;
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
}

.app-main-syle {
    margin-right: 2px;
    margin-left: 2px;
}

.box-bottom-shadow {
	-webkit-box-shadow: 0 2px 6px -6px grey;
	   -moz-box-shadow: 0 2px 6px -6px grey;
	        box-shadow: 0 2px 6px -6px grey;
}

article {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-right: 0px;
  margin-left: 0px;
}

.app-page-view {
  margin: 10px;
  padding: 20px;
  /* background-color: #FFFFE0; */
  background-color: #FFFFFF;
  /* font-family: "Lucida Console", "Courier New", monospace; */
  /* font-family: "Monaco", monospace; */
  font-family: "Garamond", Serif;
}

.app-font-style {
  font-size: 100%;
}

.artical-heading-view {
    margin-top: 30px;
    margin-bottom: 30px;
}

/* p::after {
  content: '';
  width: 100%;
  height: 1px;
  background: #BEBEBE;
  position: absolute;
  bottom: 0;
  left: 0;
}

p {
  position: relative;
} */

/* p {
  border-bottom: 1px solid #BEBEBE;
  padding-bottom: 5px;
} */

/* a {
    text-decoration: none !important;
} */

.text-thin {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 1px;
  text-decoration-color: #F0F0F0;
}

.text-light-small {
  color: #B8B8B8;
  font-size: 12px;
}
/* ----- */

/* ----- */

.image-size-dimens-main-logo {
  width: 50px;
  height: 50px;
  margin: 5px;
}

.image-size-dimens {
  width: 150px;
  height: 150px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.image-size-dimens-1 {
  width: 200px;
  height: 150px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.image-size-dimens-2 {
  width: 320px;
  height: 150px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.heading-image-size-dimens {
  width: 300px;
  height: 300px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.heading-image-size-dimens-1 {
  width: 450px;
  height: 320px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.heading-image-size-dimens-2 {
  width: 600px;
  height: 350px;
  margin-top: 10px;
  margin-bottom: 10px;
}

/* ----- */
/* .a-menu-view {
  display: inline-block;
  width: 100%;
  color: black;
} */

.a-menu-view {
  display: inline-block;
  color: black;
}

/* Showing hover on a tag setting background color light grey when move cursor on a tag*/
a:hover {
  background-color: rgba(12, 5, 62, 0.15);
  color: black;
}

/* ---- */
/* code {
  display: block;
  white-space: pre-wrap;
  padding-top: 0px;
  padding-bottom: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
} */

.pl-codespan {
  border-radius: 4px;
  padding-left: 5px;
  padding-right: 5px;
  /* background-color: rgba(222,222,222,0.3); */
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  font-family: Consolas, Menlo, "courier new", monospace;
  /* font-family: "Courier", monospace */
}

.pl-codespan-link {
  border-radius: 4px;
  padding-left: 5px;
  padding-right: 5px;
  /* background-color: rgba(222,222,222,0.3); */
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  font-family: Consolas, Menlo, "courier new", monospace;
  /* font-family: "Courier", monospace */
}

.text-small {
  color: brown;
  font-size: 5px;
}

.app-note {
  background:#FFFFA7;
  color:#222;
}

pre {

}

.cards {
    /* transition: all 0.2s ease; */
    /* cursor: pointer */
}

.cards:hover {
  box-shadow: 0px 0px 0px 0px #e9ecef;
  transform: scale(1.0);
  background-color: #F2F4F4;
}

/* -------- */
.dot-style {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
}

dot-style, .dot-frequently {
  background-color: #ff0000;
}

dot-style, .dot-moderately {
  background-color: #ffff00;
}

dot-style, .dot-rarely {
  background-color: #00ffff;
}

dot-style, .dot-never {
  background-color: #bbb;
}

/* ----------- */
.app-youtube {
  color: #FF0000;
}

.app-read-file {
  color: #8000FF;
}

/* course section style */
.small-vertical-bar {
  width: 1px;
  height: 35px;
  margin-top: 5px;
  margin-left: 10px;
  margin-right: 10px;
  background-color: grey;
}

.content-section {
  color:white;
}

.app-check-sign {
  color: #545AA7;
}

.content-custom-div {
  background-color:white;
  padding: 5px;
}

/* ----- */
.rating {
  color: #ffc107;
}

.card .card-img-top {
  height: 62px;
  width: 62px;
}

.tools-image {
  height: 110px;
  width: 110px;
}

/* Responsive video size */
.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}