/*
Style overrides for the OpenGate Master Server Test Page

@copyright 2018 Enghouse Interactive Inc
*/

.main-content {
    background: url("../images/accent.png") no-repeat;
}

.featured + .main-content {
    background: url("../images/heroAccent.png") no-repeat;
}

input[type="submit"],
input[type="button"],
button {
  color: #0089D9;
  background-color: #efeeef;
  border: 1px solid;
  border-color: #D4D4D4;
  width: 300px;
}

td input[type="submit"],
td input[type="button"],
td button {
    font-size: 1em;
    padding: 4px;
    margin-right: 6px;
    margin-left: 6px;
}

a{
  text-decoration: none;
}

a:hover {
  text-decoration: none;    
  background: none;
}

/*
* Secciones 
*/

.colleft{
  vertical-align: top;
}

.colright{
  vertical-align: top;
  width: 100%;
}

.colright ul {
  list-style: none;
  margin: 10px 0px;
}

.colright li {
  margin: 5px 0px;
}

#leftMenuBtns{    
  display:inline-block;
  width: 280px;
}

#centralSection{    
    margin-left: 4px;
}

#centralSection #login{    
  margin:  auto;
}

#centralSection .formTable{
  width: 550px;
}
.formTable tbody{
  float: right;
}

#deleteUsersBtnInput{
  width:100%;
}

.leftButtonsTable{
  margin-top: 10px;
}

.leftButtonsTable tr{
  cursor: pointer;
}

/* estilos de mensajes y elementos */

.floatLeft{
  float:left;
}

.hidden{
  display: none;
}

.errorMessage{  
  color: #c40909;
  font-weight: bold;
}

.successMessage{
  font-weight: bold;
}

.infoMessage{
  color: #0089D9;
  font-weight: 600;
}

span.formLabel{
  font-weight: bold;
  float: right;
}

.wrongInput {
  border: 1px solid #c40909;
}

/* Spinner */
/* ======= */

.loader {
  margin: 20px auto;
  border: 16px solid #fff;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* DELETE USERS CHECKBOX */
/* ===================== */

.checkbox {
    width: 25px;
    margin: 20px 100px;
    position: relative;
}

/**
 * Create the box for the checkbox
 */
.checkbox label {
    margin-top: 8px;
    cursor: pointer;
    position: absolute;
    width: 25px;
    height: 25px;
    top: 0;
    left: 0;
    background: #eee;
    border:1px solid #ddd;
}

/**
 * Display the tick inside the checkbox
 */
.checkbox label:after {
    opacity: 0.2;
    content: '';
    position: absolute;
    width: 9px;
    height: 5px;
    background: transparent;
    top: 6px;
    left: 7px;
    border: 3px solid #333;
    border-top: none;
    border-right: none;

    transform: rotate(-45deg);
}

/**
 * Create the hover event of the tick
 */
.checkbox label:hover::after {
    opacity: 0.5;
}

/**
 * Create the checkbox state for the tick
 */
.checkbox input[type=checkbox]:checked + label:after {
    opacity: 1;
}


/* BUTTONS */
/* ======= */

input.btn {
  color: #0089D9;
  font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
  font-size: 14px;
  background-color: #efeeef;
  border: 1px solid;
  border-color: #D4D4D4;
  width: 300px;
  cursor: pointer;
}

input.btn:hover {
  background-color: #A6BCC8;
}

.selectedBtnColor {
  background-color: #A6BCC8;
}

.unselectedBtnColor {
  background-color: #efeeef;
}