.pretty * {
 box-sizing:border-box
}
.pretty input:not([type=checkbox]):not([type=radio]) {
 display:none
}
.pretty {
 position:relative;
 display:inline-block;
 /*margin-right:1em; */
 white-space:nowrap;
 line-height:1
}
.pretty input {
 position:absolute;
 left:0;
 top:0;
 min-width:1em;
 width:100%;
 height:100%;
 z-index:2;
 opacity:0;
 margin:0;
 padding:0;
 cursor:pointer
}
.pretty .state label {
 position:initial;
 display:inline-block;
 font-weight:400;
 margin:0;
 text-indent:1.5em;
 min-width:calc(1em + 2px)

}
.pretty .state label:after,.pretty .state label:before {
 content:'';
 width:calc(1em + 2px);
 height:calc(1em + 2px);
 display:block;
color: #024787;
 box-sizing:border-box;
 border-radius:0;
 border:1px solid transparent;
 z-index:0;
 position:absolute;
 left:0;
 top:calc((0% - (100% - 1em)) - 8%);
 background-color:transparent
}
.pretty .state label:before {
 border-color:#bdc3c7
color: #024787;
}
.pretty .state.p-is-hover,.pretty .state.p-is-indeterminate {
 display:none
}
.pretty.p-default.p-fill .state label:after {
 -webkit-transform:scale(1);
 -ms-transform:scale(1);
 transform:scale(1)
}
.pretty.p-default .state label:after {
 -webkit-transform:scale(.6);
 -ms-transform:scale(.6);
 transform:scale(.6)
}
.pretty.p-default input:checked~.state label:after {
 background-color:#bdc3c7!important
}
.pretty.p-default.p-thick .state label:after,.pretty.p-default.p-thick .state label:before {
 border-width:calc(1em / 7)
}
.pretty.p-default.p-thick .state label:after {
 -webkit-transform:scale(.4)!important;
 -ms-transform:scale(.4)!important;
 transform:scale(.4)!important
}
.pretty.p-icon .state .icon {
 position:absolute;
 font-size:1em;
 width:calc(1em + 2px);
 height:calc(1em + 2px);
 left:0;
 z-index:1;
 text-align:center;
 line-height:normal;
 top:calc((0% - (100% - 1em)) - 8%);
 border:1px solid transparent;
 opacity:0
}
.pretty.p-icon .state .icon:before {
 margin:0;
 width:100%;
 height:100%;
 text-align:center;
 display:-webkit-box;
 display:-ms-flexbox;
 display:flex;
 -webkit-box-flex:1;
 -ms-flex:1;
 flex:1;
 -webkit-box-pack:center;
 -ms-flex-pack:center;
 justify-content:center;
 -webkit-box-align:center;
 -ms-flex-align:center;
 align-items:center;
 line-height:1
}
.pretty.p-icon input:checked~.state .icon {
 opacity:1
}
.pretty.p-icon input:checked~.state label:before {
 border-color:#5a656b
}
.pretty.p-svg .state .svg {
 position:absolute;
 font-size:1em;
 width:calc(1em + 2px);
 height:calc(1em + 2px);
 left:0;
 z-index:1;
 text-align:center;
 line-height:normal;
 top:calc((0% - (100% - 1em)) - 8%);
 border:1px solid transparent;
 opacity:0
}
.pretty.p-svg .state svg {
 margin:0;
 width:100%;
 height:100%;
 text-align:center;
 display:-webkit-box;
 display:-ms-flexbox;
 display:flex;
 -webkit-box-flex:1;
 -ms-flex:1;
 flex:1;
 -webkit-box-pack:center;
 -ms-flex-pack:center;
 justify-content:center;
 -webkit-box-align:center;
 -ms-flex-align:center;
 align-items:center;
 line-height:1
}
.pretty.p-svg input:checked~.state .svg {
 opacity:1
}
.pretty.p-image .state img {
 opacity:0;
 position:absolute;
 width:calc(1em + 2px);
 height:calc(1em + 2px);
 top:0;
 top:calc((0% - (100% - 1em)) - 8%);
 left:0;
 z-index:0;
 text-align:center;
 line-height:normal;
 -webkit-transform:scale(.8);
 -ms-transform:scale(.8);
 transform:scale(.8)
}
.pretty.p-image input:checked~.state img {
 opacity:1
}
.pretty.p-switch input {
 min-width:2em
}
.pretty.p-switch .state {
 position:relative
}
.pretty.p-switch .state:before {
 content:'';
 border:1px solid #bdc3c7;
 border-radius:60px;
 width:2em;
 box-sizing:unset;
 height:calc(1em + 2px);
 position:absolute;
 top:0;
 top:calc((0% - (100% - 1em)) - 16%);
 z-index:0;
 transition:all .5s ease
}
.pretty.p-switch .state label {
 text-indent:2.5em;
color:#024787;
}
.pretty.p-switch .state label:after,.pretty.p-switch .state label:before {
 transition:all .5s ease;
 border-radius:100%;
 left:0;
 border-color:transparent;
 -webkit-transform:scale(.8);
 -ms-transform:scale(.8);
 transform:scale(.8)
}
.pretty.p-switch .state label:after {
 background-color:#bdc3c7!important
}
.pretty.p-switch input:checked~.state:before {
 border-color:#5a656b
}
.pretty.p-switch input:checked~.state label:before {
 opacity:0
}
.pretty.p-switch input:checked~.state label:after {
 background-color:#024787!important;
 left:1em
}
.pretty.p-switch.p-fill input:checked~.state:before {
 border-color:#5a656b;
 background-color:#5a656b!important
}