body {background-color: #f6f6f6;}

@font-face {
  font-family: 'Caveat'; /* Name you'll use in CSS */
  src: url('../fonts/Caveat-VariableFont_wght.ttf') format('truetype'); /* Path to your font */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Sour Gummy'; /* Name you'll use in CSS */
  src: url('../fonts/SourGummy-VariableFont_wght.ttf') format('truetype'); /* Path to your font */
  font-weight: normal;
  font-style: normal;
}

.img-header-banner.journey{
  background: url(../images/sstj_child_header_components.svg) no-repeat, linear-gradient(0deg, rgba(198, 229, 247, 1) 0%, rgba(24, 162, 227, 1) 80%);
  background-position: center;
  background-size:cover !important;
}

.journey .main{
  background: url(../images/sstj_mainpanel_bck.png) no-repeat #c6e5f7;
  background-position: bottom center;
  border-radius:20px;
  border-color:transparent;
  min-height:600px;
  margin-top:-50px;
  position: relative;
}
/* Composition submission form (lessonCompositionUpload.jsp), included only by the
   composition tab's Upload pane on lesson.jsp (the standalone /SubmitComposition page/action
   was removed - this fragment is the only place .compo-main is ever used now). Plain
   colour instead of the shared background image above, content-sized instead of the tall
   fixed min-height meant for longer forms (e.g. Shoutout), flush with no rounded corners
   or extra margin/padding so it sits flat against the tab bar above it and the page
   background around it. */
.journey .main.compo-main {
  background-image: none;
  background-color: #F6F6F6;
  min-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  border-radius: 0;
}
/* Generic file-type icon shown in the preview row for non-image attachments (PDF), sized
   to match the 50px image thumbnails in .attpreview img - same reasoning as above, moved
   here from the same page-local override so both places pick it up. */
.attpreview .filethumb-icon {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  margin-right: 10px;
  font-size: 22px;
  color: #e74c3c;
  flex-shrink: 0;
}
.journey .main .panel-heading{
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  background-color: transparent;
  border-color:transparent;
  padding:0;
  display:flex;
  flex-direction: column;
  align-items: center;
  margin-top:-50px;
}
.journey .main .panel-heading .headicn{width:100px;}
.journey .main .panel-heading .headlbl{width:200px;}
.journey .main .panel-heading .headicn{
  -webkit-animation: shake-vertical 10s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
	        animation: shake-vertical 10s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
}
@keyframes shake-vertical {
  0%,
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  10%,
  30%,
  50%,
  70% {
    -webkit-transform: translateY(-4px);
            transform: translateY(-4px);
  }
  20%,
  40%,
  60% {
    -webkit-transform: translateY(4px);
            transform: translateY(4px);
  }
  80% {
    -webkit-transform: translateY(3.2px);
            transform: translateY(3.2px);
  }
  90% {
    -webkit-transform: translateY(-3.2px);
            transform: translateY(-3.2px);
  }
}


.journey .main .backbtn{
  position:absolute;
  top:15px;left:15px;
}
.journey .encase {
  margin-top:20px;
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
}
.journey .left_sct{width:100%;margin-bottom:10px;}
.journey .right_sct{width:100%;}

.journey .infodeets{
  display:flex;
  flex-direction: column;
  align-items: center;
  border-radius:10px;
  background-color: #e0eaf2;
  padding:15px 25px;
  margin:0px;
}
.journey .infodeets .infoicn{
  margin:-30px 0 10px 0;
}
.journey .infodeets .headline{
  font-family: "Sour Gummy", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  margin:10px 0;
}
.journey .infodeets p{
  line-height: 26px;
}
.journey .infodeets h4{
  align-self: flex-start;
}

.journey .word-counter {
    text-align: right;
    font-size: 12px;
    color: #185686;
    padding: 3px 0px;
    margin:3px 0;
    float:right;
}

.journey .word-counter.disabled {
    opacity: 0.4;
}

.journey .emoji{
    font-size: 17px;
    display: inline-block;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.journey .emoji:hover{
    transform:scale(1.6);
}

.journey .emoji-picker.disabled {
    pointer-events: none;
    opacity: 0.4;
}
/* --- Dropdown button interface ---*/
.dropdownbtn .f-dropdown select {
 	display: none;
}
.dropdownbtn .f-dropdown > span {
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  position: relative;
  color: #333;
  background: #fffbfb;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.dropdownbtn .f-dropdown > span > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 12px;
}
.dropdownbtn .f-dropdown > span img {
  width: 30px;
  margin-right: 10px;
  border-radius: 50%;
}
.dropdownbtn .f-dropdown > span:before, .dropdownbtn .f-dropdown > span:after {
  content: "";
  display: block;
  position: absolute;
  width: 8px;
  height: 2px;
  border-radius: 1px;
  top: 50%;
  right: 12px;
  background: #000;
  transition: all 0.3s ease;
}
.dropdownbtn .f-dropdown > span:before {
  margin-right: 4px;
  transform: scale(0.96, 0.8) rotate(50deg);
}
.dropdownbtn .f-dropdown > span:after {
  transform: scale(0.96, 0.8) rotate(-50deg);
}
.dropdownbtn .f-dropdown ul {
  margin: 0;
  padding: 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 40px;
  left: 0;
  z-index: 1;
  right: 0;
  background: #e0eaf2; 
  overflow-x: hidden;
  overflow-y: auto;
  transform-origin: 0 0;
  transform: translate(0, 5px);
  height: 0;
}
.dropdownbtn .f-dropdown.open ul,
.dropdownbtn .f-dropdown.selectDropdown.filled.open ul {
  top: 40px;
}
.dropdownbtn .f-dropdown.open > ul::-webkit-scrollbar {
  background-color: #fffbfb;
  width: 8px;
}
.dropdownbtn .f-dropdown.open > ul::-webkit-scrollbar-thumb{
  background-color: #dad1d1;
  border-radius: 16px;
}
.dropdownbtn .f-dropdown.open > ul::-webkit-scrollbar-button {
  display:none;
}
.dropdownbtn .f-dropdown ul li {
  padding: 0;
  margin: 0;
}
.dropdownbtn .f-dropdown ul li a {
  cursor: pointer;
  display: block;
  padding: 8px 12px;
  color: #333;
  text-decoration: none;
  outline: none;
  position: relative;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
}
.dropdownbtn .f-dropdown ul li a img {
  width: 30px;
  margin-right: 10px;
  border-radius: 50%;
}
.dropdownbtn .f-dropdown ul li:hover {
  	color: #333;
  	background: #fffbfb;
}
.dropdownbtn .f-dropdown ul li a:hover {
  	color: #333;
}
.dropdownbtn .f-dropdown ul li.active a {
  	color: #333;
  	background: #fffbfb;
}
.dropdownbtn .f-dropdown ul li.active a:before, .dropdownbtn .f-dropdown ul li.active a:after {
  	--scale: 0.6;
  	content: "";
  	display: none;
  	width: 10px;
  	height: 2px;
  	position: absolute;
  	right: 12px;
  	top: 50%;
  	opacity: 0;
  	background: #FFF;
  	transition: all 0.2s ease;
}
.dropdownbtn .f-dropdown ul li.active a:before {
  	transform: rotate(45deg) scale(var(--scale));
}
.dropdownbtn .f-dropdown ul li.active a:after {
  	transform: rotate(-45deg) scale(var(--scale));
}
.dropdownbtn .f-dropdown ul li.active a:hover:before, .dropdownbtn .f-dropdown ul li.active a:hover:after {
  	--scale: 0.9;
  	opacity: 1;
}
.dropdownbtn .f-dropdown.disabled {
  	opacity: 0.7;
}
.dropdownbtn .f-dropdown.disabled > span {
  	cursor: not-allowed;
}
.dropdownbtn .f-dropdown.filled > span {
  	color: #333;
}
.dropdownbtn .f-dropdown.open {
    z-index: 15;
    position: relative;
    height: auto !important;
}
.dropdownbtn .f-dropdown.open > span {
  	border-color: #AAA;
}
.dropdownbtn .f-dropdown.open > span:before, .dropdownbtn .f-dropdown.open > span:after {
  	background: #000;
}
.dropdownbtn .f-dropdown.open > span:before {
  	transform: scale(0.96, 0.8) rotate(-50deg);
}
.dropdownbtn .f-dropdown.open > span:after {
  	transform: scale(0.96, 0.8) rotate(50deg);
}
.dropdownbtn .f-dropdown.open ul {
  	opacity: 1;
  	visibility: visible;
  	transform: translate(0, 0px);
  	transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.4, 0.6, 0.5, 1.32);
  	border: 1px solid #ececec;
  	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  	max-height: 280px;
  	height: auto;
    border-radius:10px;
}

.textsct{
  margin-top:10px;
  padding:8px;
  background:#fff;
  border-radius:20px;
}
.textsct textarea{ 
  resize: none;
  border:none;
  color:#333;
  border-radius:20px;
}
.textsct .btnarea{
  padding:5px 10px;
  text-align: right;
}
.textsct .btnarea .customlbl {
  cursor: pointer; /* Ensures it acts like a button */
  display: inline-block; /* Allows for margin/padding as needed */
}

.attpreview{
  border-radius:20px;
  background: #e0eaf2;
  padding:15px 20px;
  margin-top:10px;
  position:relative;
  display:flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width:100%;
}
.attpreview img{
  max-width: 50px;
  height:auto;
  margin-right:10px;
}
.attpreview video{
  max-width: 50px;
  height:auto;
  margin-right: 10px;
}
.attpreview a::before{
  content: "\f1f8";
}
.attpreview .trashbtn{
  font: normal normal normal 18px/1 FontAwesome;
  position: absolute;
  right:20px;
  cursor: pointer;
}
.attpreview .trashbtn:hover{
  text-decoration: none;
}
.attpreview p{
  width:80%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  justify-content: space-between;
  align-items: center;
  margin:0 10px;
}

.attpreview .file-size {
    color: #666;
    font-size: 0.9em;
    white-space: nowrap;
    flex-shrink: 0; /* Prevent size text from wrapping */
    float:right;
}

.slide-intoview {
	-webkit-animation: slide-intoview 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-intoview 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes slide-intoview {
  0% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
            opacity:0;
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
            opacity: 1;
  }
}

.submitsct{
  margin:30px 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.submitsct .btn{
  border-radius:20px;
  margin:0 5px;
  padding:8px 50px;
}
.submitsct .btn:focus, 
.submitsct .btn:active:focus, 
.submitsct .btn.active:focus{
  outline: 1px auto #fefefe;
}

.loadmod .alertmodal-container{
  border-radius:20px;
  max-width: 330px;
}
.loadmod .headbarry{
  position:absolute;
  top:-50px;
  -webkit-animation: wobble-hor-bottom 5s infinite both;
	        animation: wobble-hor-bottom 5s infinite both;
}
.loadmod .sectone,
.loadmod .secttwo,
.loadmod .txtcontent{
  display:flex;
  flex-direction: column;
  align-items: center;
}
.loadmod .txtcontent{
  margin-top: 30px;
  padding: 10px;
  text-align: center;
}
.loadmod .txtcontent p,
.loadmod .txtcontent h4{
  line-height: 24px;
}
.loadmod .modalbtn{
  width:50%;
}
.loadmod .alertmodal-container button[type=button], 
.loadmod .alertmodal-container a[type=button] {
  border-radius:100px;
  background-color: #18a2e3;
}
.loadmod .alertmodal-container a:hover[type=button] {
  background-color: #178acc;
}
.loadmod .alertmodal-container .txtcontent  a{
  color: #18a2e3;
  opacity:1;
}
.loadmod .alertmodal-container .txtcontent a:hover{
  color: #178acc;
}
.loader {
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: 
      radial-gradient(farthest-side,#185686 94%,#0000) top/8px 8px no-repeat,
      conic-gradient(#0000 30%,#185686);
  -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 8px),#000 0);
  animation: l13 1s infinite linear;
}
@keyframes l13{ 
    100%{transform: rotate(1turn)}
}

.sstj_formerrors{
  margin:3px 0;
  padding:1px 10px;
}

@keyframes wobble-hor-bottom {
  0%,
  100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
  }
  15% {
    -webkit-transform: translateX(-15px) rotate(-6deg);
            transform: translateX(-15px) rotate(-6deg);
  }
  30% {
    -webkit-transform: translateX(15px) rotate(6deg);
            transform: translateX(15px) rotate(6deg);
  }
  45% {
    -webkit-transform: translateX(-15px) rotate(-3.6deg);
            transform: translateX(-15px) rotate(-3.6deg);
  }
  60% {
    -webkit-transform: translateX(6px) rotate(2.4deg);
            transform: translateX(6px) rotate(2.4deg);
  }
  75% {
    -webkit-transform: translateX(-6px) rotate(-1.2deg);
            transform: translateX(-6px) rotate(-1.2deg);
  }
}

/* ---------------- Prize parade ---------------- */
.noredeemables{
  background:rgba(255,255,255,0.5);
  border-radius:10px;
  text-align: center;
  width:100%;
  margin-bottom:30px;
}
.noredeemables h4{
  font-size:34px;
  font-weight: 500;
  font-style: italic;
  margin:0;
}
.noredeemables p{
  font-size:14px;
  margin:0;
  line-height: 24px;
  padding:0 20px 25px 20px;
}
.noredeemables a.btn{
  margin:0 0 -20px 0;
  padding:8px 20px;
  border-radius:100px;
}
.prizecaps{
  border-radius:20px;
  background:#f6f6f6;
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom:10px;
  position: relative; /* 05032026 */
}
.prizecaps .rdate{width:30%;}
.prizecaps .prodthumb{width:30%;}
.prizecaps .prodname{width:40%;}
.prizecaps .actn{width:100%;}

.prizecaps .rdate{
  color:#fff;
  background:#f7524b;
  border-radius: 20px 0 20px 0px;
  text-align: center;
  padding:10px;
  font-size:10px;
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: stretch;
}
.prizecaps .rdate h4{
  margin:2px 0;
  color:#fff;
  font-size:12px;
  font-weight: bold;
}
.prizecaps .rdate span{
  display:inline-block;
}
.prizecaps .prodthumb,
.prizecaps .prodname,
.prizecaps .actn{
  text-align: center;
}
.prizecaps .prodname{
  padding:10px;
}
.prizecaps .actn{
  text-align: center;
  padding:0 0 15px 0;
}
.prizecaps .actn .instr{
  margin:0 0 3px 0;
}

/* 05032026 */
.prizecaps .actn .stat p{
  font-size:12px;
  font-style: italic;
  color:#1e6aaf;
  margin:0;
  padding:0 25px;
}
.prizecaps .actn .stat img{
  width:30px;
  filter: brightness(0) saturate(100%) invert(27%) sepia(100%) saturate(1443%) hue-rotate(192deg) brightness(87%) contrast(78%);
}
.prizecaps .actn .stat.delivered{
  position:absolute;
  right:0;
  bottom:0;
  display:flex;
  flex-direction: row;
  align-items: center;
}
.prizecaps .actn .stat.delivered a{
  background-color:#028e0f;
  border-radius:10px 0 20px 0;  
  padding:8px;
}
.prizecaps .actn .stat.delivered img{
  width:22px;
  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(1%) hue-rotate(189deg) brightness(104%) contrast(101%);
}
.prizecaps .actn .stat.delivered .popover{
  background-color:#028e0f;
  border:none;
}
.prizecaps .actn .stat.delivered .popover.top > .arrow:after{
  border-top-color: #028e0f;
}
.prizecaps .actn .stat.delivered .popover-content{
  color:#fff;
  font-size:12px;
  text-align: center;
}

/* --- stars rating --- */
.starsprize{margin:0;}
.starsprize a {
  display: inline-block;
  padding-right: 4px;
  text-decoration: none;
  margin: 0;
}
.starsprize a:after {
    position: relative;
    font-size: 18px;
    font-family: 'FontAwesome', serif;
    display: block;
    content: "\f006";
    color: #ffa300;
}
.starsprize span {
    font-size: 0;
    /* trick to remove inline-element's margin */
}
.starsprize a:hover~a:after {
    content: "\f006" !important;    
}
span.active a.active~a:after {
    content: "\f006";
}
span:hover a:after {
    content: "\f005" !important;
}
span.active a:after,
.starsprize a.active:after {
    content: "\f005";
}

/* when prize has been reviewed */
.prizecaps.done .starsprize a{pointer-events: none;}
.prizecaps.done{background:#e0eaf2;}
.prizecaps .btn{border-radius:100px;padding:8px 20px;}

/* ----- Calendar in Mood check-in ---- */
.journey.mood .right_sct{padding:0 15px;}

.caldates{
  position: relative;
}
.caldates, .caldates .datepicker-inline{
  display:flex;
  flex-direction: column;
  align-items: center; 
  width:auto;
}
.caldates .pin{
  position: absolute;
  top:0px;
}
.caldates .datepicker-switch{
  font-family: "Caveat", cursive;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-size:26px;
}
.caldates .datepicker{
  background: #ffe070;
  padding:25px 15px 15px 15px;
  box-shadow: 8px 8px 2px #b6d0dd;
  border-radius:0;
}
.caldates .datepicker .datepicker-switch:hover, 
.caldates .datepicker .prev:hover, 
.caldates .datepicker .next:hover, 
.caldates .datepicker tfoot tr th:hover{
  background:transparent;
}
.caldates .table-condensed > thead > tr > th, 
.caldates .table-condensed > tbody > tr > th, 
.caldates .table-condensed > tfoot > tr > th, 
.caldates .table-condensed > thead > tr > td, 
.caldates .table-condensed > tbody > tr > td, 
.caldates .table-condensed > tfoot > tr > td {
  padding: 7px 8px;
}
.caldates .table-condensed > thead > tr:nth-child(3){
  border-bottom:1px solid #d1b55d;
}
.caldates .datepicker table tr td.day:hover, 
.caldates .datepicker table tr td.day.focused{
  background:#ffe895;
  color:#333;
  border-radius:100px;
}
.caldates .datepicker table tr td.today, 
.caldates .datepicker table tr td.today:hover, 
.caldates .datepicker table tr td.today.disabled, 
.caldates .datepicker table tr td.today.disabled:hover{
  background: #f46e72;
  color:#fff;
  border-radius:100px;
  font-weight: bold;
}
.caldates .datepicker table tr td.active.active{
   background: #eeb646;
   color:#333;
   border-radius:100px;
   text-shadow:none;
}
.caldates .datepicker table tr td.disabled, 
.caldates .datepicker table tr td.disabled:hover{
  background:transparent;
  color:#9c8842;
}
.caldates .datepicker table tr td.old, 
.caldates .datepicker table tr td.new{
  color: #cab053;
}
.left_col, .right_col{padding:0;}
.left_col .qotd{
  background:#fff;
  padding:20px 20px 40px 20px;
  width: 90%;
  margin: 15px auto;
  position:relative;
}
.left_col .qotd img{
  position:absolute;
  width:40px;
}
.left_col .qotd img:nth-child(1){
  top:-10px;left:-10px;
}
.left_col .qotd img:nth-child(2){
  top:-10px;right:-10px;
}
.left_col .qotd img:nth-child(3){
  bottom:-10px;left:-10px;
}
.left_col .qotd img:nth-child(4){
  bottom:-10px;right:-10px;
}
.left_col .qotd .content{
  line-height: 30px;
  font-family: "Caveat", cursive;
  font-size:22px;
  background:url(../images/sstj_qotd_bcklines.png) repeat top center #fff;
}
.right_col{
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.left_col .todaysdate,
.right_col .todaysdate{
  margin:0;
  font-family: "Caveat", cursive;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-size:30px;
}
.right_col .todaysmood{
  background:#acd9ef;
  padding:15px;margin-top:20px;
  border-radius:20px;
  width:100%;
  display:flex;
  flex-direction: column;
  align-items: center;
}
.right_col .todaysmood .tape{
  margin-top:-35px;
}
.right_col .todaysmood p{
  font-weight:500;
}
.moodicons{
  display:flex;
  flex-direction: row;
  align-items: center;
}
.moodicons input[type="radio"] {
  display: none;
}
.moodicons label {
  display: inline-block;
  background-color: #ddd;
  font-family: Arial;
  font-size: 0;
  cursor: pointer;
  width:26px;height:26px;
  margin:0 3px;
  background:url(../images/sstj_qotd_moodicons.png);
  opacity: 0.5;
}
.moodicons label.mood1 {background-position: 0 0;}
.moodicons label.mood2 {background-position: -26px 0px;}
.moodicons label.mood3 {background-position: -52px 0px;}
.moodicons label.mood4 {background-position: -78px 0px;}
.moodicons label.mood5 {background-position: -104px 0px;}
.moodicons label.mood6 {background-position: -130px 0px;}
.moodicons input[type="radio"]:checked+label {
  opacity:1;
}

.mood-display {
  width: 26px;
  height: 26px;
  position: absolute;
  top: 0px;
  right: 0px;
  background: url(../images/sstj_qotd_moodicons.png);
}

.mood-display.mood0 {background-position: 0 0;}
.mood-display.mood1 {background-position: -26px 0;}
.mood-display.mood2 {background-position: -52px 0;}
.mood-display.mood3 {background-position: -78px 0;}
.mood-display.mood4 {background-position: -104px 0;}
.mood-display.mood5 {background-position: -130px 0;}

.mood .submitsct .btn{
  padding:8px 30px;
}
.mood .submitsct .btn-danger{
  background-color:#d6555a;
  border-color:#d6555a;
}
.mood .submitsct .btn-danger:hover,
.mood .submitsct .btn-danger:focus, 
.mood .submitsct .btn-danger:active{
  background-color: #bf282d;
  border-color: #bf282d;
}
.mood .submitsct .btn-success{
  background-color:#45c264;
  border-color:#45c264;
}
.mood .submitsct .btn-success:hover,
.mood .submitsct .btn-success:focus, 
.mood .submitsct .btn-success:active{
  background-color: #2da94c;
  border-color: #2da94c;
}
.mood .textsct{position: relative;}
.mood .textsctdone{
  position: relative;
  display:flex;
  flex-direction: column;
  align-items: center;
  margin-top:10px;
}
.mood .textsctdone .clipicn{
  position: absolute;
  top:0;
}
.mood .right_sct .loader{
  margin: auto;
  margin-top: 50px;
}
.mood .textsctdone .content{
  width:100%;
  padding:40px 25px 10px 25px;
  border-radius:20px;
  margin-top:10px;
}
.mood .textsctdone .content .story{
  line-height: 30px;
  font-family: "Caveat", cursive;
  font-size: 20px;
  background: url(../images/sstj_qotd_bcklines.png) repeat top center transparent;
  margin:0;
  white-space: pre-line;
}
.mood .textsctdone .content .stat{
  display:flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  margin-top:5px;
}
.mood .textsctdone .content .stat .icn{
  text-align: center;
}
.mood .textsctdone .content .stat .icn p{
  margin:0;
  letter-spacing: 1px;
}
.mood .textsctdone .content .stat .responses{
  display:flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-left:10px;
}
.mood .textsctdone .content .stat .responses .emot{
  text-align: center;
  margin:0 5px;
}
.mood .textsctdone .content .stat .responses .count{
  font-size:12px;
  font-weight: bold;
  margin:2px 0 0 0;
}
.mood .textsctdone.private .content .story{background: url(../images/sstj_story_bcklines_grey.png) repeat top center transparent;}
.mood .textsctdone.private .content{background: #eaeaea;}
.mood .textsctdone.private .content .icn p{color:#f46e72;font-size:12px;font-weight: bold;}
.mood .textsctdone.public .content .story{background: url(../images/sstj_qotd_bcklines.png) repeat top center transparent;}
.mood .textsctdone.public .content{background: #d9f4ff;}
.mood .textsctdone.public .content .icn p{color:#73b087;font-size:12px;font-weight: bold;}

.allowed-date {
    background-color: #D9F4FF;
    border-radius: 100px !important;
}
.allowed-date:hover {
    background-color: #C7CCEB !important;
}

/* ---------------- Barry Xtra ---------------- */
.barryxtra.journey .encase{
  margin-bottom:20px;
}
.barryxtra .btn_bxtra{
  border-radius:10px;
  opacity:0.5;
  position: relative;
  padding:10px 15px;
  margin:0 10px 10px 0;
}
.barryxtra .btn_bxtra:hover{
  background-color: #bbdaea;
  opacity: 1;
  cursor: pointer;
}
.barryxtra .btn_bxtra.active:hover{
  background: transparent;
  cursor: auto;
}
.barryxtra .btn_bxtra a{
  width:100%;height:100%;
  display:block;
  position: absolute;
  top:0;
  left:0;
}
.barryxtra .btn_bxtra p{
  margin:0 0 5px 0;
}
.barryxtra .btn_bxtra .lbl{
  height:30px;
}
.barryxtra .btn_bxtra .arrow{
  width:15px;
  position:absolute;
  right:12px;
  top:30%;
  opacity:0;
}
.barryxtra .btn_bxtra.active,
.barryxtra .btn_bxtra.active .arrow{
  opacity:1;
}
.barryxtra .encase_carousel{
  background:url('../images/sstj_barryxtra_carousel_back.png') no-repeat top center #e3a777;
  border-radius: 20px;
  display:flex;
  flex-direction: column;
  align-items: center;
}
.barryxtra .qotd{
  font-family: "Caveat", cursive;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-size:24px;
  margin-top:80px;
  text-align: center;
  padding:0 10px;
}

/* --- carousel items using swiper plugin --- */
.swiper4 {
  width: 100%;
  height: 100%;
  margin-top: 40px;
  overflow: hidden;
  padding-left: 50px;
  padding-right: 50px;
  /* border:1px solid red; */
}
.swiper4 .rope{
  background:url('../images/sstj_barryxtra_ropebck.png') repeat-x;
  width:95%;
  height:4px;
  position: absolute;
  top:37px;left:20px;
}
.sidecoverright{
  background: #e3a777;
  width: 50px;
  height: 80%;
  position: absolute;
  z-index: 2;
  right: 0px;
  opacity: 0.8;
  top: 41px;
  opacity:1;
}
.sidecoverleft{
  background: #e3a777;
  width: 50px;
  height: 80%;
  position: absolute;
  z-index: 2;
  left: 0px;
  opacity: 0.8;
  top: 41px;
  opacity:1;
}
.swiper4 .swiper-slide {
  background: transparent;
  padding-bottom: 60px;  
}
.swiper-slide .crd {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width:100%;
  margin-top: 41px;
  background: #333333;
  color: #fff;
  position: relative;
}
.swiper-slide .crd .peg {
  position: absolute;
  top:-25px;
  left:30px;
  width:45px;
}
.swiper-slide .crd .avatar {
  border-radius: 100px;
  width: 60px;
  margin-top: -40px;
}
.swiper-slide .crd .userid {
  font-size: 12px;
  font-style: italic;
  margin: 5px 0;
  padding:0 10px;
  text-align: center;
  width:95%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.swiper-slide .crd .usertxt {
  font-family: "Caveat", Arial, sans-serif;
  font-size: 18px;
  margin: 10px 10px 20px 10px;
  height: 150px;
  overflow-y: auto;
  padding: 0 10px;
}

.swiper-slide .crd .usertxt.entry {
  white-space: pre-line;
  word-break: break-word;
}

.swiper-slide .crd a, .barryxtra .qotd a {
 display: block;
 text-decoration: none !important;
 color: inherit;
}

.usertxt-wrapper {
  width: 100%;
  background: transparent;
  box-sizing: border-box;
  border-radius: 5px;
  justify-items: center;
}

/* Width of the vertical scrollbar */
.swiper-slide .crd .usertxt::-webkit-scrollbar {
  width: 6px;
}
/* Track background */
.swiper-slide .crd .usertxt::-webkit-scrollbar-track {
  background: #262626;
  border-radius: 100px;
}
/* Handle (thumb) */
.swiper-slide .crd .usertxt::-webkit-scrollbar-thumb {
  background: #494949;
  border-radius: 100px;
}

/* Sharestory */
.crd.sharestory {
  background: #e3a777;
  border: 1px dashed #986742;
}
.crd.sharestory a.lnk{
  display:block;
  width:100%;
  height:100%;
  position: absolute;
}
.crd.sharestory .usertxt{
  font-family: "Roboto", Arial, sans-serif;
  text-align: center;
  font-size:12px;
  /* font-weight: bold; */
  letter-spacing: 1px;
  color:#986742;
  padding:0 30px;
}
.crd.sharestory .usertxt span{
  display:block;
  font-size:70px;
  line-height: 70px;
  font-weight: 100;
}
.crd.sharestory:hover{
  border:1px dashed #ffce9c;
}
.crd.sharestory:hover .usertxt{
  color:#ffce9c;
}

/* Pagination Styles */
.swiper-pagination {
  position: absolute;
  text-align: center;
  -webkit-transition: 300ms;
  -moz-transition: 300ms;
  -o-transition: 300ms;
  transition: 300ms;
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  z-index: 10;
}
.swiper-pagination.swiper-pagination-hidden {
  opacity: 0;
}

/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal>.swiper-pagination-bullets {
  bottom: 10px;
  left: 0;
  width: 100%;
}

/* Bullets */
.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  display: inline-block;
  background: #af500e;
  opacity: 0.3;
  border-radius: 50%;
  margin:0 2px;
}
button.swiper-pagination-bullet {
  border: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
}
.swiper-pagination-bullet-active {
  opacity: 1;
  background: #af500e;
}
.swiper-button-next {
  background-image: url(../images/sstj_barryxtra_next.svg) !important;
  right:10px;
}
.swiper-button-prev {
  background-image: url(../images/sstj_barryxtra_prev.svg) !important;
  left:10px;
}
.swiper-button-next,
.swiper-button-prev{
  width: 27px;
  height: 44px;
  background-size: 27px 44px;
}
.swiper-slide-duplicate-prev,
.swiper-slide-prev{
  opacity:0;
}
.swiper-slide-next{
  opacity:0;
}

/* Response selection */
.swiper-slide .resp{
  width:100%;
  display:flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  padding:6px 15px 3px 15px;
  background:#515050;
}
.swiper-slide .resp a{ 
  text-align: center;
  text-decoration: none;
  opacity:0.5;
}
.swiper-slide .resp.disabled a {
    pointer-events: none;
}
.swiper-slide .resp .responded{
    opacity: 1;
}
.swiper-slide .resp img{ width:30px;}
.swiper-slide .resp p{
  color: #fff;
  font-size:10px;
  font-weight:bold;
  margin:1px 0;
}
.swiper-slide .anim_response1, 
.swiper-slide .anim_response2, 
.swiper-slide .anim_response3, 
.swiper-slide .anim_response4 {
  position: absolute;
  bottom: 20%;
  left: 35%;
  width: 30%;
  display: none;
}

.roll-out-blurred-top{
  -webkit-animation: roll-out-blurred-top 0.6s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
          animation: roll-out-blurred-top 0.6s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}
@keyframes roll-out-blurred-top {
  0% {
    opacity: 0;
  }
  15% {
    -webkit-transform: translateY(0) rotate(0deg);
            transform: translateY(0) rotate(0deg);
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(-800px) rotate(-720deg);
            transform: translateY(-800px) rotate(-720deg);
    -webkit-filter: blur(50px);
            filter: blur(50px);
    opacity: 1;
  }
}

/* ---- NEWS tab in barry xtra ---- */
.barryxtra.news .encase_carousel{
  background: rgba(224, 234, 242, 0.7);
  min-height:400px;
  padding:20px;
}
.barryxtra.news .carousel-inner .item {
  width:100%;
  padding-bottom:60px;
}
.barryxtra.news .carousel-caption{
  bottom:10px;
  color:#333;
  text-shadow: none;
  font-style: italic;
  font-size:12px;
}
.barryxtra.news .carousel-indicators{
  margin-bottom:0;
}
.barryxtra.news .carousel-indicators li{
  background-color:#185686;
  opacity:0.5;
  border:transparent;
  width:8px;height:8px;
}
.barryxtra.news .carousel-indicators .active{
  background-color:#185686;
  opacity: 1;
  width:10px;height:10px;
}
.barryxtra.news .carousel-control{
  top:40%;
}
.barryxtra.news .carousel-control img{
  width:30px;
}
.barryxtra.news .carousel-control.left{
  left:-35px;
}
.barryxtra.news .carousel-control.right{
  right:-30px;
}

/* ######### MOBILE RESPONSIVENESS ######### */

@media screen and (min-width: 280px) {
  
}

@media screen and (min-width: 320px) {
   
}

@media (max-width: 320px){  
  .submitsct .btn {padding:8px 30px;}

}

@media (min-width: 375px){
  
}

@media (min-width: 414px){
  
}

@media (min-width: 480px){
  
}

@media (max-width: 480px){
  
}

@media only screen and (max-width: 767px) and (min-width: 320px){ /*This is the size before tablet*/
   
}

@media (min-width: 767px) {

}

@media (min-width: 540px) and (max-width: 720px) {

  /* Prize capsules without h4 */
  .prizecaps .rdate{width:20%;}
  .prizecaps .prodthumb{width:20%;}
  .prizecaps .prodname{width:25%;}
  .prizecaps .actn{width:35%;}
  .prizecaps .rdate{font-size:12px;border-radius: 20px 0 0 20px;}
  .prizecaps .actn{padding:0 10px;}
  /* 05032026 */
  .prizecaps .actn .stat.delivered a{padding:5px;}
  .prizecaps .actn .stat.delivered img{width:18px;}
}

@media (min-width:720px){
  .swiper-slide-next{opacity:1;}
  .sidecoverleft, .sidecoverright{opacity:1;}

  /* 05032026 */
  .prizecaps .actn .stat.delivered{top:0;bottom:auto;}
  .prizecaps .actn .stat.delivered a{padding:5px;border-radius:0 20px 0 10px;}
  .prizecaps .actn .stat.delivered img{width:20px;}
}

@media (min-width: 768px){
  .journey .main .panel-heading {margin-top:-80px;}
  .journey .main .panel-heading .headicn{width:auto;}
  .journey .main .panel-heading .headlbl{width:auto;}
  .journey .main .backbtn {top: 30px;left: 30px;}
  
  /* Prize capsules */
  .prizecaps .rdate{width:20%;}
  .prizecaps .prodthumb{width:20%;}
  .prizecaps .prodname{width:25%;}
  .prizecaps .actn{width:35%;}
  .prizecaps .rdate{font-size:12px;border-radius: 20px 0 0 20px;}
  .prizecaps .rdate h4{font-size:15px;}
  .prizecaps .actn{padding:0 10px;}

  .journey.mood .encase{justify-content: space-around;}
  .journey.mood .left_sct {width: 40%;}
  .journey.mood .right_sct {width: 50%;}

  .barryxtra.news .carousel-inner .item img{height:500px;}
  .barryxtra.news .carousel-caption{left:10%;right:10%;bottom:0;}
  .barryxtra.news .carousel-indicators{bottom:0;}
  .barryxtra.news .carousel-control.left{left:-55px;}
  .barryxtra.news .carousel-control.right{right:-50px;}
  
}

@media screen and (orientation:landscape){
  /* Prize capsules */
  .prizecaps .rdate{width:20%;}
  .prizecaps .prodthumb{width:20%;}
  .prizecaps .prodname{width:25%;}
  .prizecaps .actn{width:35%;}
  .prizecaps .rdate{font-size:12px;border-radius: 20px 0 0 20px;}
  .prizecaps .rdate h4{font-size:15px;}
  .prizecaps .actn{padding:0 10px;}
}

@media screen and (max-device-width: 768px) and (orientation: landscape){

  
}


@media screen and (min-device-width: 480px) and (max-device-width: 740px) and (orientation: landscape){


}

/* added by M*/
@media (max-width: 767px){

}

@media only screen and (max-width: 895px) and (min-width: 768px) {
  
}

@media only screen and (max-width: 895px) and (min-width: 320px){
  
}

@media (min-width: 896px){  /*Full navigation will be shown in this size*/
  
}

/*Desktop and laptop size*/
@media (min-width: 992px){
  .journey .left_sct {width: 40%;margin-bottom:0;}
  .journey .right_sct {width: 50%;}
  .journey.barryxtra .left_sct {width: 30%;}
  .journey.barryxtra .right_sct {width: 70%;}
  .journey .infodeets {margin: 0 20px 0 0px;}
}

@media (min-width: 1024px){
  .prizecaps .rdate h4{font-size:12px;}

  .journey.mood .encase{justify-content: center;}
  .journey.mood .left_sct {width: 35%;margin-bottom:0;}
  .journey.mood .right_sct {width: 55%;}

  .right_col .todaysmood{width:85%;}

  .swiper-slide-next{opacity:1;}
}

@media (min-width: 1180px){
  .journey .left_sct,
  .journey.mood .left_sct{width: 30%;}
  .journey.barryxtra .left_sct {width: 20%;}
  .journey.mood .right_sct {width: 50%;padding:0;}
  
  .prizecaps .rdate h4{font-size:15px;}
}

/*Landscape*/
@media screen and (max-device-width: 768px) and (orientation: landscape) { /*Ipad mini*/
  
}
/*End of Landscape*/

/* Fix for iPhone 5 */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* End of iPhone 5 */

/* iPhone 6+, 7+ and 8+ */
@media only screen 
  and (-webkit-min-device-pixel-ratio: 2) 
  and (max-device-width: 667px) 
  and (min-device-width: 375px) 
  and (orientation: landscape) { 

}
/* End of iPhone 6+, 7+ and 8+ */


/* Ipad and Ipad mini landscape only - Fix alignment of resume lesson in ipad landscape mode */
@media screen and (width: 1024px) and (orientation : landscape) {  
  
}


@media screen and (max-device-width: 768px) and (orientation: portrait) { /*Ipad mini*/
  

}

/* Fix for iPhone 5 */
@media only screen 
  and (-webkit-min-device-pixel-ratio: 2) 
  and (max-device-width: 568px) 
  and (min-device-width: 320px) 
  and (orientation: portrait) {
  
}

/* iPhone 6+, 7+ and 8+ */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 

}