body{
    --red: #c30a0a;
    --orange: #ff6500;
    --green: #7bd886;
    --dark_blue: #424b6a;
    --white: #ffffff;
}

/* =========================================
                    MESSAGES
   ========================================= */
.msg_box{
    padding: 7px 35px 7px 50px;
    border: 3px solid #000;
    margin-bottom: 10px;
    font-style: italic;
    background-color: var(--white);
    position: relative;
}
.msg_box .accept{
    color: var(--green);
    text-decoration: underline;
    cursor: pointer;
}
.msg_box.vertical{
    padding: 40px 10px 17px;
    text-align: center;
}
.msg_box.vertical:before{
    top: 10px;
    left: calc(50% - 10px);
}
.msg_box.notice, .msg_box{
    border-color: var(--dark_blue);
    color: var(--dark_blue);
}
.msg_box.warning{
    border-color: var(--orange);
    color: #d05605;
}
.msg_box.success{
    border-color: var(--green);
    color: #54965b;
}
.msg_box.error{
    border-color: var(--red);
    color: var(--red);
}
.msg_box:before{
    content: '';
    position: absolute;
    left: 15px;
    top: calc(50% - 10px);
    background-image: url('data:image/svg+xml,<svg fill="%23ff6500" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>');
    background-position: center;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-size: contain;
    animation-name: scaling_error_icon;
    animation-iteration-count: infinite;
    animation-duration: 1.5s;
    animation-direction: alternate;
}
.msg_box.success:before{
    background-image: url('data:image/svg+xml,<svg fill="%237bd886" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg>');
    animation-name: none;
}
.msg_box.notice:before{
    background-image: url('data:image/svg+xml, <svg fill="%23424b6a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/></svg>');
    animation-name: none;
}
.msg_box.error:before{
    background-image: url('data:image/svg+xml, <svg fill="%23C30A0A" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/></svg>');
    animation-name: none;
}
.msg_box.bottom{
    margin-bottom: 0;
}
.msg_box.bottom:after,
.msg_box.top:after{
    content: '';
    position: absolute;
    border-right: solid 10px transparent;
    border-left: solid 10px transparent;
    left: calc(50% - 10px);
    z-index: 2;
}
.msg_box.bottom:after{
    border-top: solid 12px var(--dark_blue);
    top: 100%;
}
.msg_box.top:after{
    bottom: 100%;
    border-bottom: solid 12px var(--dark_blue);
}
.msg_box.bottom.success:after{
    border-top: solid 12px var(--green);
}
.msg_box.top.success:after{
    border-bottom: solid 12px var(--green);
}
.msg_box.bottom.warning:after{
    border-top: solid 12px var(--orange);
}
.msg_box.top.warning:after{
    border-bottom: solid 12px var(--orange);
}
.msg_box.bottom.error:after{
    border-top: solid 12px var(--red);
}
.msg_box.top.error:after{
    border-bottom: solid 12px var(--red);
}
.msg_box .timeline{
    position: absolute;
    width: 7px;
    height: 100%;
    left: -2px;
    bottom: 0;
    background-color: gray;
    animation-name: error_timeline;
    animation-iteration-count: 1;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
.msg_box .close{
    background-image: url('data:image/svg+xml,<svg fill="%23999" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><path d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm79 143c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z"/></svg>');
    background-repeat: no-repeat;
    background-size: contain;
    width: 20px;
    height: 20px;
    position: absolute;
    right: 8px;
    top: calc(50% - 10px);
    cursor: pointer;
}
.msg_box .close:not(:hover){
    opacity: 0.5;
}

/* =========================================
                    FORM
   ========================================= */
.form.widget{
    margin-bottom: 15px;
}
.form .smart_selector{margin: 0;}
.form input[type=submit], .form .btn{width: 100%;}
.form p{line-height: inherit;}
.form .h{
    font-weight: 700;
    margin-bottom: 15px;
    font-size: 1.2em;
}
.form .required{color: var(--red)}
.form .field_group{
    margin-bottom: 20px;
    background: #f5f5f5;
    padding: 20px;
    border-radius: 10px;
}
.form .field_group.with_error .h{
    color: var(--red);
}
.form .field:not(:last-child){margin-bottom: 10px;}
.form .field input[readonly],
.form .field textarea[readonly]{
    background-color: #f5f5f5;
    cursor: default;
}
.form .field input{
    margin-bottom: 0!important;
    align-self: center;
}
.form .field .h2{
    font-size: 1em;
    margin: 14px 0 3px;
}
.form .field .field_name{
    margin-top: 0.6em;
}
.form .field .description{
    margin-bottom: 10px;
}
.form .field .select2-container{
    margin-bottom: 1px;
}
.form .field .instruction{
    margin: 0 0 20px 150px;
    font-size: 0.8em;
}
.form .field.address .manual{
    margin: 10px;
}
.form .field.checkbox .instruction,
.form .field.radio .instruction{
    margin: -5px 0 0!important;
}
.form .field .inputs:not(.one_column){
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 10px;
}
.form .field.vertical > .inputs{
    grid-template-columns: 1fr;
}
.form .field .inputs > .name{
    align-self: start;
    margin-top: 10px;
}
.form .field.with_error .inputs{color: var(--red)}
.form .field select{
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #D9DCEE;
    outline-color: var(--green);
    border-radius: 4px;
    font-size: 1em;
    align-self: center;
}
.form .field.hidden{
    display: none;
}
.form .field.checkbox .inputs{
    display: flex;
    flex-direction: row-reverse;
    justify-content: start;
    user-select: none;
    margin-bottom: 10px;
}
.form .smart-captcha{
    margin-bottom: 20px;
}
.form .sub_fields .sub_field{
    border: 2px dashed #dadada;
    padding: 4px 4px 4px 15px;
    border-radius: 7px;
    margin-bottom: 10px;
    position: relative;
}
.form .sub_fields .sub_field > .grab_handle{
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #dadada;
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: -6px;
    background-image: url('data:image/svg+xml, <svg fill="%23777777" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M320 208C289.1 208 264 182.9 264 152C264 121.1 289.1 96 320 96C350.9 96 376 121.1 376 152C376 182.9 350.9 208 320 208zM320 432C350.9 432 376 457.1 376 488C376 518.9 350.9 544 320 544C289.1 544 264 518.9 264 488C264 457.1 289.1 432 320 432zM376 320C376 350.9 350.9 376 320 376C289.1 376 264 350.9 264 320C264 289.1 289.1 264 320 264C350.9 264 376 289.1 376 320z"/></svg>');
    width: 7px;
    height: 100%;
    cursor: grab;
    border-radius: 6px 0 0 6px;
}
.form .sub_fields .sub_field > .grab_handle:hover{
    background-color: #afafaf;
}
.form .sub_fields .sub_field > .remove{
    display: block;
    position: absolute;
    right: -6px;
    top: -5px;
    background-color: #888888;
    background-size: 13px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('data:image/svg+xml, <svg fill="%23ffffff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M232.7 69.9L224 96L128 96C110.3 96 96 110.3 96 128C96 145.7 110.3 160 128 160L512 160C529.7 160 544 145.7 544 128C544 110.3 529.7 96 512 96L416 96L407.3 69.9C402.9 56.8 390.7 48 376.9 48L263.1 48C249.3 48 237.1 56.8 232.7 69.9zM512 208L128 208L149.1 531.1C150.7 556.4 171.7 576 197 576L443 576C468.3 576 489.3 556.4 490.9 531.1L512 208z"/></svg>');
    width: 18px;
    height: 18px;
    border-radius: 30%;
    cursor: pointer;
}
.form .sub_fields .sub_field > .remove:hover{
    background-color: #f70e0e;
}
@media screen and (max-width: 680px) {
  .form .field .inputs{grid-template-columns: 1fr;}
}