#loginFrom label.error {
    margin-left: 10px;
    width: auto;
    display: inline;
    color: #F00 !important;
    font-size: small;
    font-weight: initial;
}
input.error { border: 1px solid #F00; }
span.error { color: #F00 }
select.error {
    border: 1px solid #F00;
}

fieldset.scheduler-border {
    border: 1px solid #3c8dbc !important;
    padding: 0 1.4em 1.4em 1.4em !important;
    margin: 0 0 1.5em 0 !important;
    -webkit-box-shadow:  0px 0px 0px 0px #3c8dbc;
            box-shadow:  0px 0px 0px 0px #3c8dbc;
}

legend.scheduler-border {
    font-size: 1.2em !important;
    font-weight: bold !important;
    /*text-align: left !important;*/
    width:auto;
    padding:0 10px;
    border-bottom:none;
}

input[type="text"] ~ label:after {
  color: #117efd;
}
.country-edit-flag-wrap {
    overflow: hidden;
}
.country-edit-flag-wrap input#Flag,input#Image, .country-edit-flag-wrap img {
    float: left;
}
.country-view-image-box {
    float: left;
    position: relative;
    margin: 8px 8px 0 0;
}

a.download-bt {
    position: absolute;
    bottom: 6px;
    right: 13px;
    color: #fff;
    border: 1px solid #fff;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    border-radius: 50%;
}
.content-wrapper{height: auto;}

input.selectcheckbox {
    position: absolute;
    left: 8px;
    bottom: 5px;
    color: #fff;
    border: 1px solid #fff;
    width: 14px;
    border-radius: 50%;
}

#map {
    height: 300px;
    width: 700px;
}

.changeWrapper {
    float: right;
    margin-right: 30%;
    padding: 0;
    margin-top: -5px;
}

.csv-wrap a.close-modal {
position: absolute;
right: 9px;
top: 5px;
}
.csv-wrap td, .csv-wrap th {
padding: 8px;
}
.csv-wrap table {
width: 100%;
margin-bottom: 12px;
}
button.btn.btn-info.send-email {
margin-right: 12px;
}
.gt {
    max-height: 350px;
    overflow: auto;
}
.select2-container--default .select2-selection--single {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 0;
    height: 34px;
}
.search-n-reset-wrap{overflow: hidden;}
.search-n-reset-wrap a{margin-left: 5px}

.organiseCategory ul{padding: 0;}
.organiseCategory ul li{ width: 25%; float: left;list-style: none;}
.organiseCategory ul li input[type="checkbox"]{margin-right: 8px}

.search-btn-group {
    position: absolute;
    right: 12px;
    top: 0;
}
.clearfix.search-row-box {
    margin-bottom: 14px;
}

.nav-tabs-custom>.nav-tabs>li.active>a {
    border-left-color: #ccc;
    border-right-color: #ccc;
}
.nav-tabs-custom>.nav-tabs {
    border-bottom-color: #ccc;
}

.button-custom-search {
    padding: 0px;
    margin: 12px 0;
}
.arabic_label_align {
    width:100%;
    text-align:right
}
label#month-error {
    position: absolute;
    bottom: -26px;
    left: 1px;
}
.form-group {
    margin-bottom: 15px;
    position: relative;
}
label#month-error + .select2-container {
    border: 1px solid red;
    margin-left: 1px;
}
label#month-error + .select2-container .select2-container--default .select2-selection--single{border: none}

.cstm-hyperlink-weight{ font-weight: 600; margin-bottom: 5px; }

.formInline .form-control{ display: inline-block; width: auto;}
.btn-export{margin-top: 10px; float: right;}
.div-margin {margin-top: 10px;}

/*02-08-2019*/
#modalLargeImage .modal-body img{width: 100%;}

.btn-submitted {
    background-color: #009688;
    border-color: #009688;
    color: #fff;
}


@media(min-width:1366px){
   .changeWrapper{margin-right: 33%;}
}
.user-panel>.info {
    padding: 5px 5px 5px 15px;
    line-height: 2.70;
    position: absolute;
    left: 55px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #5a595e;
    border-color: #5a595e;
    padding: 1px 10px;
    color: #fff;
}

/*style from old system -start*/
   
.demo-checkbox label,
.demo-radio-button label {
  min-width: 200px;
  margin-bottom: 20px;
}

.demo-swtich .demo-switch-title,
.demo-swtich .switch {
  width: 150px;
  margin-bottom: 10px;
  display: inline-block;
}

[type="checkbox"] + label {
  padding-left: 26px;
  height: 25px;
  line-height: 21px;
  font-weight: normal;
}

[type="checkbox"]:checked + label:before {
  top: -4px;
  left: -2px;
  width: 11px;
  height: 19px;
}

[type="checkbox"]:checked.chk-col-red + label:before {
  border-right: 2px solid #fb3a3a;
  border-bottom: 2px solid #fb3a3a;
}

[type="checkbox"]:checked.chk-col-pink + label:before {
  border-right: 2px solid #e91e63;
  border-bottom: 2px solid #e91e63;
}

[type="checkbox"]:checked.chk-col-purple + label:before {
  border-right: 2px solid #7460ee;
  border-bottom: 2px solid #7460ee;
}

[type="checkbox"]:checked.chk-col-deep-purple + label:before {
  border-right: 2px solid #673ab7;
  border-bottom: 2px solid #673ab7;
}

[type="checkbox"]:checked.chk-col-indigo + label:before {
  border-right: 2px solid #3f51b5;
  border-bottom: 2px solid #3f51b5;
}

[type="checkbox"]:checked.chk-col-blue + label:before {
  border-right: 2px solid #02bec9;
  border-bottom: 2px solid #02bec9;
}

[type="checkbox"]:checked.chk-col-light-blue + label:before {
  border-right: 2px solid #03a9f4;
  border-bottom: 2px solid #03a9f4;
}

[type="checkbox"]:checked.chk-col-cyan + label:before {
  border-right: 2px solid #00bcd4;
  border-bottom: 2px solid #00bcd4;
}

[type="checkbox"]:checked.chk-col-teal + label:before {
  border-right: 2px solid #009688;
  border-bottom: 2px solid #009688;
}

[type="checkbox"]:checked.chk-col-green + label:before {
  border-right: 2px solid #26c6da;
  border-bottom: 2px solid #26c6da;
}

[type="checkbox"]:checked.chk-col-light-green + label:before {
  border-right: 2px solid #8bc34a;
  border-bottom: 2px solid #8bc34a;
}

[type="checkbox"]:checked.chk-col-lime + label:before {
  border-right: 2px solid #cddc39;
  border-bottom: 2px solid #cddc39;
}

[type="checkbox"]:checked.chk-col-yellow + label:before {
  border-right: 2px solid #ffe821;
  border-bottom: 2px solid #ffe821;
}

[type="checkbox"]:checked.chk-col-amber + label:before {
  border-right: 2px solid #ffc107;
  border-bottom: 2px solid #ffc107;
}

[type="checkbox"]:checked.chk-col-orange + label:before {
  border-right: 2px solid #ff9800;
  border-bottom: 2px solid #ff9800;
}

[type="checkbox"]:checked.chk-col-deep-orange + label:before {
  border-right: 2px solid #ff5722;
  border-bottom: 2px solid #ff5722;
}

[type="checkbox"]:checked.chk-col-brown + label:before {
  border-right: 2px solid #795548;
  border-bottom: 2px solid #795548;
}

[type="checkbox"]:checked.chk-col-grey + label:before {
  border-right: 2px solid #9e9e9e;
  border-bottom: 2px solid #9e9e9e;
}

[type="checkbox"]:checked.chk-col-blue-grey + label:before {
  border-right: 2px solid #607d8b;
  border-bottom: 2px solid #607d8b;
}

[type="checkbox"]:checked.chk-col-black + label:before {
  border-right: 2px solid #000000;
  border-bottom: 2px solid #000000;
}

[type="checkbox"]:checked.chk-col-white + label:before {
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
}

[type="checkbox"].filled-in:checked + label:after {
  top: 0;
  width: 20px;
  height: 20px;
  border: 2px solid #26a69a;
  background-color: #26a69a;
  z-index: 0;
}

[type="checkbox"].filled-in:checked + label:before {
  border-right: 2px solid #fff !important;
  border-bottom: 2px solid #fff !important;
}

[type="checkbox"].filled-in:checked.chk-col-red + label:after {
  border: 2px solid #fb3a3a;
  background-color: #fb3a3a;
}

[type="checkbox"].filled-in:checked.chk-col-pink + label:after {
  border: 2px solid #e91e63;
  background-color: #e91e63;
}

[type="checkbox"].filled-in:checked.chk-col-purple + label:after {
  border: 2px solid #7460ee;
  background-color: #7460ee;
}

[type="checkbox"].filled-in:checked.chk-col-deep-purple + label:after {
  border: 2px solid #673ab7;
  background-color: #673ab7;
}

[type="checkbox"].filled-in:checked.chk-col-indigo + label:after {
  border: 2px solid #3f51b5;
  background-color: #3f51b5;
}

[type="checkbox"].filled-in:checked.chk-col-blue + label:after {
  border: 2px solid #02bec9;
  background-color: #02bec9;
}

[type="checkbox"].filled-in:checked.chk-col-light-blue + label:after {
  border: 2px solid #03a9f4;
  background-color: #03a9f4;
}

[type="checkbox"].filled-in:checked.chk-col-cyan + label:after {
  border: 2px solid #00bcd4;
  background-color: #00bcd4;
}

[type="checkbox"].filled-in:checked.chk-col-teal + label:after {
  border: 2px solid #009688;
  background-color: #009688;
}

[type="checkbox"].filled-in:checked.chk-col-green + label:after {
  border: 2px solid #26c6da;
  background-color: #26c6da;
}

[type="checkbox"].filled-in:checked.chk-col-light-green + label:after {
  border: 2px solid #8bc34a;
  background-color: #8bc34a;
}

[type="checkbox"].filled-in:checked.chk-col-lime + label:after {
  border: 2px solid #cddc39;
  background-color: #cddc39;
}

[type="checkbox"].filled-in:checked.chk-col-yellow + label:after {
  border: 2px solid #ffe821;
  background-color: #ffe821;
}

[type="checkbox"].filled-in:checked.chk-col-amber + label:after {
  border: 2px solid #ffc107;
  background-color: #ffc107;
}

[type="checkbox"].filled-in:checked.chk-col-orange + label:after {
  border: 2px solid #ff9800;
  background-color: #ff9800;
}

[type="checkbox"].filled-in:checked.chk-col-deep-orange + label:after {
  border: 2px solid #ff5722;
  background-color: #ff5722;
}

[type="checkbox"].filled-in:checked.chk-col-brown + label:after {
  border: 2px solid #795548;
  background-color: #795548;
}

[type="checkbox"].filled-in:checked.chk-col-grey + label:after {
  border: 2px solid #9e9e9e;
  background-color: #9e9e9e;
}

[type="checkbox"].filled-in:checked.chk-col-blue-grey + label:after {
  border: 2px solid #607d8b;
  background-color: #607d8b;
}

[type="checkbox"].filled-in:checked.chk-col-black + label:after {
  border: 2px solid #000000;
  background-color: #000000;
}

[type="checkbox"].filled-in:checked.chk-col-white + label:after {
  border: 2px solid #ffffff;
  background-color: #ffffff;
}

[type="radio"]:not(:checked) + label {
  padding-left: 26px;
  height: 25px;
  line-height: 25px;
  font-weight: normal;
}

[type="radio"]:checked + label {
  padding-left: 26px;
  height: 25px;
  line-height: 25px;
  font-weight: normal;
}

[type="radio"].radio-col-red:checked + label:after {
  background-color: #fb3a3a;
  border-color: #fb3a3a;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].radio-col-pink:checked + label:after {
  background-color: #e91e63;
  border-color: #e91e63;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].radio-col-purple:checked + label:after {
  background-color: #7460ee;
  border-color: #7460ee;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].radio-col-deep-purple:checked + label:after {
  background-color: #673ab7;
  border-color: #673ab7;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].radio-col-indigo:checked + label:after {
  background-color: #3f51b5;
  border-color: #3f51b5;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].radio-col-blue:checked + label:after {
  background-color: #02bec9;
  border-color: #02bec9;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].radio-col-light-blue:checked + label:after {
  background-color: #03a9f4;
  border-color: #03a9f4;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].radio-col-cyan:checked + label:after {
  background-color: #00bcd4;
  border-color: #00bcd4;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].radio-col-teal:checked + label:after {
  background-color: #009688;
  border-color: #009688;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].radio-col-green:checked + label:after {
  background-color: #26c6da;
  border-color: #26c6da;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].radio-col-light-green:checked + label:after {
  background-color: #8bc34a;
  border-color: #8bc34a;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].radio-col-lime:checked + label:after {
  background-color: #cddc39;
  border-color: #cddc39;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].radio-col-yellow:checked + label:after {
  background-color: #ffe821;
  border-color: #ffe821;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].radio-col-amber:checked + label:after {
  background-color: #ffc107;
  border-color: #ffc107;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].radio-col-orange:checked + label:after {
  background-color: #ff9800;
  border-color: #ff9800;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].radio-col-deep-orange:checked + label:after {
  background-color: #ff5722;
  border-color: #ff5722;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].radio-col-brown:checked + label:after {
  background-color: #795548;
  border-color: #795548;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].radio-col-grey:checked + label:after {
  background-color: #9e9e9e;
  border-color: #9e9e9e;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].radio-col-blue-grey:checked + label:after {
  background-color: #607d8b;
  border-color: #607d8b;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].radio-col-black:checked + label:after {
  background-color: #000000;
  border-color: #000000;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].radio-col-white:checked + label:after {
  background-color: #ffffff;
  border-color: #ffffff;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].with-gap.radio-col-red:checked + label:before {
  border: 2px solid #fb3a3a;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].with-gap.radio-col-red:checked + label:after {
  background-color: #fb3a3a;
  border: 2px solid #fb3a3a;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].with-gap.radio-col-pink:checked + label:before {
  border: 2px solid #e91e63;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].with-gap.radio-col-pink:checked + label:after {
  background-color: #e91e63;
  border: 2px solid #e91e63;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].with-gap.radio-col-purple:checked + label:before {
  border: 2px solid #7460ee;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].with-gap.radio-col-purple:checked + label:after {
  background-color: #7460ee;
  border: 2px solid #7460ee;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].with-gap.radio-col-deep-purple:checked + label:before {
  border: 2px solid #673ab7;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].with-gap.radio-col-deep-purple:checked + label:after {
  background-color: #673ab7;
  border: 2px solid #673ab7;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].with-gap.radio-col-indigo:checked + label:before {
  border: 2px solid #3f51b5;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].with-gap.radio-col-indigo:checked + label:after {
  background-color: #3f51b5;
  border: 2px solid #3f51b5;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].with-gap.radio-col-blue:checked + label:before {
  border: 2px solid #02bec9;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].with-gap.radio-col-blue:checked + label:after {
  background-color: #02bec9;
  border: 2px solid #02bec9;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].with-gap.radio-col-light-blue:checked + label:before {
  border: 2px solid #03a9f4;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].with-gap.radio-col-light-blue:checked + label:after {
  background-color: #03a9f4;
  border: 2px solid #03a9f4;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].with-gap.radio-col-cyan:checked + label:before {
  border: 2px solid #00bcd4;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].with-gap.radio-col-cyan:checked + label:after {
  background-color: #00bcd4;
  border: 2px solid #00bcd4;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].with-gap.radio-col-teal:checked + label:before {
  border: 2px solid #009688;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].with-gap.radio-col-teal:checked + label:after {
  background-color: #009688;
  border: 2px solid #009688;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].with-gap.radio-col-green:checked + label:before {
  border: 2px solid #26c6da;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].with-gap.radio-col-green:checked + label:after {
  background-color: #26c6da;
  border: 2px solid #26c6da;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].with-gap.radio-col-light-green:checked + label:before {
  border: 2px solid #8bc34a;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].with-gap.radio-col-light-green:checked + label:after {
  background-color: #8bc34a;
  border: 2px solid #8bc34a;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].with-gap.radio-col-lime:checked + label:before {
  border: 2px solid #cddc39;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].with-gap.radio-col-lime:checked + label:after {
  background-color: #cddc39;
  border: 2px solid #cddc39;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].with-gap.radio-col-yellow:checked + label:before {
  border: 2px solid #ffe821;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].with-gap.radio-col-yellow:checked + label:after {
  background-color: #ffe821;
  border: 2px solid #ffe821;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].with-gap.radio-col-amber:checked + label:before {
  border: 2px solid #ffc107;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].with-gap.radio-col-amber:checked + label:after {
  background-color: #ffc107;
  border: 2px solid #ffc107;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].with-gap.radio-col-orange:checked + label:before {
  border: 2px solid #ff9800;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].with-gap.radio-col-orange:checked + label:after {
  background-color: #ff9800;
  border: 2px solid #ff9800;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].with-gap.radio-col-deep-orange:checked + label:before {
  border: 2px solid #ff5722;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].with-gap.radio-col-deep-orange:checked + label:after {
  background-color: #ff5722;
  border: 2px solid #ff5722;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].with-gap.radio-col-brown:checked + label:before {
  border: 2px solid #795548;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].with-gap.radio-col-brown:checked + label:after {
  background-color: #795548;
  border: 2px solid #795548;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].with-gap.radio-col-grey:checked + label:before {
  border: 2px solid #9e9e9e;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].with-gap.radio-col-grey:checked + label:after {
  background-color: #9e9e9e;
  border: 2px solid #9e9e9e;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].with-gap.radio-col-blue-grey:checked + label:before {
  border: 2px solid #607d8b;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].with-gap.radio-col-blue-grey:checked + label:after {
  background-color: #607d8b;
  border: 2px solid #607d8b;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].with-gap.radio-col-black:checked + label:before {
  border: 2px solid #000000;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].with-gap.radio-col-black:checked + label:after {
  background-color: #000000;
  border: 2px solid #000000;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].with-gap.radio-col-white:checked + label:before {
  border: 2px solid #ffffff;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

[type="radio"].with-gap.radio-col-white:checked + label:after {
  background-color: #ffffff;
  border: 2px solid #ffffff;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
}

.switch label {
  font-weight: normal;
  font-size: 13px;
}
.switch label .lever {
  margin: 0 14px;
}
.switch
  label
  input[type="checkbox"]:checked:not(:disabled)
  ~ .lever.switch-col-red:active:after {
  -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4),
    0 0 0 15px rgba(251, 58, 58, 0.1);
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4),
    0 0 0 15px rgba(251, 58, 58, 0.1);
}
.switch label input[type="checkbox"]:checked + .lever.switch-col-red {
  background-color: rgba(251, 58, 58, 0.5);
}
.switch label input[type="checkbox"]:checked + .lever.switch-col-red:after {
  background-color: #fb3a3a;
}
.switch
  label
  input[type="checkbox"]:checked:not(:disabled)
  ~ .lever.switch-col-pink:active:after {
  -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4),
    0 0 0 15px rgba(233, 30, 99, 0.1);
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4),
    0 0 0 15px rgba(233, 30, 99, 0.1);
}
.switch label input[type="checkbox"]:checked + .lever.switch-col-pink {
  background-color: rgba(233, 30, 99, 0.5);
}
.switch label input[type="checkbox"]:checked + .lever.switch-col-pink:after {
  background-color: #e91e63;
}
.switch
  label
  input[type="checkbox"]:checked:not(:disabled)
  ~ .lever.switch-col-purple:active:after {
  -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4),
    0 0 0 15px rgba(116, 96, 238, 0.1);
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4),
    0 0 0 15px rgba(116, 96, 238, 0.1);
}
.switch label input[type="checkbox"]:checked + .lever.switch-col-purple {
  background-color: rgba(116, 96, 238, 0.5);
}
.switch label input[type="checkbox"]:checked + .lever.switch-col-purple:after {
  background-color: #7460ee;
}
.switch
  label
  input[type="checkbox"]:checked:not(:disabled)
  ~ .lever.switch-col-deep-purple:active:after {
  -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4),
    0 0 0 15px rgba(103, 58, 183, 0.1);
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4),
    0 0 0 15px rgba(103, 58, 183, 0.1);
}
.switch label input[type="checkbox"]:checked + .lever.switch-col-deep-purple {
  background-color: rgba(103, 58, 183, 0.5);
}
.switch
  label
  input[type="checkbox"]:checked
  + .lever.switch-col-deep-purple:after {
  background-color: #673ab7;
}
.switch
  label
  input[type="checkbox"]:checked:not(:disabled)
  ~ .lever.switch-col-indigo:active:after {
  -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4),
    0 0 0 15px rgba(63, 81, 181, 0.1);
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4),
    0 0 0 15px rgba(63, 81, 181, 0.1);
}
.switch label input[type="checkbox"]:checked + .lever.switch-col-indigo {
  background-color: rgba(63, 81, 181, 0.5);
}
.switch label input[type="checkbox"]:checked + .lever.switch-col-indigo:after {
  background-color: #3f51b5;
}
.switch
  label
  input[type="checkbox"]:checked:not(:disabled)
  ~ .lever.switch-col-blue:active:after {
  -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4),
    0 0 0 15px rgba(2, 190, 201, 0.1);
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4),
    0 0 0 15px rgba(2, 190, 201, 0.1);
}
.switch label input[type="checkbox"]:checked + .lever.switch-col-blue {
  background-color: rgba(2, 190, 201, 0.5);
}
.switch label input[type="checkbox"]:checked + .lever.switch-col-blue:after {
  background-color: #02bec9;
}
.switch
  label
  input[type="checkbox"]:checked:not(:disabled)
  ~ .lever.switch-col-light-blue:active:after {
  -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4),
    0 0 0 15px rgba(3, 169, 244, 0.1);
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4),
    0 0 0 15px rgba(3, 169, 244, 0.1);
}
.switch label input[type="checkbox"]:checked + .lever.switch-col-light-blue {
  background-color: rgba(3, 169, 244, 0.5);
}
.switch
  label
  input[type="checkbox"]:checked
  + .lever.switch-col-light-blue:after {
  background-color: #03a9f4;
}
.switch
  label
  input[type="checkbox"]:checked:not(:disabled)
  ~ .lever.switch-col-cyan:active:after {
  -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4),
    0 0 0 15px rgba(0, 188, 212, 0.1);
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4),
    0 0 0 15px rgba(0, 188, 212, 0.1);
}
.switch label input[type="checkbox"]:checked + .lever.switch-col-cyan {
  background-color: rgba(0, 188, 212, 0.5);
}
.switch label input[type="checkbox"]:checked + .lever.switch-col-cyan:after {
  background-color: #00bcd4;
}
.switch
  label
  input[type="checkbox"]:checked:not(:disabled)
  ~ .lever.switch-col-teal:active:after {
  -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4),
    0 0 0 15px rgba(0, 150, 136, 0.1);
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4),
    0 0 0 15px rgba(0, 150, 136, 0.1);
}
.switch label input[type="checkbox"]:checked + .lever.switch-col-teal {
  background-color: rgba(0, 150, 136, 0.5);
}
.switch label input[type="checkbox"]:checked + .lever.switch-col-teal:after {
  background-color: #009688;
}
.switch
  label
  input[type="checkbox"]:checked:not(:disabled)
  ~ .lever.switch-col-green:active:after {
  -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4),
    0 0 0 15px rgba(38, 198, 218, 0.1);
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4),
    0 0 0 15px rgba(38, 198, 218, 0.1);
}
.switch label input[type="checkbox"]:checked + .lever.switch-col-green {
  background-color: rgba(38, 198, 218, 0.5);
}
.switch label input[type="checkbox"]:checked + .lever.switch-col-green:after {
  background-color: #26c6da;
}
.switch
  label
  input[type="checkbox"]:checked:not(:disabled)
  ~ .lever.switch-col-light-green:active:after {
  -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4),
    0 0 0 15px rgba(139, 195, 74, 0.1);
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4),
    0 0 0 15px rgba(139, 195, 74, 0.1);
}
.switch label input[type="checkbox"]:checked + .lever.switch-col-light-green {
  background-color: rgba(139, 195, 74, 0.5);
}
.switch
  label
  input[type="checkbox"]:checked
  + .lever.switch-col-light-green:after {
  background-color: #8bc34a;
}
.switch
  label
  input[type="checkbox"]:checked:not(:disabled)
  ~ .lever.switch-col-lime:active:after {
  -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4),
    0 0 0 15px rgba(205, 220, 57, 0.1);
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4),
    0 0 0 15px rgba(205, 220, 57, 0.1);
}
.switch label input[type="checkbox"]:checked + .lever.switch-col-lime {
  background-color: rgba(205, 220, 57, 0.5);
}
.switch label input[type="checkbox"]:checked + .lever.switch-col-lime:after {
  background-color: #cddc39;
}
.switch
  label
  input[type="checkbox"]:checked:not(:disabled)
  ~ .lever.switch-col-yellow:active:after {
  -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4),
    0 0 0 15px rgba(255, 232, 33, 0.1);
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4),
    0 0 0 15px rgba(255, 232, 33, 0.1);
}
.switch label input[type="checkbox"]:checked + .lever.switch-col-yellow {
  background-color: rgba(255, 232, 33, 0.5);
}
.switch label input[type="checkbox"]:checked + .lever.switch-col-yellow:after {
  background-color: #ffe821;
}
.switch
  label
  input[type="checkbox"]:checked:not(:disabled)
  ~ .lever.switch-col-amber:active:after {
  -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4),
    0 0 0 15px rgba(255, 193, 7, 0.1);
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4),
    0 0 0 15px rgba(255, 193, 7, 0.1);
}
.switch label input[type="checkbox"]:checked + .lever.switch-col-amber {
  background-color: rgba(255, 193, 7, 0.5);
}
.switch label input[type="checkbox"]:checked + .lever.switch-col-amber:after {
  background-color: #ffc107;
}
.switch
  label
  input[type="checkbox"]:checked:not(:disabled)
  ~ .lever.switch-col-orange:active:after {
  -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4),
    0 0 0 15px rgba(255, 152, 0, 0.1);
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4),
    0 0 0 15px rgba(255, 152, 0, 0.1);
}
.switch label input[type="checkbox"]:checked + .lever.switch-col-orange {
  background-color: rgba(255, 152, 0, 0.5);
}
.switch label input[type="checkbox"]:checked + .lever.switch-col-orange:after {
  background-color: #ff9800;
}
.switch
  label
  input[type="checkbox"]:checked:not(:disabled)
  ~ .lever.switch-col-deep-orange:active:after {
  -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4),
    0 0 0 15px rgba(255, 87, 34, 0.1);
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4),
    0 0 0 15px rgba(255, 87, 34, 0.1);
}
.switch label input[type="checkbox"]:checked + .lever.switch-col-deep-orange {
  background-color: rgba(255, 87, 34, 0.5);
}
.switch
  label
  input[type="checkbox"]:checked
  + .lever.switch-col-deep-orange:after {
  background-color: #ff5722;
}
.switch
  label
  input[type="checkbox"]:checked:not(:disabled)
  ~ .lever.switch-col-brown:active:after {
  -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4),
    0 0 0 15px rgba(121, 85, 72, 0.1);
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4),
    0 0 0 15px rgba(121, 85, 72, 0.1);
}
.switch label input[type="checkbox"]:checked + .lever.switch-col-brown {
  background-color: rgba(121, 85, 72, 0.5);
}
.switch label input[type="checkbox"]:checked + .lever.switch-col-brown:after {
  background-color: #795548;
}
.switch
  label
  input[type="checkbox"]:checked:not(:disabled)
  ~ .lever.switch-col-grey:active:after {
  -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4),
    0 0 0 15px rgba(158, 158, 158, 0.1);
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4),
    0 0 0 15px rgba(158, 158, 158, 0.1);
}
.switch label input[type="checkbox"]:checked + .lever.switch-col-grey {
  background-color: rgba(158, 158, 158, 0.5);
}
.switch label input[type="checkbox"]:checked + .lever.switch-col-grey:after {
  background-color: #9e9e9e;
}
.switch
  label
  input[type="checkbox"]:checked:not(:disabled)
  ~ .lever.switch-col-blue-grey:active:after {
  -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4),
    0 0 0 15px rgba(96, 125, 139, 0.1);
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4),
    0 0 0 15px rgba(96, 125, 139, 0.1);
}
.switch label input[type="checkbox"]:checked + .lever.switch-col-blue-grey {
  background-color: rgba(96, 125, 139, 0.5);
}
.switch
  label
  input[type="checkbox"]:checked
  + .lever.switch-col-blue-grey:after {
  background-color: #607d8b;
}
.switch
  label
  input[type="checkbox"]:checked:not(:disabled)
  ~ .lever.switch-col-black:active:after {
  -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4),
    0 0 0 15px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.1);
}
.switch label input[type="checkbox"]:checked + .lever.switch-col-black {
  background-color: rgba(0, 0, 0, 0.5);
}
.switch label input[type="checkbox"]:checked + .lever.switch-col-black:after {
  background-color: #000000;
}
.switch
  label
  input[type="checkbox"]:checked:not(:disabled)
  ~ .lever.switch-col-white:active:after {
  -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4),
    0 0 0 15px rgba(255, 255, 255, 0.1);
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4),
    0 0 0 15px rgba(255, 255, 255, 0.1);
}
.switch label input[type="checkbox"]:checked + .lever.switch-col-white {
  background-color: rgba(255, 255, 255, 0.5);
}
.switch label input[type="checkbox"]:checked + .lever.switch-col-white:after {
  background-color: #ffffff;
}

/*style from old system - end*/