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