﻿.switchcookie {
	position: relative;
	display: block;
	vertical-align: top;
	width: 44px;
	height: 14px;
	padding: 4px;
	/*margin: 0 10px 10px 0;*/
	/*background: #213A63;*/
	/*background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);*/
	border-radius: 50px;
	box-shadow: #213A63;
	cursor: pointer;
	box-sizing: content-box;
}

.switch-input {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	box-sizing: content-box;
}

.switch-label {
	position: relative;
	display: block;
	height: inherit;
	font-size: 12px;
	text-transform: uppercase;
	/*background: #213A63;*/
	border-radius: inherit;
	/*box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);*/
	box-sizing: content-box;
}

	.switch-label:before, .switch-label:after {
		position: absolute;
		top: 50%;
		margin-top: -.5em;
		line-height: 1;
		-webkit-transition: inherit;
		-moz-transition: inherit;
		-o-transition: inherit;
		transition: inherit;
		box-sizing: content-box;
	}

	.switch-label:before {
		content: attr(data-off);
		right: 11px;
		color: #aaaaaa;
		text-shadow: 0 1px rgba(255, 255, 255, 0.5);
	}

	.switch-label:after {
		content: attr(data-on);
		left: 11px;
		color: #FFFFFF;
		text-shadow: 0 1px rgba(0, 0, 0, 0.2);
		/*opacity: 0;*/
	}

.switch-input:checked ~ .switch-label {
	/*background: #B1B3B6;*/
	/*box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);*/
}

	.switch-label-before {
		opacity: 0;
	}

	.switch-label-after {
		opacity: 1;
	}

.switch-handle {
	position: absolute;
	top: 0px;	
	width: 22px;
	height: 22px;
	background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
	background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
	border-radius: 100%;
	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}

.switch-handle-off 	
 {
	left: -7px;
}
.switch-handle-on
{
	left: 39px;
}
.switch-on
{
	background: #213A63;
}
.switch-off
{
	background: #B1B3B6;
}
.switch-input:checked ~ .switch-handle {
	
	box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}

/* Transition
========================== */
.switch-label, .switch-handle {
	transition: All 0.3s ease;
	-webkit-transition: All 0.3s ease;
	-moz-transition: All 0.3s ease;
	-o-transition: All 0.3s ease;
}
.btncookie {
	text-align:center;
}
label.switch.switch-left-right {
	
	margin-bottom: 0px;
	font-weight: unset;
}



.switch-handle {
	display:none;
}

.popup-pdpa .title .switchcookie {
	
	position: absolute;
    top: 0;
    right: 0;
}

.switchcookie {
  position: relative;
  margin: 0;
  cursor: pointer;
}
.switchcookie input {
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
}
.switchcookie .switch {
  width: 70px;
  height: 25px;
  display: block;
  border-radius: 20px;
  background: #bcc3ce;
  position: relative;
  transition: all 0.25s ease;
  margin-top: -2px
}
.switchcookie .switch:before {
  content: "";
  width: 17px;
  height: 17px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  left: 4px;
  bottom: 4px;
  transition: all 0.25s ease;
}

 @media only screen and (max-width: 1023px){
	
	.switchcookie {
	    margin-top: -31px;
    }
}

@media (min-width: 768px) {
  .switchcookie .switch {
    width: 70px;
    height: 25px;
    }
}
/*.switchcookie .switch:before {
  content: "";
  width: 17px;
  height: 17px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  left: 4px;
  bottom: 4px;
  transition: all 0.25s ease;
}*/
@media (min-width: 768px) {
  .switchcookie .switch:before {
      width: 17px;
    height: 17px;
  }
}
 .switchcookie .switch:before {
      width: 17px;
    height: 17px;
  }
.switchcookie .switch:after {
  /*content: "Off";*/
  color: #fff;
  position: absolute;
  right: 15px;
  bottom: 5px;
  font-style: normal;
  font-size: 14px;
  transition: all 0.25s ease;
}
.switchcookie.site-en .switch:after
{
	content: "Off";
}
.switchcookie.site-th .switch:after
{
	content: "ปิด";
}

@media (min-width: 768px) {
  .switchcookie .switch:after {
    bottom: 3px;
    font-size: 16px;
  }
}

.switchcookie .switch:after {
    bottom: 3px;
    font-size: 16px;
  }

.switchcookie input:checked + .switch {
  background: #213A63;
}
.switchcookie input:checked + .switch:before {
  left: 49px;
}
.switchcookie input:checked + .switch:after {
  content: "On";
  right: 32px;
}

.switchcookie.site-en input:checked + .switch:after 
{
  content: "On";
}
.switchcookie.site-th input:checked + .switch:after 
{
  content: "เปิด";
}







