:root {

  --border: 1px solid #ddd;

  --cc-navscore-bg: #DAEFB3;
  --cc-navscore: #1C2826;

  --cc-navbar: #DAEFB3;

  --cc-msger-bg: #1C2826;

        --cc-voice-bg: #07A0C3;
        --cc-voice: black;
        --left-msg-bg: #BFEDEF;
        --right-msg-bg: #98E2C6;
        --cc-voiceA-bg: #21D19F;
        --cc-voiceA: black;

--cc-level-bg: #FED766;
--cc-level: black;

  --cc-header-bg: #1C2826;
  --cc-navbar-bg: #1C2826;

  --cc-buttonask-bg: #FBC252;
  --cc-buttonfast-bg: #82C3EC;

  --cc-header: #ffffff;

  --cc-navbar-brand: #FF4747;
  --cc-navbar-hover: #000000;
  --cc-form: #ffffff;
  --cc-form-border: #dddddd;


  --qq-quizgroup-bg: #363636;
  --qq-quizgroup: #1C2826;
  --tf-truefalse-bg: #363636;
  --tf-truefalse: #1C2826;
  --qq-button_a-bg: #0F6099;
  --qq-button_a: #DAF7A6;
  --qq-button_b-bg: #583881;
  --qq-button_b: #DAF7A6;
  --qq-button_c-bg: #3a5a40;
  --qq-button_c: #DAF7A6;
  --tf-button_t-bg: #583881;
  --tf-button_t: #DAF7A6;
  --tf-button_f-bg: #3a5a40;
  --tf-button_f: #DAF7A6;


--cc-msger-send-bg: #2CAD2C; /* yeşil */
--cc-msger-play-bg: yellow; /* sarı */



--cc-headbubble-bg: #82C3EC;
--cc-headbubble: #581845;

--cc-scenariobA-bg: #EC7063;
--cc-scenariobB-bg: #DAF7A6;
--cc-scenariobC-bg: #85C1E9;

  box-sizing: border-box;

}

*,
*:before,
*:after {
  box-sizing: inherit;
}



body {

  justify-content: center;
  align-items: center;
    padding-top: 0%;
  background-color: var(--cc-header-bg);
  background-size: cover;
  margin-top: 1.8rem;
  height: 100%;
  font-family: 'Mali', cursive;

  top: 0px !important;
  overflow-y: hidden;
}

.bigger {
  font-size: larger;
}

.navbar {
  padding-top: 0rem;   /* do not delete 0rem, they are fixing size */
  padding-bottom: 0rem;
  font-size: x-large;
  line-height: 1em;
  background-color: var(--cc-navbar-bg) !important;

}

.navbar-nav>li>a {

   color: var(--cc-navbar) !important;
}

.navbar-brand {
   padding-top: 0;
   padding-bottom: 0;
   font-size: xx-large;
   font-weight: 700;
   color: var(--cc-navbar-brand) !important;

}

.nav-link:hover {
    background-color: var(--cc-navbar-hover) !important;

}


.mflex-container {

  height: 87vh;
  flex-flow: column wrap;
  margin-top: 44px;
  width: 100%;
}

.aflex-container {
    width: 100%;
    height: calc(24px + 10vh);
    justify-content: center;
    min-height: 40px;
}

.flex-container {
  display: flex;
  height: 76vh;
  flex-flow: row wrap;
  z-index: 10;
  min-height: 20px;
}

.flex-w1 {
  height: 100%;
  width: 75%;

}
.flex-w2 {
  height: 100%;
  width: 25%;

}

.msger {
  display: flex;
  flex-flow: column wrap;
  justify-content: top;
  width: 100%;

  height: calc(100% - 10px);
  border: var(--border);
  border-radius: 5px;

  box-shadow: 0 15px 15px -5px rgba(0, 0, 0, 0.2);
}

.msger > div {
  padding: 1vh;
}

.sidePage {
  display: flex;
  flex-flow: column wrap;
  justify-content: top;
  width: 100%;

  height: calc(100% - 10px);
  border: var(--border);
  border-radius: 5px;

  box-shadow: 0 15px 15px -5px rgba(0, 0, 0, 0.2);
}

.sidePage > div {
  padding: 1vh;
}

.progress{
  height: 14%;
  background-color: var(--cc-navbar);
}

.msger-header {
  display: flex;
  justify-content: space-between;
  justify-items: center;
  align-content: center;
  align-items: center;

    flex-flow: row wrap;
  border-bottom: var(--border);

  background: var(--cc-header-bg);
  color: var(--cc-header);
  height: 86%;
  padding: 0px;



}

.msger-chat {
  flex: 1;
  overflow-y: auto;

  background-color: var(--cc-msger-bg);
  height: 86%;
}

.msger-chat::-webkit-scrollbar {

  width: 6px;
}
.msger-chat::-webkit-scrollbar-track {

  background: #ddd;
}
.msger-chat::-webkit-scrollbar-thumb {
  background: #bdbdbd;
}

.sideOptions {
  flex: 1;
  flex-direction: column;
  overflow-y: auto;
  background-color: var(--cc-msger-bg);
}

.sideOptionsitem {
margin-top: 4vh;
}
.sideTrufalse {
margin-top: 24vh;
}

.sideOptions::-webkit-scrollbar {

  width: 6px;
}
.sideOptions::-webkit-scrollbar-track {

  background: #ddd;
}
.sideOptions::-webkit-scrollbar-thumb {
  background: #bdbdbd;

}

.sideInfeed{
    background-color: var(--cc-msger-bg);
    color: var(--cc-msger-bg);
}


.msger-inputarea {
  display: flex;
  padding: 1vh;
  border-top: var(--border);
  background: var(--cc-msger-bg);
  z-index: 10;
  height: 18%;
}
.msger-inputarea * {
  padding: 1vh;
  border: none;
  border-radius: 3px;
  font-size: calc(40% + 2vmin);

}
.msger-input {
  flex: 1;
  background: var(--cc-navbar);

}

.msger-ask {
  flex: 1;
  background: var(--cc-buttonask-bg);
  font-weight: bold;
  padding: 0px;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.msger-ataturk {
  flex: 1;
  background: #637A9F;
  background-image: url("/static/profile_pics/ata1.png");
  background-repeat: no-repeat;
  font-weight: bold;
  padding: 0px;
  justify-content: center;
  align-items: center;
  text-align: center;
  -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}

.msger-fast {
  flex: 1;
  background: var(--cc-buttonfast-bg);
  font-weight: bold;

  justify-content: center !important;
  align-items: center !important;
  padding: 0px;
}

.quiz-group {
  background-color: var(--qq-quizgroup-bg);
  display: flex;
  align-content: center;
  justify-content: center;
  text-align: center;
  color: var(--qq-quizgroup);
  width: 100%;

}


.truefalse-group {

  background-color: var(--tf-truefalse-bg);
  display: flex;
  align-content: center;
  justify-content: center;
  text-align: center;
  color: var(--tf-truefalse);
  width: 100%;
}

.button_a {
    height: 100%;
    width: 30%;
    background: var(--qq-button_a-bg);
    color: var(--qq-button_a);
}

.button_b {
height: 100%;
width: 30%;
margin: 0 2% 0 2%;
background: var(--qq-button_b-bg);
    color: var(--qq-button_b);

}
.button_c {
height: 100%;
width: 30%;

background: var(--qq-button_c-bg);
    color: var(--qq-button_c);
}

.button_true {
height: 100%;
width: 46%;
margin: 0 2% 0 0;
background: var(--tf-button_t-bg);
    color: var(--tf-button_t);

}
.button_false {
height: 100%;
width: 46%;
background: var(--tf-button_f-bg);
    color: var(--tf-button_f);

}


.msger-next {
  flex: 1;
  background: #FF9E9E; /* kırmızı*/

  font-weight: bold;

    justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--cc-msger-bg);

  padding: 0px;
}

.msger-send-btn {

  margin-left: 10px;
  background: var(--cc-msger-send-bg); /* yeşil */
  color: var(--cc-msger-bg);
  font-weight: bold;
  cursor: pointer;
  transition: background 0.23s;
    z-index: 10;

}
.msger-play-btn {

  margin-left: 10px;
  background: var(--cc-msger-play-bg); /* sarı */
  color: var(--cc-msger-bg);
  font-weight: bold;
  cursor: pointer;
  transition: background 0.23s;
  z-index: 10;
}

.msger-send-btn:hover{
  background: green;

}
.msger-play-btn:hover {
  background: #FF9312;
}


.msg {
  display: flex;
  align-items: flex-end;
  margin-bottom: 10px;
}
.msg:last-of-type {
  margin: 0;

}

.msg-img {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  background: #ddd;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 50%;
}
.msg-bubble {
  max-width: 450px;
  padding: 15px;
  border-radius: 15px;

}
.msg-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.msg-info-name {
  margin-right: 10px;
  font-weight: bold;
}
.msg-info-time {
  font-size: 0.85em;

}

.left-msg .msg-bubble {
    background: var(--left-msg-bg);
    border-bottom-left-radius: 0;
}

.left-msg {
font-size: calc(12px + 1vmin);
}

.htmlstar{
    color: #993300;
}
.voice-msg .msg-bubble {
    position: relative; /* Required for positioning ::before */
    padding: 10px 20px; /* Inner spacing */
    border-radius: 3.75rem; /* Rounded corners */
    line-height: 1rem;
    font-size: calc(12px + 1vmin);
    font-weight: 400;
    min-width: 40%;
    border: 1px solid rgb(36, 113, 163); /* Updated border color */
    background-image: linear-gradient(-180deg, rgb(91, 160, 199) 0%, rgb(36, 113, 163) 100%); /* Updated gradient */


    box-shadow:
    0 0.5rem 0.625rem 0 rgba(36, 113, 163, 0.5), /* Outer shadow for depth */
    0 -0.125rem 0.75rem rgba(36, 113, 163, 1) inset, /* Top glow */
    0 0.375rem 0.25rem rgba(255, 255, 255, 0.3) inset, /* Inner white shine */
    0 0.125rem 0.25rem 0 rgba(91, 160, 199, 1) inset; /* Inner blue glow */

    color: rgb(23, 32, 42); /* Updated text color */
    text-shadow:
        1px 1px 0 rgba(0, 0, 0, 0.6), /* Dark shadow for text */
        -1px -1px 0 rgba(255, 255, 255, 0.4); /* Light highlight for text depth */
}

.voice-msg .msg-bubble::before {
    content: "";
    display: block;
    height: 0.25rem; /* Highlight height */
    position: absolute;
    top: 0.5rem; /* Positioning of the highlight */
    left: 50%; /* Center align horizontally */
    transform: translateX(-50%);
    width: calc(40% + 10vw); /* Adjust width to fit nicely */
    background: #fff;
    border-radius: 100%; /* Round the highlight */
    opacity: 0.7; /* Slight transparency for blending */
    background-image: linear-gradient(
        -270deg,
        rgba(255, 255, 255, 0.0) 0%,
        rgba(255, 255, 255, 0.8) 20%,
        rgba(255, 255, 255, 0.8) 80%,
        rgba(255, 255, 255, 0.0) 100%
    ); /* Smooth gradient highlight */
    box-shadow: 0 0.5rem 1rem rgba(255, 255, 255, 0.2); /* Subtle glow for better realism */
}


.voiceA-msg .msg-bubble, .topscorers-msg .msg-bubble{

    font-size: calc(10px + 1vmin);
    border-radius: 15px;
    background: var(--cc-voiceA-bg);
    color: var(--cc-voiceA);
    box-shadow: 1px 1px 5px #000, -1px -1px 5px #6f6f6f, inset 1px 1px 5px #2b2b2b, inset -1px -1px 5px #424242;

}


.adver-bubble {
    font-size: calc(8px + 1vmin);
    background: var(--cc-msger-bg);
    color: var(--cc-voice);
    width: 198px;
    height: 376px;  /* 9:16 oranı için 352 pixel */
    max-width: 220px;
    max-height: 550px;
    margin-left: calc((70vw - 200px)/2);
}


.right-msg {
  flex-direction: row-reverse;
  font-size: calc(12px + 1vmin);
}

.right-msg .msg-bubble {
  background: var(--right-msg-bg);
  border-bottom-right-radius: 0;
}

.right-msg .msg-img {
  margin: 0 0 0 10px;
}

.level-bubble {
  height: 2.5em;
  padding: 6px;
  border-radius: 15px;
  background: var(--cc-level-bg);
  color: var(--cc-level);

  font-size: calc(12px + 1.5vmin);
  font-weight: bold;
  margin: 0 0.4vw 0 2vw;
  display: flex;
  justify-content: center;
  align-items: center;

  box-shadow: 1px 1px 5px #000, -1px -1px 5px #6f6f6f, inset 1px 1px 5px #2b2b2b, inset -1px -1px 5px #424242;
  z-index: 11;

    white-space: nowrap;
}

.level-bubble:hover {
  cursor: pointer;
}

.select {
    background: var(--cc-level-bg);
    color: var(--cc-level);

}
select{
    background: var(--cc-level-bg);
    color: var(--cc-level);
    margin: 0px 20px 0px 20px;
}

.option-bubble {

  border-radius: 15px;
  font-size: calc(12px + 2vmin);
  font-weight: bold;

  justify-content: center;
  align-items: center;
  text-align: center;

  box-shadow: 1px 1px 5px #000, -1px -1px 5px #6f6f6f, inset 1px 1px 5px #2b2b2b, inset -1px -1px 5px #424242;
  padding: 0px;

}

.score-bubble {

  border-radius: 15px;
  background-color: #E78F8E;
  color: #E78F8E;
  font-size: calc(12px + 2vmin);
  font-weight: bold;

  display: flex;
  justify-content: center;
  align-items: center;
  height: 2.5em;

  box-shadow: 1px 1px 5px #000, -1px -1px 5px #6f6f6f, inset 1px 1px 5px #2b2b2b, inset -1px -1px 5px #424242;

  z-index: 11;

  min-width: 5vw;

}

.scenario-bubble_a {
  padding: 6px;
  margin-top: 1em;
  border-radius: 15px;
  background: var(--cc-scenariobA-bg);
  color: var(--cc-msger-bg);
  font-size: calc(12px + 1.5vmin);
  font-weight: bold;

}
.scenario-bubble_b {
  padding: 6px;
margin-top: 1em;
  border-radius: 15px;
  background: var(--cc-scenariobB-bg);
  color: var(--cc-msger-bg);
  font-size: calc(12px + 1.5vmin);
  font-weight: bold;

}
.scenario-bubble_c {

  padding: 6px;
  margin-top: 1em;
  border-radius: 15px;
  background: var(--cc-scenariobC-bg);
  color: var(--cc-msger-bg);
  font-size: calc(12px + 1.5vmin);
  font-weight: bold;

}


.quiz-bubble_a {
  padding: 6px;

  border-radius: 15px;
  background: var(--qq-button_a-bg);
    color: var(--qq-button_a);
  font-size: calc(10px + 1vmin);

}

.quiz-bubble_b {
  padding: 6px;

  border-radius: 15px;
  background: var(--qq-button_b-bg);
    color: var(--qq-button_b);
  font-size: calc(10px + 1vmin);


}
.quiz-bubble_c {
  padding: 6px;

  border-radius: 15px;
  background: var(--qq-button_c-bg);
    color: var(--qq-button_c);
  font-size: calc(10px + 1vmin);

}


.menu-badge {
	font-size: 0.5em;
	font-weight: bold;
	margin-left: -3px;
	position: relative;
	top: -10px;
	margin-bottom: 13px;
	color: #000000;
	background-color: #00FF00;
	padding: 1px 2px;
	border-radius: 6px;
	line-height: 1.5em;
}


.scenario-bubble_a {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.scenario-bubble_b {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.scenario-bubble_c {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.quiz-bubble_a {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.quiz-bubble_b {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.quiz-bubble_c {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.sideInfeed {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.dropdown-menu > a:hover {
    background-color: var(--cc-navbar-hover);
    color: var(--cc-header);
}

.dropdown-menu {
    background-color: var(--cc-header-bg);
}

.dropdown-menu > a {
    color: var(--cc-navbar);
}



#goog-gt-tt, .goog-te-balloon-frame {display: none !important;}
.goog-text-highlight { background: none !important; box-shadow: none !important;}

.goog-te-banner-frame.skiptranslate {
    display: none !important;
    }
.skiptranslate {
    display: none !important;
    }

.videosize {

    display: flex;

    width: 100%;
    height: 100%;
    object-fit: contain;
}
.nav-score {
    background-color: var(--cc-navscore-bg);
    color: var(--cc-navscore);
    border-radius: 30%;
    padding: 0px 4px 0px 4px;
    font-weight: Bold;
}

.nav-shop {
    background-color: var(--cc-navscore-bg);
    color: var(--cc-navscore);
    border-radius: 30%;
    padding: 0px 4px 0px 4px;
    font-weight: Bold;
    font-size: large;
}

.disable-clicks {
  pointer-events: none;
}