/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/styles.scss?ngGlobalStyle ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*Breakpoints Start*/
/*Breakpoints Start*/
.qmPrimarySmall {
  border: 0.12rem solid #cccccc;
  padding: 15px 30px;
  border-radius: 100px;
  font-size: 1em;
  color: #2195F3;
  font-weight: 600;
  transition: 0.6s all ease-in-out;
  cursor: pointer;
  margin-top: 15px;
}
@media (min-device-width: 993px) and (max-device-width: 1440px) {
  .qmPrimarySmall {
    padding: 12px 37px;
  }
}

.qmPrimarySmall:hover {
  background-color: #2195F3;
  color: #ffffff;
}

.qmSecondaryLarge {
  border-radius: 100px;
  background-color: #2196F3;
  transition: 0.6s all ease-in-out;
  padding: 0.7em 2.75em;
  font-weight: 500;
  color: #ffffff;
  font-size: 1em;
  cursor: pointer;
  border: 1px solid #2196F3;
}
@media (min-device-width: 993px) {
  .qmSecondaryLarge {
    padding: 0.9em 4.75em;
  }
}
@media (min-device-width: 993px) and (max-device-width: 1440px) {
  .qmSecondaryLarge {
    padding: 0.6em 3.5em;
  }
}
.qmSecondaryLarge:hover {
  background-color: #ffffff;
  color: #2196F3;
}

.btnTopicPop {
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 100%;
  width: 30px;
  height: 25px;
  text-align: center;
  cursor: pointer;
}

.qmSecondarySmall {
  color: #707070;
  font-size: 0.8em;
  border: 1px solid #9C9C9C;
  border-radius: 100px;
  padding: 3px 15px;
  cursor: pointer;
  transition: 0.6s all ease-in-out;
}
@media (min-device-width: 993px) {
  .qmSecondarySmall {
    padding: 8px 20px;
  }
}

.qmSecondarySmall:hover {
  background-color: #2195F3;
  color: #ffffff;
}

.roundLeft {
  border-radius: 100px 0 0 100px;
  border-right: 0 !important;
  margin-right: 0 !important;
  padding: 8px 20px !important;
}

.roundRight {
  border-radius: 0 100px 100px 0 !important;
  padding: 8px 20px !important;
}

/*Breakpoints Start*/
/*Breakpoints Start*/
html,
body {
  width: 100%;
  height: auto;
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
}

@font-face {
  font-family: "QuantaLipi";
  src: url("/assets/fonts/quantaLipi/quantaLipi_20200311.ttf");
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}
html {
  font-family: "QuantaLipi";
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
tr,
td,
div,
span,
select,
option,
button {
  font-family: "QuantaLipi";
  color: #333;
}

html,
body {
  min-height: 100%;
}

select > option {
  font-family: "QuantaLipi";
}

.wrapper {
  margin-bottom: 120px;
  background: url("/assets/images/sky_back.jpg") no-repeat top center;
}
@media (max-device-width: 640px) {
  .wrapper {
    margin-bottom: 60px;
  }
  .grid-container {
    padding: 0;
  }
}

.solid-button {
  border-radius: 25px;
  background: #03A9F4;
  width: 300px;
  font-size: 1.3em;
  text-align: center;
  color: #FFF;
  padding: 5px 10px;
  border: 1px solid #03A9F4;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
  margin: auto;
  margin-top: 50px;
  margin-bottom: 60px;
  display: block;
  transition: all 0.4s ease-in-out;
}
@media (max-device-width: 640px) {
  .solid-button {
    margin-bottom: 25px;
    font-size: 1.2em;
  }
}
.solid-button:hover {
  background-color: #F4F4F4;
  color: #03A9F4;
}

.primary-button {
  border-radius: 50px;
  width: 200px;
  text-align: center;
  font-size: 1.3em;
  color: #F4F4F4;
  background-color: #03A9F4;
  border: 1px solid #03A9F4;
  display: inline-block;
  padding: 4px 15px;
  margin-top: 20px;
  margin-right: 10px;
  margin-left: 20px;
  margin-bottom: 20px;
  transition: background-color 0.25s ease-out 0s, color 0.25s ease-out 0s;
  box-shadow: 0 0 2px rgba(119, 82, 82, 0.2);
}
@media (max-device-width: 640px) {
  .primary-button {
    width: 250px;
    font-size: 1em;
  }
}
.primary-button:hover {
  background-color: #F4F4F4;
  color: #03A9F4;
  transition-duration: 0.5s;
}

@media (min-device-width: 641px) {
  .language-button {
    border-radius: 25px;
    background: #FFF;
    font-size: 1.2em;
    color: #03A9F4;
    padding: 2px 10px;
    text-align: center;
    border: 1px solid #03A9F4;
    transition: all 0.4s ease-in-out;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
    vertical-align: middle;
    margin: auto;
    width: 200px;
    cursor: pointer;
    top: 97%;
    position: absolute;
    transform: translate(-50%, -50%);
    right: -10%;
  }
}
@media screen and (width: 1366px) {
  .language-button {
    right: -14%;
  }
}
@media (max-device-width: 640px) {
  .language-button {
    display: none;
  }
}

.back-button {
  position: fixed;
  top: 8px;
  left: 55px;
  z-index: 10;
  padding: 2px 20px;
  color: #FFF;
  font-size: 1em;
  margin-left: -72px;
  transition: all 0.4s ease-in-out;
}
@media (min-device-width: 641px) {
  .back-button {
    position: fixed;
    font-size: 1.2em;
    top: 100px;
    margin-left: -37px;
    background-color: rgba(3, 169, 244, 0.4509803922);
    z-index: 10;
    color: #FFF;
    padding: 5px 60px;
  }
  .back-button:hover {
    background-color: rgba(3, 169, 244, 0.5607843137);
    color: #FFF;
  }
}

.hlt1 {
  font-style: normal;
  background-color: #C8EEFF;
}

/* all button style here */
.qmButton-primary,
.qmButton-secondary {
  background: #03A9F4;
  border: 1px solid transparent;
  border-radius: 100px;
  color: #ffffff;
  cursor: pointer;
  display: inline-block;
  font-family: inherit;
  font-size: 1.3em;
  margin: 0;
  padding: 5px 90px;
  text-align: center;
  transition: background-color 0.25s ease-out 0s, color 0.25s ease-out 0s;
  vertical-align: middle;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}
@media (max-device-width: 640px) {
  .qmButton-primary,
  .qmButton-secondary {
    font-size: 1.1em;
  }
}

.qmButton-primary i {
  font-size: 1.2em;
}

.qmButton-secondary {
  background: #fff;
  border: 1px solid #03A9F4;
  color: #03A9F4;
  padding: 0.6em 2.5em;
}

.qmButton-primary:hover {
  background-color: #ffffff;
  color: #03A9F4;
  border: 1px solid #03A9F4;
}

.qmButton-secondary:hover {
  background-color: #03A9F4;
  color: #ffffff;
}

.button.primary {
  width: 25%;
  background-color: #03A9F4;
  font-weight: bold;
  min-width: 230px;
  color: white;
}

.button.primary.hollow {
  background-color: transparent;
  border: 1.5px solid #03A9F4;
  color: #03A9F4;
}

.button.secondary {
  width: 20%;
  min-width: 200px;
  background-color: #03A9F4;
}

.button.secondary.hollow {
  background-color: transparent;
  border-color: #03A9F4;
  color: #03A9F4;
}

.ck-content {
  height: 350px;
}

.button.primary {
  padding: 10px 0px;
  min-width: 200px;
}

.message-title {
  color: #dedede;
}

.description-div img {
  display: block;
  margin: auto;
}

@media (max-device-width: 640px) {
  .grid-container {
    padding: 0;
  }
}

.cursor {
  cursor: pointer;
}

/*# sourceMappingURL=styles.css.map*/