input[type="checkbox"] {
  position: relative !important;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  margin-right: 5px;
  box-sizing: content-box;
  overflow: hidden;
  vertical-align: bottom;
}
input[type="checkbox"]:before {
  content: '';
  display: block;
  box-sizing: content-box;
  width: 13px;
  height: 13px;
  border: 1px solid #ccc;
  transition: 0.5s border-color ease;
}
input[type="checkbox"]:checked:before {
  transition: 0.5s border-color ease;
}
input[type="checkbox"]:disabled:before {
  border-color: #ccc;
  background-color: #ccc;
}
input[type="checkbox"]:after {
  content: '';
  display: block;
  position: absolute;
  box-sizing: content-box;
  top: 50%;
  left: 50%;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  background-color: #8db7d2;
  width: 13px;
  height: 13px;
  border-radius: 100vh;
  -webkit-transform: translate(-50%, -50%) scale(0);
          transform: translate(-50%, -50%) scale(0);
}
input[type="radio"] {
  position: relative !important;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  margin-right: 5px;
  box-sizing: content-box;
  overflow: hidden;
   vertical-align: sub;
}
input[type="radio"]:before {
  content: '';
  display: block;
  box-sizing: content-box;
  width: 13px;
  height: 13px;
  border: 1px solid #ccc;
  transition: 0.5s border-color ease;
}
input[type="radio"]:checked:before {
  border-color: transparent;
  transition: 0.5s border-color ease;
}
input[type="radio"]:disabled:before {
  border-color: #ccc;
  background-color: #ccc;
}
input[type="radio"]:after {
  content: '';
  display: block;
  position: absolute;
  box-sizing: content-box;
  top: 50%;
  left: 50%;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  background-color: #8db7d2;
  width: 13px;
  height: 13px;
  border-radius: 100vh;
  -webkit-transform: translate(-50%, -50%) scale(0);
          transform: translate(-50%, -50%) scale(0);
}
input[type="radio"]:before {
  border-radius: 100vh;
}
input[type="radio"]:after {
  width: 13px;
  height: 13px;
  border-radius: 100vh;
  -webkit-transform: translate(-50%, -50%) scale(0);
          transform: translate(-50%, -50%) scale(0);
}
input[type="radio"]:checked:after {
  -webkit-animation: toggleOnRadio 0.5s ease forwards;
          animation: toggleOnRadio 0.5s ease forwards;
}
input[type="checkbox"]:before {
  border-radius: 4px;
}
input[type="checkbox"]:after {
  width: 5.6px;
  height: 13px;
  border-radius: 0;
  -webkit-transform: translate(-50%, -85%) scale(0) rotate(45deg);
          transform: translate(-50%, -85%) scale(0) rotate(45deg);
  background-color: transparent;
  box-shadow: 3px 3px 0px 0px #8db7d2;
}
input[type="checkbox"]:checked:after {
  -webkit-animation: toggleOnCheckbox 0.5s ease forwards;
          animation: toggleOnCheckbox 0.5s ease forwards;
}
input[type="checkbox"].filled:before {
  border-radius: 4px;
  transition: 0.5s border-color ease, 0.5s background-color ease;
}
input[type="checkbox"].filled:checked:not(:disabled):before {
  background-color: #8db7d2;
}
input[type="checkbox"].filled:not(:disabled):after {
  box-shadow: 3px 3px 0px 0px white;
}

@-webkit-keyframes toggleOnCheckbox {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -85%) scale(0) rotate(45deg);
            transform: translate(-50%, -85%) scale(0) rotate(45deg);
  }
  70% {
    opacity: 1;
    -webkit-transform: translate(-50%, -85%) scale(0.9) rotate(45deg);
            transform: translate(-50%, -85%) scale(0.9) rotate(45deg);
  }
  100% {
    -webkit-transform: translate(-50%, -85%) scale(0.8) rotate(45deg);
            transform: translate(-50%, -85%) scale(0.8) rotate(45deg);
  }
}
@keyframes toggleOnCheckbox {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -85%) scale(0) rotate(45deg);
            transform: translate(-50%, -85%) scale(0) rotate(45deg);
  }
  70% {
    opacity: 1;
    -webkit-transform: translate(-50%, -85%) scale(0.9) rotate(45deg);
            transform: translate(-50%, -85%) scale(0.9) rotate(45deg);
  }
  100% {
    -webkit-transform: translate(-50%, -85%) scale(0.8) rotate(45deg);
            transform: translate(-50%, -85%) scale(0.8) rotate(45deg);
  }
}
@-webkit-keyframes toggleOnRadio {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) scale(0);
            transform: translate(-50%, -50%) scale(0);
  }
  70% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) scale(0.9);
            transform: translate(-50%, -50%) scale(0.9);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) scale(0.8);
            transform: translate(-50%, -50%) scale(0.8);
  }
}
@keyframes toggleOnRadio {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) scale(0);
            transform: translate(-50%, -50%) scale(0);
  }
  70% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) scale(0.9);
            transform: translate(-50%, -50%) scale(0.9);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) scale(0.8);
            transform: translate(-50%, -50%) scale(0.8);
  }
}

@font-face {
    font-family: 'Mukta';
    src: url('../Styles/Mukta-Regular.ttf');
}

.LoginContainer 
{ 
    width: 500px; margin-left: auto; margin-right: auto; margin-top: 100px; margin-bottom: 90px;
    -moz-box-shadow: 0 0 10px 3px #1c2551; 
    -webkit-box-shadow: 0 0 10px 3px #1c2551; 
    box-shadow: 0 0 10px 3px #1c2551; 

    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius:5px;
    border: 0px solid #000000;
  }
.LoginContainer .Header 
{ 
    width: 100%; 
    background-color: #1c2551;
    border-radius:  5px 5px 0px 0px;
    -moz-border-radius:  5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    border: 0px solid #000000;
  }
.LoginContainer .HeaderLeft { width: 6px; height: 27px;  }
.LoginContainer .HeaderRight { width: 6px; height: 27px; }
.LoginContainer .HeaderIcon { float: left; margin-right: 5px; }
.LoginContainer .HeaderTitle 
{ 
    font-family: Mukta; font-size: 9pt; font-weight: bold; width: auto; 
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
  }
.LoginContainer .Content 
{ 
    padding-top: 10px; clear: both; 
    background-color: #FCFCFC; text-align: center; 
}