/*!
 * pi-kallassa v0.2
 * Copyright 2019-2020 Geo Halkiadakis
 * Licensed under MIT
 */

/* common CSS --------------------------------------------------------------
//////////////////////////////////////////////////////////////////////////// */

html, body { padding: 16px; font-family: Ubuntu, Arial, sans-serif; font-size: 14px; }
h2 { font-family: Ubuntu, Arial, sans-serif; font-size: 28px; font-weight: 300; padding: 40px 0 24px 0; text-align: right; }
h3 { font-family: Ubuntu, Arial, sans-serif; font-size: 22px; font-weight: 300; }
h4 { font-family: Ubuntu, Arial, sans-serif; font-size: 16px; font-weight: 300; }
/* input, select, textarea { width: 33%; max-width: 320px; font-size: 14px; padding: 3px; } */
textarea { height: 120px !important; }

/* upgrade bootstrap -------------------------------------------------------
 * add 1/5th column widths as col-md-15
//////////////////////////////////////////////////////////////////////////// */
/* .col-md-15 { position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } */
.col-md-15 { position: relative; width: 50%; padding-right: 15px; padding-left: 15px; }
@media screen and (min-width: 768px) { .col-md-15 { -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%; } }



/* pi containers and classes -----------------------------------------------
//////////////////////////////////////////////////////////////////////////// */

.pi-container { max-width: 960px; width: 100%; margin: 0 auto; }
.login-container { width: 100%; max-width: 360px; margin: 0 auto; }
.profile-container { width: 100%; max-width: 480px; margin: 0 auto; }

#pi-menu { position: absolute;; top: 8px; left: 8px; z-index: 99; }

#empty-fields { padding: 15px; line-height: 18px;
  font: 12px "Ubuntu Mono", Consolas, Monaco, fixed; font-weight: 700; color: #777;
}
#empty-fields span { font-weight: 400; color: #999; background: #f6f6f6; border-radius: 3px; padding: 3px 7px; }

.auto-field { color: #f6f6f6; background: #444; border-radius: 3px; padding: 3px 7px;
  font: 14px "Ubuntu Mono", Consolas, Monaco, fixed; font-weight: 700;
}

/* panel sections
---------------------------------------------------------------------------- */
.panel-sections .btn { width: 100%; }
.stats table { font-size: 13px; color: #777; width: 100%; }
.stats tr { border-bottom: 1px solid #ddd; height: 32px;}
.stats tr.summary { color: #444; font-weight: 700; border-bottom: none; }
.stats td span { display: inline-block; width: 47px; color: #555; }
.stats table a { float:right; width: 96px !important; }

@media screen and (max-width: 767.98px) {
  .panel-sections { padding-top: 32px; }
}

/* .border-r { border-right: 1px solid #eee; } */

/* overides ----------------------------------------------------------------
//////////////////////////////////////////////////////////////////////////// */

.card-body { margin-bottom: 2em; }

.select-field { width: 100%; }
.select2-container .select2-selection--single { height: 32px; }
.select2-container--default .select2-selection--single .select2-selection__clear { font-size: 18px; color: #999; }

.dropdown-item.disabled, .dropdown-item:disabled { font-size: 12px; }

textarea.tall { height: 180px !important; }


/* extends -----------------------------------------------------------------
//////////////////////////////////////////////////////////////////////////// */
.btn-pi-color, .btn-pi-light { font-size: 12px; padding: 3px 8px; margin-left: 8px; }
.btn-pi-color { color: #444 !important; background: #def; border-color: #bcd; }
.btn-pi-light { color: #444 !important; background: #eee; border-color: #ddd; }


/* special classes ---------------------------------------------------------
//////////////////////////////////////////////////////////////////////////// */

.more { color: #566; }
.line-right { border-right: 1px solid #eee; }
.login-container label { color: #444; font-size: 12px; text-align: left; padding: 4px 0 0 0 !important; font-weight: 300; width: 100%; }

.pi-preview { font-size: 12px; border-bottom: 1px solid #ddd; }
.user-profile span,
.pi-preview span { padding: 2px 6px; margin-right: 3px; color: #222; background: #eee; border-radius: 2px; }

a.pi-show--tab, a.pi-show--tab:hover { display: block; font-size: 15px; color: #333; }

.pi-action { float: right; }

.list-results h4 { height: 24px; }
.list-results .img-thumbnail { max-height: 102px; }

.user-profile div { padding-top: 8px; }
.some-form label { color: #444; font-size: 12px; text-align: left; padding: 4px 0 0 0 !important; font-weight: 300; width: 100%; }

.light-text { color: #999; }


/* upload image form
//////////////////////////////////////////////////////////////////////////// */

#collapse-image .card { background: #fcfaf9; }
#collapse-image .pi-note { display: none; }
.bgColor { max-width: 440px; height:150px; background: #fcfaf9; /*#fff4be; */ border-radius: 4px; }
.bgColor label{ font-weight: bold; color: #A0A0A0; }
#targetLayer, #targetLayer2 { float:left;
  width:150px; height:150px;
  text-align:center; line-height:150px;
  font-weight: 700; color: #C0C0C0; background: #F0E8E0;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}
#uploadFormLayer, #uploadFormLayer2{	float:left;	padding: 20px; }

.btnSubmit { background-color: #696969; color: #fff;
  border: #696969 1px solid;  border-radius: 4px;
  padding: 5px 30px; margin-top: 10px;
}
.inputFile { width: 240px; padding: 5px; background: #fff;
  border:#F0E8E0 1px solid;	border-radius: 4px;
  width: 148px;
}
.image-preview { max-width:100%; max-height:100%;
  border-bottom-left-radius: 4px; border-top-left-radius: 4px;
}
@media screen and (min-width: 540px) { .inputFile { width: 220px; } }
@media screen and (min-width: 840px) {
  .bgColor { max-width: 720px; height: 240px; }
  #targetLayer, #targetLayer2 { width: 240px; height: 240px; line-height: 240px; }
  #uploadFormLayer, #uploadFormLayer2 { width: 480px; }
  .inputFile { width: 100%; }
  #collapse-image .pi-note { display: block; }
}


/* tabs to accorderon ------------------------------------------------------
//////////////////////////////////////////////////////////////////////////// */

#tabsContainer { padding: 35px 0 ; margin: 0 auto;
  background: #fff;
  max-width: 960px; width: 100%;
  /* border: 1px solid #c00; */
}
.tabArea { border-bottom: 1px solid #ccc; text-align: center; }
.tab--content { display: none; position: absolute;
  max-width: 960px; width: calc(100% - 64px);
  padding: 10px 15px; margin: 0 auto; margin-top: 4px;
  background: #f6f6f6; text-align: left;
}
.tab--content.ghost{ position: relative; visibility: hidden;
    width: 100%; top: 0; left: 0;
}
.tabArea input[name=tabs] { display: none; }
.tabArea label { display: inline-block; width: calc(16.66% - 36px);
  margin: 0; padding: 14px 16px;
  font-weight: 400; text-align: center;
  color: #aaa;
  border: 1px solid transparent;
}
.tabArea label:hover { color: #888; cursor: pointer; }
.tabArea input:checked + label { color: #444; border-bottom: 3px solid orange; font-weight: 700; }
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4,
#tab5:checked ~ #content5,
#tab6:checked ~ #content6 { display: block; }

.tab--content label,
.tab--content label:hover { color: #444; font-size: 12px; text-align: left; padding: 4px 0 0 0 !important; font-weight: 300; width: 100%; }
.tab--content label span { background: #ddd; padding: 0 4px; border-radius: 2px; }

@media screen and (max-width: 960px) {
  .tabArea label { width: calc(16.66% - 12px); padding: 14px 2px; font-size: .9em; }
  .tab--content label, .tab--content label:hover { width: 100%; font-size: 13px !important; }
}
@media screen and (max-width: 720px) {
  .tabArea label { display: block; text-align: left; width: 100%; font-weight: 700; font-size: 1em; }
  .tabArea label:before { content: "+"; margin: 0; font-size: 18px; padding-right: 14px; }
  .tab--content { position: relative; height: auto; width: 100%; padding: 10px 8px; }
  .tab--content label, .tab--content label:hover { font-weight: 300; }
  .tab--content label:before { content: none; }
  .tabArea { border: none; }
}
@media screen and (max-width: 400px) {
  /* label { padding: 15px; } */
}