html body{
  height: 100%;
}

#main-container{
	margin-bottom: 100px;
}

/* start dark theme */
body { 
  background: url(../img/background.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  color:white;
  font-family: THSarabun;
  font-size: 24px;
}

body nav.navbar{
  padding: 0 15px 0 15px;
  color:white;
  background:rgb(30,30,30);
}

.dropdown-menu{
  background:rgb(64,64,64);
}

.dropdown-menu .dropdown-item:hover{
  background:rgb(100,100,100);
}

.navbar-toggler{
  background:rgb(64,64,64);
}

.footer{
  position: fixed;
    bottom: 0;
    width: 100%;
    background:rgb(30,30,30,0.8);
}
/* end dark theme */

/* start blue theme */
/*
body { 
  background: url(../img/background.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-color: rgb(0,77,129);
  color:white;
  font-family: THSarabun;
  font-size: 24px;
}

body nav.navbar{
  padding: 0 15px 0 15px;
  color:white;
    background:rgb(0,36,60);
}

.dropdown-menu{
  background:rgb(0,58,99);
}

.dropdown-menu .dropdown-item:hover{
  background:rgb(100,100,100);
}

.navbar-toggler{
  background:rgb(0,58,99);
}

.navbar-toggler-icon{
  color:white;
}

.footer{
  position: fixed;
    bottom: 0;
    width: 100%;
    background:rgb(0,36,60,0.8);
}

a:visited {
  color: #8CC0E3 !important;
}

a:active {
  color: #8CC0E3 !important;
}

a{
  color: #ADDEFF !important;
}

a.btn:visited {
  color: white !important;
}

a.btn:active {
  color: white !important;
}

a.btn{
  color: white !important;
}

.card{
  border-color: rgb(0,36,60) !important;
  color:white !important;
}

.card-header {
  background-color: rgb(0,36,60) !important;
  color:white;
}

.card-body {
  background-color: rgb(0,58,99) !important;
}
*/
/* end blue theme */

.card{color:rgba(0,0,0,.5);}
.card-header{color:rgba(0,0,0,.7);}

body button,body input,body optgroup,body select,body textarea{
  font-family: THSarabun;
  font-size: inherit;
}

body .btn{
  font-size: 22px;
}

body .form-control{
  font-size: inherit;
  padding: 0.2em 0.5em;
  margin-bottom:15px;
}

body .form-group{
  margin-bottom: 0;
}

nav .navbar-nav li a{
  color: white !important;
}

.navbar-brand, .dropdown-menu{
  font-size: inherit;
}

.dropdown-menu-right {
    right: 20px;
    left: auto;
}

.hide{
  display:none;
}

/* use with hr */
.colorgraph {
  height: 5px;
  border-top: 0;
  background: #c4e17f;
  border-radius: 5px;
  background-image: -webkit-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
  background-image: -moz-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
  background-image: -o-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
  background-image: linear-gradient(to right, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
}

/* css สำหรับ switch toggle button */
  .switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 26px;
    top: 7px;
  }

  .switch input { 
    opacity: 0;
    width: 0;
    height: 0;
  }

  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }

  .slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 5px;
    bottom: 3px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }

  input:checked + .slider {
    background-color: #2196F3;
  }

  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }

  input:checked + .slider:before {
    -webkit-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px);
  }

  /* Rounded sliders */
  .slider.round {
    border-radius: 34px;
  }

  .slider.round:before {
    border-radius: 50%;
  }
/* end css สำหรับ switch toggle button */