body {
  background: #F2F0EA;
  margin: 0;
  padding-top: 45px;
}


.tts-font { 
    font-family: Pyidaungsu, CherryUnicode;
}
/*For Save Pdf*/
.page-break {
    page-break-after: always;
    page-break-inside: avoid;
    clear: both;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
}
.content-after-break {
    margin-top: 20pt; 
}
/*For Save Pdf*/

.navbar-brand {
    display: flex;
    align-items: center;
}

.navbar-brand img {
    height: 30px;
    margin-right: 10px;
}

@media (min-width: 768px) {
  .max-width-500 {
    max-width: 500px;
    margin: 0 auto;
  }
}

@font-face {
    font-family: Pyidaungsu;
    src:local('Pyidaungsu'),url('../fonts/Pyidaungsu.ttf') format('truetype');
}
.Pyidaungsu {
    font-family: Pyidaungsu;
}

@font-face {
    font-family: TTSRunes;
    src:local('TTSRunes'),url('../fonts/TTSRunes.ttf') format('truetype');
}
.TTSRunes {
    font-family: TTSRunes;
}

@font-face {
    font-family: CherryUnicode;
    src:local('CherryUnicode'),url('../fonts/CherryUnicode.ttf') format('truetype');
}
.CherryUnicode {
    font-family: CherryUnicode;
}

.my-eye-slash::before {
  content: "\f070"; }
  

.fs-custom {
  font-size: 15px;
}
.fs-custom-10 {
  font-size: 10px;
}
.fs-custom-12 {
  font-size: 12px;
}
.fs-custom-14 {
  font-size: 14px;
}
.fs-custom-16 {
  font-size: 16px;
}
.fs-custom-17 {
  font-size: 17px;
}
.fs-custom-18 {
  font-size: 18px;
}
.fs-custom-19 {
  font-size: 19px;
}
.fs-custom-20 {
  font-size: 20px;
}
.fs-custom-25 {
  font-size: 25px;
}
.fs-custom-30 {
  font-size: 30px;
}

.custom-container {
  padding-left: 0;
  padding-right: 0;
  margin-left: 15px;
  margin-right: 15px;
}

.justified-text {
      text-align: justify;
}

.line-height-1{
	line-height: 1.5;
}
.line-height-2{
	line-height: 2;
}
.line-height-3{
	line-height: 2.5;
}
.line-height-4{
	line-height: 3;
}
.line-height-5{
	line-height: 3.5;
}
/*-----------------------------------------------------------*/
.tts-red {
    color: red;
}
.tts-blue {
    color: blue;
}
.tts-teal {
    color: #008080;
}
.tts-green {
    color: #008000;
}
.tts-primary {
	color: #0d6efd;
}
.tts-green1 {
    color: #00FFFF;
}
.tts-black {
    color: black;
}
.tts-orange {
    color: #F56533;
}
.tts-yellow {
    color: yellow;
}
.tts-gold {
    color: gold;
}
.tts-maroon {
    color: #800000;
}

.tts-purple {
    color: #9F27CC;
}
.tts-d-red {
    color: #8B0000;
}
.tts-navy {
    color: #000080;
}
.tts-fuchsia {
    color: #FF00FF;
}
.tts-bg {
    background: #FFFDF2;
}

.nav-link {
    color: yellow;
}

.text-pro {
    color: #28a745; /* This is the color value for text-success */
}

.text-master {
    color: #007bff; /* This is the color value for text-primary */
}
.text-admin {
    color: #ff0000; /* This is the color value for text-primary */
}
.tts-dark_classic_blue {
	background: #0A1828; 
}


/*---------------- Custom Card Styles ----------------*/
/**
.custom-card {
    width: 18rem;
    min-height: 8rem; 
    border: 1px solid gold;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
    background: #641E16;
    display: flex;
    flex-direction: column; 
}
.custom-card:hover {
    transform: scale(1.05);
}

.custom-card-image {
    max-width: 100%;
    height: 100px;
    object-fit: cover;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 1px;
}

.custom-card-content {
    padding: 5px;
    flex-grow: 1; 
}


/**
.custom-card {
    width: 18rem;
	height:8rem;
    border: 1px solid gold;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
    margin: 10px;
	background: #641E16;
}

.custom-card:hover {
    transform: scale(1.05);
}

.custom-card-image {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
	padding: 1px;
}


.custom-card-content {
    padding: 5px; 
    flex-grow: 1;
}
**/
/**
.custom-card-title {
	color: #00FFFF;
    font-size: 1.3rem;
    margin-top: 5px;
	margin-bottom: 10px;
}

.custom-card-description {
    font-size: 0.8rem;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal; 
    cursor: pointer;
}
/**
.custom-card-description {
    font-size: 0.9rem;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}**/
/**
.custom-card-button {
	border: 1px solid #ddd;
    color: yellow;
    width: 100%;
}

.custom-card-button:hover {
    background-color: #0056b3;
}

.custom-card-button:hover {
    color: yellow;
}

.custom-card-price {
	color: #99EF43;
    font-size: 1.25rem;
	margin-bottom: 10px;
}
**/

/*---------------- Custom Card Styles ----------------*/

/**
 .card-img-top {
    height: 200px; 
     object-fit: cover; 
     }
	 **/
	 
	 
 .lesson-item {
            border: 1px solid #e0e0e0;
            margin-bottom: 10px;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }
        .lesson-item:hover {
            background-color: #f8f9fa;
        }
        .lesson-title {
            font-weight: bold;
            color: #007bff;
            font-size: 1.1em;
        }
        .restricted-message {
            color: red;
            font-size: 1.1em;
            font-weight: bold;
        }
        .disabled-link {
            color: #ccc;
            pointer-events: none; /* Disable the link */
            cursor: not-allowed;
        }
		
 .lesson-header {
            background-color: #007bff;
            color: white;
            padding: 15px;
            border-radius: 5px;
        }
        .lesson-content {
            background-color: #ededed;
			padding: 5px 30px 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .lesson-content pre {
            background-color: #f1f1f1;
            padding: 10px;
            border-radius: 5px;
            font-size: 0.9em;
        }
        .btn-back {
            background-color: #6c757d;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            padding: 10px 20px;
        }
        .btn-back:hover {
            background-color: #5a6268;
        }
		
.scrollable-select {
		height: 100px;
        overflow-y: auto;
    }
    fieldset {
        border: 2px solid #007bff; /* Blue border for fieldset */
        border-radius: 8px; /* Rounded corners */
        padding: 1.5em; /* Padding inside the fieldset */
        margin-top: 1em; /* Spacing above the fieldset */
        background-color: #f9f9f9; /* Light background color */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    }

    legend {
        font-size: 1em; /* Slightly larger font size */
        color: #007bff; /* Blue color to match the border */
        padding: 0 10px; /* Padding around the legend text */
        font-weight: bold; /* Bold for emphasis */
        margin-bottom: 10px; /* Space below the legend */
    }

    .dob-tob-group {
        display: flex; /* Use flexbox for a horizontal layout */
        flex-wrap: wrap; /* Allow wrapping for small screens */
        gap: 20px; /* Add space between the select elements */
    }

    .dob-tob-group .col-4 {
        flex: 1 1 calc(33.33% - 20px); /* Ensure each select takes up equal width */
    }

    select {
        border-radius: 4px; /* Rounded corners for select elements */
        border: 1px solid #ced4da; /* Light border */
        padding: 0.5em; /* Padding for readability */
        font-size: 1em; /* Consistent font size */
        width: 100%; /* Full width for responsive design */
        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Soft shadow */
    }
	small.tts-red {
    margin-top: 1em; /* Adjust this value as needed */
    display: block; /* Ensure it behaves as a block-level element */
}

/* Custom scrollbar styling */
.form-select.scrollable-select {
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #007bff #f1f1f1;
}

.form-select.scrollable-select::-webkit-scrollbar {
    width: 8px;
}

.form-select.scrollable-select::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.form-select.scrollable-select::-webkit-scrollbar-thumb {
    background-color: #007bff;
    border-radius: 10px;
    border: 2px solid #f1f1f1;
}

.form-select.scrollable-select::-webkit-scrollbar-thumb:hover {
    background-color: #0056b3;
}
/* Custom scrollbar styling */
#suggestions {
    scrollbar-width: thin;
    scrollbar-color: #007bff #f1f1f1;
}

/* WebKit browsers (Chrome, Safari, Edge) */
#suggestions::-webkit-scrollbar {
    width: 8px;
}

#suggestions::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

#suggestions::-webkit-scrollbar-thumb {
    background-color: #007bff; 
    border-radius: 10px;
    border: 2px solid #f1f1f1;
}

#suggestions::-webkit-scrollbar-thumb:hover {
    background-color: #0056b3;
}
a {
  text-decoration: none !important;
}

/*------------------ Footer Styles ----------------------------------*/

footer {
    background-color: #0A1828;
    color: #fff;
    text-align: center;
    padding: 10px;
}
footer p {
    margin: 0;
    font-size: 14px;
}

footer:hover {
    background-color: #555;
}
/*------------------ Footer Styles ----------------------------------*/
.pointer-cursor {
  cursor: pointer;
}

img.resize-original-size {
  max-width: 100%;
  height: auto;
}

/*------------------ popup image ----------------------------------*/
.popup {
  position: fixed; 
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); 
  display: flex;
  justify-content: center; 
  align-items: center; 
  z-index: 1000;
}

.popup img {
  max-width: 90%; 
  max-height: 90%;
}
/*------------------ floating button ----------------------------------*/
.floating-back-button {
  position: fixed;
  background-color: #007bff;
  bottom: 20px; 
  left: 20px;
  color: white;
  padding: 10px 15px;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  z-index: 1000;
}

.floating-back-button i {
  font-size: 20px;
}

@media (max-width: 768px) {
  .floating-back-button {
    bottom: 10px; 
    left: 10px;
  }

  .floating-back-button i {
      font-size: 18px;
  }
}

.element-wood { color: #28a745; } 
.element-fire { color: #dc3545; }
.element-earth { color: #ffc107; } 
.element-metal { color: #adb5bd; }
.element-water { color: #007bff; }
.element-wood-border { border-left-color: #28a745; }
.element-fire-border { border-left-color: #dc3545; }
.element-earth-border { border-left-color: #ffc107; }
.element-metal-border { border-left-color: #adb5bd; }
.element-water-border { border-left-color: #007bff; }
.bg-wood  { background-color: #28a745 !important; }
.bg-fire  { background-color: #dc3545 !important; }
.bg-earth { background-color: #ffc107 !important; }
.bg-metal { background-color: #adb5bd !important; }
.bg-water { background-color: #007bff !important; }