/* common reset */
a{text-decoration: none;}
h1, h2, h3, h4, h5, h6{overflow-wrap: break-word;}

/* reset breadcrumb */
.breadcrumb-item a{text-decoration: none;}

/* reset pagination */
ul.pagination{margin-top:1em;}

/* fix ckeditor width not 100% */
.django-ckeditor-widget{width: 100%;}

/* space ctrl */
.break-hr-xs{border:0px;margin:2px;padding:0;clear:both;overflow:hidden; width:100%;height:auto;}
.break-hr-sm{border:0px;margin:5px;padding:0;clear:both;overflow:hidden; width:100%;height:auto;}
.break-hr-md, .break-hr{border:0px;margin:10px;padding:0;clear:both;overflow:hidden; width:100%;height:auto;}
.break-hr-lg{border:0px;margin:15px;padding:0;clear:both;overflow:hidden; width:100%;height:auto;}
.break-hr-xl{border:0px;margin:25px;padding:0;clear:both;overflow:hidden; width:100%;height:auto;}
.dashed{border-bottom:1px dashed #cccccc;margin-bottom: 5px 0;padding:5px;}

/* text */
.title-dashed-border{border-bottom:1px dashed #cccccc;padding-bottom: 10px;}
.text-left{text-align: left !important;}
.text-right{text-align: right !important;}
.text-block{font-size: 1em; padding: 6px 12px; margin-bottom: 0; display: inline-block; text-align: center; white-space: nowrap; vertical-align: middle; background-image: none; border: 1px solid transparent;}
.text-block-inline{font-size: 1em; padding: 6px 12px;margin-bottom: 0;display: inline;text-align: left;word-wrap: break-word;white-space: normal;word-break: break-all;vertical-align: middle;background-image: none;border: 1px solid transparent;}
.text-through{text-decoration:line-through}
.text-block-20{width:20px;display: inline-block}
.text-block-50{width:50px;display: inline-block}
.text-block-80{width:50px;display: inline-block}
.wrap-cn{white-space:pre-wrap;}
.wrap-en-word{word-wrap:break-word;}
.wrap-en-all{word-wrap:break-word;}
.text-12{font-size:12px;}
.text-10{font-size:10px;}
.text-14{font-size:14px;}
.text-16{font-size:16px;}
.text-18{font-size:18px;}
.text-20{font-size:20px;}
.text-22{font-size:22px;}
.line-break{word-break: break-word;word-wrap: break-word;white-space: -moz-pre-wrap;white-space: -hp-pre-wrap;white-space: -o-pre-wrap;white-space: -pre-wrap;white-space: pre;white-space: pre-wrap;white-space: pre-line;}
.pointer-events-none{pointer-events:none;}
.inline-block{display:inline-block}
.text-weight-bold{font-weight: bold}
.text-uppercase{text-transform: uppercase;}
.text-lowercase{text-transform: lowercase;}
.text-capitalize{text-transform: capitalize;}

/* color */
.color-lightBlue{color:#23689b}
.color-green{color:hsl(170, 100%, 24%)}
.color-lightGreen{color:#71EFA3;}
.color-orange{color: #d2691e;}
.color-white{color:#ffffff;}
.color-grey{color:#787A91;}
.color-red{color: #d73a49;}
.color-black{color:#000000;}

/* list */
ul.list-in-table{margin:0; padding: 0; list-style:none}
li.list-in-table-item{display: inline; list-style-type: none; padding-right:10px; float: left; padding-bottom: 5px;}
ul.list-no-style{list-style: none;margin:0;padding:0}
li.list-no-style-item{list-style: none; clear:both;overflow: hidden; height: auto; margin:0;padding:0}
ul.ul-block{border:0; padding:5px; margin: 0px;}
li.li-block{padding: 5px 0;border:0;}
ul.block-list{list-style-type:none;padding:3px 0; margin:0px;display: inline-block}
li.block-list-item{border:0;display: inline; list-style-type: none; padding:0px 3px; float: left; margin:0px;}
ul.inline-list{list-style-type:none;padding:0px; margin:0px;}
li.inline-list-item{display: inline; list-style-type: none; padding:0px; float: left;}
li.inline-list-item:not(:last-child) { margin-right: 0.5rem; }
ul.inline-list-sm{list-style-type:none;padding:0px; margin:0px;}
li.inline-list-sm-item{list-style-type: none; padding:0px 5px; float: left; margin:0px;}
li.borderless{ border: 0 none; }


/* button */
.confirmBtn, .confirmDeleteBtn{color:white}
.btn-xs{padding: 1px 5px !important;font-size: 12px !important;line-height: 1.5 !important;border-radius: 3px !important;}
.btn-link-purely {
  background: none !important;
  border: none;
  padding: 0!important;
  text-decoration: none;
  cursor: pointer;
}
/* link */
.btn-dialog{}
.btn-dialog-refresh{}
.btn-iframe-tab{}
.external-link{margin-right: 18px;}
.btn-dialog-icon{margin-right: 18px;}
.btn-dialog-refresh-icon{margin-right: 18px;}
.btn-iframe-tab-icon{margin-right: 18px;}
.external-link-icon:after {font-family:"Font Awesome\ 5 Free" ;content: "\f35d";font-weight:400;font-size: 10px;position: absolute;z-index: 1;margin-left:5px;}
.btn-dialog-icon:after{ font-family: "Font Awesome\ 5 Free"; content: "\f2d0";font-weight:400;font-size: 10px;position: absolute;z-index: 1;margin-left:5px;}
.btn-iframe-tab-icon:after{font-family: "Font Awesome\ 5 Free"; content: "\f0c9";font-weight:400;font-size: 10px;position: absolute;z-index: 1;margin-left:5px;}

/* code */
.code-block{
  background: black;
  word-wrap: break-word;
  box-decoration-break: clone;
  padding: .3rem;
  border-radius: .2rem;
  color: lightyellow;
  font-size: 12px;
  margin:5px 0;
}
.code-inline, .code-inline-copy{display:inline-block;padding:7px;margin:2px 5px;background-color: black; color:green; border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 1px solid #555555;font:12px Monaco,Consolas,"Andale  Mono","DejaVu Sans Mono",monospace;}


/* for ui plugin */
.html_col{border:0;}
.html_col p:first-child{border:0;margin:0px;padding:0px;}

/* django form errors */
.errorlist{color:orange; list-style: none; display: flex;
  flex-wrap: wrap;}

/* tables */
table.table-simple {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  border-top:2px solid #808080;
  border-bottom:2px solid #808080;
  margin:8px auto;
}
.table-simple thead th{
    padding: 5px;
    text-align:center;
    vertical-align:center;
    border-bottom:1px solid #808080;
    font-weight: bold;
    font-size: 16px;
}
.table-simple tbody th{
    padding: 5px 10px;
    text-align:center;
    vertical-align:center;
    font-weight: bold;
    font-size: 14px;
}
.table-simple tbody td{
    padding: 5px 10px;
    text-align:center;
    vertical-align:center;
    font-size: 14px;
}

.break-word {
    /* These are technically the same, but use both */
    overflow-wrap: break-word;
    word-wrap: break-word;

    -ms-word-break: break-all;
    /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break: break-all;
    /* Instead use this non-standard one: */
    word-break: break-word;

    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.navbar-clover {
    background-color: #0b1f2a;
}


.sub-link { font-size: 100%; }

.sup-link { font-size: 90%; font-weight: bold;}

.w-responsive {
  width: 100%;
}
@media (min-width: 768px) {
  /* https://getbootstrap.com/docs/5.3/layout/breakpoints/ */
  /* sm=576, md=768, lg=992, xl=1200, xxl=1400 */
  .w-responsive {
    width: 50%;
  }
  clover-site-name {
      display: none;
  }
}
@media (min-width: 992px) {
  /* https://getbootstrap.com/docs/5.3/layout/breakpoints/ */
  /* sm=576, md=768, lg=992, xl=1200, xxl=1400 */
  .w-responsive {
    width: 25%;
  }
}

@media only screen and (max-width: 1200px) {
  #clover-site-name {
      display: none;
  }
}