/* popup_box DIV-Styles*/
.error{
  color:red;
}
.transparent::placeholder {
  color: transparent;
}

#popup_box {
  position:fixed;
  _position:absolute; /* hack for internet explorer 6 */
  height:auto;
  width:auto;
  background:#FFFFFF;
  left: 42%;
  top: auto;
  z-index:100; /* Layering ( on-top of others), if you have lots of layers: I just maximized, you can change it yourself */
  margin-left: 15px;

  border:2px solid #ff0000;
  padding:15px;
  font-size:15px;
  -moz-box-shadow: 0 0 5px #ff0000;
  -webkit-box-shadow: 0 0 5px #ff0000;
  box-shadow: 0 0 5px #ff0000;
}

/* This is for the positioning of the Close Link */
#popupBoxClose,#popupBoxClose:hover {
  font-size:20px;
  line-height:15px;
  right:5px;
  top:5px;
  position:absolute;
  color:#6fa5e2;
  font-weight:500;
  cursor: pointer;
}

input[type="file"] {
  display: none;
}
.custom-file-upload {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
}
#tempHide{
  display: none
}
/* test moto */

/* The container */
.containerV2 {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.containerV2 input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 15px;
  height: 15px;
  width: 15px;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.containerV2:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.containerV2 input:checked ~ .checkmark {
  background-color: #2196F3;
}
.containerV2 input:not(:checked) ~ .checkmark {
  border: 1px solid black;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.containerV2 input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.containerV2 .checkmark:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* test moto  */

/* The container */
.containerV3 {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.containerV3 input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmarkV2 {
  position: absolute;
  top: 0;
  left: 15px;
  height: 15px;
  width: 15px;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.containerV3:hover input ~ .checkmarkV2 {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.containerV3 input:checked ~ .checkmarkV2 {
  background-color: #2196F3;
}
.containerV3 input:not(:checked) ~ .checkmarkV2 {
  border: 1px solid black;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmarkV2:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.containerV3 input:checked ~ .checkmarkV2:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.containerV3 .checkmarkV2:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* test moto  */

/* The container */
.containerV4 {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.containerV4 input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmarkV3 {
  position: absolute;
  top: 0;
  left: 15px;
  height: 15px;
  width: 15px;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.containerV4:hover input ~ .checkmarkV3 {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.containerV4 input:checked ~ .checkmarkV3 {
  background-color: #2196F3;
}
.containerV4 input:not(:checked) ~ .checkmarkV3 {
  border: 1px solid black;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmarkV3:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.containerV4 input:checked ~ .checkmarkV3:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.containerV4 .checkmarkV3:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* test moto  */

/* The container */
.containerV5 {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.containerV5 input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmarkV4 {
  position: absolute;
  top: 0;
  left: 15px;
  height: 15px;
  width: 15px;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.containerV5:hover input ~ .checkmarkV4 {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.containerV5 input:checked ~ .checkmarkV4 {
  background-color: #2196F3;
}
.containerV5 input:not(:checked) ~ .checkmarkV4 {
  border: 1px solid black;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmarkV4:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.containerV5 input:checked ~ .checkmarkV4:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.containerV5 .checkmarkV4:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}