[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;
}

.figure:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  margin-left: 40px;
  transform: translateY(-100%);
  border: 8px solid white;
  border-color: transparent transparent white transparent;
}


/* Animation of Reaction list */
.li-enter-from {
  opacity   : .1;
  transform : translateY(20px);
}

.li-enter-active {
  transition-duration: 200ms;
  transition-timing-function: ease-out;
  transition-property: transform;
}

.li-enter-to {
  opacity   : 1;
  transform : translateY(0);
}

.li-leave-from {
  opacity: 1;
  transform: translateY(0);
}

.li-leave-active {
  transition-duration: 200ms;
  transition-timing-function: ease-in;
}

.li-leave-to {
  opacity: 0;
  transform: translateY(0);
}


.lig-enter-from {
  transform: translateY(0);
}

.lig-enter-active {
  transition-duration: 350ms;
}

.lig-enter-to {
  transform: translateY(0);
}

.lig-leave-from {
  transform: translateY(0);
}

.lig-leave-active {
  transition-duration: 150ms;
}

.lig-leave-to {
  transform: translateY(0);
}

.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;
}
.list-star {
    list-style-image    : url('/theme/newsfeed/assets/image/icon/benefit_list.svg');
    padding-inline-start: 1rem;
}

.list-warning-red {
    list-style-image    : url("/assets/images/icon/danger.svg");
    padding-inline-start: 1rem;
}
/* page career */
@keyframes bouncebyy {
    0%, 100% {
        transform: translateX(-25%);
        animation-timing-function: cubic-bezier(0.8,0,1,1);
    }
    50% {
        transform: none;
        animation-timing-function: cubic-bezier(0,0,0.2,1);
    }
}

/* home page */
section {
    transform   : translateY(10px);
    opacity     : 0;
    transition  : 0.5s transform ease, 0.5s opacity ease;
}
section.active {
    transform   : translateY(0);
    opacity     : 1;
}
.router-link-active li {
    color: #164A9F;
    font-weight:bold;
}

/* Please add more sepcific element */

.router-link-active .s-trasation {
    width: 100%;
    background-color: #164A9F;
}
#subRWrapper .router-link-active.active {
    color: rgb(22, 74, 159);
    text-decoration: underline;
    text-underline-offset: 4px;
}
/* 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;
  }

  .circle-bg {
    fill: none;
    stroke: #eee;
    stroke-width: 3.0;
  }
  
  .circle {
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    animation: progress .8s ease-out forwards;
  }
  
  @keyframes progress {
    0% {
      /* stroke-dasharray:0 100; */
      stroke-dasharray: 100 0;
    }
  }