customized checkbox inside the sidebar is not working as expected and i am not sure how to fix it

I am trying to customize the checkbox inside the sidebar but it is not working as the tick mark is coming out of checkbox .

please refer the image also . the Tick mark should come inside the checkbox when it is clicked . I am not sure how to make this work ,please suggest how to fix it .

            CSS for sidebar and the customized checkbox, tick mark should come inside the checkbox but it is showing outside when clicked : 
                #wrapper {
                  padding-left: 0;
                  -webkit-transition: all 0.5s ease;
                  -moz-transition: all 0.5s ease;
                  -o-transition: all 0.5s ease;
                  transition: all 0.5s ease;
                }
                #sidebar-wrapper {
                  z-index: 1000;
                  position: fixed;
                  left: 250px;
                  width: 0;
                  height: 100%;
                  margin-left: -250px;
                  overflow-y: auto;
                  background: grey;
                  -webkit-transition: all 0.5s ease;
                  -moz-transition: all 0.5s ease;
                  -o-transition: all 0.5s ease;
                  transition: all 0.5s ease;
                }
                /* Sidebar Styles */
            
                .sidebar-nav {
                  position: absolute;
                  top: 0;
                  width: 200px;
                  margin: 0;
                  padding: 0;
                  list-style: none;
                }
                .sidebar-nav li {
                  text-indent: 20px;
                  line-height: 40px;
                }
                .sidebar-nav li {
                  display: block;
                  text-decoration: none;
                  color: #999999;
                  border: 2px solid red;
                }
                .sidebar-nav li:hover {
                  text-decoration: none;
                  color: green;
                  background: rgba(255, 255, 255, 0.2);
                }
                .sidebar-nav li:active,
                .sidebar-nav li:focus {
                  text-decoration: none;
                }
                @media(min-width:768px) {
                  #wrapper {
                    padding-left: 250px;
                  }
                  #wrapper.toggled {
                    padding-left: 0;
                  }
                  #sidebar-wrapper {
                    width: 250px;
                  }
                }
                .sidebar-nav li input\[type="checkbox"\]:not(:checked),
                .sidebar-nav li input\[type="checkbox"\]:checked {
                  position: absolute;
                  left: -9999px;
                }
                .sidebar-nav li input\[type="checkbox"\]:not(:checked) + label,
                .sidebar-nav li input\[type="checkbox"\]:checked + label {
                  position: relative;
                  padding-left: 25px;
                  cursor: pointer;
                  height: 40px;
                  width: 200px;
                  left: -20px;
                }
                /* checkbox aspect */
            
                .sidebar-nav li input\[type="checkbox"\]:not(:checked) + label:before,
                .sidebar-nav li input\[type="checkbox"\]:checked + label:before {
                  content: '';
                  position: absolute;
                  left: 5px;
                  top: 15px;
                  width: 18px;
                  height: 18px;
                  border: 1px solid black;
                  background: #f8f8f8;
                }
                /* checked mark aspect */
            
                \[type="checkbox"\]:not(:checked) + label:after,
                \[type="checkbox"\]:checked + label:after {
                  content: '✔';
                  position: absolute;
                  top: 14px;
                  left: 6px;
                  width: 18px;
                  height: 18px;
                  font-size: 14px;
                  line-height: 0.8;
                  color: white;
                  background: #76bfa3;
                  transition: all .2s;
                }
                \[type="checkbox"\]:not(:checked) + label:after {
                  opacity: 0;
                  transform: scale(0);
                }
            
            

            HTML for sidebar and the customized checkbox  : 
            
                <div id="wrapper">
            
                  <!-- Sidebar -->
                  <div id="sidebar-wrapper">
                    <ul class="sidebar-nav">
                      <li>
                        <input type="checkbox" id="test1" />
                        <label for="test1">PLK-AL10</label>
                      </li>
                      <li>
                        <input type="checkbox" id="test1" />
                        <label for="test1">PLK-AL10</label>
                      </li>
                      <li>
                        <input type="checkbox" id="test1" />
                        <label for="test1">PLK-AL10</label>
                      </li>
                      <li>
                        <input type="checkbox" id="test1" />
                        <label for="test1">PLK-AL10</label>
                      </li>
            
                    </ul>
                  </div>
                  </div>
            

][1] [1]: http://ift.tt/2buDMoy