input[type=text], input[type=button], input {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
}

input:invalid {  border: 1px solid red; }

@media only screen and (max-width: 756px) {

  html {
    height: auto !important;
  }

  body {
    margin: 4px !important;
  }

  form {
    margin-top:1em !important
  }

  .input-holder{
    flex-direction: column !important;
    -webkit-flex-direction: column !important;
  }
  .input-group{
    flex-direction: column !important;
    -webkit-flex-direction: column !important;
     width: 98% !important;
  }
  .email-input-group, .container{
    width: 98% !important;
  }

  .modalConfirmSubmit:not(#modal-statement-back), .modalSubmit, .statementButton, .submitButton{
    width:100% !important;
    height: 45px !important;
  }
  .submitButton{
    margin-left:5px !important;
  }

  .statement-row{
    font-weight: 600 !important;
  }

  .zip{
    width: auto !important;
  }

}

@media only screen and (min-width: 756px){
  .half{
    flex:1;
    -webkit-flex:1;
    display:flex;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction:row;
    -webkit-flex-direction:row;
    align-items: center;
    -webkit-align-items:center;
    padding-bottom:20px;
  }
}




@media print {

  .modalConfirmSubmit, .printStatement {
    display:none !important;
  }

  .modal-statement{
    overflow: visible !important;
    position: relative !important;
  }
  .statement-input-holder{
    overflow: visible !important;
  }
  .modal-statement-content {
    max-width:100% !important;
    width:98% !important;
    margin:auto !important;
    border:0px !important;
    overflow: visible !important;
    top: 0 !important;
  }

  .form {
    display:none !important;
  }



  .modal-statement-total{
    margin-right:0 !important;
  }

  .statement-parent, .remaining{
    border-radius:0px !important;
    color:#000000 !important;
    background:white !important;
    page-break-after: auto !important;
  }



  .statement-row{
    page-break-after: auto !important;
  }



  .header {
    color:#000000 !important;
    background:white !important;
    font-weight:600 !important;
    justify-content: left !important;
    -webkit-justify-content:left !important;
    padding-left: 10px !important;
    width: calc(100% - 10px) !important;
  }

  .statement-input-holder {
    max-height: 100% !important;
    page-break-inside:auto;
  }
  .statement-div{
    page-break-inside:auto !important;
  }

}


/* Template for logo only button (height independent). */
/* HTML */
<div class="apple-pay-button apple-pay-button-white"></div>

/* CSS */
@supports (-webkit-appearance: -apple-pay-button) {
    .apple-pay-button {
        display: inline-block;
        -webkit-appearance: -apple-pay-button;
    }
    .apple-pay-button-black {
        -apple-pay-button-style: black;
    }
    .apple-pay-button-white {
        -apple-pay-button-style: white;
    }
    .apple-pay-button-white-with-line {
        -apple-pay-button-style: white-outline;
    }
}

@supports not (-webkit-appearance: -apple-pay-button) {
    .apple-pay-button {
        display: inline-block;
        background-size: 100% 60%;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        border-radius: 5px;
        padding: 0px;
        box-sizing: border-box;
        min-width: 200px;
        min-height: 32px;
        max-height: 64px;
    }
    .apple-pay-button-black {
        background-image: -webkit-named-image(apple-pay-logo-white);
        background-color: black;
    }
    .apple-pay-button-white {
        background-image: -webkit-named-image(apple-pay-logo-black);
        background-color: white;
    }
    .apple-pay-button-white-with-line {
        background-image: -webkit-named-image(apple-pay-logo-black);
        background-color: white;
        border: .5px solid black;
    }
}

#email-address, #email-address-label{
  transition: all ease .3s;
}
#email-address-label{
  height:15.5px;
}

body{
  background: transparent !important;
  margin:1em;
  box-sizing:border-box;
  font-family: "Arial",Sans-serif;
  font-size: 100% !important;
  overflow-y: auto !important;
  margin-block-end: 1em !important;
  min-height: 95vh;
  font: 400 16px/1.1 "Arial",sans-serif !important;
}

html{
	font-size:100% !important;
  background-image: linear-gradient(#14CEFB, #075E9F) !important;
  height:auto;
}

input[type='button'] {
  line-height:.5;
  padding:0 !important;
}

.cardconnect-only {
  width:100%;
  display:none;
}

.moolah-payment-iframe {
  width:100%;
}



.wrapper{
  width:auto !important;
  max-width: auto !important;
}

.form{
  background:white;
  padding:1em;
  border-radius:10px;
  margin-top:2em;
  max-width:725px;
  margin-left: auto;
  margin-right: auto;
  -webkit-transition: all linear .2s;
  transition: all linear .2s;
  opacity:0;

}



.input{
  border-radius:5px;
  margin:5px;
  height: 45px;
  border: 1px solid #ccc;
  font-size: 1.1em;
  padding-left:7px;
  width:100%;
}

.moolah-input {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 2px;
  box-sizing: border-box;
  color: #2f373b;
  display: inline-block;
  height: auto;
  vertical-align: middle;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  padding: 8px 7px;
  width: 100%;
  outline: none;
  margin-bottom: 0;
}

.moolah-input:focus{
  border: 1px solid blue !important;
}

.moolah-email-div {
  margin-top: -10px;
  width: 99%;
  margin-bottom: 2em;
  z-index: 0;
}

.moolah-span {
  color: #2f373b;
  font-size: 10px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: .71px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 7px;
}

input:focus {
  outline:none;
  border:1px solid #14CEFB;
}

.input-label{
  margin-left:5px;
  font-size:.9em !important;
  color: black !important;
}

.state-zip{
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction:row;
  -webkit-flex-direction:row;
}

.input-holder{
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction:row;
  -webkit-flex-direction:row;
  flex-wrap: wrap;
  margin:5px;
  margin-left: auto;
  margin-right: auto;
  max-width: 720px;
}

.form-header{
  position: relative;
  background: #495057;
  color: white;
  top: -4px;
  border-radius: 10px 10px 0 0;
  margin: -.87em;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 11px;
  padding-bottom: 11px;
  font-size: 1.2em;
  margin-bottom: 11px;
}

.form-header-text{
  margin: 0;
  padding-left: 10px;
}

.statement-input-holder{
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction:row;
  -webkit-flex-direction:row;
  flex-wrap: wrap;
  margin:5px;
  max-height:500px;
  overflow-y:auto;
  -webkit-overflow-scrolling: touch;
}

.statement-practice-info{
  font-weight: 600;
  font-size: .9em;
}

 .statement-group{
	border: .5px solid #ccc;
    border-radius: 7px;
    padding: 3px;
    margin-bottom: 8px;
	margin-top:1em;
  }

  .statement-group-header{
	font-weight: 600;
    color: #495057;
    margin-top: -12px;
    background: white;
    width: auto;
    display: table;
  }

.flexthree{
  flex: 3 !important;
}

.input-group{
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction:row;
  -webkit-flex-direction:row;
  width:100%;
}

.google-pay{
  justify-content: center;
  align-content: center;
  align-items: center;
}

.email-input-group{
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction:row;
  -webkit-flex-direction:row;
  width:100%;
}

.input-div{
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex:auto;
  -webkit-flex:auto;
  flex-direction:column;
  -webkit-flex-direction:column;
  margin: 5px;
}

.checkbox {
  height:25px;
  width:25px;
  margin-left:10px;
}

.checkbox-div{
  flex: 1;
  -webkit-flex:1;
  flex-direction: row !important;
  align-content: center;
  align-items: center;
  margin-bottom:10px !important;
}

.email-div{
 flex:4;
 -webkit-flex:4;
 transition: all ease .3s;

}


.state{
  width:60px;
}

.zip{
  width:150px;
}



/* The Modal (background) */
.modal {
  display: block;
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.success-span1{
  line-height: 2em;
  font-size: 1.5em !important;
  font-weight: 500;
  margin-bottom: 5px;
}

.success-span2{
  font-size: 1.1em;
  font-weight: 500;
  margin-top: 1px;
  color: #6f6f6f;
  line-height: 1.3em;
}

.decline-span {
  font-size: 1.1em;
  font-weight: 700;
  margin-top: 1px;
  color: #000;
  line-height: 1.3em;
}

.modal-success {
  opacity:0;
  position: fixed; /* Stay in place */
  z-index: -1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: hidden; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  transition: all ease .3s;
}

/* The Modal (background) */
.modal-editor {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-statement{
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%;
  overflow: hidden;
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-statement-content{
  background-color: #fefefe;
  margin: auto;
  padding: 10px;
  border: 1px solid #888;
  width: 94%;
  border-radius:10px;
  max-width:650px;
  position: relative;
  top: 5%;
}

.modal-statement-total{
  margin-left: auto;
  margin-right: auto;
  font-weight: 600;
  color: #2a2a2a;
}


.statement-div{
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction:column;
  -webkit-flex-direction:column;
  width:100%;
  align-content:center;
  -webkit-align-content:center;
  justify-content: center;
  -webkit-justify-content:center;
  margin-right: 2px;
}

.statement-parent{
  border: 1px solid #CCC;
  margin-bottom: 8px;
  border-radius:10px;
  margin-bottom: 25px;
}

.statement-row{
  display: flex;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-direction: row;
  -webkit-flex-direction: row;
  -webkit-align-content: center;
  align-content: center;
  justify-content: center;
  -webkit-justify-content: center;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  width: 100%;
  align-items: center;
  -webkit-align-items: center;
  padding-top: 6px;
  padding-bottom: 6px;
  position: relative;
}

.statement-row-el{
  flex: 1;
  -webkit-flex: 1;
  margin-left: 3px;
  margin-right: 3px;
  text-align: center;
  align-content: center;
  font-size:13px;
  min-width:70px;
}

.flex-two{
  flex:2 !important;
}

.align-right{
  flex: 1;
  -webkit-flex: 1;
  align-content: center;
  font-size:13px;
  min-width:70px;
  text-align: right;
  margin-right: 25px;
  margin-left: -25px;
}

.statement-row-first-half{
  display: flex;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-direction: row;
  -webkit-flex-direction: row;
  -webkit-flex-direction: row;
  align-items: center;
  align-content: center;
  justify-content: center;
  -webkit-justify-content:center;
  flex-wrap: wrap;
  -webkit-flex-wrap:wrap;
  -webkit-align-items:center;
  -webkit-align-content:center;
  flex: 1;
  -webkit-flex:1;
  margin-top: 2px;
  margin-bottom: 2px;
}


.statement-row-second-half{
  display: flex;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-direction: row;
  -webkit-flex-direction: row;
  -webkit-flex-direction: row;
  align-items: center;
  align-content: center;
  justify-content: center;
  -webkit-justify-content:center;
  flex-wrap: wrap;
  -webkit-flex-wrap:wrap;
  -webkit-align-items:center;
  -webkit-align-content:center;
  flex: 1;
  -webkit-flex:1;
  margin-top: 2px;
  margin-bottom: 2px;
}

.remaining{
  background: #7b8690;
  color:white;
  border-top: solid 1px #757575;
  border-radius: 0px 0px 7px 7px;
}

.header{
  background: #495057;
  color:white;
  font-size: .85em;
  border-radius: 7px 7px 0px 0px;
  text-align: center;
}

.charge-row{
  border-bottom: .5px solid #EEE;
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 17px;
  border: 1px solid #888;
  width: 85%; /* Could be more or less, depending on screen size */
  border-radius:10px;
  max-width:500px;
}

.modal-content-success {
  background-color: #fefefe;
  margin: 50% auto; /* 15% from the top and centered */
  margin-top: 25vh;

  padding: 17px;
  border: 1px solid #888;
  width: 85%; /* Could be more or less, depending on screen size */
  border-radius:10px;
  max-width:500px;
}


.modal-content-inner{
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-content:center;
  -webkit-align-content:center;
}

.modal-statement-inner{
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-content:center;
  -webkit-align-content:center;
  flex-direction:column;
  -webkit-flex-direction:column;
}


.modal-content-inner > .input-holder > p {
  text-align:center;
  width:100%;
  font-size: 1.1em;
}

.modal-input-group{
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction:row;
  -webkit-flex-direction:row;
  width:100%;
  align-content:center;
  -webkit-align-content:center;
  justify-content: center;
  -webkit-justify-content:center;

}

.modal-input-div{
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex:auto;
  -webkit-flex:auto;
  flex-direction:column;
  -webkit-flex-direction:column;
  margin: 5px;
  width:10px;
}

.modal-input{
  border-radius:5px;
  margin:5px;
  height: 45px;
  max-width:66px;
  text-align:center;
  border: 1px solid #ccc;
  font-size: 1.1em;
  width:100%;
}

.modal-edit-input{
  border-radius:5px;
  margin:5px;
  height: 45px;
  text-align:center;
  border: 1px solid #ccc;
  font-size: 1.1em;
  width:100%;
  -webkit-appearance: none;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
}

.state{
  text-transform: uppercase;
}

.fade{
  opacity: .5;
}

.modalSubmit{
  margin-top: 15px;
  height:40px;
  border: none;
  -webkit-transition: all ease-in .1s; /* Safari prior 6.1 */
  transition: all ease-in .1s;
  border-radius:5px;
  width: 155px;
  align-self: center;

  color:white;
  background-color:#075E9F;
  letter-spacing: 1px;
  margin-left: auto;
  margin-right: auto;
}

.modalEditorSubmit{
  margin-top: 15px;
  height:40px;
  border: none;
  -webkit-transition: all ease-in .05s; /* Safari prior 6.1 */
  transition: all ease-in .05s;
  border-radius:5px;
  width: 155px;
  align-self: center;

  color:white;
  background-color:#075E9F;
  letter-spacing: 1px;
  margin-left: auto;
  margin-right: auto;
  cursor: pointer;
}



.modalConfirmSubmit{
  margin-top: 15px;
  height:40px;
  border: none;
  -webkit-transition: all ease-in .05s; /* Safari prior 6.1 */
  transition: all ease-in .05s;
  border-radius:5px;
  width: 155px;
  align-self: center;
  font-size: .95em;
  color:white;
  background-color:#075E9F;
  letter-spacing: 1px;
  margin:5px;
  cursor: pointer;
}

.modalConfirmSubmit:hover, .modalEditorSubmit:hover {
  background: #14CEFB;
}


.submitButton{
  cursor:auto;
  opacity:.4;
  height:40px;
  border: none;
  -webkit-transition: all ease-in .05s; /* Safari prior 6.1 */
  transition: all ease-in .05s;
  border-radius:5px;
  width: 155px;
  align-self: center;
  color:white;
  background-color:#075E9F;
  letter-spacing: 1px;
  margin-left: auto;
  margin-right: auto;
}

.primary-div{
  transition: all ease .1s;
}

.submitActive{
  opacity:1 !important;
  cursor:pointer !important;
}

.submitActive:hover {
  background: #14CEFB;
}

.statementButton{
  cursor:pointer;
  height:40px;
  border: none;
  -webkit-transition: all ease-in .05s; /* Safari prior 6.1 */
  transition: all ease-in .05s;
  border-radius:5px;
  width: 175px;
  align-self: center;

  color:white;
  background-color:#495057;
  letter-spacing: 1px;
  margin-left:5px;
}

.statementButton:hover{
  background: #3c4248;
}

.iframe{
  width: 100%;
  min-height:165px;
  margin-bottom:10px;
}


.container{
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: none;
  align-items: center;
  align-content: center;
  flex-direction: column;
  -webkit-flex-direction:column;
  margin-bottom: 15px
}

.amountTxt{
  font-size: 1.4em;
  font-weight: 600;
  margin-left: 10px;
  position:relative;

}

.half{

  display:flex;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction:row;
  -webkit-flex-direction:row;
  align-items: center;
  -webkit-align-items:center;
  padding-bottom:20px;
}

@media only screen and (max-width: 756px) {
  #editAmt {
    margin-top: 50px;
  }
}

.half-statement-button{
  justify-content:center;
  -webkit-justify-content:center;
}

.half-col{
  flex:1;
  -webkit-flex:1;
  display:flex;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction:column;
  -webkit-flex-direction:column;
  align-items: center;
  -webkit-align-items:center;
}

.editIco{
  position: absolute;
  top: 40px;
  left: -5px;
  display: inherit;
  font-size: .6em;
}

.printStatement{
  display:inherit;
  bottom: 35px;
  position: relative;
  right: calc(50% - 16px);
  user-select:none;
}

.editIco:hover, .printStatement:hover{
  color: #656565;
  cursor:pointer;
}



.buttonBlock{
  display:flex;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction:row;
  -webkit-flex-direction:row;
  -webkit-align-content:center;
  align-content: center;
  justify-content: center;
  -webkit-justify-content:center;
  flex-wrap: wrap;
  -webkit-flex-wrap:wrap;
  width:100%;
  margin-top:10px;

}


.spinner {
  width: 45px;
  height: 45px;
  margin: 5px;
  position: relative;
  display:none;
}

.submit-spinner{
  width: 45px;
  height: 45px;
  position: fixed;
  left: 0;
  right: 0;
  margin: auto;
  margin-top: 14em;
  display:none;
}

.double-bounce1, .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #14CEFB;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;

  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  animation: sk-bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bounce {
  0%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}



/* Styling Checkbox Starts */
.checkbox-label {
    display: block;
    position: relative;
    margin-left: 10px;
    cursor: pointer;
    font-size: 22px;
    line-height: 24px;
    height: 24px;
    width: 24px;
    clear: both;
}

.checkbox-label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkbox-label .checkbox-custom {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 24px;
    width: 24px;
    background-color: transparent;
    border-radius: 5px;
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    border: 1.5px solid #CCC;
}


.checkbox-label input:checked ~ .checkbox-custom {
    background-color: #FFF;
    border-radius: 5px;
    -webkit-transform: rotate(0deg) scale(1);
    -ms-transform: rotate(0deg) scale(1);
    transform: rotate(0deg) scale(1);
    opacity:1;
    border: 1.5px solid #CCC;
}


.checkbox-label .checkbox-custom::after {
    position: absolute;
    content: "";
    left: 12px;
    top: 12px;
    height: 0px;
    width: 0px;
    border-radius: 5px;
    border: solid #14CEFB;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(0deg) scale(0);
    -ms-transform: rotate(0deg) scale(0);
    transform: rotate(0deg) scale(0);
    opacity:1;
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.1s ease-out;
    -moz-transition: all 0.1s ease-out;
    -ms-transition: all 0.1s ease-out;
    -o-transition: all 0.1s ease-out;
}


.checkbox-label input:checked ~ .checkbox-custom::after {
  -webkit-transform: rotate(45deg) scale(1);
  -ms-transform: rotate(45deg) scale(1);
  transform: rotate(45deg) scale(1);
  opacity:1;
  left: 8px;
  top: 3px;
  width: 6px;
  height: 12px;
  border: solid #009BFF;
  border-width: 0 2px 2px 0;
  background-color: transparent;
  border-radius: 0;
}



/* For Ripple Effect */
.checkbox-label .checkbox-custom::before {
    position: absolute;
    content: "";
    left: 10px;
    top: 10px;
    width: 0px;
    height: 0px;
    border-radius: 5px;
    border: 2px solid #14CEFB;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
}

.checkbox-label input:checked ~ .checkbox-custom::before {
    left: -3px;
    top: -3px;
    width: 24px;
    height: 24px;
    border-radius: 5px;
    -webkit-transform: scale(3);
    -ms-transform: scale(3);
    transform: scale(3);
    opacity:0;
    z-index: 999;
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
}