@import "pure-2.0.3.min.css";
@import "pure-2.0.3-grids-responsive-min.css";
@import "dialog.css";
@import "pure-extentions.css";


/*
@import "old.css";
*/
  
.bg-ads {
  background-color:#c27373;
}
.fg-ads {
  color:#c27373;
}
.b-ads {
  border-color:#c27373;
}
.bg-members {
  background-color:#809cbf;
}
.fg-members {
  color:#809cbf;
}
.b-members {
  border-color:#809cbf;
}
.bg-transfers {
  background-color:#4e9b61;
}
.fg-transfers {
  color:#4e9b61;
}
.b-transfers {
  border-color:#4e9b61;
}
.bg-accounts {
  background-color:#a58c74;
}
.fg-accounts {
  color:#a58c74;
}
.b-accounts {
  border-color:#a58c74;
}







html, body {
  height: 100%;  
  padding:0;
  margin:0;
}

body {
  display: flex;
  flex-direction: column;
  background: rgb(250,250,255);
  background: radial-gradient(circle, rgba(250,250,255,1) 0%, rgba(237,235,235,1) 100%);
  max-width: 960px;
  margin: 0 auto;
}

body.wide {
  max-width: none;
}
body.fullHeight {
  height: 100vh;
  overflow: hidden;
}
body.fullHeight main {
  overflow: hidden;
}

main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding:0 1em;
}

footer {
  padding:10px;
  color:#777;
  font-size: 80%;
}


header {
  display:flex;
  flex-direction: column;
  flex: 0 1 50px;
  padding:10px;
}

header > section {
  display:flex;
  flex-direction: row;
}
header > section.authinfo {
  justify-content: space-between;
  font-size: 90%;
  margin-bottom: 1em;
}
header > section > div.title {
  flex:0 0 auto;
  
}
header > section > div.toolbar {
  flex:1 1 auto;
  display:flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}
header > section > div.toolbar > div {
  margin: 0 4px;
  font-size: 150%;
}

legend {
  font-weight: bold;
}

.nowrap {
  white-space: nowrap;
}

.dimmed {
  color:#888;
}

.back-padding {
  margin-left:-1em;
  margin-right:-1em;
  padding-left:1em;
  padding-right:1em;
}

.p-half {
  padding:0.5rem;
}
.p-one {
  padding:1rem;
}
.p-two {
  padding:2rem;
}

.l-half {
  padding-left:0.5rem;
}
.l-one {
  padding-left:1rem;
}
.l-two {
  padding-left:2rem;
}
.r-half {
  padding-right:0.5rem;
}
.r-one {
  padding-right:1rem;
}
.r-two {
  padding-right:2rem;
}




.two-buttons-row {
  display:flex;
  flex-direction:row;
  justify-content: space-between;
  align-items: center;
}


@media (max-width:640px) {
  .hidden-small {
    display:none;
  }
  header > section.authinfo {
    font-size: 100%;
  }

}


@media (max-width:700px) {
  .module-menu .pure-menu-link span {
    display:none;
  }

}

@media (min-width:701px) and (max-width:800px) {
  .module-menu .pure-menu-link {
    padding: 0.2em 0.4em;
  }
  .module-menu .pure-menu-link {
    font-size: 0.8em;
  }

}







.tasktype h1,
.tasktype h2 {
  margin-top: 0;
  margin-bottom: 0;
  color: white;
  font-weight: 100;
}

.tasktype h1 {
  padding-top:0.5em;
  padding-bottom:0em;
}
.tasktype h2 {
  padding-top:0em;
  padding-bottom:0.5em;
}
.tasktype hr {
  height:10px;
  border:none;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
}




.tasktypeAvatar {
  display:inline-block;
  width:20px;
  height:20px;
  border-radius: 50%;
  color:white;
  font-size: 14px;
  padding-top:2px;
}
.tasktypeAvatar.ads {
  background-color:#c27373;
}
.tasktypeAvatar.members {
  background-color:#809cbf;
}
.tasktypeAvatar.transfers {
  background-color:#4e9b61;
}
.tasktypeAvatar.accounts {
  background-color:#a58c74;
}

a {
  color:rgb(0, 120, 231);
  text-decoration: none;
}
a:hover {
  color:#00f;
}


/*
.module-panels {
  display: flex;
  flex-direction: row;
}
.module-panels .module-panelleft {
  flex: 0 1 200px;
}
.module-panels .module-panelright {
  flex: 1 1 auto;
}
*/

.notice {
  font-style: italic;
  font-size: small;
}

.source-and-target {
  display: flex;
  flex-direction: row;
  
}
.source-and-target > div:first-child,
.source-and-target > div:last-child {
  flex:1 1 54%;
}
.source-and-target > div:first-child + div {
  flex:0 1 auto;
  padding: 0 0.5em;
  display: flex;
  flex-direction: column;
  justify-content: center;
}










.cyreports-table {
  table-layout:auto;
  border-collapse: collapse;
  border-bottom: 2px solid #BBB;   
  box-shadow: 0 4px 8px #777;
  width: 100%;
}
.cyreports-table th,
.cyreports-table td {
  border: 1px solid #BBB;    
  padding: 0.5em 1em;
  text-align: left;
  vertical-align: top;
}
.cyreports-table th {
  font-weight: bold;
  background: #cccccc;
  border-bottom: 2px solid #BBB;   
}
.cyreports-table td {
}

.cyreports-table tr {
  background-color: #fff;
  border-left-width:0.5em;
  border-left-style: solid;
  border-right-width:0.5em;
  border-right-style: solid;
  outline:solid 4px transparent;
  /*transition: outline-color 1s;*/
}
.cyreports-table tr:nth-child(2n+1) {
  background-color: #eee;
}
.cyreports-table tr:hover {
  background-color: #ffffcc;
}
.cyreports-table tr.to-be-deleted {
  outline-color:red;
}
  
.detail {
  font-size: smaller;
  color:#555;
}
















.icon {
  vertical-align: middle;
  height:1.1em;
  width:1.1em;
  position: relative;
  bottom: 0.1em;
  display: inline-block;
  fill:none;
  stroke:currentColor;
  stroke-width:0.1em;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}










/*  --------------------- */
/*  --------------------- */
/*  --------------------- */
/*  --------------------- */
/*  --------------------- */
/*  --------------------- */
/*  --------------------- */
/*  --------------------- */
/*  --------------------- */



.login_wrapper {
  height:80%;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.login_wrapper .login {
  border: 1px solid #cccccc;
  width: 300px;
  background-color: #ece9d8;
  padding:1em;
  border-radius: 10px;
  box-shadow: 0 6px 12px rgba(0,0,0, 0.5);
}
.login_wrapper img.girlande {
  position: relative;
  z-index: -4;
  top: -60px;
  left: -140px;  
}

#infodrop {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color: rgba(0,0,0,0.3);
}
#infodrop div.info {
    width:350px;
    position:absolute;
    border:2px solid #888;
    top:20px;
    left:50%;
    margin-left:-175px;
    z-index:1; 
    background-color:#ffffff; 
    box-sizing: border-box;
    border-radius: 3px;
    box-shadow: 0 4px 18px #000;
}
#infodrop div.info .header  {
  padding-top:5px;
  background: #ece9d8;
  text-align:center;
  font-size:16px;
  border-bottom:1px solid #c0c0c0;
  box-sizing: border-box;
}
#infodrop div.info .content {padding: 10px}
#infodrop div.info .button  {
  border:1px solid #c0c0c0;
  background-color: #ece9d8;
}
#infodrop div.info .button:hover {border-color:#666666} 














.topinfo .message {
  border: solid 2px #777;
  padding:10px;
  border-radius: 10px;
  margin-bottom:10px;
}

.topinfo .message.warn {
  border-color:#FF7E00;
  background-color:#ffcc99;
}

.topinfo .message.error {
  border-color:#cd0a0a;
  background-color:#ff9999;
}

.topinfo .message.info {
  border-color:#6633ff;
  background-color:#ccccff;
}

.topinfo .message pre {
  font-size:smaller;
  border: solid 1px #777;
  padding:5px;
  border-radius: 5px;
  background-color:#eee;
}

.topinfo .message button {
  border: none;
  background: none;
  outline: none;
  float:right;
  cursor:pointer;
}
.topinfo .message button:hover {
  color:red;
  text-shadow:1px 1px 1px #fff;
}








.module-menu {
  width:auto;
  border-bottom: solid 3px rgb(0, 120, 231);
  margin-bottom:1em;
  margin-top:1em;
}
.module-menu .pure-menu-item.pure-menu-selected > .pure-menu-link,
.module-menu .pure-menu-item.pure-menu-selected:hover > .pure-menu-link {
  background-color: rgb(0, 120, 231);
  color: white;
  border-radius: 2px 2px 0 0;
}
.module-menu .pure-menu-item:hover > .pure-menu-link {
  background-color: transparent;
}
.module-menu .pure-menu-item {
  bottom:-1px;
}


.module-menu .pure-menu-item.pure-menu-selected.has-errors a,
.module-menu .pure-menu-item.pure-menu-selected.has-errors:hover a {
  background-color: #cc0033;
}
.module-menu .pure-menu-item.has-errors a {
  color: #cc0033;
}
.module-menu.pure-menu-horizontal {
  white-space: normal;
}

.module-navigator {
  border-top: solid 1px rgb(0, 120, 231);
  display: flex;
  flex-direction: row;
  padding:1em;
  margin-top:1em;
}


.errorlist {
  color: #cc0033;
  border:solid 1px #cc0033;
  padding:1em;
  margin-bottom:1em;
  font-size: small;
  border-radius: 0.5em;
  box-shadow: 0 1px 2px #aaa;
  background-color: rgba(255,255,255,0.2);
}
.errorlist h3 {
  margin:0;
}
.errorlist ul {
  margin-bottom:0;
}




#filterlist .andGroup {
  border-left: solid 0.3em rgb(0, 120, 231);
  margin-bottom: 1em;
  padding-left:1em;
}
#filterlist .andGroup .conditions .condition {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  margin:0.3em 0;
}
#filterlist .andGroup .conditions .condition .field,
#filterlist .andGroup .conditions .condition .value {
  flex:1 1 5em;
  width:5em;
}
#filterlist .andGroup .conditions .condition .field {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
#filterlist .andGroup .conditions .condition .operator {
  flex:0 1 auto;
  border-radius: 0;
  text-align: center;
}
#filterlist .andGroup .conditions .condition .value {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}
#filterlist .andGroup .conditions .condition .delete {
  padding:0.5em;
  flex:0 1 2em;
}
#filterlist .andGroup .header .operation {
  font-variant: small-caps;
}
#filterlist .andGroup:first-child .header .operation {
  display: none;
}


.filter_modul {
  margin-bottom: 2em;
}
.filter_modul_default {
  border-top: solid 1px #888;
}

#sortlist .sort
,#export_explanation .export_output {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}
#sortlist .sort .field
,#export_explanation .export_output > input {
  flex:1 1 5em;
  width:5em;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
#sortlist .sort .direction
,#export_explanation .export_output > select {
  flex:0 1 auto;
  border-radius: 0;
  text-align: center;
}
#sortlist .sort .delete {
  padding:0.5em;
  flex:0 1 2em;
}





#export_fieldConfig_container .fieldentry {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}
#export_fieldConfig_container .fieldentry .fieldname {
  flex:1 1 5em;
  width:5em;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
#export_fieldConfig_container .fieldentry .delete {
  padding:0.5em;
  flex:0 1 2em;
}






#sortlist .sort .field,
#filterlist .condition .field,
#filterlist .condition .value,
.field-selector .option,
#export_fieldConfig_container .fieldentry .fieldname
{
  font-family: monospace;
  font-size: 1.3em;
}




.field-selector {
  position:absolute;
  height: 200px;
  min-width: 200px;
  overflow-y: auto;
  border:solid 1px #ccc;
  background-color:white;
  display:none;
  box-shadow: 0 4px 8px #777;
  border-radius: 0.1em;
}
.field-selector.show {
  display:block;
}

.field-selector .option {
  display:block;
  padding:2px 4px;
  cursor: pointer;
}
.field-selector .option.selected {
  background-color: rgb(0, 120, 231);
  color: white;
}
.field-selector .option.hidden {
  display: none;
}


.unknownToken {
  color:red;
}













#filter-ad-category-container {
  
}

#filter-ad-category-container .filter-ad-category {
  display: inline-block;
  background-color: #ccc;
  height:1.6em;
  box-sizing: border-box;
  border-radius: 0.8em;
  vertical-align: middle;
  margin:0.2em;
  padding:0.2em 0.6em;
}
#filter-ad-category-container .filter-ad-category button {
  border:0;
  background: none;
  padding:0.1em 0;
  margin:0;
  margin-left:0.2em;
  cursor: pointer;
}
#filter-ad-category-container .filter-ad-category * {
  vertical-align: middle;
}



select[name=export_template] {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

#export_explanation {
  padding: .5em .6em;
  border: 1px solid #ccc;
  border-top: none;
  margin: -.25em 0 0.25em 0;
  /*box-shadow: inset 0 1px 3px #ddd;*/
  border-radius: 0 0 4px 4px;
  box-sizing: border-box;
  background-color: rgba(255,255,255,0.5);
}

#export_explanation h4 {
  margin: 0 0 0.5rem 0;  
}


.loader svg {
  display: inline-block;
  visibility: hidden;
}
.loader.show svg {
  animation-name: rotate;
  animation-iteration-count: infinite;
  animation-duration: 2s;
  animation-timing-function: linear;
  visibility: visible;
}
@keyframes rotate {
  form {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}