/*----------------------------- CORE WEBFORM -----------------------------*/
div[data-editable="webform"] {
    position: absolute;
}

div[data-editable="webform"] label,
div[data-editable="webform"] input[type="text"],
div[data-editable="webform"] textarea,
div[data-editable="webform"] button,
div[data-editable="webform"] select {
    margin: 0;
    display: inline;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

/* text handling */
div[data-editable="webform"] label, 
div[data-editable="webform"] input[type="text"], 
div[data-editable="webform"] textarea, 
div[data-editable="webform"] select {
    font-family: Helvetica, Arial, sans-serif; 
    font-size: 24px; 
    color: #a1a9ad; 
    text-align: left;
    font-weight: normal; 
    font-style: normal;
    cursor: pointer;
}

div[data-editable="webform"] div.label {
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

div[data-editable="webform"] div.label label {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

/*------------------------------------*\
    CHECKBOX | RADIO LIST
\*------------------------------------*/
div[data-editable="webform"] div:not(.label) > label {
    padding-left: 20px;
    font-size: 16px;
}

div[data-editable="webform"] input[type="checkbox"] {
    position: absolute;
    margin-left: -20px;
}

div[data-editable="webform"] input[type="text"],
div[data-editable="webform"] button, 
div[data-editable="webform"] textarea,
div[data-editable="webform"] select {
    outline: 0;
    width: 100%;
    height: 100%;
    padding: 0 10px;
    border: 3px solid rgb(236, 240, 242); 
    background: rgb(255, 255, 255);
    border-radius: 0;
    font-style: normal;
}

div[data-editable="webform"] textarea {
    resize: none;
}

div[data-editable="webform"] select {
    -webkit-appearance: none;
       -moz-appearance: none;
        -ms-appearance: none;
}

div[data-editable="webform"] div.select-one::after {
    content: " ";
    position: absolute;
    top: 50%;
    top: -webkit-calc(50% - 2px);
    top: calc(50% - 2px);
    right: 10px;
    display: inline-block;
    border-color: #696969 transparent transparent transparent;
    border-style: solid;
    border-width: 6px;
}

div[data-editable="webform"] form,
div[data-editable="webform"] .wf-wrap {
    position: relative;
    width: 100%;
    height: 100%;
}

div[data-editable="webform"] .wf-item {
    position: relative;
    width: 100%;
}

div[data-editable="webform"] .wf-item .wf-item-pos {
    position: absolute;
    left: 0;

    min-width: 25px;
}

div[data-editable="webform"] .wf-item .wf-item-pos > div {
    position: relative;
    width: 100%;
}

div[data-editable="webform"] .wf-item.type-inline .wf-item-pos > div {
    float: left;
    width: auto;
}

div[data-editable="webform"] .wf-item.type-placeholder .wf-item-pos div.label {
    position: absolute;
    z-index: 10;
    color: #ccc;
}

div[data-editable="webform"] .wf-item .wf-item-pos > div label {
    display: block;
    max-width: 100%;
    text-align: left;
    word-wrap: normal;
}

div[data-editable="webform"] .wf-item.type-placeholder .wf-item-pos > div label {
    text-align: left;
    line-height: 1 !important;
    width: 100% !important;
    white-space: nowrap;
}

div.field-text-edit-on [data-type="text"] input {
    outline: 1px solid #c00;
}

div.label-text-edit-on [data-type="text"] label {
    outline: 1px solid #c00;
}

div.field-text-edit-on [data-type="text"] div.edit-on input,
div.label-text-edit-on [data-type="text"] div.edit-on label {
    outline: none !important;
}


/*----------------------------- 
    DEFAULT BUTTON
-----------------------------*/

div[data-editable="webform"] button {
    padding: 0;
    border: none;
    border-radius: 40px;
    background-color: rgba(130, 210, 79, 1);
    font-family: Helvetica, Arial, sans-serif;
    font-size: 36px;
    color: #fff;
    cursor:pointer;
}
/*
====================================
           New Webforms
====================================
*/


[data-editable="webformNew"] {
    position: absolute;
    height: 185px;
    width: 300px;
}

[data-editable="webformNew"] label,
[data-editable="webformNew"] input[type="text"],
[data-editable="webformNew"] textarea,
[data-editable="webformNew"] button,
[data-editable="webformNew"] select,
[data-editable="webinarNew"] label,
[data-editable="webinarNew"] input[type="text"],
[data-editable="webinarNew"] textarea,
[data-editable="webinarNew"] button,
[data-editable="webinarNew"] select {
    margin: 0;
    display: inline;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

[data-editable="webinarNew"] .webformfields{
    display: none;
}

[data-editable="webformNew"] label,
[data-editable="webformNew"] input[type="text"],
[data-editable="webformNew"] textarea,
[data-editable="webformNew"] select,
[data-editable="webformNew"] .directional,
[data-editable="webinarNew"] label,
[data-editable="webinarNew"] input[type="text"],
[data-editable="webinarNew"] textarea,
[data-editable="webinarNew"] select,
[data-editable="webinarNew"] .directional{
    font-family: Helvetica, Arial, sans-serif;
    font-size: 24px;
    color: #a1a9ad;
    font-weight: normal;
    font-style: normal;
    cursor: pointer;
}

[data-editable="webformNewItem"].make-error-msg-visible {
    z-index: 5;
}

[data-editable="webformNewItem"] [data-editable-item="field"],
[data-editable="webformNewItem"] [data-editable-item="label"] {
    box-sizing: border-box;
}

[data-editable="webformNewItem"] [data-editable-item="field"] {
    position: absolute;
}

[data-editable="webformNewItem"] {
    z-index: 4;/* Make webformNewItem higher than buttons so error messages will be displayed over them */
    height:26px;
    width:100%;
}

[data-item-hidden="true"] {
    display: none;
}

[data-editable-item="label"] {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    min-width: 10px;
    min-height:20px;
}

[data-editable-item="label"],
[data-editable-item="label"] .editable {
    overflow: hidden;
    text-overflow: ellipsis;
}

[data-item-type="webform_radio"] [data-editable-item="field"] label {
    display: block;
}

[data-item-type="webform_checkbox"] [data-editable-item="field"] label {
    padding-left:20px;
}

[data-editable-item="label"] label {
    position: relative;
    min-width: 10px;
    min-height:10px;
}

[data-editable="webformNew"] input[type="checkbox"],
[data-editable="webinarNew"] input[type="checkbox"] {
    position: absolute;
    margin-left: -20px;
}

[data-editable="webformNew"] input[type="text"],
[data-editable="webformNew"] button,
[data-editable="webformNew"] textarea,
[data-editable="webformNew"] select,
[data-editable="webinarNew"] input[type="text"],
[data-editable="webinarNew"] button,
[data-editable="webinarNew"] textarea,
[data-editable="webinarNew"] select {
    outline: 0;
    width: 100%;
    height: 100%;
    padding: 0 10px;
    border: 3px solid rgb(236, 240, 242);
    background: rgb(255, 255, 255);
    border-radius: 0;
    font-style: normal;
}

[data-editable="webformNew"] input[type="text"],
[data-editable="webinarNew"] input[type="text"] {
    cursor: text;
}

[data-editable="webformNew"] textarea,
[data-editable="webinarNew"] textarea {
    resize: none;
}

[data-editable="webformNew"] select,
[data-editable="webinarNew"] select {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
}

[data-editable="webformNew"] form,
[data-editable="webinarNew"] form {
    position: relative;
    width: 100%;
    height: 100%;
}

[data-editable="webformNew"][data-label-type="placeholder"] [data-editable-item="label"],
[data-editable="webinarNew"][data-label-type="placeholder"] [data-editable-item="label"] {
    z-index: 2;
}

[data-editable="webformNew"][data-label-type="placeholder"] [data-editable-item="item"],
[data-editable="webinarNew"][data-label-type="placeholder"] [data-editable-item="item"] {
    z-index: 1;
}

[data-editable="webformNew"] .field-blocker,
[data-editable="webinarNew"] .field-blocker {
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index: 10;
}

[data-editable="webformNewItem"][data-item-type="webform_checkbox"] [data-editable-item="label"] {
    display:none;
}

[data-editable="webformNew"][data-label-type="inline"] [data-editable-item="label"] label,
[data-editable="webinarNew"][data-label-type="inline"] [data-editable-item="label"] label {
    text-overflow: ellipsis;
    white-space: nowrap;
}

div[data-editable="webformNew"] .directional,
div[data-editable="webinarNew"] .directional {
    vertical-align: middle;
}

div[data-editable="webformNew"] [data-item-what="phone"] .fix-table-bug,
div[data-editable="webinarNew"] [data-item-what="phone"] .fix-table-bug {
    box-sizing: border-box;
}

/*-----------------------------
    DEFAULT BUTTON
-----------------------------*/

div[data-editable="webformNew"] button,
div[data-editable="webinarNew"] button {
    padding: 0;
    border: none;
    border-radius: 40px;
    background-color: rgba(130, 210, 79, 1);
    font-family: Helvetica, Arial, sans-serif;
    font-size: 24px;
    color: #fff;
    cursor:pointer;
    position: relative;
}

[data-editable="webformNew"] [contenteditable="true"],
[data-editable="webinarNew"] [contenteditable="true"] {
    border:1px dotted black;
}

/* Elements arrangement */
[data-editable="webformNewItem"] .outer-editable,
[data-editable="webformNewItem"] .editable {
    overflow:hidden;
}

[data-editable="webformNewItem"] [data-editable-item="label"] {
    position: relative;
}

[data-editable="webformNewItem"] [data-editable-item="field"] {
    position: relative;
}

[data-editable="webformNewItem"][data-item-type="webform_checkbox"] [data-editable-item="field"] label {
    display:block;
}

[data-label-type="placeholder"] [data-item-type="webform_text"] [data-editable-item="label"],
[data-label-type="placeholder"] [data-item-type="webform_textarea"] [data-editable-item="label"] {
    position: absolute;
    top:0;
    left:0;
    right:0;
}

[data-label-type="inline"] [data-item-type="webform_text"] [data-editable-item="label"],
[data-label-type="inline"] [data-item-type="webform_text"] [data-editable-item="field"],
[data-label-type="inline"] [data-item-type="webform_textarea"] [data-editable-item="label"],
[data-label-type="inline"] [data-item-type="webform_textarea"] [data-editable-item="field"] {
    float: left;
    width:50%;
}

[data-editable="webformNew"] [data-editable-item="label"] label,
[data-editable="webinarNew"] [data-editable-item="label"] label {
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    position: relative;
    overflow: hidden;
    display: inline-block;
    width:100%;
}

[data-editable="webformNew"] [data-editable-item="field"] input,
[data-editable="webinarNew"] [data-editable-item="field"] input {
    position: relative;
    display: inline-block;
}

[data-editable="webformNew"] .column-resizer,
[data-editable="webinarNew"] .column-resizer {
    content: '';
    position: absolute;
    top:1px;
    bottom:1px;
    width:1px;
    border:1px solid #3caeef;
    border-width: 0 1px;
    cursor: col-resize;
    z-index: 11000; /* wiecej niz outer-editable na hoverze */
    margin-left: -1px;
    display:none;
}

[data-editable="webformNew"] .column-resizer:before,
[data-editable="webformNew"] .column-resizer:after,
[data-editable="webinarNew"] .column-resizer:before,
[data-editable="webinarNew"] .column-resizer:after {
    content: " ";
    position: absolute;
    top: 50%;
    top: -webkit-calc(50% - 6px);
    top: calc(50% - 6px);
    display: inline-block;
    border-style: solid;
    border-width: 6px;
}

[data-editable="webformNew"] [data-editable-item="label"] label,
[data-editable="webinarNew"] [data-editable-item="label"] label {
    padding: 9px;
}

[data-editable="webformNew"] .column-resizer:before,
[data-editable="webinarNew"] .column-resizer:before {
    border-color: transparent #3caeef transparent transparent;
    right: 4px;
}

[data-editable="webformNew"] .column-resizer:after,
[data-editable="webinarNew"] .column-resizer:after {
    border-color: transparent transparent transparent #3caeef;
    left:4px;
}

[data-label-type="inline"] [data-editable="webformNewItem"][data-item-type="webform_text"].selected-component .column-resizer,
[data-label-type="inline"] [data-editable="webformNewItem"][data-item-type="webform_textarea"].selected-component .column-resizer{
    display: block;
}

[data-editable="webformNewItem"] {
    width:307px;
}

[data-editable="webformNewItem"],
[data-editable="webformNewButton"],
[data-editable="webformNewItem"] [data-editable-item="label"],
[data-editable="webformNewItem"] [data-editable-item="field"] {
    height:60px;
}

[data-editable="webformNewItem"][data-item-type="webform_checkbox"] [data-editable-item="field"],
[data-editable="webformNewItem"][data-item-type="webform_textarea"] [data-editable-item="field"],
[data-editable="webformNewItem"][data-item-type="webform_multi_select"] [data-editable-item="field"],
[data-editable="webformNewItem"][data-item-type="webform_radio"] [data-editable-item="field"]{
    /*
        !important added to prevent cutting off fields if template has its own custom height styles
        If !important will cause problems,
        remove it and try to resolve problem with cutting off fields in js (APP) or in custom template styles (static)
    */
    height: auto !important;
}

[data-editable="webformNewButton"] {
    width:213px;
}

/* Phone field */
[data-editable="webformNewItem"] [data-feature-part="directional"] {
    display: inline-block;
    position: relative;
}

[data-editable="webformNewItem"] .directional {
    z-index: 1;
    position: relative;
    display: inline-block;
    padding: 0 24px;
}
[data-editable="webformNewItem"] .directional::before {
    position:absolute;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    top:50%;
}

[data-editable="webformNewItem"] .directional::after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 6px 0 6px;
    border-color: black transparent transparent transparent;
    position:absolute;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    top:50%;
    right:6px;
}

[data-editable="webformNewItem"].opened .directional::after {
    border-width: 0 6px 6px 6px;
    border-color: transparent transparent black transparent;
}

[data-editable="webformNewItem"] .ff-dbl-click-field {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

[data-label-type="placeholder"] [data-item-what="phone"] [data-editable-item="label"],
[data-item-what="phone"] [data-editable-item="field"] [data-editable-item="label"] {
    display:none;
}

[data-label-type="placeholder"] [data-item-what="phone"] [data-editable-item="field"] [data-editable-item="label"] {
    display: block;
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    transform: none;
}

[data-item-what="phone"] [data-editable-item="field"] [data-editable-item="label"] {
    position: absolute;
    left:100%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    white-space:nowrap;
}

[data-item-what="phone"] [data-editable-item="field"] [data-editable-item="label"] label {
    position: absolute;
    top:50%;
}

[data-item-what="phone"] [data-editable-item="field"] .fix-table-bug {
    display: table;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    outline: 0;
    position: relative;
}

[data-item-what="phone"] [data-editable-item="field"] [data-feature-part="directional"] {
    display: table-cell;
    overflow: visible;
    vertical-align: middle;
}


[data-item-what="phone"] [data-editable-item="field"] .fix-input-size {
    display: table-cell;
    position: relative;
    width: inherit;
}

#custom-phone-curtain {
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:2;
}

.custom-phone-list-wrapper {
    position: absolute;
    overflow: auto;
    overflow-x: hidden;
    max-height: 250px;
    background-color: #fff;
}

.custom-phone-list {
    margin: 0;
    padding: 0;
    font-size: 18px;
    font-weight: normal;
    line-height: 1.4;
    color: #262626;
    border-radius: 2px;
    font-family: Helvetica, 'Helvetica Neue', Arial, sans-serif;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border: 3px solid rgb(236, 240, 242);
    border-width: 0 0 3px 3px;
}

.custom-phone-list .custom-phone-list-item.selected {
    color: #00afec;
}

.custom-phone-list input {
    position: absolute;
    left: -9999px;
}

.custom-phone-list .custom-phone-list-item-label {
    padding: 5px 5px 5px 28px;
    display: inline-block;
}

.custom-phone-list .custom-phone-list-item-label:before {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    left:5px;
}

/*

[data-editable-item="label"]
[data-editable-item="field"]

*/
/* Elements arrangement - end */


[data-flag] {
    position: relative;
}

[data-flag]:before {
    content: '';
    background: url(/images/core/tools/form/phone.png) no-repeat 0 0;
    display: inline-block;
    width: 16px;
    height: 16px;
    position: absolute;
    left: 3px;
    top: -1px;
}

[data-flag="ac"]:before {
    background-position: -18px -1692px
}

[data-flag="af"]:before {
    background-position: 0 -18px
}

[data-flag="al"]:before {
    background-position: 0 -72px
}

[data-flag="dz"]:before {
    background-position: 0 -90px
}

[data-flag="as"]:before {
    background-position: 0 -108px
}

[data-flag="ad"]:before {
    background-position: 0 -126px
}

[data-flag="ao"]:before {
    background-position: 0 -144px
}

[data-flag="ai"]:before {
    background-position: 0 -162px
}

[data-flag="aq"]:before {
    background-position: 0 -180px
}

[data-flag="ag"]:before {
    background-position: 0 -198px
}

[data-flag="ar"]:before {
    background-position: 0 -234px
}

[data-flag="am"]:before {
    background-position: 0 -252px
}

[data-flag="aw"]:before {
    background-position: 0 -270px
}

[data-flag="au"]:before {
    background-position: 0 -288px
}

[data-flag="at"]:before {
    background-position: 0 -306px
}

[data-flag="az"]:before {
    background-position: 0 -324px
}

[data-flag="bs"]:before {
    background-position: 0 -342px
}

[data-flag="bh"]:before {
    background-position: 0 -360px
}

[data-flag="bd"]:before {
    background-position: 0 -378px
}

[data-flag="bb"]:before {
    background-position: 0 -396px
}

[data-flag="by"]:before {
    background-position: 0 -432px
}

[data-flag="be"]:before {
    background-position: 0 -450px
}

[data-flag="bz"]:before {
    background-position: 0 -468px
}

[data-flag="bj"]:before {
    background-position: 0 -486px
}

[data-flag="bm"]:before {
    background-position: 0 -504px
}

[data-flag="bt"]:before {
    background-position: 0 -522px
}

[data-flag="bo"]:before {
    background-position: 0 -540px
}

[data-flag="ba"]:before {
    background-position: 0 -558px
}

[data-flag="bw"]:before {
    background-position: 0 -576px
}

[data-flag="br"]:before {
    background-position: 0 -612px
}

[data-flag="vg"]:before {
    background-position: -36px -828px
}

[data-flag="bn"]:before {
    background-position: 0 -648px
}

[data-flag="bg"]:before {
    background-position: 0 -666px
}

[data-flag="bf"]:before {
    background-position: 0 -684px
}

[data-flag="bi"]:before {
    background-position: 0 -702px
}

[data-flag="kh"]:before {
    background-position: 0 -756px
}

[data-flag="cm"]:before {
    background-position: 0 -774px
}

[data-flag="ca"]:before {
    background-position: 0 -792px
}

[data-flag="cv"]:before {
    background-position: 0 -810px
}

[data-flag="ky"]:before {
    background-position: 0 -846px
}

[data-flag="cf"]:before {
    background-position: 0 -36px
}

[data-flag="cf"]:before {
    background-position: 0 -864px
}

[data-flag="td"]:before {
    background-position: 0 -882px
}

[data-flag="cl"]:before {
    background-position: 0 -900px
}

[data-flag="cn"]:before {
    background-position: 0 -918px
}

[data-flag="co"]:before {
    background-position: 0 -972px
}

[data-flag="km"]:before {
    background-position: 0 -1008px
}

[data-flag="ck"]:before {
    background-position: 0 -1062px
}

[data-flag="cr"]:before {
    background-position: 0 -1080px
}

[data-flag="ci"]:before {
    background-position: 0 -1098px
}

[data-flag="hr"]:before {
    background-position: 0 -1116px
}

[data-flag="cy"]:before {
    background-position: 0 -1152px
}


/*[data-flag="cy"]:before {background-position:-18px -1188px}*/

[data-flag="cz"]:before {
    background-position: 0 -1170px
}

[data-flag="dk"]:before {
    background-position: 0 -1188px
}

[data-flag="dj"]:before {
    background-position: 0 -1206px
}

[data-flag="dm"]:before {
    background-position: 0 -1224px
}

[data-flag="do"]:before {
    background-position: 0 -1242px
}

[data-flag="tl"]:before {
    background-position: -36px -378px
}
[data-flag="ec"]:before {
    background-position: 0 -1260px
}

[data-flag="eg"]:before {
    background-position: 0 -1278px
}

[data-flag="sv"]:before {
    background-position: 0 -1296px
}

[data-flag="gq"]:before {
    background-position: 0 -1332px
}

[data-flag="er"]:before {
    background-position: 0 -1350px
}

[data-flag="ee"]:before {
    background-position: 0 -1368px
}

[data-flag="et"]:before {
    background-position: 0 -1386px
}

[data-flag="fk"]:before {
    background-position: 0 -1440px
}

[data-flag="fo"]:before {
    background-position: 0 -1458px
}

[data-flag="fj"]:before {
    background-position: 0 -1476px
}

[data-flag="fi"]:before {
    background-position: 0 -1494px
}

[data-flag="fr"]:before {
    background-position: 0 -1512px
}

[data-flag="yy"]:before {
    background-position: 0 -1512px
}


/* fr */

[data-flag="gu"]:before {
    background-position: 0 -1782px
}

[data-flag="gf"]:before {
    background-position: 0 -1530px
}

[data-flag="ga"]:before {
    background-position: 0 -1566px
}

[data-flag="gm"]:before {
    background-position: 0 -1602px
}

[data-flag="ge"]:before {
    background-position: 0 -1620px
}

[data-flag="de"]:before {
    background-position: 0 -1638px
}

[data-flag="gh"]:before {
    background-position: 0 -1656px
}

[data-flag="gi"]:before {
    background-position: 0 -1674px
}

[data-flag="gr"]:before {
    background-position: 0 -1692px
}

[data-flag="gl"]:before {
    background-position: 0 -1710px
}

[data-flag="gd"]:before {
    background-position: 0 -1728px
}

[data-flag="gp"]:before {
    background-position: 0 -1746px
}

[data-flag="gt"]:before {
    background-position: 0 -1764px
}

[data-flag="gn"]:before {
    background-position: 0 -1836px
}

[data-flag="gw"]:before {
    background-position: 0 -1818px
}

[data-flag="gy"]:before {
    background-position: 0 -1854px
}

[data-flag="ht"]:before {
    background-position: 0 -1872px
}

[data-flag="hn"]:before {
    background-position: 0 -1908px
}

[data-flag="hk"]:before {
    background-position: 0 -1926px
}

[data-flag="hu"]:before {
    background-position: 0 -1944px
}

[data-flag="is"]:before {
    background-position: -18px 0
}

[data-flag="in"]:before {
    background-position: -18px -18px
}

[data-flag="id"]:before {
    background-position: -18px -36px
}

[data-flag="ir"]:before {
    background-position: -18px -54px
}

[data-flag="iq"]:before {
    background-position: -18px -72px
}

[data-flag="ie"]:before {
    background-position: -18px -90px
}

[data-flag="il"]:before {
    background-position: -18px -144px
}

[data-flag="it"]:before {
    background-position: -18px -162px
}

[data-flag="jm"]:before {
    background-position: -18px -180px
}

[data-flag="jp"]:before {
    background-position: -18px -198px
}

[data-flag="jo"]:before {
    background-position: -18px -234px
}

[data-flag="kz"]:before {
    background-position: -18px -252px
}

[data-flag="ke"]:before {
    background-position: -18px -270px
}

[data-flag="ki"]:before {
    background-position: -18px -288px
}

[data-flag="kw"]:before {
    background-position: -18px -324px
}

[data-flag="kg"]:before {
    background-position: -18px -342px
}

[data-flag="la"]:before {
    background-position: -18px -360px
}

[data-flag="lv"]:before {
    background-position: -18px -378px
}

[data-flag="lb"]:before {
    background-position: -18px -396px
}

[data-flag="ls"]:before {
    background-position: -18px -414px
}

[data-flag="lr"]:before {
    background-position: -18px -432px
}

[data-flag="li"]:before {
    background-position: -18px -468px
}

[data-flag="lt"]:before {
    background-position: -18px -486px
}

[data-flag="lu"]:before {
    background-position: -18px -504px
}

[data-flag="mo"]:before {
    background-position: -18px -522px
}

[data-flag="mk"]:before {
    background-position: -18px -540px
}

[data-flag="mg"]:before {
    background-position: -18px -558px
}

[data-flag="mw"]:before {
    background-position: -18px -576px
}

[data-flag="my"]:before {
    background-position: -18px -594px
}

[data-flag="mv"]:before {
    background-position: -18px -612px
}

[data-flag="ml"]:before {
    background-position: -18px -630px
}

[data-flag="dg"]:before {
    background-position: 0 -630px
}

[data-flag="io"]:before {
    background-position: 0 -630px
}

[data-flag="mt"]:before {
    background-position: -18px -648px
}

[data-flag="mh"]:before {
    background-position: -18px -666px
}

[data-flag="mq"]:before {
    background-position: -18px -684px
}

[data-flag="mr"]:before {
    background-position: -18px -702px
}

[data-flag="mu"]:before {
    background-position: -18px -720px
}

[data-flag="mx"]:before {
    background-position: -18px -756px
}

[data-flag="fm"]:before {
    background-position: -18px -774px
}

[data-flag="md"]:before {
    background-position: -18px -792px
}

[data-flag="mc"]:before {
    background-position: -18px -810px
}

[data-flag="mn"]:before {
    background-position: -18px -828px
}

[data-flag="me"]:before {
    background-position: -18px -848px
}

[data-flag="ms"]:before {
    background-position: -18px -864px
}

[data-flag="ma"]:before {
    background-position: -18px -882px
}

[data-flag="mz"]:before {
    background-position: -18px -900px
}

[data-flag="na"]:before {
    background-position: -18px -954px
}

[data-flag="nr"]:before {
    background-position: -18px -972px
}

[data-flag="np"]:before {
    background-position: -18px -990px
}

[data-flag="nl"]:before {
    background-position: -18px -1026px
}

[data-flag="an"]:before {
    background-position: -18px -1008px
}

[data-flag="nc"]:before {
    background-position: -18px -1044px
}

[data-flag="nz"]:before {
    background-position: -18px -1062px
}

[data-flag="ni"]:before {
    background-position: -18px -1080px
}

[data-flag="ne"]:before {
    background-position: -18px -1098px
}

[data-flag="ng"]:before {
    background-position: -18px -1116px
}

[data-flag="nu"]:before {
    background-position: -18px -1134px
}

[data-flag="mp"]:before {
    background-position: -18px -1224px
}

[data-flag="no"]:before {
    background-position: -18px -1242px
}

[data-flag="om"]:before {
    background-position: -18px -1332px
}

[data-flag="pk"]:before {
    background-position: -18px -1350px
}

[data-flag="pw"]:before {
    background-position: -18px -1368px
}

[data-flag="pa"]:before {
    background-position: -18px -1404px
}

[data-flag="pg"]:before {
    background-position: -18px -1422px
}

[data-flag="py"]:before {
    background-position: -18px -1440px
}

[data-flag="pe"]:before {
    background-position: -18px -1458px
}

[data-flag="ph"]:before {
    background-position: -18px -1476px
}

[data-flag="pl"]:before {
    background-position: -18px -1512px
}

[data-flag="pt"]:before {
    background-position: -18px -1530px
}

[data-flag="pr"]:before {
    background-position: -18px -1548px
}

[data-flag="qa"]:before {
    background-position: -18px -1566px
}

[data-flag="re"]:before {
    background-position: -18px -1602px
}

[data-flag="ro"]:before {
    background-position: -18px -1620px
}

[data-flag="ru"]:before {
    background-position: -18px -1638px
}

[data-flag="rw"]:before {
    background-position: -18px -1656px
}

[data-flag="sh"]:before {
    background-position: -18px -1692px
}

[data-flag="lc"]:before {
    background-position: -18px -1710px
}

[data-flag="pm"]:before {
    background-position: -18px -1746px
}

[data-flag="ws"]:before {
    background-position: -18px -1764px
}

[data-flag="sm"]:before {
    background-position: -18px -1782px
}

[data-flag="st"]:before {
    background-position: -18px -1800px
}

[data-flag="sa"]:before {
    background-position: -18px -1818px
}

[data-flag="sn"]:before {
    background-position: -18px -1854px
}

[data-flag="rs"]:before {
    background-position: -18px -1872px
}

[data-flag="sc"]:before {
    background-position: -18px -1890px
}

[data-flag="sl"]:before {
    background-position: -18px -1908px
}

[data-flag="sg"]:before {
    background-position: -18px -1926px
}

[data-flag="sk"]:before {
    background-position: -18px -1944px
}

[data-flag="si"]:before {
    background-position: -18px -1962px
}

[data-flag="sb"]:before {
    background-position: -18px -1980px
}

[data-flag="za"]:before {
    background-position: -36px -36px
}

[data-flag="kr"]:before {
    background-position: -36px -72px
}

[data-flag="es"]:before {
    background-position: -36px -90px
}

[data-flag="vc"]:before {
    background-position: -36px -144px
}

[data-flag="lk"]:before {
    background-position: -36px -108px
}

[data-flag="sr"]:before {
    background-position: -36px -180px
}

[data-flag="sz"]:before {
    background-position: -36px -216px
}

[data-flag="se"]:before {
    background-position: -36px -234px
}

[data-flag="ch"]:before {
    background-position: -36px -252px
}

[data-flag="kn"]:before {
    background-position: -36px -128px
}

[data-flag="pf"]:before {
    background-position: -36px -288px
}

[data-flag="tw"]:before {
    background-position: -36px -306px
}

[data-flag="tj"]:before {
    background-position: -36px -324px
}

[data-flag="tz"]:before {
    background-position: -36px -342px
}

[data-flag="th"]:before {
    background-position: -36px -360px
}

[data-flag="tg"]:before {
    background-position: -36px -396px
}

[data-flag="gb"]:before,
[data-flag="uk"]:before {
    background-position: -36px -648px
}

[data-flag="va"]:before {
    background-position: -36px -774px
}

[data-flag="tk"]:before {
    background-position: -36px -414px
}

[data-flag="to"]:before {
    background-position: -36px -432px
}

[data-flag="tt"]:before {
    background-position: -36px -450px
}

[data-flag="tn"]:before {
    background-position: -36px -468px
}

[data-flag="tr"]:before {
    background-position: -36px -486px
}

[data-flag="tm"]:before {
    background-position: -36px -504px
}

[data-flag="tc"]:before {
    background-position: -36px -522px
}

[data-flag="tv"]:before {
    background-position: -36px -540px
}

[data-flag="ug"]:before {
    background-position: -36px -594px
}

[data-flag="ua"]:before {
    background-position: -36px -612px
}

[data-flag="ae"]:before {
    background-position: -36px -630px
}

[data-flag="us"]:before {
    background-position: -36px -702px
}

[data-flag="uy"]:before {
    background-position: -36px -720px
}

[data-flag="vi"]:before {
    background-position: -36px -846px
}

[data-flag="uz"]:before {
    background-position: -36px -738px
}

[data-flag="vu"]:before {
    background-position: -36px -756px
}

[data-flag="ve"]:before {
    background-position: -36px -792px
}

[data-flag="vn"]:before {
    background-position: -36px -810px
}

[data-flag="wf"]:before {
    background-position: -36px -918px
}

[data-flag="ye"]:before {
    background-position: -36px -954px
}

[data-flag="zm"]:before {
    background-position: -36px -972px
}

[data-flag="zw"]:before {
    background-position: -36px -990px
}

[data-flag="cu"]::before {
    background-position: -36px -1026px
}

[data-flag="ly"]::before {
    background-position: -36px -1008px
}

[data-flag="mm"]::before {
    background-position: -36px -1044px
}

[data-flag="sd"]::before {
    background-position: -36px -162px
}