/*@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100);*/

form {width:100%;margin:0 auto;      }
form .row{padding:2px auto;margin:2px auto;text-align: left;}
form .row:nth-child(2){}
form .row>label{display:inline-block;width: 250px;text-align:right;font-size: 1em;margin:0px;padding:4px 0;/*text-transform: capitalize;*/}
form .row>label:after{content: ': ';}
form .row>label.empty:after{content: '';}
form .row>div{display:inline-block;text-align: left;padding:2px 0px;max-width: 450px;}
form .row .toggle{padding:0 0 0 0px;border:0;}
form .row textarea{}
form .row select,
form .row input{}
form .row input[type='checkbox']{margin-top:12px;width:20px;}
form .row select{} 
form .row.row-buttons{padding: 0 18px 2px 0;text-align: right;}
form .row.row-buttons>div{}
form .row .required{border:1px solid red;}
form .row button{min-width:182px;}
.button.close{display:none;}
.g-recaptcha{/*margin-top:4px;border:1px solid #c0b798;padding:0 !important;max-width:300px !important;max-height:74px !important;overflow:hidden;*/}
.g-recaptcha>*{margin-top:-1px; margin-left:-1px;}
.scaffold{margin:0 auto 10px auto;/********** max-width:1000px; *******/position:relative;display: block; min-height: 100px;}
.scaffold .btn, 
.scaffold .button {cursor:pointer;}
.scaffold .table{ position:relative;}
/*.scaffold*/ .ajax-loader{ position:absolute;top:0px; right:0px; bottom:0px; left:0px;display:none;background-color:rgba(144,144,144,0.2);}
/*.scaffold*/ .ajax-loader .loader{ z-index: 444444;}
.scaffold .form{display:none;position:absolute; top:0px; right:0px; bottom:0px; left:0px;border: 5px solid orange;}
/**
.scaffold .form .content{ position:absolute; top:0px; right:0px; bottom:0px; left:0px; margin: 0; padding:0; background-color:#efefef;border:0px solid gray;  z-index:2;}
.scaffold .form .content .button.close{ z-index:3;}
.scaffold .form .content .form-tabs{ position:absolute; top:0px; right:0px; bottom:27px; left:0px;}
.scaffold .form .content .row-buttons{ position:absolute; right:0px; bottom:0px; left:0px; height:27px;}
.scaffold .formPOPUP{display:none;position:fixed; top:0px; right:0px; bottom:0px; left:0px;background-color:rgba(144,144,144,0.8); z-index:2;}
.scaffold .formPOPUP .content{ position:relative; margin: 150px auto;  width:800px; height:auto; background-color:#efefef;border:1px solid gray; border-radius:5px; padding:10px;    z-index:3;}
.scaffold .form form .row{text-align:center;}
**/
.scaffold .form{ border:1px solid #CCC;background-color: #f7f7f7;overflow:auto;}
.scaffold .form .button.close{display:block; position:absolute; top:4px; right:4px;color:#FF4136;font-size:2em;}

/******** Table *******/
.scaffold .datatable{border:1px solid #CCC;width:100%;margin:0 auto;  border-collapse:collapse;border-spacing:0;                  }
.scaffold .datatable.active{box-shadow: 0.05em -0.05em 0.4em rgba(111, 202, 220, 0.75), -0.05em 0.05em 0.4em rgba(111, 202, 220, 0.75); }
.scaffold thead th,
.scaffold th{background:#f7f7f7;border-bottom:1px solid #ccc;color:#333;text-align: left;font-weight: bold;text-transform: capitalize;}
.scaffold tr {height:21px;}
.scaffold td,
.scaffold th{padding:4px 8px;vertical-align:middle;}
.scaffold th a,th a:link,th a:visited{text-decoration:none;}
.scaffold th a{display:block;}
.scaffold th a img{margin:0 0 0 5px;}
.scaffold th.active{background:#DDD;border-left:1px solid #CCC;border-right:1px solid #CCC;}
.scaffold tr.row:nth-child(even) td{background:#F1F5FA;}
.scaffold tr.row:nth-child(odd) td{background:#fff;}
.scaffold tr.row:nth-child(even) td.active{background:#e5e9ed;}
.scaffold tr.row:nth-child(odd) td.active{background:#f2f2f2;}
.scaffold tr.row:hover td,
.scaffold tr.row.even:hover td.active,tr.row:nth-child(odd):hover td.active{background:#FFFEEE;}
.scaffold tr.row.active td{background-color:#fbec8f;}
.scaffold tr.row.active:hover td{background-color:#FFDC00;}
.scaffold tr.deleted td{/*background-color:#fbec8f;*//*color:#999;*/text-decoration: line-through;}
.scaffold tr.deleted .actions .button{/*background-color:#fbec8f;*//*color:#999;*/text-decoration: line-through;}
.scaffold tr.row.deleted td,
.scaffold tr.deleted .actions .button{color: transparent;  text-shadow: 0 0 2px rgba(0,0,0,0.5);}
.scaffold tr.row.deleted.active:hover td{background-color:#ebebeb;}

/*
.scaffold .datatable{width:100%;margin:0 auto;}
.scaffold .datatable.active{box-shadow: 0.05em -0.05em 0.4em rgba(111, 202, 220, 0.75), -0.05em 0.05em 0.4em rgba(111, 202, 220, 0.75); }
.scaffold thead th,
.scaffold th{text-align: left;text-transform: capitalize;}
.scaffold td,
.scaffold th{padding:4px 8px;vertical-align:middle;}
.scaffold th a,th a:link,th a:visited{text-decoration:none;}
.scaffold th a{display:block;}
.scaffold th a img{margin:0 0 0 5px;}
.scaffold th.active{background:#DDD;border-left:1px solid #CCC;border-right:1px solid #CCC;}
.scaffold tr:nth-child(even) td{background:#F1F5FA;}
.scaffold tr:nth-child(odd) td{background:#fff;}
.scaffold tr:nth-child(even) td.active{background:#e5e9ed;}
.scaffold tr:nth-child(odd) td.active{background:#f2f2f2;}
.scaffold tr:hover td,
.scaffold tr.even:hover td.active,tr:nth-child(odd):hover td.active{background:#FFFEEE;}
.scaffold tr.active td{background-color:#fbec8f;}
.scaffold tr.active:hover td{background-color:#FFDC00;}
.scaffold tr.deleted td{text-decoration: line-through;}
.scaffold tr.deleted .actions .button{text-decoration: line-through;}
.scaffold tr.deleted td,
.scaffold tr.deleted .actions .button{color: transparent;  text-shadow: 0 0 2px rgba(0,0,0,0.5);}
.scaffold tr.deleted.active:hover td{background-color:#ebebeb;}
*/
/***********
body {  background-color: #3e94ec;  font-family: "Roboto", helvetica, arial, sans-serif;  font-size: 14px;
  font-weight: 400;  text-rendering: optimizeLegibility;  line-height:1em;}
div.table-title {   display: block;  margin: auto;  max-width: 600px;  padding:5px;  width: 100%;}
.table-title h3 {
   color: #fafafa;
   font-size: 30px;
   font-weight: 400;
   font-style:normal;
   font-family: "Roboto", helvetica, arial, sans-serif;
   text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
   text-transform:uppercase;}
*********/
/*** Table Styles **/
/**********
.table {  background: white;
  border-radius:3px;
  border-collapse: collapse;
  margin: auto;
  padding:0px;
  width: 100%;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  animation: float 5s infinite;}
 
th {  color:#D5DDE5;;
  background:#1b1e24;
  border-bottom:1px solid #9ea7af;
  border-right: 1px solid #343a45;
  font-size:14px;
  font-weight: 100;
  padding:5px 10px;
  text-align:left;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  vertical-align:middle;}
th:first-child {  border-top-left-radius:3px;}
th:last-child {  border-top-right-radius:3px;  border-right:none;}
tr {  border-top: 1px solid #C1C3D1;
  border-bottom-: 1px solid #C1C3D1;
  color:#666B85;
  font-size:14px;
  font-weight:normal;
  text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);}
tr:hover td {  background:#4E5066;  color:#FFFFFF;  border-top: 1px solid #22262e;  border-bottom: 1px solid #22262e;}
tr:first-child {  border-top:none;}
tr:last-child {  border-bottom:none;}
tr:nth-child(odd) td {  background:#EBEBEB;}
tr:nth-child(odd):hover td {  background:#4E5066;}
tr:last-child td:first-child {  border-bottom-left-radius:3px;}
tr:last-child td:last-child {  border-bottom-right-radius:3px;}
td {  background:#FFFFFF;
  padding:5px 5px;
  text-align:left;
  vertical-align:middle;
  font-weight:300;
  font-size:14px;
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
  border-right: 1px solid #C1C3D1;}
td:last-child {  border-right: 0px;}
th.text-left {  text-align: left;}
th.text-center {  text-align: center;}
th.text-right {  text-align: right;}
td.text-left {  text-align: left;}
td.text-center {  text-align: center;}
td.text-right { text-align: right;}

*********/






.scaffold .actions{text-align:right;width:50px;}
.scaffold .actions .button{cursor:pointer;}
.scaffold .actions .button.edit{color:#2ECC40;}
.scaffold .actions .button.delete{color:#FF4136;}
.scaffold .actions .button.view{color:#0074D9;}
.scaffold tfoot{border-top:1px solid #CCC;}
.scaffold .pager {/*border:1px solid #CCC;*/width:100%;margin:0 auto;text-align:right;}
.scaffold .pager .button.add{color:#0074D9;}
.scaffold .pager .button.reload{color:#2ECC40;}
.scaffold .pager .button.setup{color:#ff0000;}
.scaffold .empty-row td{ text-align: center; font-size: 3em; line-height: 2em;color:#666;}
.scaffold .empty-row .msg-not-exists pre{font-size: 0.3em;text-align:left;line-height:1em}

/*** http://clrs.cc/ **/

#result{ margin:10px auto;}
#result h1,
#result h2,
#result h3,
#result h4,
#result h5,
#result h6{margin: 20px 20px;}

.waiting{
	animation: spin 1s linear infinite;
}

@keyframes spin{
	from { transform: rotate(0deg);   opacity: 0.2; }
	50%  { transform: rotate(180deg); opacity: 1.0; }
	to   { transform: rotate(360deg); opacity: 0.2; }
}

.loader {transform: rotate(165deg);}
.loader:before, 
.loader:after  {content: '';position: absolute;top: 50%;left: 50%;display: block;width: 0.5em;height: 0.5em;border-radius: 0.25em;transform:translate(-50%, -50%);}
.loader:before {animation: before 2s infinite;}
.loader:after  {animation: after 2s infinite;}

@keyframes before {
  0%   { width: 0.5em; box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);  }
  35%  { width: 2.5em; box-shadow: 0 -0.5em rgba(225, 20, 98, 0.75), 0 0.5em rgba(111, 202, 220, 0.75);  }
  70%  { width: 0.5em; box-shadow: -1em -0.5em rgba(225, 20, 98, 0.75), 1em 0.5em rgba(111, 202, 220, 0.75);  }
  100% { box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);  }
}
@keyframes after {
  0%   { height: 0.5em; box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75); }
  35%  { height: 2.5em; box-shadow: 0.5em 0 rgba(61, 184, 143, 0.75), -0.5em 0 rgba(233, 169, 32, 0.75); }
  70%  { height: 0.5em; box-shadow: 0.5em -1em rgba(61, 184, 143, 0.75), -0.5em 1em rgba(233, 169, 32, 0.75); }
  100% { box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75); }
}

.loader { position: absolute;  top: calc(50% - 1.25em);  left: calc(50% - 1.25em);}


@keyframes yellowfade {
  from {background: yellow;}
  to {background: transparent;}
}
.item-highlight { animation: yellowfade 1s;}

.label.label-success,
.label.label-error{font-size:.9em;font-weight:normal;}
.label.label-success i{color:#4fc682;}
.label.label-error i{color:#e95472;}