.roundCorner
{
    border-radius: 8px;
    border: 1px solid #778899;
    /*color:#FFFFFF;*/
    /*text-align :center;*/
    text-align : left;
    font-family:Times New Roman, Times, serif;
    font-size: 14px;
    /*padding: 5px 10px 10px 10px;*/
    padding: 2px 2px 2px 2px;
    /*font-weight:bold;*/
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
} 

.boxRoundCorner
{
    border-radius: 5px;
    border: 1px solid #778899;
    /*text-align :center;*/
    font-family:Times New Roman, Times, serif;
    /*padding: 5px 10px 10px 10px;*/
    font-size: 14px;
    padding: 2px 2px 2px 2px;
    /*font-weight:bold;*/
    box-shadow: 0 0 0 3px rgba(52,144,220,0.5);
    /*box-shadow:  5px 10px #888888;*/
} 

.txtboxRoundAlignCenter
{
    border: 1px solid #778899;
    text-align :center;
    border-radius: 15px;
    /*border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px; */
}
.boxRound_5NoShadow
{
    border: 1px solid #778899;
    border-radius: 5px;
    font-family:Times New Roman, Times, serif;
    /*padding: 5px 10px 10px 10px;*/
    font-size: 14px;
    padding: 2px 2px 2px 2px;
    //box-shadow: 0 0 0 1px rgba(52,144,220,0.5);
}
.boxRoundConerAlignCenter
{
    border-radius: 8px;
    border: 1px solid #778899;
    /*color:#FFFFFF;*/
    /*text-align :center;*/
    font-family:Times New Roman, Times, serif;
    font-size: 14px;
    /*padding: 5px 10px 10px 10px;*/
    padding: 2px 2px 2px 2px;
    /*font-weight:bold;*/
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.img-circle 
{
    border-radius: 50%;
    /* ความสูงปรับให้เป็นออโต้ */
    /* ความสูงปรับให้เป็นออโต้ */
    border: 1px solid #fff; /* เส้นขอบขนาด 3px solid: เส้น #fff:โค้ดสีขาว */
    
    /*box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);*/
    /*box-shadow: 0 0 0 3px rgba(52,144,220,0.5);*/
    
    
    margin-left: 0px;
}

.bttDarkGrey {
	-moz-box-shadow:inset 0px 1px 3px 0px #91b8b3;
	-webkit-box-shadow:inset 0px 1px 3px 0px #91b8b3;
	box-shadow:inset 0px 1px 3px 0px #91b8b3;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #768d87), color-stop(1, #6c7c7c));
	background:-moz-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:-webkit-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:-o-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:-ms-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:linear-gradient(to bottom, #768d87 5%, #6c7c7c 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#768d87', endColorstr='#6c7c7c',GradientType=0);
	background-color:#768d87;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	border:1px solid #566963;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:14px;
	font-weight:bold;
	padding: 4px 4px;
	text-decoration:none;
	text-shadow:0px -1px 0px #2b665e;
}
.bttDarkGrey:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #6c7c7c), color-stop(1, #768d87));
	background:-moz-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
	background:-webkit-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
	background:-o-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
	background:-ms-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
	background:linear-gradient(to bottom, #6c7c7c 5%, #768d87 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6c7c7c', endColorstr='#768d87',GradientType=0);
	background-color:#6c7c7c;
}
.bttDarkGrey:active {
	position:relative;
	top:1px;
}

.bttSky {
	box-shadow: 0px 1px 0px 0px #f0f7fa;
	background:linear-gradient(to bottom, #33bdef 5%, #019ad2 100%);
	background-color:#33bdef;
	border-radius:6px;
	border:1px solid #057fd0;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:14px;
	font-weight:bold;
	
	/*padding:6px 24px;*/
	padding:6px 24px;
	
	text-decoration:none;
	text-shadow:0px -1px 0px #5b6178;
}
.bttSky:hover {
	background:linear-gradient(to bottom, #019ad2 5%, #33bdef 100%);
	background-color:#019ad2;
}
.bttSky:active {
	position:relative;
	top:1px;
}

.bttGreen {
	background-color:#44c767;
	/*border-radius:28px;*/
	border-radius:28px;
	
	border:1px solid #18ab29;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	
	/*font-size:17px;*/
	font-size:15px;
	
	/*padding:16px 31px;*/
	padding:5px 35px;
	
	text-decoration:none;
	text-shadow:0px 1px 0px #2f6627;
}
.bttGreen:hover {
	background-color:#5cbf2a;
}
.bttGreen:active {
	position:relative;
	top:1px;
}

.bttForest {
	box-shadow:inset 0px 1px 0px 0px #a6827e;
	background:linear-gradient(to bottom, #7d5d3b 5%, #634b30 100%);
	background-color:#7d5d3b;
	border-radius:3px;
	border:1px solid #54381e;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:13px;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #4d3534;
}
.bttForest {
	background:linear-gradient(to bottom, #634b30 5%, #7d5d3b 100%);
	background-color:#634b30;
}
.bttForest:active {
	position:relative;
	top:1px;
}

.myButtonDarkGrey {
	-moz-box-shadow:inset 0px 1px 3px 0px #91b8b3;
	-webkit-box-shadow:inset 0px 1px 3px 0px #91b8b3;
	box-shadow:inset 0px 1px 3px 0px #91b8b3;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #768d87), color-stop(1, #6c7c7c));
	background:-moz-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:-webkit-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:-o-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:-ms-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:linear-gradient(to bottom, #768d87 5%, #6c7c7c 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#768d87', endColorstr='#6c7c7c',GradientType=0);
	background-color:#768d87;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	border:1px solid #566963;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:14px;
	font-weight:bold;
	padding: 4px 4px;
	text-decoration:none;
	text-shadow:0px -1px 0px #2b665e;
}
.myButtonDarkGrey:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #6c7c7c), color-stop(1, #768d87));
	background:-moz-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
	background:-webkit-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
	background:-o-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
	background:-ms-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
	background:linear-gradient(to bottom, #6c7c7c 5%, #768d87 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6c7c7c', endColorstr='#768d87',GradientType=0);
	background-color:#6c7c7c;
}
.myButtonDarkGrey:active {
	position:relative;
	top:1px;
}

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.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: 26px;
		width: 26px;
		left: 4px;
		bottom: 4px;
		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(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

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

.slider.round:before {
  border-radius: 50%;
}

/*================ fade in image  =============== */
.fade-in-image {
  animation: fadeIn 5s;
  -webkit-animation: fadeIn 5s;
  -moz-animation: fadeIn 5s;
  -o-animation: fadeIn 5s;
  -ms-animation: fadeIn 5s;
}
@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-moz-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-o-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-ms-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}
/*================ end of fade in image  =============== */

/*ปุ่มวงกลม*/
h1 {
    color: green;
}

.xyz {
    background-size: auto;
    text-align: center;
    padding-top: 100px;
}

.btn-circle.btn-sm {
    width: 30px;
    height: 30px;
    padding: 6px 0px;
    border-radius: 15px;
    font-size: 8px;
    text-align: center;
}

.btn-circle.btn-md {
    width: 50px;
    height: 50px;
    padding: 7px 10px;
    border-radius: 25px;
    font-size: 10px;
    text-align: center;
}

.btn-circle.btn-xl {
    width: 70px;
    height: 70px;
    padding: 10px 16px;
    border-radius: 35px;
    font-size: 12px;
    text-align: center;
}