/********** Global css ************/
/*:root{
    --bg-color:#eee;
}
:root[theme='dark1']{
    --bg-color:#202124;
    --text-color:#fff;
}
:root[theme='dark2']{
      --bg-color:#202020;
      --text-color:#d8d8d8;
      --border-color:#2f2f2f;
      --catalog-bg-color:#252525;
      --panel-bg-color:#3a3a3a;
      --contents-bg-color:#343232;
      --code-bg-color:#3a3a3a;
}*/

/*********** Basic css **************/
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    -webkit-tap-highlight-color:rgba(0,0,0,0); 
    -webkit-focus-ring-color:rgba(0,0,0,0);
}
html{
    -webkit-text-size-adjust:100%;
    font-size:16px;
    line-height:1.5;

}
body{
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
}

html,body{
    height:100%;
}

/*a,a:active,a:before,a:after{
    outline: none;
    -webkit-tap-highlight-color: transparent;*/
/*a[href]{
    color:#36c;
}
/*a:link{
    color:#00838f;
}
a:hover{
    color:#00838f;
}
a:active{
    color:#00838f;
}
a:visited{
    color:#00838f;
}*/
ol,ul{
    border:0;
}
li{
	list-style:none;
}

/*img{
    max-width:100%;
    border:0;
}*/

input{
    -webkit-user-modify:read-write-plaintext-only;
    -moz-user-modify:read-write-plaintext-only;
    /*box-shadow:0 0 0 1000px #fff inset !important;*/ /* input background color */
    /*transition:background-color 3000s ease-in-out 0s;*/
    /*-webkit-text-fill-color:#000 !important;*//* input text color */
    /*caret-color:#000;*/
}
button{
    background-color:transparent;
    -webkit-appearance:button;
    appearance:button;
    text-transform:none;
}
input,button{
    -webkit-user-select:none;
    -moz-user-select:none;
    -moz-user-focus:none;
    user-select:none;
    box-shadow:none;
    outline:none;
    border:0;
}
select{
   -webkit-appearance:none;
   -moz-appearance:none;
   -ms-appearance:none;
   appearance:none;
   outline:0;
   box-shadow:none;
   border:0 !important;
   background-image:none;
}

/*input[type="text"],input[type="email"],input[type="password"]{
    font-family:Source Sans Pro;
    font-size:0.875rem;
    color:#000;
}*/

input,
button,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

img,
svg,
video,
canvas,
picture,
audio,
iframe,
embed,
object {
    border:0;
    max-width:100%;
    vertical-align:middle;
}

fieldset{
    min-width:0;
}

/****************************** Basic */
/*.h{
    height:100%;
}

.bold{
    font-weight:bold;
}

.strike{
    text-decoration:line-through;
}*/

/******************************** Basic */
.absolute{
    position:absolute;
}
.relative{
    position:relative;
}
.w-full{
    width:100%;
}

.h-full{
    height:100%;
}
.pointer{
    cursor:pointer;
}

.none{
    display:none;
}

.block{
    display:block;
}

.hidden{
    visibility:hidden;
}

.show{
    visibility:visible;
}

.absolute{
    position:absolute;
}

.fixed{
    position:fixed;
}

/*.left-0p{
    left:0;
}
.left-50p{
    left:50%;
}
.left-100p{
    left:100%;
}*/

.space-pre{
    white-space:pre;
}

.opacity-0{
    opacity:0;
}
.opacity-5{
    opacity:0.5;
}

/******************************** text */
.font-bold{
    font-weight:bold;
}
.font-normal{
    font-weight:normal;
}
/*.align-left{*/
.text-left{
    text-align:left;
}
/*.align-center{*/
.text-center{
    text-align:center;
}
/*.align-right{*/
.text-right{
    text-align:right;
}
/******************************** flex */
/* Flex 布局 */
.flex {
  display: flex;
}

/* 内联 Flex 布局 */
.inline-flex {
  display: inline-flex;
}

/* 水平方向（默认） */
.flex-row {
  flex-direction: row;
}

/* 水平方向反转 */
.flex-row-reverse {
  flex-direction: row-reverse;
}

/* 垂直方向 */
.flex-col {
  flex-direction: column;
}

/* 垂直方向反转 */
.flex-col-reverse {
  flex-direction: column-reverse;
}

/* 不换行（默认） */
.flex-nowrap {
  flex-wrap: nowrap;
}

/* 自动换行 */
.flex-wrap {
  flex-wrap: wrap;
}

/* 反向换行 */
.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}

/* 靠左对齐 */
.justify-start {
  justify-content: flex-start;
}

/* 靠右对齐 */
.justify-end {
  justify-content: flex-end;
}

/* 居中对齐 */
.justify-center {
  justify-content: center;
}

/* 两端对齐 */
.justify-between {
  justify-content: space-between;
}

/* 平均分布 */
.justify-around {
  justify-content: space-around;
}

/* 均匀分布 */
.justify-evenly {
  justify-content: space-evenly;
}

/* 上对齐 */
.items-start {
  align-items: flex-start;
}

/* 下对齐 */
.items-end {
  align-items: flex-end;
}

/* 居中对齐 */
.items-center {
  align-items: center;
}

/* 基线对齐 */
.items-baseline {
  align-items: baseline;
}

/* 拉伸对齐（默认） */
.items-stretch {
  align-items: stretch;
}

/* flex-grow: 1 —— 允许该元素在可用空间中按比例扩展。
flex-shrink: 1 —— 允许该元素在空间不足时按比例收缩。
flex-basis: 0%  该元素的初始大小 */

.flex-1{
    flex:1;
}
.flex-2{
    flex:2;
}
.flex-3{
    flex:3;
}
.flex-4{
    flex:4;
}

/* 不扩展（默认） */
.flex-grow-0 {
  flex-grow: 0;
}

/* 扩展 */
.flex-grow {
  flex-grow: 1;
}

/* 不缩小 */
.flex-shrink-0 {
  flex-shrink: 0;
}

/* 缩小（默认） */
.flex-shrink {
  flex-shrink: 1;
}

/* 自定义基础大小 */
.basis-auto {
  flex-basis: auto;
}

.basis-1 {
  flex-basis: 0.25rem; /* 4px */
}

.basis-2 {
  flex-basis: 0.5rem; /* 8px */
}

/* 水平和垂直间距 */
.gap-0 {
  gap: 0px;
}

.gap-1{
    gap: 0.25rem; /* 4px */
}
.gap-2{
    gap:0.5rem;
}
.gap-3{
    gap:0.75rem;
}
.gap-4{
    gap:1rem;
}

/******************************* list */

.ol{
    list-style:decimal;
}

/*.ol:before{
    content:attr(ol);
}*/

/************** Fontello *****************/

@font-face{
    font-family:'icons';
    src:url('http://192.168.50.5/web2/public/fontello/font/icons.eot?95912416');
    src:url('http://192.168.50.5/web2/public/fontello/font/icons.eot?95912416#iefix')format('embedded-opentype'),
        url('http://192.168.50.5/web2/public/fontello/font/icons.woff?95912416')format('woff'),
    url('http://192.168.50.5/web2/public/fontello/font/icons.ttf?95912416')format('truetype'),
        url('http://192.168.50.5/web2/public/fontello/font/icons.svg?95912416#global')format('svg');
    font-weight:normal;
    font-style:normal;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
    margin:0;
}

.animate-spin:before{
    -moz-animation: spin 2s infinite linear;
    -o-animation: spin 2s infinite linear;
    -webkit-animation: spin 2s infinite linear;
    animation: spin 2s infinite linear;
    display: inline-block;
}

@keyframes spin{
    0%{
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%{
        -moz-transform: rotate(359deg);
        -o-transform: rotate(359deg);
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

@keyframes oo-ui-pendingElement-stripes{
    0%{
        background-position:-1.42857143em 0;
    }
    100%{
        background-position:0 0;
    }
}





/******** overlay ********/
.overlay{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:2000;
}





/****** Utils confirm dialog ******/
#confirmOverlay {
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:2000;
  background-color: rgba(0, 0, 0, 0.3);
  /*opacity:0;*/
}

#confirmBox {
  /*display: none;*/
  position: fixed;
  /*top: -220px;
  top:50%;*/
  left: 50%;
  /*transform: translateX(-50%);
  transform: translate(-50%, -50%) translateY(-50%);*/
  width: 300px;
  /*height: 200px;*/
  background-color:#aaa;
  border-radius:.25rem;
  padding:1rem;
  box-shadow:0px 0px 1rem rgba(0, 0, 0, 0.5);
  z-index:2001;
  opacity:0;
  color:#222;
}
#confirmBox p{
    padding:1rem 0;
}

#confirmButtons{
    margin-top:1rem;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}
#confirmButtons .button{
    display:inline-block;
    text-decoration:none;
    padding:.5rem 1rem;
    /*white-space:nowrap;*/
    background-color:#ccc;
    border-radius:.25rem;
    font-size:.875rem;
    min-width:4rem;
    text-align:center;
    cursor:pointer;
}
#confirmButtons .button:active{
    -moz-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
    -webkit-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
    box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
    position: relative;
    top: 1px;
}
/*#confirmButtons .No{
    color:#000;
    margin-right:1rem;
}
#confirmButtons .Yes{
    color:#ccc;
    background-color:#2a4b8d;
    background-color:#4d6ca9;
}
#confirmButtons .OK{
    background-color:#4d6ca9;
}*/

#confirmButtons .button:nth-child(1){
    color:#000;
}
#confirmButtons .button:nth-child(2){
    color:#eee;
    background-color:#4d6ca9;
}

:root[app-theme='light']{
    #confirmBox{
        background-color:#aaa;
        color:#222;
    }
}
:root[app-theme='dark']{
    #confirmBox{
        background-color:#222;
        color:#ccc;
    }
}

/*#confirmBox*/
/*.showCenter {
  animation: centerOverlay 0.2s forwards;
}
@keyframes  centerOverlay{
  to {
    opacity: 1;
  }
}*/
.top{
    /*top: -320px;*/
    top:-100%;
    transform: translateX(-50%);
    animation: slideTop 0.15s forwards;
}
@keyframes slideTop{
    to{
        top: 0;
        opacity: 1;
    }
}
.center{
    top:50%;
    /*display: block !important;*/
    transform: translate(-50%, -50%) translateY(-50%);
    animation: slideInFade 0.2s forwards;
}

@keyframes slideInFade{
    to{
        top:50%;
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

/* Product card (article + write preview shared) */
.write-product-card,
.article-product-card{
    display:flex;
    gap:14px;
    border:1px solid var(--m-border-light, #d9e0ea);
    border-radius:6px;
    padding:1rem;
    background:var(--f-white, #fff);
    margin:8px 0;
}
:root[app-theme='dark'] .write-product-card,
:root[app-theme='dark'] .article-product-card{
    border-color:#2f3847;
    background:var(--f-black-3, #333333);
}
.write-product-card-media,
.article-product-card-media{
    width:160px;
    min-width:160px;
    height:160px;
    border-radius:8px;
    overflow:hidden;
    background:var(--m-border-light, #f2f4f7);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--m-text-muted, #667085);
    font-size:12px;
}
:root[app-theme='dark'] .write-product-card-media,
:root[app-theme='dark'] .article-product-card-media{
    background:#252c38;
    color:#98a2b3;
}
.write-product-card-media img,
.article-product-card-media img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.write-product-card-body,
.article-product-card-body{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:8px;
}
.write-product-card-title,
.article-product-card-title{
    font-size:16px;
    line-height:1.35;
    font-weight:700;
    color:var(--m-text-primary, #101828);
}
.write-product-card-summary,
.article-product-card-summary{
    font-size:14px;
    line-height:1.5;
    color:var(--m-text-secondary, #344054);
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:2;
    line-clamp:2;
    -webkit-box-orient:vertical;
}
.write-product-card-price,
.article-product-card-price{
    font-size:18px;
    font-weight:700;
    color:#d92d20;
}
.write-product-card-buy,
.article-product-card-buy{
    margin-top:auto;
    align-self:flex-start;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 14px;
    border-radius:6px;
    background:var(--e-primary-color, #117e96);
    color:#fff !important;
    text-decoration:none !important;
    font-size:13px;
    font-weight:600;
    line-height:1.2;
}
.write-product-card-buy:hover,
.article-product-card-buy:hover{
    background:#0f6f84;
}
:root[app-theme='dark'] .write-product-card-title,
:root[app-theme='dark'] .article-product-card-title{
    color:#f2f4f7;
}
:root[app-theme='dark'] .write-product-card-summary,
:root[app-theme='dark'] .article-product-card-summary{
    color:#cbd5e1;
}
@media (max-width:640px){
    .write-product-card,
    .article-product-card{
        flex-direction:column;
    }
    .write-product-card-media,
    .article-product-card-media{
        width:100%;
        min-width:0;
        height:200px;
    }
}