/*
 * examples/full/css/demo.css
 * 
 * This file is part of EditableGrid.
 * http://editablegrid.net
 *
 * Copyright (c) 2011 Webismymind SPRL
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://editablegrid.net/license
 */

/* body { */
  /* font-family:'lucida grande', tahoma, verdana, arial, sans-serif; */
  /* font-size:11px; */
  /* margin: 0; */
/* } */

/* h1 {	font-size: 15px; */
/* } */
/* h2 {	font-size: 13px;} */

/* a {  */
  /* color: #548dc4; */
  /* text-decoration: none; */
  /* &:hover { */
    /* text-decoration: underline; */
  /* } */
/* } */
img { border: 0; }

input.invalid {
  background: red;
  color: #FDFDFD;
}
input.filterdefined {
  background:#ffecb0 ;
}

td.number {
  text-align: right;

  padding-right: 5px;
  white-space: nowrap;
}
td.boolean {
  text-align: center;
}

th.boolean {
  text-align: center;
}

table.testgrid { 
  border-collapse: collapse; 
  border: 1px solid #CCB;
  width: 100%;
  tr {
    border-bottom: 1px solid #DDD;

    &:hover {
      background-color: #888888;
      color: white;

      a { color: white; }

    }
  }

  th {
    background: #E5E5E5;
    border: 1px solid #D5D5D5;
    color: #555;
    text-align: left;
    padding-left: 2px;
    padding-right: 0px;
    padding-top: 5px;
    padding-bottom: 5px;
    white-space: nowrap; 

  }


  td {
    padding: 2px;
    border: 1px solid #E0E0E0;

  }

  i {
    font-size: 1.5em;
    cursor: pointer;
  }

  img.icon {
    width: 16px;
    cursor: pointer;
  }


}



#wrap {
  margin: 10px;
}


#paginator {
  margin: 10px 0;
  font-size: 1.4em;
  text-align: center;
  margin-bottom: 5px;

  a { color:  #0078cc; text-decoration: none;line-height: 40px; padding: 4px 8px;   
    &:hover { color: #000; } 
  }

  &:active, #currentpageindex {  background-color: #0078cc; color: #fff; border-radius: 5px;}
  &:focus { outline: 1px; }

  span#currentpageindex {  padding: 4px 8px;  }

}



#filter { 
  width: 250px;
  margin-bottom: 10px; 
  border: 1px solid #d1d1d1;
  padding: 5px;
  font-size: 1.1em;
}

#addsmallform {
  position: fixed;
  background-color: #f6f6f6;
  box-shadow: 10px 10px 10px #636363;
  display: none;
  width: 500px;
  height: 420px;
   top: 70%;
  
  border: 1px solid #e1e1e1;

  .row {
    margin: 10px 0 10px 0;

    &.tright {
      text-align: right;
    }

    input {
      width: 50px;
     
      border: solid 1px #e1d1e1;
      outline: 0;
    }

  }

}

#addreading {
  position: fixed;
  background-color: #f6f6f6;
  box-shadow: 10px 10px 10px #636363;
  display: none;
  width: 500px;
  height: 420px;
   top: 70%;
  
  border: 1px solid #e1e1e1;

  .row {
    margin: 10px 0 10px 0;

    &.tright {
      text-align: right;
    }

    input {
      width: 50px;
     
      border: solid 1px #e1d1e1;
      outline: 0;
    }

  }
  
}

#addform {
  position: fixed;
  background-color: #f6f6f6;
  box-shadow: 3px 3px 3px #636363;
  display: none;
  width: 350px;
  height: 220px;
  border-radius: 20px;
  padding: 20px;
  left: 50%;
  top: 50%;
  margin-left: -200px;
  margin-top: -100px;
  z-index: 1000;
  border: 1px solid #e1e1e1;

  .row {
    margin: 10px 0 10px 0;

    &.tright {
      text-align: right;
    }

    input {
      width: 250px;
      padding: 5px 9px;
      border: solid 1px #e1d1e1;
      outline: 0;
    }

  }

}

#addform1 {
  position: fixed;
  background-color: #f6f6f6;
  box-shadow: 3px 3px 3px #636363;
  display: none;
  width: 300px;
  height: 220px;
  border-radius: 20px;
  padding: 20px;
  left: 50%;
  top: 50%;
  margin-left: -200px;
  margin-top: -100px;
  z-index: 1000;
  border: 1px solid #e1e1e1;

  .row {
    margin: 10px 0 10px 0;

    &.tright {
      text-align: right;
    }

    input {
      width: 250px;
      padding: 5px 9px;
      border: solid 1px #e1d1e1;
      outline: 0;
    }

  }

}

#viewnotes {
  position: absolute;
  background-color: #f6f6f6;
  box-shadow: 3px 3px 3px #636363;
  display: none;
  width: 900px;
  height: 550px;
  border-radius: 20px;
  padding: 20px;
  left: 50%;
  top: 50%;
  margin-left: -400px;
  margin-top: -270px;
  z-index: 1000;
  border: 1px solid #e1e1e1;

  .row {
    margin: 10px 0 10px 0;

    &.tright {
      text-align: right;
    }

    input {
      width: 250px;
      padding: 5px 9px;
      border: solid 1px #e1d1e1;
      outline: 0;
    }

  }

}


#viewstat {
  position: absolute;
  background-color: #f6f6f6;
  box-shadow: 3px 3px 3px #636363;
  display: none;
  width: 350px;
  height: 150px;
  border-radius: 20px;
  padding: 20px;
  left: 50%;
  top: 50%;
  margin-left: -200px;
  margin-top: -100px;
  z-index: 1000;
  border: 1px solid #e1e1e1;

  .row {
    margin: 10px 0 10px 0;

    &.tright {
      text-align: right;
    }

    

  }

}

form input:hover, form textarea:hover, form input:focus, form textarea:focus { 
  border-color: #a1a1a1; 
  -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
  -moz-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
}

.butt {
	display: inline-block;
	 margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
   border: 1px solid transparent;
  white-space: nowrap;
  font-size: 14px;
  line-height: 1.42857143;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #333333;
  background-color: #f1f1f1;
  border-color: #cccccc;
  transition: background-color 0.5s;

}

.button {
  display: inline-block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 3px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #333333;
  background-color: #f1f1f1;
  border-color: #cccccc;
  transition: background-color 0.5s;

}

.button:hover,
.button:focus,
.button:active,
.button:active {
  color: #333333;
  background-color: #cac9cb;
  border-color: #adadad;
text-decoration: none; }

.button i.fa {
  /** usefull only with font-awesome icons */
margin-right: 5px; }



/**** Delete button ***/
.button.delete {
  color: #ffffff;
  background-color: #d9534f;
border-color: #d43f3a; }

.button.delete:hover,
.button.delete:focus,
.button.delete:active,
.button.delete.active {
  color: #ffffff;
  background-color: #d2322d;
border-color: #ac2925; }

/****** Add or green button ****/
.button.add, .button.green {
  color: #ffffff;
  background-color: #6ccb63;
border-color: #5db056; }


.button.add:hover,
.button.add:focus,
.button.add:active,
.button.add.active,
.button.green:hover,
.button.green:focus,
.button.green:active,
.button.green.active {
  color: #ffffff;
  background-color: #5aad55;
border-color: #5db056; }

i.fa.red { color: #d2322d }

.button.sign {
		  color: #ffffff;
		  background-color: #c018ca;
		  border-color: #d43f3a; }
		  
		.button.unsign {
		  color: #ffffff;
		  background-color: rgb(223, 117, 20);
		  border-color: #d43f3a; }
		
		.button.revert {
		  color: #ffffff;
		  background-color: #0095ff;
		  border-color: #d43f3a; }

		.button-success,
        .button-error,
        .button-warning,
        

        .button-success {
            background: rgb(28, 184, 65); /* this is a green */
        }

        .button.error {
            background: rgb(202, 60, 60); /* this is a maroon */
        }
		
		.button.cancel {
            background: rgb(255, 229, 124); /* this is a maroon */
        }
		
        .button-warning {
            background: #ffffff; /* this is an black */
        }

        .button.secondary {
            background: rgb(223, 184, 221); /* this is a light blue */
        }

#message {
  position: fixed;
  display: none;
  bottom: 0;
  z-index: 100000;
  width: 100%; 
  padding: 0;

  .notification {
    -webkit-border-bottom-right-radius: 15px;
    -webkit-border-bottom-left-radius: 15px;
    -moz-border-radius-bottomright: 15px;
    -moz-border-radius-bottomleft: 15px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    padding: 20px 0px;
    text-align: center;
    font-size: 1.7em;
    color: #fff;
    float: none;
    margin: 0;
    border-radius: 0;
    &.success,   {
      background-color: #6ccb63;
    }
    &.error {
      background-color: #d9534f;
    }
  }
}