/*global */

* {
  border: 1px solid white;
}

.tblue {
  border: 1px solid blue;
}

.tred {
  border: 1px solid red;
}

.tgreen {
  border: 1px solid green;
}

body {
  background-color: white;
}

.container {
  height: max-content;
  background-color: white;
}

.alert {
  color:black;

}

/* index */

#login {
  width: auto;
  height: auto;
}

#duo_iframe {
  width: 100%;
  min-width: 200px;
  max-width: 620px;
  height: 330px;
  background: transparent;
}

/* gallery */

button:hover {
  cursor: pointer;
}

.controls {
  text-align: center;
  border: 1px solid white;
}

.controls button:hover {
  background-color: #ddd;
}

button {
  outline: none !important;
  border: none;
  background: transparent;
}

#galleryTable {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  height:75vh;
}

#adminTable {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  height:75vh;
}

table tbody {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  height: 900px;
  box-shadow: 0 8px 6px -8px #333;
}

#myTable>thead {
  background-color: #eee;
}

#myTable tr.header,
#myTable tr:hover {
  background-color: #eee;
  box-shadow: 0 8px 6px -8px #333;
}

#preview {
  width: 180px;
}

#userIcon {
  width: 50px;
}


.pTitle, #iTitle>p, {
  font-weight:bold;
}

/* gallery item */

#gImage {
  position: relative;
  display: block;
  max-width: 100%;
  margin: auto;
  box-shadow: 0 5px 10px 0px #888;
}

.dForms {
  height: 20px;
  margin-bottom: 9px;
  width: 100%;
}

.dForms_half {
  height: 21px;
  margin-bottom: 3px;
  width: 50%;
}

/* gallery edit */

.eForms {
  height: 30px;
  margin-bottom: 10px;
}

#eFormContainer0 {
  display: block;
}

textarea {
  -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
  height: 10vh;
	width: 50%;
}

/* admin */

#uImage {
  width: 20%;
  position: relative;
  display: block;
  margin: auto;
}

#settings {
  padding-top: 80px;
  display: block;
  margin: auto;
}

.sForms {
  text-align: center;
  margin: 5px;
  border: 1px solid #bbb;
  border-radius: 5px;
}

.eForms input[type=text],
.eForms input[type=date],
.eForms input[type=datetime],
.eForms input[type=number],
.eForms input[type=search],
.eForms input[type=time],
.eForms input[type=url],
.eForms input[type=email],
textarea,
select{
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border:1px solid #BEBEBE;
    padding: 7px;
    margin:0px;
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    outline: none; 
}
.eForms input[type=text]:focus,
.eForms input[type=date]:focus,
.eForms input[type=datetime]:focus,
.eForms input[type=number]:focus,
.eForms input[type=search]:focus,
.eForms input[type=time]:focus,
.eForms input[type=url]:focus,
.eForms input[type=email]:focus,
.eForms textarea:focus,
.eForms select:focus{
    -moz-box-shadow: 0 0 8px #88D5E9;
    -webkit-box-shadow: 0 0 8px #88D5E9;
    box-shadow: 0 0 8px #88D5E9;
    border: 1px solid #88D5E9;
}
.eForms .field-divided{
    width: 49%;
}

.eForms .field-long{
    width: 100%;
}
.eForms .field-select{
    width: 100%;
}
.eForms .field-textarea{
    height: 100px;
}
.eForms input[type=submit], .eForms input[type=button]{
    background: #4B99AD;
    padding: 8px 15px 8px 15px;
    border: none;
    color: #fff;
}
.eForms input[type=submit]:hover, .eForms input[type=button]:hover{
    background: #4691A4;
    box-shadow:none;
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
}
.eForms .required{
    color:red;
}

/* Media Queries */

@media only screen and (orientation: landscape) {
  #myTable {
    background-color: white;
  }
}

@media (max-width:575px) {
  .logo1{
    width:200px;
  }
  #logo {
    text-align: center;
  }
  
  #logo-image{
    height: 50px;
  }
  #gControls {
    text-align: center;
    margin-bottom: 10px;
  }
  #aControls {
    text-align: center;
    margin-bottom: 10px;
  }
  #preview {
    display: block;
    margin: auto;
    margin-bottom: 20px;
    width: 50vw;
  }
  #userIcon {
    display: block;
    margin: auto;
    margin-bottom: 20px;
    width: 25vw;
  }
  #galleryTable {
    margin: 20px 0px;
    width: 100%;
  }
  #adminTable {
    margin: 20px 0px;
    width: 100%;
  }
  #myTable tr.header,
  #myTable tr:hover {
    background-color: #fff;
    box-shadow: 0 0px 0px 0px;
  }
  .pCols,
  .pRows,
  .iRows {
    display: none;
  }

  #gImage {
    max-width: 100%;
    display: block;
    margin: auto;
    box-shadow: 0 5px 10px 0px #888;
  }
  #uImage {
    width: 20vw;
    display: block;
    margin: auto;
  }
 
  #gText > p, #iText > p {
    text-align: center;
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  #logo {
    text-align: center;
  }
  #gControls {
    text-align: center;
    margin-bottom: 10px;
  }
  #aControls {
    text-align: center;
    margin-bottom: 10px;
  }
  #preview {
    display: block;
    margin: auto;
    margin-bottom: 20px;
    width: 200px;
  }
  #userIcon {
    display: block;
    margin: auto;
    margin-bottom: 20px;
    width: 60px;
  }
  #iContent {
    display: none;
  }
  #gImage {
    max-width: 100%;
    display: block;
    margin: auto;
    box-shadow: 0 5px 10px 0px #888;
  }

  #uImage {
    width: 20%;
    display: block;
    margin: auto;
  }

  #gText > p {
    text-align: center;
  }

}

@media (min-width: 768px) and (max-width: 991px) {
  #iContent {
    display: none;
  }
  #gImage {
    max-width: 100%;
    display: block;
    margin: auto;
    box-shadow: 0 5px 10px 0px #888;
  }
  #uImage {
    width: 10%;
    display: block;
    margin: auto;
  }
  #gControls {
    text-align: right;
    margin-bottom: 10px;
  }
  #aControls {
    text-align: right;
    margin-bottom: 10px;
  }


}

@media (min-width: 992px) and (max-width: 1199px) {
  #iContent {
    display: none;
  }
  #gImage {
    max-width: 100%;
    display: block;
    margin: auto;
    box-shadow: 0 5px 10px 0px #888;
  }
  #uImage {
    width: 10%;
    display: block;
    margin: auto;
  }
  #gControls {
    text-align: right;
    margin-bottom: 10px;
  }
  #aControls {
    text-align: right;
    margin-bottom: 10px;
  }
  #galleryTable {
    height:79vh;
  }
  adminTable {
    height:79vh;
  }
}

@media (min-width: 1200px) {
  #iContent {
    display: none;
  }
  #uImage{
    width: 10%;
    display: block;
    margin: auto;
  }
  #gControls {
    text-align: right;
    margin-bottom: 10px;
  }
  #aControls {
    text-align: right;
    margin-bottom: 10px;
  }
  #galleryTable {
    height:79vh;
  }
  #adminTable {
    height:79vh;
  }
  .iRows{
    padding: 5px;
  }
}

/* Mobile-first styles FTW */

@media all and (min-width: 50em) {
  .column {
    float: left;
    width: 50%;
  }
}

/*Static CSS Entries */

[class*="col-"] {
  width: 100%;
}