@charset "utf-8";
/* CSS Document */

/*
  blue     = #1b448c
  blue/L80 = #abc5ff
  blue/L90 = #c7e1ff  
  red      = #b01623
  red/L90  = #ffa48b
  red/L80  = #ff8772
  white    = #ffffff
  
  green    = #00ee00
*/

@font-face { font-family: Quantum;                src: url('Quantum.otf');} 
@font-face { font-family: CFF;                    src: url('tt0246m_.ttf');} 
@font-face { font-family: CFF; font-weight: bold; src: url('tt0247m_.ttf');}

.tag_article  {border:1px solid #da8d00;background-color:#ffdd00;}
.tag_puzzle   {border:1px solid #44bb00;background-color:#77dd00;}
.tag_bubble   {width:12px;height:12px;border-radius:50%;padding:2px;text-align:center;line-height:12px;color:#1b448c;margin:1px;}

.tag          {border-radius:5px;margin:2px;padding:2px 4px 2px 4px;float:left;font-size:11px;}  
.tag_area     {border:0px solid blue   ;border-radius:5px;background-color:#ffffff;margin:4px 2px 2px 0px;padding:4px;min-height:100px;}

.article {
               padding:5px;
               font-size:10px;
               width:280px;
               float:left;
               margin:5px;
               border:1px solid #DDDDDD;
               -webkit-box-shadow: inset 0px 0px 5px 0px rgba(192,192,192,1);
               box-shadow        : inset 0px 0px 5px 0px rgba(192,192,192,1);
}

.article_mark {
               border:1px solid #1b448c;
               -webkit-box-shadow: inset 0px 0px 5px 0px rgba(27,68,192,1);
               box-shadow        : inset 0px 0px 5px 0px rgba(27,68,192,1);
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #b0b0b0;
    opacity: 1; /* Firefox */
}

/* Internet Explorer 10-11 */
/*
:-ms-input-placeholder { 
    color: #b0b0b0;
}
*/

#content {width: calc (100% - 10px); padding:10px; border:0px solid yellow}

#column_right {background-color:white;border:1px solid #e0e0e0;border-radius:10px;padding:10px;}
#registration {background-color:white;border:1px solid #e0e0e0;border-radius:10px;padding:10px;}
#activation   {background-color:white;border:1px solid #e0e0e0;border-radius:10px;padding:10px;}

@media (max-width:999px) {
  #column_left  {border:0px solid #1b448c;}
  #column_right {}

 #div_login           {float:left;border-right:1px solid #e0e0e0;padding-right:10px;}
 #div_go_registration {float:left;padding-left:10px;max-width:40%;}

 h1 {font-weight:600;color:white;font-size:26px}
  h2 {font-size:4vw}
  h3 {font-size:3vw}  
}
/*
@media (min-width:700px) {
  #column_left  {float:left;max-width:70%;border:0px solid #1b448c;}
  #column_right {float:right;width:200px;}
  
  #div_login           {border-bottom:1px solid #e0e0e0;padding-bottom:10px;}
  #div_go_registration {}

  h1 {font-weight:200;color:white}
  h2 {font-size:16px}
  h3 {font-size:12px}  

  #menuH {padding-top:20px;}
}
*/
@media (min-width:1000px) {
  #column_left  {float:left ;border:0px solid #1b448c;width: calc(100% - 270px);}
  #div_intro    {float:left ;padding: 0px 10px 0px 10px; border:0px solid green;width: calc(100% - 550px);}
  #column_right {float:right;width:200px;}
  
  #div_login           {border-bottom:1px solid #e0e0e0;padding-bottom:10px;}
  #div_go_registration {}

  h1 {font-weight:200;color:white}
  h2 {font-size:16px}
  h3 {font-size:12px}  

  #menuH {padding-top:20px;}
}

/* Password Check */
#PwdGen {
  margin-left: 10px; 
  background-color:#f0f0f0;
  border: 1px solid grey;
  padding: 2px 4px 2px 4px;
  border-radius: 5px;
}
#PwdGenSmall {
  background-color:#f0f0f0;
  border: 1px solid grey;
  padding: 2px 4px 2px 4px;
  border-radius: 5px;
}

.veryweak   { color:#660000; }
.weak       { color:#660000; }
.medium     { color:#666600; }
.strong     { color:#0f8a0f; }
.verystrong { color:#0f8a0f; }

/* Area Color */
.internal       {color:#b01623}
.admin          {color:#1b448c;}

/* Member Data */
#admin_member1   {float:left;width:320px;min-height:600px;border:0px solid green}
#admin_member2   {float:left;width:760px;min-height:600px;border:0px solid pink}
                 
#member_search   {background-color:white;border:1px solid #e0e0e0;border-radius:10px;padding:10px;margin-right:10px;margin-bottom:10px;width:290px;}
#member_list_out {background-color:white;border:1px solid #e0e0e0;border-radius:10px;padding:10px;margin-right:10px;margin-bottom:10px;}
#member_list     {background-color:white;width:290px;overflow:auto}

#search_name     {margin-bottom:4px;width:280px;}
#search_status   {margin-bottom:4px;width:286px}
.membertab       {width:274px;}
.membertab tr td {background-color:#B7CDE6;border-bottom:1px solid white}

/* admin_contacts */
#left_panel_contacts   {float:left;border:0px solid blue;min-width:320px}
#center_panel_contacts {float:left;border:0px solid pink}
#admin_action          {background-color:white;border:1px solid #e0e0e0;border-radius:10px;padding:10px;margin-right:10px;margin-bottom:10px;overflow:auto;font-size:11px}
#member_list_select    {width:478px}

/* admin_labelprint */
#admin_members       {float:left;width:320px;min-height:500px;border:0px solid green}
#admin_labels_outer  {float:left;background-color:white;border:1px solid #e0e0e0;border-radius:10px;padding:10px;margin-right:10px;margin-bottom:10px;font-size:11px;}
#admin_labels        {           background-color:white;border:1px solid #e0e0e0;margin-top:10px;font-size:11px;overflow:auto;width:223mm;height:500px;}
#admin_printsettings {float:left;background-color:white;border:1px solid #e0e0e0;border-radius:10px;padding:10px;margin-right: 5px;margin-bottom:10px;font-size:11px}
.A4                  {width:210mm;min-height:297mm}


@media print {
/*
  @page {
    size: 210mm 297mm;
    margin: 0;      
    -webkit-margin-before: 0em;           
    -webkit-margin-after: 0em
  }
*/  
  .pagebreak {
    clear: both;
    page-break-after: always;
  }              
/*  
  html, body, div {font-family:Verdana, Geneva, sans-serif;margin: 0;padding: 0;border:0;outline:0;}
*/
}

/* admin_log */
#admin_filelist  {float:left;background-color:white;border:1px solid #e0e0e0;border-radius:10px;padding:10px;margin-right: 5px;margin-bottom:10px;width:150px;height:500px;overflow:auto;}
#admin_logfile   {float:left;background-color:white;border:1px solid #e0e0e0;border-radius:10px;padding:10px;margin-right: 5px;margin-bottom:10px;width:800px;height:500px;overflow:auto;font-size:11px}
#filename        {width:100%;height:100%}

/* admin_members */
#member_pers     {background-color:white;border:1px solid #e0e0e0;border-radius:10px;padding:10px;margin-right: 5px;margin-bottom:10px;width:710px;}
#member_pers2    {background-color:white;border:1px solid #e0e0e0;border-radius:10px;padding:10px;margin-right: 5px;margin-bottom:10px;width:710px;}
#member_addrcon  {background-color:white;border:1px solid #e0e0e0;border-radius:10px;padding:10px;margin-right:10px;float:left;        width:289px;height:420px;}
#member_nkc      {background-color:white;border:1px solid #e0e0e0;border-radius:10px;padding:10px;margin-right: 5px;float:left;        width:389px;height:420px;}

/* general layout */
html, body, form  {height: 100%; margin: 0;border:0px solid yellow}
.flexLayout  {display: flex; flex-flow: column; height: 100%;}
.flexLayout  .header  {flex: 0 1 auto;}    /* The above is shorthand for:  flex-grow: 0,  flex-shrink: 1,  flex-basis: auto  */
.flexLayout  .content {flex: 1 1 auto;}
.flexLayout  .footer  {flex: 0 1 40px;background-color:#d0d0d0}

.flexContent {display: flex; flex-flow: row; width:100%;align-items:stretch}
.flexContent .left  {flex: 0 1 auto;}    /* The above is shorthand for:  flex-grow: 0,  flex-shrink: 1,  flex-basis: auto  */
.flexContent .main  {flex: 1 1 auto;}

.flexTrans   {display: flex; flex-flow: column; height: 100%;}
.flexTrans   .header  {flex: 0 1 auto;}    /* The above is shorthand for:  flex-grow: 0,  flex-shrink: 1,  flex-basis: auto  */
.flexTrans   .content {flex: 1 1 auto;}
.flexTrans   .footer  {flex: 0 1 40px;background-color:#d0d0d0}


/* admin_transactions */
.flex_container     {display:flex;flex-direction:row;justify-content:space-between;align-items:stretch}

#admin_member_f     {flex:0 0 320px;height:500px;border:1px solid green}                 
#admin_transactions {flex:1 1 auto ;min-height:500px;border: 0px solid pink;}
#trans_person       {background-color:white;border:1px solid #e0e0e0;border-radius:10px;padding:10px;margin-right: 5px;margin-bottom:10px;}
#trans_details      {background-color:white;border:1px solid #e0e0e0;border-radius:10px;padding:10px;margin-right: 5px;margin-bottom:10px;}

transaction_list {overflow:auto;border:1px solid magenta}


/* internal_members */
.internal_member_pers    {background-color:white;border:1px solid #e0e0e0;border-radius:10px;padding:10px;margin-right: 5px;margin-bottom:10px;width:610px;}
#internal_member_pers    {width:930px;}

.internal_member_column   {float:left;width:315px;height:440px;margin-right:5px}

#internal_member_addrcon  {background-color:white;border:1px solid #e0e0e0;border-radius:10px;padding:10px;margin-right:10px;margin-bottom:10px;width:289px;height:440px;}
#internal_member_password {background-color:white;border:1px solid #e0e0e0;border-radius:10px;padding:10px;margin-right:10px;                   width:289px;height:204px;}
.GeneratePasswordLink     {font-size:10px;color:blue}

#internal_member_label   {background-color:white;border:1px solid #e0e0e0;border-radius:10px;padding:10px;margin-right: 5px;margin-bottom:10px;width:289px;height:204px;}
#internal_member_data    {background-color:white;border:1px solid #e0e0e0;border-radius:10px;padding:10px;margin-right: 5px;margin-bottom:10px;width:289px;height:204px;}

#internal_member_nkc     {background-color:white;border:1px solid #e0e0e0;border-radius:10px;padding:10px;margin-right: 5px;float:left;        width:289px;height:204px;}


#div_chart      {border-radius:10px; 
                 border:1px solid #aaaaaa; 
                 background-color:white;
                 height:500px;
                 width:500px;
                 font-size:10px
                } 

.address_box {   float:left;
                 width:220px;
                 height:145px;
                 border:0px solid grey;
                 background-color:#f0f0f0;
                 /* margin:10px; */
                 border-radius:10px;
                 padding:5px;
                 font-size:10px;
                 -webkit-box-shadow: 10px 10px 6px -4px rgba(0,0,0,0.15);
/*                 -moz-box-shadow: 10px 10px 6px -4px rgba(0,0,0,0.15);*/
                 box-shadow: 10px 10px 6px -4px rgba(0,0,0,0.15);
}

#public_cff_files       {border:1px solid #1b448c;padding:4px;                       border-radius:5px}
#public_cff_files tr th {background-color:#1b448c;color:white;padding:4px;margin:2px;border-radius:5px}
#public_cff_files tr td {background-color:white  ;            padding:4px;margin:2px;border-radius:5px}

.clear {clear:both}

#pers_title        {margin-bottom:4px;width: 69px}
#pers_first_name   {margin-bottom:4px;width:180px}
#pers_middle_name  {margin-bottom:4px;width: 69px}
#pers_last_name    {margin-bottom:4px;width:180px}

#addr_street       {margin-bottom:4px;width:240px}
#addr_zip          {margin-bottom:4px;width: 69px}
#addr_details      {margin-bottom:4px;width:200px}
#addr_city         {margin-bottom:4px;width:200px}
#addr_state        {margin-bottom:4px;width:200px}
#addr_country      {margin-bottom:4px;width:200px}

#con_homephone     {margin-bottom:4px;width:180px}
#con_cellphone     {margin-bottom:4px;width:180px}
#con_email         {margin-bottom:4px;width:240px}
#con_website       {margin-bottom:4px;width:240px}

#usr_id            {margin-bottom:4px;width: 50px}
#usr_status        {margin-bottom:4px;width:146px}
#usr_last_revision {margin-bottom:4px;width:140px}

#nkc_id            {margin-bottom:4px;width: 40px}
#nkc_member_since  {margin-bottom:4px;width:140px}
#nkc_member_until  {margin-bottom:4px;width:140px}
#nkc_member_year_start  {margin-bottom:4px;width:40px}
#nkc_member_year_end    {margin-bottom:4px;width:40px}
#nkc_payment_year_start {margin-bottom:4px;width:40px}
#nkc_payment_year_end   {margin-bottom:4px;width:40px}


#new_member_email       {margin-bottom:4px;width:200px}
#new_member_first_name  {margin-bottom:4px;width:200px}
#new_member_middle_name {margin-bottom:4px;width: 80px}
#new_member_last_name   {margin-bottom:4px;width:200px}
#new_member_comment     {margin-bottom:4px;width:503px}

#membership tr td {font-size:13px;}

/* Admin CFF */
#tagList_head th {padding:2px 2px 2px 2px;}
#tagList_head td {padding:0px 2px 0px 2px;}
#tagList_body td {padding:0px 2px 0px 2px;}
.tag_name        {font-size:11px;border:0px;width:120px;}
.tag_type        {font-size:11px;border:0px;width: 60px;}
.tag_type option {font-size:11px;}
.tag_description {font-size:11px;border:0px;width:100px;}
.tag_action      {font-size:11px;           width: 60px;}
.tag_references  {font-size:11px;text-align:right;width:20px;}
.tag_scrollbar   {width: 10px;}

/* Admin Export Data */

#table_list_out   {background-color:white;width:300px;border:1px solid #e0e0e0;border-radius:10px;padding:10px;margin-right:10px;margin-bottom:10px;}
#table_list       {background-color:white;width:290px;overflow:auto}
#tablename        {width:100%}

#table_struct_out {background-color:white;width:400px;border:1px solid #e0e0e0;border-radius:10px;padding:10px;margin-right:10px;margin-bottom:10px;}
#table_struct     {background-color:white;width:390px;overflow:auto}

#data_files_out   {background-color:white;width:400px;border:1px solid #e0e0e0;border-radius:10px;padding:10px;margin-right:10px;margin-bottom:10px;}
#data_files       {background-color:white;width:385px;overflow:auto}

/* CFF Authoring */
#cff_author              {margin-bottom:4px;width:200px}
#cff_article_title       {margin-bottom:4px;width:400px}
#cff_article_description {margin-bottom:4px;width:400px;height:100px;}


.but_search   {width:20px;height:20px;background-color:#1b448c;border-radius:10px;border:0px solid white;color:white;text-align:center}
.mandatory    {background-color:#FFd}
.optional     {background-color:#FFF}

input[type=text] {height:18px; }
body {background-color:#f0f0f0;
      font-family:Verdana, Geneva, sans-serif;
      color:#1b448c;
      margin:0px;
      font-size:13px;
}

.new    {background-color:#C6FDCE}
.nofunc {background-color:#DDDDDD}



.menuitem1 {float:left;
            height:18px; 
            background-color:white;
            color:#b01623;
            border:2px solid #1b448c;
            padding:4px;
            font-weight:400;
            font-size:16px;
            line-height:18px;
            margin-right:4px;
            text-align:center;
            border-radius:10px;
            text-decoration:none;
            }

.menuitem2 {float:left;
            height:18px; 
            background-color:#b01623;
            color:white;
            border:2px solid #1b448c;
            padding:4px;
            font-weight:400;
            font-size:16px;
            line-height:18px;
            margin-right:4px;
            text-align:center;
            border-radius:10px;
            text-decoration:none;
            }
            
.menuitem3 {float:left;
            height:18px; 
            background-color:#1b448c;
            color:white;
            border:2px solid #b01623;
            padding:4px;
            font-weight:400;
            font-size:16px;
            line-height:18px;
            margin-right:4px;
            text-align:center;
            border-radius:10px;
            text-decoration:none;
            }            

.menuitem4 {float:left;
            height:18px; 
            background-color:black;
            color:white;
            border:2px solid orange;
            padding:4px;
            font-weight:400;
            font-size:16px;
            line-height:18px;
            margin-right:4px;
            text-align:center;
            border-radius:10px;
            text-decoration:none;
            }            

#heading {height:200px;
          padding-left:20px;
          background-image:url(images/header_puzzles.jpg);
          border-bottom:2px solid white;
          background-position: 0 65%;  
          opacity: 0.7;
         }

/* slider */

.switch {
  position: relative;
  display: inline-block;
  width: 24px;
  height: 16px;
  margin-left:5px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #c88;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 10px;
  width: 10px;
  left: 2px;
  bottom: 2px;
  top: 3px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #8c8;
}

input:focus + .slider {
  box-shadow: 0 0 1px #8c8;
}

input:checked + .slider:before {
  -webkit-transform: translateX(10px);
  -ms-transform: translateX(10px);
  transform: translateX(10px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 22px;
}

.slider.round:before {
  border-radius: 50%;
}