* {font-family: Arial, Helvetica, sans-serif;}
html {height: 100%;}
body {background: #fff;margin: 0;}
@font-face {
font-family: "FontAwesome";
src: url("https://koktipra.com/fonts/fontawesome-webfont.eot");
src: url("https://koktipra.com/fonts/fontawesome-webfont.woff") format("woff"),
url("https://koktipra.com/fonts/fontawesome-webfont.ttf") format("truetype"),
url("https://koktipra.com/'fonts/fontawesome-webfont.svg") format("svg");
}
.content_head {max-width: 500px;margin: auto;background: white;padding: 0;}
.content {max-width: 500px;margin: auto;background: white;padding: 4px 20px 10px 20px;z-index:1;}
.logo {text-align: center;margin-top: 6px;}
/* ====== */
.topnav {overflow: hidden;background-color: #333;}
.topnav a {float: left;display: block;color: #f2f2f2;text-align: center;padding: 14px 16px;text-decoration: none;font-size: 17px;}
.active {background-color: green;color: white;}
.topnav .icon {display: none;}
.dropdown {float: left;overflow: hidden;}
.dropdown .dropbtn {font-size: 17px;border: none;outline: none;color: white;padding: 14px 16px;background-color: inherit;font-family: inherit;margin: 0;}
.dropdown-content {display: none;position: absolute;background-color: #f9f9f9;min-width: 160px;box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);z-index: 1;}
.dropdown-content a {float: none;color: black;padding: 12px 16px;text-decoration: none;display: block;text-align: left;}
.topnav a:hover, .dropdown:hover .dropbtn {background-color: #555;color: white;}
.dropdown-content a:hover {background-color: #ddd;color: black;}
.dropdown:hover .dropdown-content {display: block;}
@media screen and (max-width: 800px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {display: none;}
  .topnav a.icon {float: right;display: block;}
}
@media screen and (max-width: 800px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {position: absolute;right: 0;top: 0;}
  .topnav.responsive a {float: none;display: block;text-align: left;}
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {display: block;width: 100%;text-align: left;}
}
/* ====== */
.intro {background: #66B032;color:#fff;padding:6px;text-align: center;font-size: 18px;}
.ask {text-align: center;font-size: 18px;margin: 20px 0 6px 0;color: #1E5631;}

/* Search Button */
@media print {
    body * {visibility: hidden;}
  .section-to-print, .section-to-print * {visibility: visible;position: relative;vertical-align: text-top;}
  .no-print, .no-print *
    {display: none;}
}
.center-block {margin: auto; display: block;}
.search {width: 60%;min-width: 300px;height: 40px;border-radius: 28pt;border: 1px solid #E0E0E0;padding-left: 34px;padding-right: 24px;margin-top: 24px;flex-shrink: 0;font-size: 16px; color:#000;}
.search:hover {box-shadow: 0 1px 6px 0 #20212447;border-color: #DFE1E600;}
.search:focus {outline: none;}
::placeholder {
  color: #D3D3D3;
  opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
 color: #D3D3D3;
}
::-ms-input-placeholder { /* Microsoft Edge */
 color: #D3D3D3;
}
.header {width: 100%;height: 62px;box-sizing: border-box;display: flex;justify-content: flex-end;align-items: center;}
.menu {width: 100%;display: flex;justify-content: flex-end;align-items: center;margin-right: 20px;}
.menu > a {text-decoration: none;text-align: center;font-family: Arial, Helvetica, sans-serif;font-size: 15px;color: DodgerBlue;margin: auto 8px;}
.link:hover {text-decoration: underline;color: #4D5053;}
.menu img {width: 16px;height: 16px;}
.page {width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;padding-top: 0;}
.panel {width: 100%;padding-bottom: 12px;display: flex;flex-direction: column;justify-content: space-between;align-items: center;margin: auto;}
.fontuser {position: relative;}
.fontuser i {position: absolute;left: 15px;top: 12px;color: grey;}
.rutukthai {padding-top: 14px;}
.panel-button {font-family: arial,sans-serif;font-size: 14px;color: #5F6368;margin: 28px 4px;background-color: #F2F2F2;border: 1px solid #F2F2F2;border-radius: 4px;padding: 0 10px;line-height: 26px;min-width: 40px;height: 36px;text-align: center;cursor: pointer;user-select: none;position: relative;}
.panel-button:hover {box-shadow: 0 1px 1px #0000001A;background-image: -webkit-linear-gradient(top,#F8F8F8,#F1F1F1);background-color: #F8F8F8;border: 1px solid #C6C6C6;color: #222;}
.panel-button:focus {border: 1px solid #4d90fe;outline: none;}


/*Resize the wrap to see the search bar change!*/
.wrap{width: 80%;min-width: 90px;position: absolute;top: 170px;left: 50%;transform: translate(-50%, -50%);}
/* ----------------- */
.resultContainer {display: flex;flex-direction: column;margin-bottom: 18px;}
.resultContainer .title {margin: 0;color: #1a0dab;text-decoration: none;font-weight: normal;font-size: 18px;}
.resultContainer .description {font-size: 14px;font-style: italic;}
.resultContainer .heading {font-size: 24px;}
#koklam {border:2px solid #26882e;background:#ACDF87;margin:auto;display:inline-block;text-align:center;width:100%;}
.footer {text-align: center;padding-bottom:10px;}
.radio-toolbar input[type="radio"] {opacity: 0;position: fixed;width: 0;}
.radio-toolbar label {display: inline-block;background-color: #ddd;padding: 6px 20px;width:87%;font-family: sans-serif, Arial;font-size: 16px;border: 2px solid #444;border-radius: 4px;margin-bottom: 4px;}
.radio-toolbar input[type="radio"]:checked + label {background-color:#bfb;border-color: #4c4;}
.radio-toolbar input[type="radio"]:focus + label {border: 2px dashed #444;}
.radio-toolbar label:hover {background-color: #dfd;}
.phumuk-ans {width: 95%;border: 1px solid #26882e;height: 32px;border-radius: 5px;outline: none;color: #505050;padding-left:10px;}
.phumuk-ans:focus{color: #808080;}
.button {border: none;border-radius: 8px;padding: 12px 12px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;}
.lb {background-color: lightblue;color: black;}
.red {background-color: red; color: white;}
/* The grid: Four equal columns that floats next to each other */
.column {float: left;width: 25%;padding: 10px;}
/* Style the images inside the grid */
.column img {opacity: 0.8;cursor: pointer;}
.column img:hover {opacity: 1;}
/* Clear floats after the columns */
.row:after {content: "";display: table;clear: both;}
/* The expanding image container (positioning is needed to position the close button and the text) */
.container {position: relative;display: none;}
/* Image Overlay */
.container1 {position: relative;width: 200px;text-align:center;display:block;margin:auto;}
.image {opacity: 1;display: block;width: 200px;height: auto;transition: .5s ease;backface-visibility: hidden;}
.middle {transition: .5s ease;opacity: 0;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);-ms-transform:translate(-50%, -50%);text-align: center;}
.container1:hover .image {opacity: 0.3;}
.container1:hover .middle {opacity: 1;}
.text {background-color: green;color: white;font-size: 16px;padding: 16px 32px;}
a.down:link {color: white;text-decoration: none;font-size: 16px;padding: 16px 10px;}
a.down:hover {background-color: green;color: white;text-decoration:none;}
/* Expanding image text */
#imgtext {position: absolute;bottom: 15px;left: 15px;color: white;font-size: 20px;}
/* Closable button inside the image */
.closebtn {position: absolute;top: 10px;right: 15px;color: white;font-size: 35px;cursor: pointer;}
a.gutenrem:link {color: #1E90FF;text-decoration: none;}
a.gutenrem:visited {color: #4B0082;text-decoration: none;}
a.gutenrem:hover {color: #CD5C5C;text-decoration: underline;}
a.gutenrem:active {color: blue;text-decoration: underline;}
ol li {list-style: decimal;list-style-position: outside;}
#saka {display: none;position: fixed;bottom: 20px;right: 30px;z-index: 99;font-size: 18px;border: none;outline: none;background-color: royalblue;color: white;cursor: pointer;padding: 15px;border-radius: 4px;}
#saka:hover {background-color: #555;}
.sakhlai {margin-bottom: 15px;padding: 4px 12px;}
.danger {background-color: #ffdddd;border-left: 6px solid #f44336;}
.success {background-color: #ddffdd;border-left: 6px solid #4CAF50;}
.info {background-color: #e7f3fe;border-left: 6px solid #2196F3;}
.warning {background-color: #ffffcc;border-left: 6px solid #ffeb3b;}
#bugra {font-family: Arial, Helvetica, sans-serif;border-collapse: collapse;width: 100%;}
#bugra td, #bugra th {border: 1px solid #ddd;padding: 8px;}
#bugra tr:nth-child(even){background-color: #f2f2f2;}
#bugra tr:hover {background-color: #ddd;}
#bugra th {padding-top: 12px;padding-bottom: 12px;text-align: left;background-color: green;color: white;}

.btn-primary{color:#fff;background-color:green; border-color:#2e6da4}
.btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:active, .btn-primary.active, .open> .dropdown-toggle.btn-primary{color:#fff;background-color:green;border-color:#204d74}
.btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary{background-image:none}
.btn-primary.disabled,.btn-primary[disabled],fieldset[disabled], .btn-primary,.btn-primary.disabled:hover,.btn-primary[disabled]:hover,fieldset[disabled], .btn-primary:hover,.btn-primary.disabled:focus,.btn-primary[disabled]:focus,fieldset[disabled] .btn-primary:focus, .btn-primary.disabled.focus,.btn-primary[disabled],.focus,fieldset[disabled],.btn-primary.focus,.btn-primary.disabled:active,.btn-primary[disabled]:active,fieldset[disabled],.btn-primary:active,.btn-primary.disabled.active,.btn-primary[disabled].active,fieldset[disabled],.btn-primary.active{background-color:#337ab7;border-color:#2e6da4}
.btn{display:inline-block;margin-bottom:0;font-weight:normal;text-align:center;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;background-image:none;border:1px solid transparent;white-space:nowrap;padding:6px 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}
.btn:focus,.btn:active:focus,.btn.active:focus,.btn.focus,.btn:active.focus,.btn.active.focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}
.btn:hover,.btn:focus,.btn.focus{color:#333;text-decoration:none}
.btn:active,.btn.active{outline:0;background-image:none;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,0.125);box-shadow:inset 0 3px 5px rgba(0,0,0,0.125)}
.btn.disabled,.btn[disabled],fieldset[disabled].btn{cursor:not-allowed;pointer-events:none;opacity:.65;filter:alpha(opacity=65);-webkit-box-shadow:none;box-shadow:none}

textarea {width: 100%; height: 100px; padding: 12px 20px; box-sizing: border-box; border: 2px solid #ccc; border-radius: 4px; background-color: #f8f8f8; resize:none;}

/* For mobile phones: */
[class*="col-"] {width: 100%;}

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 600px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}
.container1 { 
  margin-top:36px;
  position: relative;
  border: 3px solid #fff; 
}

.center1 {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.box {
  margin-top:36px;
  margin-left:0;
  position: absolute;
  transform: translate(-50%, -50%);
}

.box select {
  background-color: #0563af;
  color: white;
  padding: 12px;
  width: 250px;
  border: none;
  font-size: 20px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
  -webkit-appearance: button;
  appearance: button;
  outline: none;
}

.box::before {
  content: "\f13a";
  font-family: FontAwesome;
  position: absolute;
  top: 0;
  right: 0;
  width: 20%;
  height: 100%;
  text-align: center;
  font-size: 28px;
  line-height: 45px;
  color: rgba(255, 255, 255, 0.5);
  background-color: rgba(255, 255, 255, 0.1);
  pointer-events: none;
}

.box:hover::before {
  color: rgba(255, 255, 255, 0.6);
  background-color: rgba(255, 255, 255, 0.2);
}

.box select option {
  padding: 30px;
}

/* SIDEBAR START */
.mobile-container {
  max-width: 110px;
  margin-left: auto;
  margin-right: 8px;
  margin-top: 8px;
  background-color: #fff;
  height: 0;
  color: grey;
  border-radius: 10px;
  top: 0;
  right: 0;
  z-index: 5;
}
.topnav1 {
  overflow: hidden;
  background-color: #ddd;
  position: relative;
}
.topnav1 #myLinks {
  display: none;
}
.topnav1 a {
  color: #333;
  padding: 10px 16px;
  text-decoration: none;
  font-size: 15px;
  display: block;
}
.topnav1 a.icon {
  background: #fff;
  display: block;
  position: absolute;
  font-size: 2px;
  padding: 0;
  right: 0;
  top: 0;
}
.topnav1 a:hover {
  background-color: grey;
  color: white;
}
.active1 {
  background-color: #fff;
  color: white;
  height:34px;
}
/* SIDEBAR END */