.none{
  display:none;
}
.wrapper{
  background:#f1f1f1;
}
.pagination {
  justify-content: center;
}
.input-group>.form-control{
  height: inherit;
}


.form-group{
  margin-bottom:1rem;
}

#font-list .panel-footer{
  height:93px;
}

.message.tweet{
  padding: 15px 0 15px 1em;
  width: 100%;
  background-color: #31B0D5;
  color: #ffffff;
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  opacity: 0.9;
  z-index:10000;
}


#svg-area svg, 
.png-section img{
  background-color: #fff;
  background-image: linear-gradient(45deg, #efefef 25%, transparent 25%, transparent 75%, #efefef 75%, #efefef), linear-gradient(45deg, #efefef 25%, transparent 25%, transparent 75%, #efefef 75%, #efefef);
  background-image: -webkit-linear-gradient(45deg, #efefef 25%, transparent 25%, transparent 75%, #efefef 75%, #efefef), linear-gradient(45deg, #efefef 25%, transparent 25%, transparent 75%, #efefef 75%, #efefef);
  background-position: 0 0, 25px 25px;
  background-size: 10px 10px;
  -webkit-background-size: 10px 10px;
}

#svg-area  {
  margin:0 auto;
}
.svg-section svg {
  width: 100%;
  height:100%;
}

.sp-replacer{
    width:100%;
    border: solid 1px #efefef;
}
.sp-dd{
    float:right;
}


@media (max-width: 440px){
  .sp-container{
      height:440px;
  }
  .sp-picker-container, .sp-palette-container{
      float:none;
  }
}

.sp-container button{
  background-image:none;
  padding:5px 18px;
}

.sp-cancel{
  color:#000 !important;
  padding:5px 3px;
}
.sp-input{
  background:#fff;
}

#color-scheme .sp-replacer {
  padding:8px;
}

.tweet-frame{
  padding-bottom:35px;
}
.post-image {
  width:100%;
  padding:0 30px 15px;
}
.post-image img{
  max-width:600px;
  width:100%;
}

.post-image-b img{
  max-width:300px;
  width:50%;
}


.post-profile{
  padding:15px 30px;
}
.post-profile .user-name{
  padding-left:30px;
}
.post-profile .user-name a{
  color:#000;
  text-decoration: none;
}
.post-profile .user-name a:hover{
  color:#999;
}
.post-comment{
  padding:0px 30px;
  font-size:1.2rem;
}
.post-footer{
  padding:15px 30px;
  border-top:1px solid #ccc;
}

.fav-link i:hover,.fav-link i:focus{
  color:#EE93B0;
}


.rep-link i:hover,.fav-link i:focus{
  color:#93eee9;
}

.retweet-link i:hover,.fav-link i:focus{
  color:#7e9225;
}

.code-area{
  color:white;
  background-color:#111;
  padding:15px;
}

.nav-tabs .nav-link{
  font-size:0.9rem;
}


#form-area .btn{
  border-radius: 0;
  box-shadow:initial;
  -webkit-box-shadow:initial;
  border:1px solid #ccc;
}

#form-area .btn:hover{
  border-radius: 0;
  box-shadow:initial;
  -webkit-box-shadow:initial;
  border:1px solid #ccc;
}

.png-section {
  max-width: 100%;
  max-height: 400px;
  overflow: auto;
}

.btn-dark.active{
  border:2px solid #0000ff;
}

#twitter-iframe{
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	border:none;
}



.form-textarea,#tweet-text {
  -webkit-transition: height 0.2s;
  -moz-transition: height 0.2s;
  transition: height 0.2s;
}

#tweet-text,#text-count-area{
  max-width:500px;
  width:100%;
  margin:0 auto;
}

.message.tweet{
  padding: 15px 0 15px 1em;
  width: 100%;
  background-color: #31B0D5;
  color: #ffffff;
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  opacity: 0.9;
  z-index:10000;
}

.twitter-card .card-body{
  padding:initial;
}

.post-profile{
  padding:15px 30px;
}
.post-profile .user-name{
  padding-left:30px;
}
.post-profile .user-name a{
  color:#000;
  text-decoration: none;
}
.post-profile .user-name a:hover{
  color:#999;
}

.img-circle {
  border-radius: 50%;
}

.code-area{
  color:white;
  background-color:#111;
  padding:15px;
}

.side-image img{
  width:100%;
}
.flash_message{
  position: absolute;
  top: 0;
  left:0;
  padding: 25px 0 25px 1em;
  margin-top: -100px;
  width: 100%;
  background-color: #6ab08d;
  color: #ffffff;
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  opacity: 0.9;
  z-index:10000;
}

footer{
  background:#262626;
  color:#fff;
  padding:15px 0 0;
  margin-top:4rem;
}

.about-picput{
  font-size:1.5rem;
  color:#fff;
}

.about-picput span{
  margin-left:0.2rem;
  font-weight:600;
  vertical-align: middle;
}

.about a{
  color:white;
}
.insta_btn {
  display: inline-block;
  text-align: center;
  color: #2e6ca5;
  font-size: 16px;
  text-decoration: none;
  width: 25px;
  height: 25px;  
}

.insta_btn .insta {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;
  vertical-align: middle;
  background: -webkit-linear-gradient(
135deg
, #427eff 0%, #f13f79 70%) no-repeat;
  background: linear-gradient(
135deg
, #427eff 0%, #f13f79 70%) no-repeat;
  overflow: hidden;
  border-radius: 13px;
}



.info-section h1{
  margin-top:2rem;
  color:262626;
  font-size:2rem;
  font-weight:600;
}
.info-section h2{
  font-size:1.5rem;
  font-weight:600;
}
.info-section h3{
  font-size:1.2rem;
  font-weight:600;
}

#about-section{
}

#about-section h1{
  margin: 10rem 0 !important;
}

.cke_textarea_inline{
  padding: .375rem .75rem;
  border: 1px solid #bdbdbd;
}

#editor-container {
  height: 375px;
}

.ql-color .ql-picker-options [data-value=color-picker]:before {
  content: 'Pick Color';
}

.ql-color .ql-picker-options [data-value=color-picker] {
  background: none !important;
  width: 100% !important;
  height: 25px !important;
  text-align: center;
  color: blue;
  text-decoration: underline;
}

.ck.ck-editor__editable_inline{
  border: 1px solid #bdbdbd !important;
  border-radius: .25rem !important;
}

.ck.ck-reset.ck-list{
  overflow-y: auto;
  height: 320px;  
}
#ckedit-area{
  padding:0.75rem !important;
  margin-bottom:2rem;
}

.svg-characters pre{
  padding:1rem;
  color: #353535;
  background: hsla(0,0%,78%,.3);
}

#form-area code{
  color:#111;
}

.modaal-container{
  max-width:1250px !important;
}

.title-area h1{
  padding:0.5rem 0.5rem 1rem;
  font-size: 20px;
  font-weight:bold;
  text-align: center;
}


.description-area{
  padding:10px;
  border-radius: 3px;
  font-size:1rem;
  background-color: #fbfbfb;
}

.change-color-section{
  width:50px;
}

.change-color-section .sp-replacer{
  padding: 0.5rem 0.3rem;
  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 20%), 0 2px 10px 0 rgb(0 0 0 / 10%);
  border: none;
  border-radius: 0.2rem;
  background: #222;
  color: #fff;
}

.change-color-section .sp-replacer:hover{
  color: #fff;
  border-color:none;
}

.dropdown-menu{
  min-width: 15rem;
  max-width: 50rem;
}

.select-box-dropdown{
  min-width: 25rem;
  max-width: 50rem;
}

@media (max-width: 440px){
  .select-box-dropdown{
    min-width: 18rem;
  }
}

#form-area .form-control{
  margin-bottom:2rem;
}

.ck.ck-editor__editable_inline>:last-child{
  margin-bottom:0 !important;
}

.ck.ck-editor__editable_inline>:first-child{
  margin-top:0 !important;
}

.html-label,.css-label,.js-label{
  padding:0.1em 1.5em;
  border-top-left-radius:.2rem;
  border-top-right-radius:.2rem;
  color:#ffffff;
  font-size:0.8em;
}


.html-label{
  background-color:#DD4C30;
}


.css-label{
  background-color:#3C97CB;
}

.js-label{
  background-color:#F5D13A;
}


#html-css-section pre[class*="language-"],
#html-css-edit pre[class*="language-"]{
  margin-top:0 !important;
  border-radius: 0;
}

#iframe-section{

  overflow:auto;
  padding:1rem;
  background-color:#ccc;
}

#iframe-html {
  display:block;
  margin:0 auto;
  transform-origin: 0 0;
  width:100%;
  height:100%;
}


.ck-editor__editable {
  padding:0.5rem !important;
}

.ck.ck-editor p,
.ck.ck-editor h1,
.ck.ck-editor h2,
.ck.ck-editor h3
{
  margin:0.2rem;
  padding:0.5rem;
  border:1px dotted #ccc;
  color:#000;
}

.ck-content pre,
.ck-content code{
  color:#000 !important;
  text-shadow:none !important;
}

nav.tool-bar .container{
  padding-left:0.2rem;
  padding-right:0.2rem;
}

@media (min-width: 1200px){
  .h1, h1 {
    font-size: 1.7rem;
  }

  .h2, h2 {
    font-size: 1.5rem;
  }
}

#html-image{
  width:100%;
}

.ck-heading-dropdown{
  width:90px !important;
}


.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
  background-color:#fbfbfb;
  border-bottom:2px solid #262626;
}

#iframe-other-html{
  width: 100%;
  background-color: #efefef;
  margin-top: 1rem;
}
#prev-contents > i,
#next-contents > i{
  position:relative;
  padding:0.32rem;
}
#prev-contents > i::before,
#next-contents > i::before{
  position:absolute;
  top:25%;
  left:-5px;
  width:20px;
  height:auto;
}
#prev-contents > i::before{
  content:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI0LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuODrOOCpOODpOODvF8xIiBmb2N1c2FibGU9ImZhbHNlIgoJIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjEgMTYuOCIKCSBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyMSAxNi44OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe29wYWNpdHk6MC4yOTt9Cjwvc3R5bGU+CjxnPgoJPHBhdGggZD0iTTcuNSw2LjdoOS45YzAuMiwwLDAuNC0wLjIsMC40LTAuNFY0LjVjMC0wLjItMC4yLTAuNC0wLjQtMC40SDcuNVYyLjZjMC0wLjctMC44LTEuMS0xLjMtMC42TDMuNCw0LjgKCQljLTAuMywwLjMtMC4zLDAuOCwwLDEuMWwyLjgsMi44YzAuNSwwLjUsMS4zLDAuMSwxLjMtMC42QzcuNSw4LjIsNy41LDYuNyw3LjUsNi43eiIvPgoJPHBhdGggY2xhc3M9InN0MCIgZD0iTTEzLjUsMTQuMmMwLDAuNywwLjgsMS4xLDEuMywwLjZsMi44LTIuOGMwLjMtMC4zLDAuMy0wLjgsMC0xLjFMMTQuOCw4Yy0wLjUtMC41LTEuMy0wLjEtMS4zLDAuNnYxLjVIMy41CgkJYy0wLjIsMC0wLjQsMC4yLTAuNCwwLjR2MS44YzAsMC4yLDAuMiwwLjQsMC40LDAuNGg5LjlDMTMuNSwxMi43LDEzLjUsMTQuMiwxMy41LDE0LjJ6Ii8+CjwvZz4KPC9zdmc+Cg==');
}
#next-contents > i::before{
  content:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI0LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuODrOOCpOODpOODvF8xIiBmb2N1c2FibGU9ImZhbHNlIgoJIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjEgMTYuOCIKCSBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyMSAxNi44OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe29wYWNpdHk6MC4yOTt9Cjwvc3R5bGU+CjxnPgoJPHBhdGggZD0iTTEzLjUsMy45SDMuNWMtMC4yLDAtMC40LDAuMi0wLjQsMC40djEuOGMwLDAuMiwwLjIsMC40LDAuNCwwLjRoOS45djEuNWMwLDAuNywwLjgsMS4xLDEuMywwLjZsMi44LTIuOAoJCWMwLjMtMC4zLDAuMy0wLjgsMC0xLjFsLTIuOC0yLjhjLTAuNS0wLjUtMS4zLTAuMS0xLjMsMC42VjMuOXoiLz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik03LjUsOC43YzAtMC43LTAuOC0xLjEtMS4zLTAuNkwzLjQsMTFjLTAuMywwLjMtMC4zLDAuOCwwLDEuMWwyLjgsMi44YzAuNSwwLjUsMS4zLDAuMSwxLjMtMC42di0xLjVoOS45CgkJYzAuMiwwLDAuNC0wLjIsMC40LTAuNHYtMS44YzAtMC4yLTAuMi0wLjQtMC40LTAuNEg3LjVWOC43eiIvPgo8L2c+Cjwvc3ZnPgo=');
}

.tweet-image{
  width:250px;
  margin:5px auto;
}

#css-tab i{
  color:#3995CF;
}
#html-tab i{
  color:#DD4C30;
}
#js-tab i{
  color:#F5D13A;
}

#tab-html-css .fa-html5,#tab-html .fa-html5{
  color:#DD4C30;
}
#tab-html-css .fa-css3-alt,#tab-css .fa-css3-alt{
  color:#3995CF;
}
#tab-html-css .fa-js,#tab-js .fa-js{
  color:#F5D13A;
}

#code-tabs .nav-link.active{
  border-top-left-radius:.3rem;
  border-top-right-radius:.3rem;
  color:#fff;
  background-color:#272822;
  border-bottom:2px solid #272822;  
}


.bg-gray{
  background-color:#efefef;
}

.tool-bar{
  box-shadow: none;
  background-color:#fbfbfb;
}

.horizontal-scroll{
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  margin: 15px 0;
  padding: 0 0 20px;
  -webkit-overflow-scrolling: touch;  
}

.heading-section{
  display:flex;
  justify-content: center;
  align-items: center;
  margin-bottom:5px;
}

.heading-section h1{
  position:relative;
  padding:5px 25px;
  text-align: center;
  font-weight:bold;
  font-size:16px;
}

.heading-section h1::after {
  position:absolute;
  top: 50%;
  left:0;
  width: 100%;
  height: 1px;
  transform:translateY(-50%);
  background-image: linear-gradient(90deg, #262626 10px, transparent 10px calc(100% - 10px), #262626 calc(100% - 10px));
  content: '';
}

.template-category-list h2{
  margin-bottom:1.5rem;
  padding:0.5rem 0.5rem 1rem;
  background-image:linear-gradient(#3590D2 0 100%);
  background-repeat: no-repeat;
  background-size:50px 5px;
  background-position: center bottom;
  color:#262626;
  font-size:20px;
  font-weight: bold;
}
.template-category-list h2:hover{
  background-image:
    linear-gradient(90deg,#262626 0 100%);
  background-repeat: no-repeat;
  background-size:50px 5px;
  background-position: center bottom;
}

.template-category-list img{
  width:100%;
  height:auto;
}
.template-category-list .iframe-section{
  width:100%
}
.template-category-list iframe{
  width:100%;
  overflow:hidden;
}


.template-category-list > .row{
  margin-bottom: 6rem;
}

.template-category-list pre[class*="language-"]{
  background-color:#fefefe;
  border-radius: 0;
}


.template-category-list .description{
  padding:1.5rem;
  background-color:#666;
  color:#fff;
}

.ck-editor__editable {
  max-height: 400px;
}

.modaal-fullscreen .modaal-container{
  background-color:#fbfbfb;
}

#btn-fontawesome-search{
  color:white;
  background-color:#0F3B66;
}

.t-5s{
  transition: .5s;
}


#app-pagination .page-link{
  position:relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color:none;
  padding:1rem 2rem;
  border:1px solid #dedede;
  box-shadow:none;
  background-color:transparent;
  color:transparent;
}

#app-pagination .page-item.active .page-link{
  border:1px solid #262626;  
}

.h7{
  font-size:0.7573rem;
}

.page-item.active .page-link{
  background-color:#262626;
}

.card{
  box-shadow:none;
  background-color:transparent;
}

.btn-social{
    width:100px;
}

.template-list .card-img-top,
.blog-list .card-img-top{
    width:100%;
    height:150px;
    object-fit:contain;
}

.blog-list .card,.blog-list .card-body{
    box-shadow:none;
    background-color:transparent;
}

.blog-list .card{
  margin-bottom:1.5rem;
}

.btn-top{
  position: fixed;
  height: 50px;
  line-height:50px;
  width: 50px;
  right: 30px;
  bottom: 30px;
  border-radius: 50%;
  background: #262626;
  color:#fff;
  text-align:center;
  z-index: 2;
}

.btn-top:hover{
  background: #444;
  color:#fff;
}

.card-img{
  width: 100%;
  height: 130px;
  object-fit: contain;
}

.ogp-image{
  width:300px;
  height:180px;
  object-fit:contain;
}

.qiita-code-section h1,
.qiita-code-section h2,
.qiita-code-section h3,
.qiita-code-section h4,
.qiita-code-section h5,
.qiita-code-section h6{
  font-size:1rem;
  margin-bottom:0;
}

.qiita-code-section,
.qiita-code-section img{
  width:100%;
}

.qiita-table{
  table-layout: fixed;
}

.qiita-user-image{
  border-radius: 50%;
  display: inline-block;
  height: 24px !important;
  line-height: 1;
  overflow: hidden;
  vertical-align: middle;
  width: 24px;
}


.relate-area img{
  width: 100%;
  height: 130px;
  object-fit: contain;
}

#link-relate .ranking-header-image{
  object-fit: contain;
  height: 200px;
}
.table table{
  width: 100%;
  margin-bottom: 1rem;
  color: #212529;
  vertical-align: top;
  border-color: #e0e0e0;
}

.table th{
  background-color:#efefef;
  text-align: left;
  padding:0.5rem;
  border: 1px solid #bfbfbf;
}

.table td{
  background-color:#fff;
  text-align: left;
  padding:0.5rem;
  border: 1px solid #bfbfbf;
}

.product-link{
  width:33%;
  background-color:#efefef;
  padding:1rem;
}
.product-section .product-link{
  background-color:#fff;
}

.product-info{
  margin-top:1rem;
  text-align: center;
}

.product-info a{
  color:#262626;
  line-height: 1.5;
}

.card {
  border: 0;
}
.product-image{
  height:200px;
}
.product-image img{
  width: 100%;
  height:100%;
  object-fit:contain;
}