[v-cloak] {
    display: none;
}

.loader {
    margin-top  : -1px;
    height      : 1px;
}

.break-word {
    word-break: break-word;
}

/* user span as text area */
/* Set placeholder */
.textarea[contenteditable][placeholder='Write a comment...']:empty::before {
    content: "Write a comment...";
    color: gray;
}
.textarea-createpost[contenteditable][placeholder='Write your thought...']:empty::before {
    content: "Write your thought...";
    color: gray;
}
.textarea-createpoll[contenteditable][placeholder='Write your question...']:empty::before {
    content: "Write your question...";
    color: gray;
}

/* Might use in head nav */
@font-face {
    font-family: 'latoregular';
    src: url('/assets/font/lato-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
.latoregular {
    font-family: 'latoregular';
}
@font-face {
    font-family: 'Qanelas';
    src: url('/assets/font/lato-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
.Qanelas {
    font-family: 'Qanelas';
}

.modal-active {
    overflow: hidden;
    padding-right: var(--scroll-wid);
}

:root {
    --scroll-wid: 0px;
}
.text-red-gonoka{
    color: #EF4849;
}
.text-blue-gonoka{
    color: #164A9F;
    ;
}
.bg-blue-gonoka{
    background-color: #164A9F;
    ;
}
.circle .cropper-container .cropper-crop-box .cropper-view-box {
    border-radius: 50%;
  }
:root {
    --nav-height: 64px;
    --logo-w    :120px;
    --logo-h    :18px;
}
/*md*/
@media screen and (min-width: 768px) {
    :root {
        --nav-height: 80px;
        --logo-w    :154px;
        --logo-h    :24px;
    }
}
nav {
    height      : var(--nav-height);
    transition  : height 0.2s ease-in;
}
nav .nav-item {
    position: relative;
}
nav .nav-item::after {
    content     : '';
    position    : absolute;
    bottom      : 0;
    left        : 0;
    width       : 0;
    height      : 2px;
    transition  : width .1s ease-in;
}
nav .nav-item.active::after,
nav .nav-item:hover::after {
    width       : 100%;
}

/* Humberger button */
nav #hub-btn:focus-within img {
    display: none;
}
nav #hub-btn:focus-within + #close-btn {
    display: flex;
}

/* Nested slide  */
.group-foo:focus-within .group-foo-focus-within\:translate-x-0{
    --tw-translate-x: 0px;
    transform: var(--tw-transform);
}

.group-foo:focus-within .group-foo-focus-within\:opacity-1{
    opacity: 1;
}

.list-enter-active,
.list-leave-active {
  transition: all 0.45s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateY(20px);
}



.gray-scroll-bar::-webkit-scrollbar
{
	width								: 6px;
	background-color					: #F5F5F5;
}

.gray-scroll-bar::-webkit-scrollbar-thumb
{
	border-radius						: 10px;
	background-image					: -webkit-gradient(linear,
											left bottom,
											left top,
											color-stop(0.86, #bfbfbf));
}

.blue-scroll-bar::-webkit-scrollbar
{
	width								: 6px;
	background-color					: #F5F5F5;
}

.blue-scroll-bar::-webkit-scrollbar-thumb
{
	border-radius						: 10px;
	background-image					: -webkit-gradient(linear,
											left bottom,
											left top,
											color-stop(0.86, #164A9F));
}
.darkgray-scroll-bar::-webkit-scrollbar{
	width 				   				: 8px;
	padding 							: 4px;
	border                              : (0px, 1px , 0px , 1px);
	background-color					: #F5F5F5;
}
.darkgray-scroll-bar::-webkit-scrollbar-thumb{
	border-radius						: 4px ;
	background-color 					:#2a2f3977;
	opacity								: 0.5;
	background-image					: -webkit-gradient(linear,
											left bottom,
											left top,
											);
	
}
.darkgray-scroll-bar::-webkit-scrollbar-track {
	background: #f0f0f0;
	width: 16px;
	
}



span[contenteditable][placeholder] {
  display: inline-block;
}

span[contenteditable][placeholder]:empty::before {
    color: #626771;
    opacity: .5;
    display: block;
}

span[contenteditable][placeholder]:empty::before {
  content: attr(placeholder) " ";
}

input:checked ~ .dot {
    transform: translateX(100%);
    background-color: white;
}
input:checked ~ .line {
    border-color: #164A9F;
    background-color: #164A9F;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.bounce-enter-active {
  animation: bounce-in 0.5s;
}

.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}

@keyframes bounce-in {
  0% {
      transform: scale(0);
  }

  50% {
      transform: scale(1.25);
  }

  100% {
      transform: scale(1);
  }
}

.bounce-in-enter-active {
  animation: bounce-in-full 0.4s;
}

.bounce-in-leave-active {
  animation: bounce-in-full 0.4s reverse;
}


@keyframes bounce-in-full {
  0% {
      transform: scaleY(0);
  }

  100% {
      transform: scaleY(1);
  }
}

.form-invalid .input-invalid {
    border: 1px solid red;
}

.form-invalid .label-invalid {
    color: red;
}

.form-invalid .label-invalid::after {
    content: ' *';
}

#modalPostReport {
    transition: opacity 0.25s ease;
}

form.form-cus-radio label {
    display: block;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


/* Hide the browser's default checkbox */

form.form-cus-radio label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}


/* Create a custom checkbox */

form.form-cus-radio label .checkmark {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background-color: #E6E6E6;
}


/* When the checkbox is checked, add a blue background */

form.form-cus-radio label input:checked~.checkmark {
    background-color: #164A9F;
}


/* Create the checkmark/indicator (hidden when not checked) */

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}


/* Show the checkmark when checked */

form.form-cus-radio label input:checked~.checkmark:after {
    display: block;
}


/* Style the checkmark/indicator */

form.form-cus-radio label input~.checkmark:after {
    left: 7px;
    top: 4px;
    width: 6px;
    height: 9px;
    border: solid white;
    border-width: 0px 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
/* for reaction detail modal horizontal scroll */
#reactionHeadModal {
    overflow-x  : scroll;
    overflow-y  : hidden;
    white-space : nowrap;
  }
  #reactionHeadModal .scroll-container {
    padding     : 30px 30px 8px;
    white-space : nowrap;
  }
  #reactionHeadModal .scroll-container .scroll-item {
    border-radius   : 4px;
    cursor          : pointer;
    display         : inline-flex;
    flex-direction  : column;
    height          : 80px;
    margin-right    : 12px;
    min-width       : 64px;
    position        : relative;
    padding         : 0 23px;
    white-space     : nowrap;
  }
  #reactionHeadModal .scroll-container .scroll-item:last-child{
    margin-right: 30px;
  }
  #reactionHeadModal .scroll-container .scroll-item * {
    margin-left: auto;
    margin-right: auto;
  }

.nf-type-news .nf-type-news-content .nf-news-content-txt ul{
  margin-left: 18px;
}

.slide-next-enter-from {
    opacity: 0.5;
    right: 100%
}
.slide-next-enter-active,
.slide-next-leave-active {
    transition: all ease-in-out 0.25s;
}
.slide-next-enter-to {
    right: 0px;
    opacity: 1;
}
.slide-next-leave-from {
    opacity: 1;
    left: 0px;
}

.slide-next-leave-to {
    opacity: 0.5;
    left: 100%;
}


/*  */


.slide-prev-enter-from {
    opacity: 0.5;
    left: 100%
}
.slide-prev-enter-active,
.slide-prev-leave-active {
    transition: all ease-in-out 0.25s;
}
.slide-prev-enter-to {
    left: 0px;
    opacity: 1;
}
.slide-prev-leave-from {
    opacity: 1;
    right: 0px;
}

.slide-prev-leave-to {
    opacity: 0.5;
    right: 100%;
}


.slideright-enter-active {
    transition: all .15s ease-out;
}
  .slideright-leave-active {
    transition: all .15s ease-in;
}
.slideright-enter-from,
.slideright-leave-to {
    transform: translateX(100%);
    opacity: 0;
}

.text-caption[contenteditable][placeholder]:empty::before {
    content: attr(placeholder) " ";
}

.text-caption[contenteditable][placeholder] {
    display: inline-block;
}

.text-caption[contenteditable][placeholder]:empty::before {
    color: gray;
    display: block;
}
.profile-nav > .router-link-active.active {
    color       : rgb(var(--color-primary));
    border-color: rgb(var(--color-primary));
    font-weight : bold;
}

/* .grow-wrap { */
    /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
    /* display: grid; */
/* } */

.grow-wrap::after {
    /* Note the weird space! Needed to preventy jumpy behavior */
    content: attr(data-replicated-value) " ";

    /* This is how textarea text behaves */
    white-space: pre-wrap;

    /* Hidden from view, clicks, and screen readers */
    visibility: hidden;
}

.grow-wrap>textarea {
    /* You could leave this, but after a user resizes, then it ruins the auto sizing */
    resize: none;

    /* Firefox shows scrollbar on growth, you can hide like this. */
    overflow: hidden;
}

.grow-wrap>textarea,
.grow-wrap::after {
    /* Place on top of each other */
    grid-area: 1 / 1 / 2 / 2;
    word-break:break-all;
}

.peer:last-child > .peer-last\:border-none {
    border: none;
}
.vjs-big-play-button {
    background-color: rgba(0, 0, 0, 0.7) !important; /* Blue with transparency */
    border: 1px solid #191a20 !important; /* White border */
    opacity: 80% !important;
    border-radius: 50% !important; /* Circular shape */
    width: 80px !important; /* Width of the button */
    height: 80px !important; /* Height of the button */
    line-height: 80px !important; /* Center the play icon vertically */
    font-size: 40px !important; /* Size of the play icon */
    color: #ffffff !important; /* Color of the play icon */
}

/* Change the play icon color */
.vjs-big-play-button .vjs-icon-play {
    font-size: 40px; /* Make the play icon larger */
}

/* Hover effect */
.vjs-big-play-button:hover {
    transform: scale(1.1); /* Slightly larger on hover */
    transition: background-color 0.3s, transform 0.3s; /* Smooth transition */
}