.rtable {
  /*!
  // IE needs inline-block to position scrolling shadows otherwise use:
  // display: block;
  // max-width: min-content;
  */
  display: inline-block;
  vertical-align: top;
  max-width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  border-collapse: collapse;
  border-spacing: 0;
  
  margin-bottom: 0;
}

.rtable,
.rtable--flip tbody {
  -webkit-overflow-scrolling: touch;
  background: radial-gradient(left, ellipse, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center, radial-gradient(right, ellipse, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;
  background-size: 10px 100%, 10px 100%;
  background-attachment: scroll, scroll;
  background-repeat: no-repeat;
}

.rtable--flip {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  background: none;
}

.rtable--flip thead {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  min-width: -webkit-min-content;
  min-width: -moz-min-content;
  min-width: min-content;
}

.rtable--flip tbody {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
}

.rtable--flip tr {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-width: -webkit-min-content;
  min-width: -moz-min-content;
  min-width: min-content;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.rtable--flip td,
.rtable--flip th {
  display: block;
}

.rtable--flip td {
  background-image: none !important;
  border-left: 0;
}

.rtable--flip th:not(:last-child),
.rtable--flip td:not(:last-child) {
  border-bottom: 0;
}

/*!
//house keeping
*/
body {
  margin: 0;
  padding: 0;
  color: #494b4d;
  font-size: 14px;
  line-height: 20px;
}

h1, h2, h3 {
  margin: 0 0 10px 0;
  color: #1d97bf;
}

h1 {
  font-size: 25px;
  line-height: 30px;
}

h2 {
  font-size: 20px;
  line-height: 25px;
}

h3 {
  font-size: 16px;
  line-height: 20px;
}

table {
  margin-bottom: 30px;
}

a {
  color: #ff6680;
}

code {
  background: #fffbcc;
  font-size: 12px;
}

.m-width {
    max-width: 510px;
    width: 95%;
    overflow-x: auto;
    white-space: nowrap;
    border-collapse: collapse;
    border-spacing: 0;
    margin-bottom: 0;
    margin: 0 auto;
}

.toggle-box,
.toggle-box-600 {
        display:none;
    }
    
.admintable {
        display: inline-block;
        vertical-align: top;
        max-width: 100%;
    }
    
.admintable-60 {
        display: inline-block;
        vertical-align: top;
        max-width: 60%;
    }

.singuptable {
    margin: 0 auto 10px auto !important;
}

select#username,
.singuptable select {
    width: 100%;
}

.logintable {
    margin: 0 auto 30px auto !important;
}

.logintable input[type="text"], 
.logintable input[type="password"], 
.logintable select, 
.logintable textarea {
    border: 1px solid #809cb8;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    width: 100%;
}

#phone-input-cell {
    width: 40px;
}

.editproftable {
    margin: 0 auto 10px auto !important;
}

.editproftable select {
    width: 100%;
    max-width: 191px;
}


.editproftable input,
.editproftable textarea {
    max-width: 191px;
}

.fullWidth {
    width: 100% !important;
    white-space: normal;
    margin: 0 auto;
}

.statistics-entrymobdisplay {
    display: table-cell;
}

.email-cels {
    width: 12em;
    float: left;
    text-align: left;
    padding: 0.3em;
}


@media (max-width: 1024px) {
    .toggle-box {
        display:block;
    }
    
    #tableshow {
        display:none;
    }
    
    .entrymobdisplay {
        display:none;
    }
    
    .admintable {
        display: inline-block;
        vertical-align: top;
        max-width: 95%;
    }
}

@media (max-width: 992px) {  
    #contentSection {
        background-image: url(../../graphics/teams/NYG.png);
        background-size: 80px 80px;
    }
    
    .admintable-60 {
        display: inline-block;
        vertical-align: top;
        max-width: 80%;
    }
}

@media (max-width: 720px) {    
    .fullWidth {
        width: 95% !important;
        white-space: normal;
        margin: 0 auto;
    }
    
    #contentSection {
        background-image: url(../../graphics/teams/NYG.png);
        background-size: 50px 50px;
    }
}

@media (max-width: 700px) {
    .entrymobdisplay-700 {
        display:none;
    }
}

@media (max-width: 600px) {
    .toggle-box-600 {
        display:block;
    }
    
    .entrymobdisplay-600 {
        display:none;
    }
    
    .admintable-60 {
        display: inline-block;
        vertical-align: top;
        max-width: 95%;
    }    
}

@media (max-width: 520px) {
    .entrymobdisplay-520 {
        display:none;
    }
}

@media (max-width: 580px) {
    .entrymobdisplay-580 {
        display:none;
    }
}

@media (max-width: 480px) {
    .entrymobdisplay-480 {
        display:none;
    }    
    
    .font-480 {
        font-size: 11px;;
    }
}

@media (max-width: 420px) {    
    .adminSection select {
        width: 130px;
    }
    
    .size {
        display: block;
        width: 160px;
        white-space: nowrap;
        overflow: hidden;
        padding: 5px;
        text-overflow: ellipsis;
    }
}

@media (max-width: 380px) { 
    .editproftable select {
        width: 100%;
        max-width: 170px;
    }
    
    
    .editproftable input,
    .editproftable textarea {
        max-width: 170px;
    }
}

/*---------------------------------------------------------------------------*/
/* toggle styles.                                                             */
/*---------------------------------------------------------------------------*/

.toggle-box {
    /*text-align: left;*/
    margin: 11px 0 5px 0;
}

.toggle-title {
    height: 30px;
    line-height: 30px;
    font-weight: 700;
    display: inline-block;
    vertical-align: top;
    padding-right: 5px;
}


/*
 * Toggle button styles
 */
.toggle-button {
  position: relative;
  display: inline-block;
  color: #fff; }
  .toggle-button label {
    display: inline-block;
    text-transform: uppercase;
    cursor: pointer;
    text-align: left; }
  .toggle-button input {
    display: none; }
  .toggle-button__icon {
    cursor: pointer;
    pointer-events: none; }
    .toggle-button__icon:before, .toggle-button__icon:after {
      content: "";
      position: absolute;
      top: 45%;
      left: 35%;
      transition: 0.2s ease-out; }

/*
 * Toggle button styles
 */
.toggle-button--aava label {
  height: 30px;
  line-height: 30px;
  transition: all 0.2s;
  border-radius: 2rem;
  }
  .toggle-button--aava label:before, .toggle-button--aava label:after {
    position: absolute;
    right: 1.5rem;
    transition: all 0.2s .1s ease-out; }
  .toggle-button--aava label:before {
    content: attr(data-on-text); }
  .toggle-button--aava label:after {
    content: attr(data-off-text); }

.toggle-button--aava input[type=checkbox] + label {
  width: 85px;
  background: #FF5335;
  }
  .toggle-button--aava input[type=checkbox] + label:before {
    opacity: 0;
    transform: translate(0, 20px); }
  .toggle-button--aava input[type=checkbox] + label:after {
    opacity: 1;
    transform: translate(0, 0); }

.toggle-button--aava input[type=checkbox]:checked ~ label {
  width: 85px;
  background: #61B136;
  }
  .toggle-button--aava input[type=checkbox]:checked ~ label:before {
    opacity: 1;
    transform: translate(0, 0); }
  .toggle-button--aava input[type=checkbox]:checked ~ label:after {
    opacity: 0;
    transform: translate(0, -20px); }

.toggle-button--aava input[type=checkbox]:checked ~ .toggle-button__icon:before {
  transform: translate(-10%, 100%) rotate(45deg);
  width: 12.66667px;
  }

.toggle-button--aava input[type=checkbox]:checked ~ .toggle-button__icon:after {
  transform: translate(30%) rotate(-45deg); }

.toggle-button--aava .toggle-button__icon {
  position: absolute;
  left: 0;
  top: 0;
  height: 30px;
  width: 30px;
  }
  .toggle-button--aava .toggle-button__icon:before, .toggle-button--aava .toggle-button__icon:after {
    height: 3px;
    border-radius: 3px;
    background: #fff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); }
  .toggle-button--aava .toggle-button__icon:before {
    width: 18px;
    transform: rotate(45deg);
    }
  .toggle-button--aava .toggle-button__icon:after {
    width: 19px;
    transform: rotate(-45deg);
    }