ru-se.com

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs

customizer.css (38549B)


      1 /*WP DEVICES CHANGER WIDTH*/
      2 
      3 .preview-tablet .wp-full-overlay-main {
      4     margin: auto 0 auto -384px;
      5     width: 768px;
      6     height: 1024px;
      7 
      8 }
      9 
     10 .preview-mobile .wp-full-overlay-main {
     11     margin: auto 0 auto -206px;
     12     width: 412px;
     13     height: 732px;
     14 }
     15 
     16 .materialis-separator {
     17     border-bottom: 1px #cecece solid;
     18     padding: 6px 12px;
     19     margin-left: -15px;
     20     margin-right: -15px;
     21     background-color: #55616d;
     22     margin-top: 15px;
     23     width: auto;
     24     display: block;
     25     border-top: 1px #cecece solid;
     26     margin-bottom: 10px;
     27     color: #ffffff;
     28 }
     29 
     30 #customize-theme-controls ul.section-settings-container.accordion-section-content > li.customize-control-kirki-color {
     31     padding-top: 10px;
     32 }
     33 
     34 #customize-theme-controls ul.section-settings-container.accordion-section-content
     35 > li.customize-control-kirki-color .customize-control-title {
     36     /* margin-top: 10px; */
     37 }
     38 
     39 
     40 .customize-control-kirki-color > label {
     41     position: relative;
     42 }
     43 
     44 .materialis-separator .customize-control-title {
     45     text-transform: uppercase;
     46     margin-bottom: 0px;
     47     font-size: 14px;
     48 }
     49 
     50 .materialis-separator .customize-control-notifications-container {
     51     display: none;
     52 }
     53 
     54 .customizer-right-section > ul > li.customize-control-sectionseparator {
     55     margin-left: -8px;
     56     width: calc(100% + 16px);
     57 }
     58 
     59 [data-code="video_header_not_available"] {
     60     display: none !important;
     61 }
     62 
     63 /*CSS LOADER END*/
     64 
     65 #customize-preview iframe {
     66     width: 100%;
     67     height: 100%;
     68     background: white;
     69 }
     70 
     71 #ope_section_preview {
     72     position: absolute;
     73     width: 920px;
     74     height: 400px;
     75     background-color: #fff;
     76     z-index: 999999;
     77     border: 2px solid #c1c1c1;
     78     border-radius: 4px;
     79     background-size: contain;
     80     background-repeat: no-repeat;
     81     background-position: center;
     82 }
     83 
     84 #cp-items {
     85     padding: 0px 40px;
     86     max-width: 488px;
     87     width: 488px;
     88 }
     89 
     90 #cp-items .customize-control-title {
     91     font-size: 12px;
     92     font-weight: bold;
     93     line-height: 120%;
     94     color: rgb(129, 129, 129);
     95     text-align: left;
     96     margin: 10px 0px;
     97     text-transform: none;
     98 }
     99 
    100 #cp-items .image-controls span.customize-control-title {
    101     margin: 0px;
    102     padding: 0px;
    103 }
    104 
    105 #cp-items input[type="text"], #cp-items select {
    106     background-color: rgb(255, 255, 255);
    107     width: 482px;
    108     height: 37px;
    109     border-color: rgb(221, 221, 221);
    110     border-width: 1px;
    111     -moz-border-radius: 1px;
    112     -webkit-border-radius: 1px;
    113     border-radius: 1px;
    114     border-style: solid;
    115     margin: 0px 0px 4px 0px;
    116     max-width: initial;
    117 }
    118 
    119 .cp-multi-image-item .thumbnail.thumbnail-image,
    120 #cp-items .image-wrapper {
    121     float: left;
    122     width: 25%;
    123     padding: 12px;
    124     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDUvMjAvMTbGXQ/TAAAAIElEQVQImWP8/////3v37jEwMDAwMDEgAcb/////h3EAEbwKl/+GO+wAAAAASUVORK5CYII=');
    125     text-align: center;
    126     margin-right: 10px;
    127     box-sizing: border-box;
    128 }
    129 
    130 #cp-items .image-wrapper img {
    131     max-width: 100px;
    132     max-height: 100px;
    133 }
    134 
    135 #cp-items .image-controls {
    136     float: left;
    137     width: calc(75% - 10px);
    138     box-sizing: border-box;
    139 }
    140 
    141 #cp-items .image-controls input, #cp-items .image-controls select {
    142     width: 100%;
    143     /*height: 25px;*/
    144     margin-bottom: 14px;
    145     font-size: 13px;
    146 }
    147 
    148 #cp-items-footer {
    149     text-align: right;
    150     position: absolute;
    151     bottom: 0px;
    152     margin-bottom: -40px;
    153     width: 100%;
    154     left: 0px;
    155     background-color: #ffffff;
    156     border-bottom-left-radius: 10px;
    157     border-bottom-right-radius: 10px;
    158     padding: 10px 20px;
    159     box-sizing: border-box;
    160     min-height: 48px;
    161     border-top: 1px solid #ddd;
    162 }
    163 
    164 button#cp-item-cancel:hover {
    165     background-color: rgba(220, 220, 220, 1);
    166 }
    167 
    168 button#cp-item-ok.full, button#cp-item-section-ok.full {
    169     width: 100%;
    170     border-radius: 0px 0px 10px 10px;
    171 }
    172 
    173 button#cp-item-ok:hover, button#cp-item-section-ok:hover {
    174     background-color: #0088EE;
    175 }
    176 
    177 .list {
    178     display: list-item;
    179 }
    180 
    181 .list .item {
    182     clear: both;
    183     line-height: 1.5em;
    184     position: relative;
    185     margin: 12px 0 0;
    186 }
    187 
    188 .list .item {
    189     width: 100%;
    190     background: hsl(0, 0%, 100%);
    191     border: 1px solid #c1c1c1;
    192     position: relative;
    193     height: auto;
    194     min-height: 20px;
    195     line-height: 30px;
    196     overflow: hidden;
    197     word-wrap: break-word;
    198     box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.17);
    199     box-sizing: border-box;
    200 }
    201 
    202 #page_full_rows li.item {
    203     padding: 4px 0px;
    204 }
    205 
    206 #page_full_rows li.item.focused {
    207     background-color: #d3ffcd;
    208 }
    209 
    210 #page_full_rows li.item.focused input {
    211     background-color: #d3ffcd;
    212     border-bottom: 1px solid #18cc00;
    213 }
    214 
    215 #page_full_rows li.item.focused input:hover, #page_full_rows li.item.focused input:focus {
    216     border-bottom: 1px solid rgb(0, 133, 186);
    217 }
    218 
    219 .list .item-hover {
    220     display: block;
    221     text-align: right;
    222     margin-top: 8px;
    223     float: right;
    224     margin-right: 14px;
    225     vertical-align: middle;
    226     height: 20px;
    227 }
    228 
    229 .list .item-preview {
    230     position: absolute;
    231     right: 0px;
    232     top: 0px;
    233     display: none;
    234     width: 40px;
    235     height: 100%;
    236     background-color: rgba(69, 54, 46, 0.3);
    237     line-height: 31px;
    238     text-indent: 10px;
    239     text-transform: uppercase;
    240     font-size: 10px;
    241     font-weight: bold;
    242     color: rgb(255, 255, 255);
    243     text-align: left;
    244 }
    245 
    246 .list .item:hover, .list .already-in-page {
    247     border-color: #cccccc;
    248     position: relative;
    249     color: #0073aa;
    250 }
    251 
    252 .list .item:hover .item-preview, .list .item:hover .available-item-hover-button {
    253     display: block;
    254 }
    255 
    256 .list .item-preview i.icon {
    257     display: block;
    258     width: 31px;
    259     height: 31px;
    260     left: 5px;
    261     position: absolute;
    262     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAALCAYAAACksgdhAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAwMS8yOC8xNW6vUpUAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAAAnUlEQVQokX2QsQ3CMBBFP1mAEbwEJXtkjWzBEuyE6NNQpbRoaJDyKPiHDsfKl06Wv+/57C9ArgLM/GsBxtQjQBl4u3EFarMfe1BMmH1B+Df7tQetrgxEVYPn8AZ9dZD0lPTQVnevpzCGTlOr48bxyPh0m1Txs8lPj8NLSuoKTPbisoi/ZCgn1WpJ015AaZMaDVfHPyX/B7bQXhVP4gMO0pYjkjGs/QAAAABJRU5ErkJggg==');
    263     background-repeat: no-repeat;
    264     background-position: center;
    265     top: 50%;
    266     margin-top: -15px;
    267 }
    268 
    269 .list .item-remove {
    270     cursor: pointer;
    271     background-repeat: no-repeat;
    272     width: 20px;
    273     height: 20px;
    274     transition: background 0.3s;
    275     display: inline-block;
    276     background-color: #f3674a;
    277     border-radius: 100%;
    278     text-align: center;
    279     text-rendering: optimizeLegibility;
    280     line-height: 19px;
    281     font-size: 17px;
    282     color: #ffffff;
    283     font-family: sans-serif;
    284     background-image: url(../images/trash-o.png);
    285     background-size: 60%;
    286     background-position: center;
    287     image-rendering: pixelated;
    288     box-shadow: 0 2px 1px rgba(46, 68, 83, 0.15);
    289 }
    290 
    291 .list .item-remove:hover {
    292     background-color: #f93f1a;
    293 }
    294 
    295 span.item-menu-visible {
    296     cursor: pointer;
    297     background-repeat: no-repeat;
    298     width: 20px;
    299     height: 20px;
    300     transition: background 0.3s;
    301     display: inline-block;
    302     background-color: #0aa9e8;
    303     border-radius: 100%;
    304     background-position: center;
    305     text-align: center;
    306     text-rendering: optimizeLegibility;
    307     line-height: 19px;
    308     font-size: 17px;
    309     color: #ffffff;
    310     font-family: sans-serif;
    311     background-image: url(../images/toggle-menu.png);
    312     box-shadow: 0 2px 1px rgba(46, 68, 83, 0.15);
    313 }
    314 
    315 span.item-menu-visible:hover {
    316     background-color: #088fc4;
    317 }
    318 
    319 span.item-menu-visible.active {
    320     background-image: url(../images/toggle-menu-active.png);
    321     background-color: #05597a;
    322 }
    323 
    324 span.item-settings {
    325     cursor: pointer;
    326     background-repeat: no-repeat;
    327     width: 20px;
    328     height: 20px;
    329     transition: background 0.3s;
    330     display: inline-block;
    331     background-color: #6fc408;
    332     border-radius: 100%;
    333     background-position: center;
    334     text-align: center;
    335     text-rendering: optimizeLegibility;
    336     line-height: 19px;
    337     font-size: 17px;
    338     color: #ffffff;
    339     font-family: sans-serif;
    340     background-size: cover;
    341     background-image: url(../images/cog-white.png);
    342     box-shadow: 0 2px 1px rgba(46, 68, 83, 0.15);
    343 }
    344 
    345 span.item-settings:hover {
    346     background-color: hsla(87, 92%, 35%, 1);
    347 }
    348 
    349 li.item.available-item.already-in-page, li.item.available-item.pro-only {
    350     position: relative;
    351 }
    352 
    353 .checked-icon {
    354     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADUAAAA1CAYAAADh5qNwAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDYvMDIvMTYnfI6lAAAC2klEQVRogd3Yz0sUYRjA8e/s7EZiKFJUCqUXPRR22NybkYJastih0LsXw8WC6NYxAjGjDl38A2L7gRB0ELqn7WoULmLaIpZtRUv4I3fV2s3pIKwMu+o7szO78+5zfOZ9n/f9zMu878wovGrUKK0YcRV7BhbHCBAoJdQIENC6IlqpoDIggFJA6UAgPyoLBHKjcoJAXtSeIJATtS8I5EMdCAK5UEIgkAclDAI5UIZAYBPqkKISvhBE64qwenmC1mM+s6UMg8AGlKqoPPEO0VR5FoBKzxEeN94xU8oUCMBtZrS9QlVcvPQ9outESyanAbPrC0ZLmQaBhSvlVlRenH+gAwG8jo9zffqukVJ5gUBgpU6VnaS7uoPvW3GefR0DNfs+qIpK0Hufq9Vtunx4JcK1d7fY+LclOp+8QSCAmr44SpWngpSWpvmol4HIPVB2YS7FRdA7SHdNu67f1OoMneFAwUEggKryVADgUdz01/awrWncnBncubgNT31D9NRc0vX5sDZHe6iPtVRCdB6WgUDgmfqdTu42VlwE6noYPnObMvUwz33DWaD3ax9pmegtGghAOejHS335aUabHnKuoiGTS22nWdyM0VBep2sbWf9E65teltProuNbDgKBlYoml/CHA8wnP2dyHpc7G/Q7Ssd4X9FBILilx7bi+EMB5hKLOa/PJhbwh/r5mVoWHdc2EBg4pxY2YlyZvEE08UWXn08u0hkKEPsTFy1lKwgMHr7R5BL+yYHMG8LU6gxtb/tY2vwhWsJ2EAhsFLmivryWzuPNBL+N8evvimi3goDAJMpEFAwEhfmeKigI7EcVHAT2oooCAvtQRQOBPaiigsB6VNFBYC3KESCwDuUYEFiDchQI8kc5DgT5oRwJAvMox4LAHMrRIDCOcjwIjKGkAIE4ShoQiKGkAsHBKOlAsD9KShDsjZIWBLlRUoMgGyU9CPSokgDBLqpkQLCDKikQwH9CLnrcJy4axQAAAABJRU5ErkJggg==');
    355     width: 53px;
    356     height: 53px;
    357     margin: auto;
    358     background-repeat: no-repeat;
    359     background-position: center;
    360     z-index: 1000;
    361     position: absolute;
    362     top: 0px;
    363     left: 0px;
    364     display: none;
    365 }
    366 
    367 .already-in-page .checked-icon {
    368     display: block;
    369 }
    370 
    371 .pro-icon {
    372     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADUAAAA1CAYAAADh5qNwAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDYvMDIvMTYnfI6lAAACq0lEQVRogd3YLVPrQBSA4bf3XtWgg8FQU1WPAUE0/AUMmApApwYDOrjOgK9vDaYedDEYojDRJLZXnNm2KaVNNpvPM9PZ2e20u0/PfqWt+dnZnGbF8E/ZIzAcQ6DfJNQQ6DMez5uCWoAAmoCKgaD+qB8gqDdqIwjgXy7d2TY4DoQhTKdSmo1fQQAt4+eU48DNzbIeReB58PpqqoetIDA9/Y6OBBQEMJlI2W6D60KvZ6KHnSAwjbq8lNJ14elJgL4vbavZ04tEIDCNsu14PQzh/n75Xqej+82JQWAaFQRSXl3F21T797fOt6YCAfy963bvdHoC5Jfv9+HkBL6+4OMDjo/h4EDWUBjCxQV0u/D2Bi8vaXtIDYIsu9/6LhcEsqbW20HWleum3dq1QKB7TqmB+z6MRoKxbcnOdCpAx5G22QzG48JAoIOyrPiamc0Epw5c25a65+mMBzKCQHf6dTrw8CBnUBRJuR6+r7ONZwZBGtT5ubzCEB4fpW0Vdn0t06/Xk2x6XqFTbjWSoW5v4fR0WVeIvb0lTG8zUDEE+q3JZD6fZ7+17T6nFMj3YTCQst2W9fP5KZAogsPD+FpLHguQzoc3xXaUZclgAfb3JQsqE+pAVbD3d7kapQvjIEgy/SxLppjCge4msB4bQcVMvzCUTKiLKcDzc9Z+c8mQimR3v3XYYJD5cpoXCNJcaFdhaqNIH7mDQOfwtSw5r0ajtH0lAplYU+Yf5zdH4gwVs1Fkj0Km3GrkjSocBPmiSgFBfqjSQJAPqlQQmEeVDgKzqEqAwNx/6YsHvNJFmMmUsSdWU5EVVTkQZENVEgT6qMqCQA9VaRCkR1UeBOlQtQBBclRtQJAMVSsQ7EbVDgTbUbUEwe+o2oJgM6rWIPiJqj0I4qhGgGCJagwIBNUoEMB/ucNyXtcjxMkAAAAASUVORK5CYII=');
    373     width: 53px;
    374     height: 53px;
    375     margin: auto;
    376     background-repeat: no-repeat;
    377     background-position: center;
    378     left: 0px;
    379     position: absolute;
    380     z-index: 1000;
    381     top: 0px;
    382     display: none;
    383 }
    384 
    385 .pro-only .pro-icon {
    386     display: block;
    387 }
    388 
    389 .available-item-hover-button {
    390     background-color: rgb(0, 133, 186);
    391     /* height: 31px; */
    392     -moz-border-radius: 3px;
    393     -webkit-border-radius: 3px;
    394     border-radius: 3px;
    395     line-height: 31px;
    396     text-align: center;
    397     top: 50%;
    398     position: absolute;
    399     margin-top: -16px;
    400     margin-left: -70px;
    401     cursor: pointer;
    402     left: 50%;
    403     width: 140px;
    404     box-shadow: 0 1px 0 #006799;
    405     color: white;
    406     display: none;
    407 }
    408 
    409 .already-in-page span.available-item-hover-button,
    410 .already-in-page:hover span.available-item-hover-button {
    411     display: none !important;
    412 }
    413 
    414 .available-item-hover {
    415     display: none;
    416     top: 0;
    417     bottom: 0;
    418     left: 0;
    419     right: 0;
    420     position: absolute;
    421 }
    422 
    423 .list .available-item {
    424     min-height: 100px;
    425 }
    426 
    427 .list .already-in-page {
    428 }
    429 
    430 ul.disabled {
    431     opacity: 0.2;
    432 }
    433 
    434 #customize-controls .more-sections h3 {
    435     font-size: 52px;
    436     font-weight: bold;
    437     line-height: 120%;
    438     color: rgb(172, 172, 172);
    439     text-align: center;
    440     margin-bottom: 10px;
    441 }
    442 
    443 #customize-controls .more-sections span {
    444     font-size: 15px;
    445     font-weight: bold;
    446     line-height: 130%;
    447     color: rgb(149, 149, 149);
    448     text-align: left;
    449     display: block;
    450     text-align: center;
    451     margin-bottom: 10px;
    452 }
    453 
    454 #customize-controls .more-sections span.menu-link {
    455     color: #555;
    456     font-size: 12px;
    457     font-weight: 500;
    458     text-align: left;
    459     margin-top: 20px;
    460     padding: 10px 6px;
    461     border: 1px solid #DCDCDC;
    462     background-color: #F3F3F3;
    463 }
    464 
    465 #customize-controls .more-sections a {
    466     margin: auto;
    467 }
    468 
    469 .scrn_wrapper {
    470     padding: 6px;
    471     background-color: #EEEEEE;
    472 }
    473 
    474 .scrn_wrapper img {
    475     max-width: 100%;
    476 }
    477 
    478 #customize-control-header_image .container {
    479     height: auto !important;
    480 }
    481 
    482 #customize-controls .rows-list.list .item span.description {
    483     position: relative;
    484     bottom: 0px;
    485     left: 0px;
    486     display: block;
    487     padding: 6px;
    488     background: rgba(0, 0, 0, 0.68);
    489     color: white;
    490     width: 100%;
    491     box-sizing: border-box;
    492     font-size: 11px;
    493     -webkit-box-align: 2px;
    494     line-height: 140%;
    495     font-weight: 300;
    496 }
    497 
    498 .image-holder {
    499     width: 100%;
    500     box-sizing: border-box;
    501     background-size: 100%;
    502     background-repeat: no-repeat;
    503     min-height: 80px;
    504     vertical-align: middle;
    505     display: flex;
    506     align-items: center;
    507 }
    508 
    509 .image-holder img {
    510     display: block;
    511     width: 100%;
    512 }
    513 
    514 button#cp-item-ok.full.insert-section, button#cp-item-section-ok.insert-section {
    515     width: 100%;
    516     border-bottom-left-radius: 10px;
    517 }
    518 
    519 ul.content-list {
    520     margin: 46px 0px;
    521     text-align: center;
    522     letter-spacing: 30px;
    523 }
    524 
    525 li.content-type {
    526     display: inline-block;
    527     width: 80px;
    528     height: 80px;
    529     border-radius: 4px;
    530     border: 2px dashed #f1f2f3;
    531     background-repeat: no-repeat;
    532     background-position: center;
    533     background-size: 62%;
    534     image-rendering: pixelated;
    535     cursor: pointer;
    536     position: relative;
    537 }
    538 
    539 ul.content-list .title {
    540     font-size: 8px;
    541     margin: 0;
    542     position: absolute;
    543     bottom: 4px;
    544     text-align: center;
    545     text-transform: uppercase;
    546     font-weight: bold;
    547     color: #4F4E51;
    548     -webkit-transition: color 0.3s;
    549     transition: color 0.3s;
    550     width: 86px;
    551     display: block;
    552     line-height: 10px;
    553     min-height: 15px;
    554     letter-spacing: normal;
    555 }
    556 
    557 #cp-items-footer button#cp-item-content-ok {
    558     width: 100%;
    559     border-bottom-left-radius: 10px;
    560 }
    561 
    562 .section-icon {
    563     width: 24px;
    564     height: 24px;
    565     float: right;
    566     opacity: 0.4;
    567     background-repeat: no-repeat;
    568     border-radius: 50%;
    569     transition: all .4s;
    570     background-position: center;
    571 }
    572 
    573 .open-right {
    574     background-image: url('../images/swap.png');
    575 }
    576 
    577 span.setting.section-icon {
    578     background-image: url('../images/cog.png');
    579 }
    580 
    581 span.add-section-plus {
    582     background-image: url('../images/plus-black.png');
    583 }
    584 
    585 h3:hover .section-icon {
    586     opacity: 0.8;
    587 }
    588 
    589 .section-icon:hover {
    590     opacity: 1;
    591     background-color: #d1d1d1;
    592 }
    593 
    594 .sections-list-reorder {
    595     padding: 20px;
    596 }
    597 
    598 .add-section-container {
    599     margin: auto;
    600     padding: 20px 0px;
    601     clear: both;
    602 }
    603 
    604 a.button-primary.cp-add-section {
    605     font-size: 14px;
    606     height: 40px;
    607     line-height: 40px;
    608     width: 100%;
    609     text-transform: uppercase;
    610     position: static;
    611     margin: auto;
    612     text-align: center;
    613 }
    614 
    615 span.close-panel {
    616     cursor: pointer;
    617     background-repeat: no-repeat;
    618     width: 20px;
    619     height: 20px;
    620     transition: background 0.3s;
    621     display: block;
    622     background-color: #666666;
    623     border-radius: 100%;
    624     text-align: center;
    625     text-rendering: optimizeLegibility;
    626     line-height: 19px;
    627     font-size: 17px;
    628     color: #ffffff;
    629     font-family: sans-serif;
    630     background-image: url(../images/close.png);
    631     background-size: 50%;
    632     background-position: center;
    633     position: relative;
    634     top: 10px;
    635     left: 270px;
    636     margin-bottom: 20px;
    637     z-index: 2;
    638 }
    639 
    640 span.close-panel:hover {
    641     background-color: #4d4d4d;
    642 }
    643 
    644 .reorder-handler {
    645     float: left;
    646     width: 20px;
    647     height: 45px;
    648     background: url(../images/reorder-handler.png?x=3);
    649     background-position: center;
    650     background-repeat: no-repeat;
    651     margin-top: -4px;
    652     margin-bottom: -4px;
    653     margin-right: 4px;
    654     cursor: ns-resize;
    655     background-color: #f0f0f0;
    656 }
    657 
    658 .full_row.item:hover .reorder-handler:hover {
    659     background-color: hsl(0, 0%, 93%);
    660 }
    661 
    662 .label-wrapper {
    663     float: left;
    664     width: calc(100% - 120px);
    665     max-width: calc(100% - 120px);
    666 }
    667 
    668 .full_row.item input.item-label {
    669     border: none;
    670     padding: 0px;
    671     margin: 0px 0px 2px 0px;
    672     padding: 3px 4px 2px 1px;
    673     border: none;
    674     background-color: transparent;
    675     font-size: 12px;
    676     display: block;
    677     border-bottom: 1px solid hsla(0, 0%, 88%, 1);
    678     outline: none;
    679     box-sizing: border-box;
    680     font-weight: normal;
    681     cursor: pointer;
    682     width: 100%;
    683 }
    684 
    685 .full_row.item input.item-label:hover, .full_row.item input.item-label:focus {
    686     background-color: #ffffff;
    687     border-bottom: 1px solid #0085ba;
    688     cursor: text;
    689     box-shadow: 0px 1px 0px rgb(0, 133, 186);
    690     color: #0083b7;
    691 }
    692 
    693 .anchor-info {
    694     font-size: 8px;
    695     height: 12px;
    696     line-height: 10px;
    697     padding-left: 4px;
    698     margin: 0px;
    699     display: block;
    700     letter-spacing: 0.4px;
    701     float: none;
    702     clear: both;
    703     padding-top: 1px;
    704     cursor: default;
    705     color: #000000;
    706 }
    707 
    708 li.full_row.item:hover .anchor-info {
    709     color: #000000;
    710 }
    711 
    712 ul#cp-items .mdi {
    713     font-size: 40px;
    714 }
    715 
    716 button.button.cp-mdi-visible {
    717     margin-left: 20px;
    718 }
    719 
    720 #cp-items .image-controls input[type=checkbox], #cp-items .image-wrapper input[type=checkbox] {
    721     display: inline-block;
    722     width: auto;
    723     padding: 2px !important;
    724     height: 20px;
    725     vertical-align: top;
    726     width: 20px;
    727     margin-right: 10px;
    728 }
    729 
    730 #cp-items .image-controls label, #cp-items .image-wrapper label {
    731     font-size: 11px;
    732     font-weight: 500;
    733     line-height: 120%;
    734     color: rgb(68, 68, 68);
    735     letter-spacing: 1px;
    736     clear: both;
    737     float: none;
    738     display: block;
    739 }
    740 
    741 #cp-items .image-wrapper label {
    742     margin-top: 10px;
    743     margin-bottom: -10px;
    744     background: white;
    745     margin-right: -10px;
    746     margin-left: -10px;
    747     border: none;
    748     padding-top: 10px;
    749     line-height: 19px;
    750 }
    751 
    752 h3.accordion-section-title.no-chevron:after {
    753     content: none;
    754     display: none;
    755 }
    756 
    757 ul#available_footers {
    758     padding: 20px;
    759     background: #ffffff;
    760 }
    761 
    762 #TB_window {
    763     background-color: transparent;
    764     height: auto !important;
    765     border-radius: 10px;
    766     top: 20px !important;
    767     margin-top: 0px !important;
    768 }
    769 
    770 #TB_title {
    771     padding: 10px;
    772     background-color: #fcfcfc;
    773     border-top-left-radius: 10px;
    774     border-top-right-radius: 10px;
    775     overflow: hidden;
    776 }
    777 
    778 #TB_closeWindowButton {
    779     right: 10px;
    780 }
    781 
    782 div#TB_ajaxContent {
    783     background-color: #ffffff;
    784     height: auto !important;
    785     width: 100% !important;
    786     max-height: 70vh !important;
    787     box-sizing: border-box;
    788     border-bottom-left-radius: 10px;
    789     border-bottom-right-radius: 10px;
    790 }
    791 
    792 #TB_closeWindowButton:focus {
    793     outline: none !important;
    794 }
    795 
    796 #TB_closeWindowButton:focus .tb-close-icon {
    797     border-radius: 100%
    798 }
    799 
    800 .control-wrapper {
    801     padding: 20px 20px;
    802     overflow: hidden;
    803     background: #fff;
    804     display: block;
    805     left: 0px !important;
    806     height: calc(100% - 66px);
    807     overflow-y: auto;
    808     width: 270px;
    809 }
    810 
    811 .control-wrapper input {
    812     width: 100%;
    813 }
    814 
    815 .customize-control-radio-html label {
    816     position: relative;
    817 }
    818 
    819 .customize-control-radio-html input {
    820     display: none;
    821 }
    822 
    823 .customize-control-radio-html input + label .image-clickable {
    824     height: 100px;
    825     border: 1px solid transparent;
    826 }
    827 
    828 .customize-control-radio-html input + label {
    829     position: relative;
    830     display: block;
    831     width: 40%;
    832     float: left;
    833     padding: 10px;
    834 }
    835 
    836 .customize-control-radio-html input:checked + label .image-clickable {
    837     -webkit-box-shadow: 0 0 5px 2px rgba(0, 0, 0, .25);
    838     box-shadow: 0 0 5px 2px rgba(0, 0, 0, .25);
    839     border: 1px solid #3498DB;
    840 }
    841 
    842 .cp-color-boxes .color-container,
    843 .cp-color-boxes input[data-customize-setting-link] {
    844     float: left;
    845     display: inline-block;
    846     width: 60px;
    847     height: 40px;
    848     margin: 0px 4px;
    849     border-radius: 4px;
    850     position: relative;
    851     font-size: 10px;
    852 }
    853 
    854 .cp-color-boxes input[data-customize-setting-link] {
    855     visibility: hidden;
    856 }
    857 
    858 .cp-color-boxes input.big[data-customize-setting-link] {
    859     width: 100px;
    860     height: 80px;
    861     appearance: none !important;
    862 }
    863 
    864 .cp-color-boxes input[data-customize-setting-link]:checked + .check-icon {
    865     position: absolute !important;
    866     width: 20px !important;
    867     height: 20px !important;
    868     right: -10px !important;
    869     top: -8px !important;
    870     color: #ffffff;
    871     background-color: #38d638;
    872     background-image: url('../images/check.png');
    873     content: " ";
    874     background-position: center;
    875     background-repeat: no-repeat;
    876     border-radius: 50%;
    877 }
    878 
    879 .cp-color-boxes input.big[data-customize-setting-link]:checked + .check-icon {
    880     width: 30px !important;
    881     height: 30px !important;
    882     right: -14px !important;
    883     top: -14px !important;
    884     background-size: 20px;
    885 
    886 }
    887 
    888 .cp-color-boxes label {
    889     float: left;
    890     padding: 8px;
    891     height: auto;
    892     margin: auto;
    893 }
    894 
    895 .cp-color-boxes label .css-class-container {
    896     display: inline-block;
    897     border: 1px solid #c3c3c3;
    898     box-sizing: border-box;
    899     box-shadow: 2px 1px 5px -1px rgba(46, 68, 83, 0.44);
    900     position: relative;
    901 }
    902 
    903 .cp-color-boxes label .css-class-container input {
    904     background: transparent;
    905     border: none;
    906     outline: none;
    907     box-shadow: none;
    908 }
    909 
    910 .cp-color-boxes label:first-of-type {
    911     /* margin-left:24px; */
    912 }
    913 
    914 .customize-control-kirki-color > label {
    915     display: block;
    916     width: 100%;
    917 }
    918 
    919 .customize-control-kirki-color .customize-control-title {
    920     display: inline-block;
    921 }
    922 
    923 .customize-control-kirki-color .sp-replacer {
    924     float: right;
    925     margin-right: 0px;
    926     position: absolute;
    927     right: 0px;
    928     bottom: 0;
    929     margin-top: -5px;
    930     margin-bottom: 0;
    931 }
    932 
    933 
    934 #page_full_rows li.item.full_row + .empty {
    935     display: none;
    936 }
    937 
    938 #page_full_rows li.empty {
    939     padding: 40px 20px 20px 20px;
    940     text-align: center;
    941     font-size: 18px;
    942     text-transform: uppercase;
    943     color: rgb(187, 187, 187);
    944 }
    945 
    946 .cp-multi-image-item {
    947     clear: both;
    948     margin-bottom: 10px;
    949     display: block;
    950     width: 100%;
    951     padding: 4px;
    952     border: 1px solid #eeeeee;
    953     box-shadow: 0 2px 1px rgba(46, 68, 83, 0.15);
    954     position: relative;
    955 }
    956 
    957 .cp-multi-image-item .thumbnail.thumbnail-image {
    958     width: 100%;
    959     padding-right: 10px;
    960     min-height: 100px;
    961     box-sizing: border-box;
    962     margin: 0px;
    963     display: block;
    964     float: none;
    965     vertical-align: middle;
    966 }
    967 
    968 .cp-multi-image-item .thumbnail.thumbnail-image img {
    969     margin: auto;
    970     display: inline-block;
    971 }
    972 
    973 .cp-multi-image-item .actions {
    974     width: auto;
    975     box-sizing: border-box;
    976     position: absolute;
    977     background-color: rgb(255, 255, 255);
    978     padding: 4px 8px;
    979     bottom: 20px;
    980     border: 1px solid hsla(0, 0%, 73%, 1);
    981     border-right: none;
    982     border-bottom: none;
    983     right: 14px;
    984 }
    985 
    986 .cp-multi-image-item .actions span.open-right {
    987     /* background-color:#ffffff; */
    988     opacity: 1;
    989 }
    990 
    991 .cp-multi-image-item .actions span {
    992     float: none;
    993     display: inline-block;
    994     clear: both;
    995 }
    996 
    997 .cp-multi-image-item .actions .button {
    998     display: block !important;
    999     float: none !important;
   1000     margin: 4px !important;
   1001     clear: both !important;
   1002     width: auto !important;
   1003 }
   1004 
   1005 #customize-theme-controls .cp-label-control {
   1006     margin-top: 10px;
   1007     padding-top: 20px;
   1008     margin-bottom: 3px;
   1009     border-top: 2px solid hsla(0, 0%, 75%, 1);
   1010     text-align: center;
   1011 }
   1012 
   1013 .cp-label-control .customize-control-title {
   1014     font-size: 16px;
   1015     text-transform: uppercase;
   1016 }
   1017 
   1018 .fic-icon-preview i.mdi {
   1019     font-size: 50px;
   1020     padding: 10px;
   1021     background-color: white;
   1022     border: 1px solid #ddd;
   1023     -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07);
   1024     box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07);
   1025     width: 80px;
   1026     height: 80px;
   1027     text-align: center;
   1028     line-height: 80px;
   1029     display: inline-block;
   1030 }
   1031 
   1032 .fic-icon-preview {
   1033     float: left;
   1034 }
   1035 
   1036 .fic-controls {
   1037     float: left;
   1038     vertical-align: middle;
   1039     height: 80px;
   1040     margin-left: 10px;
   1041     padding: 10px 0px;
   1042 }
   1043 
   1044 #customize-controls .customize-control-kirki input, #customize-controls textarea {
   1045     font-size: 13px;
   1046 }
   1047 
   1048 #customize-controls .customize-control-kirki input[type="checkbox"] {
   1049     margin-right: 8px;
   1050 }
   1051 
   1052 #customize-controls .customize-control-kirki-radio-buttonset .buttonset .switch-label {
   1053     font-size: 14px;
   1054     padding: 4px 10px;
   1055 }
   1056 
   1057 #customize-controls .customize-control-kirki-radio-buttonset .buttonset {
   1058     height: 26px;
   1059 }
   1060 
   1061 #customize-controls .customize-control-kirki-radio-buttonset .buttonset label {
   1062     display: block;
   1063     float: left;
   1064 }
   1065 
   1066 #customize-controls .customize-control-kirki-spacing .wrapper {
   1067     padding: 0px 10px 10px 10px;
   1068     box-shadow: none;
   1069     border: 1px solid #cecece;
   1070     box-sizing: border-box;
   1071     width: 100%;
   1072     margin-right: 0px;
   1073 }
   1074 
   1075 .customize-control.customize-control-kirki-select .selectize-control > .selectize-input > .item {
   1076     letter-spacing: -0.2px;
   1077 }
   1078 
   1079 .customize-control-ope-info-pro p, .customize-control-ope-info p {
   1080     background: hsla(60, 100%, 87%, 1);
   1081     border: 1px solid #cecece;
   1082     font-weight: normal;
   1083     box-sizing: border-box;
   1084     font-size: 0.9em;
   1085     border-radius: 4px;
   1086     padding: 0.5em 1em;
   1087 }
   1088 
   1089 .customize-control-ope-info span {
   1090     padding: 2px 10px;
   1091     background: hsla(60, 100%, 87%, 1);
   1092     font-weight: normal;
   1093     box-sizing: border-box;
   1094 }
   1095 
   1096 .customize-control-ope-info-pro .upgrade-to-pro,
   1097 .customize-control-ope-info .upgrade-to-pro {
   1098     margin-top: 1em;
   1099     margin-left: 0;
   1100 }
   1101 
   1102 .customize-control-ope-info-pro p {
   1103     border: 1px solid #c3c3c3;
   1104     font-size: 1em;
   1105     background-color: rgb(185, 219, 247);
   1106 }
   1107 
   1108 a.pro-features-button {
   1109     color: inherit;
   1110 }
   1111 
   1112 li#accordion-section-materialis-pro {
   1113     margin-top: -16px;
   1114     border-top: none !important;
   1115 }
   1116 
   1117 .ope-pro-header.accordion-section-title:hover,
   1118 .ope-pro-header.accordion-section-title {
   1119     border-top: none !important;
   1120     border-left: none !important;
   1121 }
   1122 
   1123 .ope-pro-header.accordion-section-title:after {
   1124     display: none !important;
   1125 }
   1126 
   1127 .ope-pro-header.accordion-section-title .button {
   1128     background-color: #ff6700;
   1129     border-color: #d65600;
   1130     color: #ffffff;
   1131 }
   1132 
   1133 .button.button-orange {
   1134     background-color: #ff6700;
   1135     border-color: #d65600;
   1136     color: #ffffff;
   1137     -webkit-box-shadow: none;
   1138     box-shadow: none;
   1139 }
   1140 
   1141 .button.button-orange:focus {
   1142     outline: none;
   1143 }
   1144 
   1145 a.button.button-orange:focus,
   1146 a.button.button-orange:hover {
   1147     background-color: #ff7b24;
   1148     color: #ffffff;
   1149     border-color: hsla(24, 100%, 46%, 1);
   1150 }
   1151 
   1152 .ope-pro-header.accordion-section-title .button:focus {
   1153     outline: none;
   1154 }
   1155 
   1156 ul#sub-accordion-section-header_layout.open {
   1157     min-height: calc(100vh - 45px) !important;
   1158 }
   1159 
   1160 /*CUSTOMIZER ICONS*/
   1161 
   1162 li#accordion-section-header_layout {
   1163     margin-bottom: 1rem;
   1164 }
   1165 
   1166 #customize-controls li#accordion-section-header_layout,
   1167 #customize-controls li#accordion-section-header_layout > h3 {
   1168     background-color: #55616d;
   1169     border-left: 0;
   1170     color: #ffffff;
   1171     background-image: linear-gradient(90deg, #215CE5 0%, #654EA3 100%);
   1172     /*background: linear-gradient(90deg, #654EA3 0%, hsl(249, 98%, 72%) 100%);*/
   1173 }
   1174 
   1175 #customize-controls li#accordion-section-header_layout:hover,
   1176 #customize-controls li#accordion-section-header_layout > h3:hover {
   1177     background-color: #657381;
   1178     border-left-color: #41bff1;
   1179 }
   1180 
   1181 #customize-controls li#accordion-section-header_layout > h3:after {
   1182     color: #ffffff;
   1183 }
   1184 
   1185 li#accordion-section-header_layout h3:before {
   1186     width: 20px;
   1187     height: 20px;
   1188     font-size: 20px;
   1189     font-family: dashicons;
   1190     text-decoration: inherit;
   1191     font-weight: 400;
   1192     font-style: normal;
   1193     vertical-align: top;
   1194     text-align: center;
   1195     content: "\f100";
   1196     vertical-align: middle;
   1197     margin-right: 6px;
   1198     display: inline-block;
   1199     line-height: 18px;
   1200 }
   1201 
   1202 /*WEB GRADIENTS*/
   1203 .customize-control .webgradient {
   1204     height: 200px;
   1205     margin-bottom: 10px;
   1206 }
   1207 
   1208 .customize-control .webgradient + .label {
   1209     width: 100%;
   1210     bottom: 0px;
   1211     padding: 4px;
   1212     background-color: #444444;
   1213     color: #ffffff;
   1214     marign-top: 0px;
   1215     margin-bottom: 10px;
   1216     box-sizing: border-box;
   1217     text-align: center;
   1218 }
   1219 
   1220 li.attachment.webgradients-image {
   1221     width: 20%;
   1222     overflow: hidden;
   1223 }
   1224 
   1225 .attachment-preview .webgradient {
   1226     height: 100%;
   1227 }
   1228 
   1229 .customize-control-sidebar-button-group label button {
   1230     width: 100%;
   1231     min-height: 30px;
   1232 }
   1233 
   1234 /*RIGHT SIDEBAR*/
   1235 
   1236 #customize-theme-controls ul.section-settings-container.accordion-section-content {
   1237     background: #ececec;
   1238     margin-top: 30px;
   1239     padding-left: 20px;
   1240     padding-right: 20px;
   1241     box-sizing: border-box;
   1242     padding-top: 0px;
   1243 }
   1244 
   1245 .customizer-right-section > ul {
   1246     height: calc(100% - 53px);
   1247 }
   1248 
   1249 .customizer-right-section {
   1250     position: fixed;
   1251     left: 300px;
   1252     top: 0px;
   1253     width: 300px;
   1254     background: #eeeeee;
   1255     height: 100%;
   1256     display: block;
   1257     width: 310px;
   1258     transition: width 0.2s;
   1259     height: 0px;
   1260     opacity: 0;
   1261     visibility: hidden;
   1262 }
   1263 
   1264 .customizer-right-section.active {
   1265     width: 310px;
   1266     height: 100%;
   1267     opacity: 1;
   1268     visibility: visible;
   1269     border-right: 1px solid #bdbdbd;
   1270 }
   1271 
   1272 .customizer-right-section > ul {
   1273     display: block;
   1274     left: 0px !important;
   1275     height: calc(100% - 66px);
   1276     overflow-y: auto;
   1277     width: 270px;
   1278     padding-top: 0px;
   1279 }
   1280 
   1281 .customizer-right-section > ul .customize-section-description-container {
   1282     display: none;
   1283 }
   1284 
   1285 .customizer-right-section.active.floating {
   1286     height: auto;
   1287     transform: translateY(-50%);
   1288     border-bottom: 1px solid #bdbdbd;
   1289 }
   1290 
   1291 .default-input {
   1292     position: relative;
   1293     border-radius: 50%;
   1294     height: 50px;
   1295     width: 50px;
   1296     /* box-shadow: inset 0 0 1px #888; */
   1297     border: 1px solid #ccc;
   1298     /* background: #ffffff; /1* Old browsers *1/ */
   1299     /* background: -moz-linear-gradient(top,  #ffffff 0%, #f1f1f1 3%, #e1e1e1 96%, #f6f6f6 100%); /1* FF3.6-15 *1/ */
   1300     /* background: -webkit-linear-gradient(top,  #ffffff 0%,#f1f1f1 3%,#e1e1e1 96%,#f6f6f6 100%); /1* Chrome10-25,Safari5.1-6 *1/ */
   1301     /* background: linear-gradient(to bottom,  #ffffff 0%,#f1f1f1 3%,#e1e1e1 96%,#f6f6f6 100%); /1* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ *1/ */
   1302     /* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 ); /1* IE6-9 *1/ */
   1303     margin: 2em auto;
   1304     cursor: pointer;
   1305     outline: none;
   1306 }
   1307 
   1308 .default-input:focus {
   1309     /* box-shadow: inset 0 0 1px #04f; */
   1310     border: 1px solid #0af;
   1311     cursor: pointer;
   1312 }
   1313 
   1314 .angle-input-pivot {
   1315     position: absolute;
   1316     left: 0;
   1317     right: 0;
   1318     top: 50%;
   1319     margin-top: -1px;
   1320     height: 2px;
   1321     /* background-color: #aaa; */
   1322 }
   1323 
   1324 .default-input .angle-input-pivot::before {
   1325     content: '';
   1326     position: absolute;
   1327     right: 5px;
   1328     top: 50%;
   1329     width: 10px;
   1330     margin-top: -6px;
   1331     height: 10px;
   1332     border-radius: 50%;
   1333     background-color: #fff;
   1334     /* box-shadow: 0 0 1px #888; */
   1335     border: 1px solid #ccc;
   1336 }
   1337 
   1338 .default-input:focus .angle-input-pivot::before {
   1339     /* box-shadow: 0 0 1px #04f; */
   1340     border: 1px solid #0af;
   1341 }
   1342 
   1343 select#media-attachment-date-filters {
   1344     width: 100%;
   1345     max-width: 100%;
   1346 }
   1347 
   1348 .section-list-item {
   1349     width: 100%;
   1350     background: hsl(0, 0%, 100%);
   1351     border: 1px solid #c1c1c1;
   1352     position: relative;
   1353     height: auto;
   1354     min-height: 20px;
   1355     line-height: 30px;
   1356     overflow: hidden;
   1357     word-wrap: break-word;
   1358     box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.17);
   1359     box-sizing: border-box;
   1360 }
   1361 
   1362 .section-list-item .handle.reorder-handler {
   1363     height: 35px;
   1364 }
   1365 
   1366 .customize-control-sectionsetting.sortable {
   1367     max-height: 400px;
   1368     overflow: auto;
   1369 }
   1370 
   1371 a.add-item.button-primary {
   1372     display: block;
   1373     float: none;
   1374     margin: 10px auto;
   1375     width: 100%;
   1376     text-align: center;
   1377     position: static;
   1378 }
   1379 
   1380 .data-edit-popup select {
   1381     font-size: 14px;
   1382     height: 40px;
   1383     outline: none;
   1384     vertical-align: middle;
   1385     background-color: #fff;
   1386     border: 1px solid #f1f1f1;
   1387     border-radius: 3px;
   1388     box-shadow: none;
   1389     padding: 0 12px;
   1390     -webkit-appearance: none;
   1391     -moz-appearance: none;
   1392     appearance: none;
   1393     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAASUlEQVQ4jWNgGAWDD/AyMDDcZmBgsMQiZwmV4yVkSDoDA8NnBgYGOzTNHxgYGPKJdQmyISRrhoF8BgaGj1BMsmYYyIHiUUBLAAAPcAw7q3NAWQAAAABJRU5ErkJggg==');
   1394     background-repeat: no-repeat;
   1395     background-position: right 5px center;
   1396     padding-right: 20px;
   1397 }
   1398 
   1399 /* fix safari disapearing bug */
   1400 
   1401 #customize-theme-controls .customize-pane-child.accordion-section-content {
   1402     padding-top: 0px;
   1403     padding-bottom: 0px;
   1404 }
   1405 
   1406 #customize-theme-controls .customize-pane-child.accordion-section-content.open {
   1407     padding-top: 12px;
   1408     padding-bottom: 12px;
   1409 }
   1410 
   1411 #customize-controls .description {
   1412     color: #555d66;
   1413     font-weight: 400;
   1414     background-color: #ffffbd;
   1415     padding: 5px;
   1416 }
   1417 
   1418 #customize-controls .description.customize-section-description {
   1419     background: transparent;
   1420 }
   1421 
   1422 /*4.8 color picker style*/
   1423 
   1424 .wp-color-picker {
   1425     width: 80px
   1426 }
   1427 
   1428 .wp-picker-container .hidden {
   1429     display: none
   1430 }
   1431 
   1432 .wp-color-result {
   1433     background-color: #f7f7f7;
   1434     border: 1px solid #ccc;
   1435     -webkit-border-radius: 3px;
   1436     border-radius: 3px;
   1437     cursor: pointer;
   1438     height: 22px;
   1439     margin: 0 6px 6px 0;
   1440     position: relative;
   1441     -webkit-user-select: none;
   1442     -moz-user-select: none;
   1443     -ms-user-select: none;
   1444     user-select: none;
   1445     vertical-align: bottom;
   1446     display: inline-block;
   1447     padding-left: 30px;
   1448     -webkit-box-shadow: 0 1px 0 #ccc;
   1449     box-shadow: 0 1px 0 #ccc;
   1450     top: 0
   1451 }
   1452 
   1453 .wp-color-result:after {
   1454     background: #f7f7f7;
   1455     -webkit-border-radius: 0 2px 2px 0;
   1456     border-radius: 0 2px 2px 0;
   1457     border-left: 1px solid #ccc;
   1458     color: #555;
   1459     content: attr(title);
   1460     display: block;
   1461     font-size: 11px;
   1462     line-height: 22px;
   1463     padding: 0 6px;
   1464     position: relative;
   1465     right: 0;
   1466     text-align: center;
   1467     top: 0
   1468 }
   1469 
   1470 .wp-color-result:focus, .wp-color-result:hover {
   1471     background: #fafafa;
   1472     border-color: #999;
   1473     color: #23282d
   1474 }
   1475 
   1476 .wp-color-result:focus:after, .wp-color-result:hover:after {
   1477     color: #23282d;
   1478     border-color: #a0a5aa;
   1479     border-left: 1px solid #999
   1480 }
   1481 
   1482 .wp-color-result.wp-picker-open:after {
   1483     content: attr(data-current)
   1484 }
   1485 
   1486 .wp-picker-container, .wp-picker-container:active {
   1487     display: inline-block;
   1488     outline: 0;
   1489 }
   1490 
   1491 .wp-color-result:focus {
   1492     border-color: #5b9dd9;
   1493     -webkit-box-shadow: 0 0 3px rgba(0, 115, 170, .8);
   1494     box-shadow: 0 0 3px rgba(0, 115, 170, .8)
   1495 }
   1496 
   1497 .wp-picker-open + .wp-picker-input-wrap {
   1498     display: inline-block;
   1499     vertical-align: top
   1500 }
   1501 
   1502 .wp-picker-container .button {
   1503     margin-left: 6px
   1504 }
   1505 
   1506 .wp-picker-container .iris-square-slider .ui-slider-handle:focus {
   1507     background-color: #555
   1508 }
   1509 
   1510 .wp-picker-container .iris-picker {
   1511     -webkit-border-radius: 0;
   1512     border-radius: 0;
   1513     border-color: #ddd;
   1514     margin-top: 6px;
   1515     margin-bottom: 14px;
   1516 }
   1517 
   1518 .wp-picker-container input[type=text].wp-color-picker {
   1519     width: 65px;
   1520     font-size: 12px;
   1521     font-family: monospace;
   1522     line-height: 16px;
   1523     margin: 0
   1524 }
   1525 
   1526 .wp-color-picker::-webkit-input-placeholder {
   1527     color: #72777c
   1528 }
   1529 
   1530 .wp-color-picker::-moz-placeholder {
   1531     color: #72777c;
   1532     opacity: 1
   1533 }
   1534 
   1535 .wp-color-picker:-ms-input-placeholder {
   1536     color: #72777c
   1537 }
   1538 
   1539 .wp-picker-container input[type=text].iris-error {
   1540     background-color: #ffebe8;
   1541     border-color: #c00;
   1542     color: #000
   1543 }
   1544 
   1545 .wp-color-result.wp-picker-open:after {
   1546     content: attr(title);
   1547 }
   1548 
   1549 .customize-control-kirki-checkbox input[type="checkbox"]:before,
   1550 .customize-control-kirki-multicheck input[type="checkbox"]:before,
   1551 .customize-control-repeater input[type="checkbox"]:before {
   1552     display: none;
   1553 }
   1554 
   1555 .customize-control-kirki-checkbox input[type="checkbox"]:checked:before,
   1556 .customize-control-kirki-multicheck input[type="checkbox"]:checked:before,
   1557 .customize-control-repeater input[type="checkbox"]:checked:before {
   1558     display: block;
   1559 }
   1560 
   1561 li.category-title.closeable {
   1562     position: relative;
   1563 }
   1564 
   1565 li.category-title.closeable:after {
   1566     content: "\f347";
   1567 
   1568     font: normal 18px/1 dashicons;
   1569     speak: none;
   1570     display: block;
   1571     -webkit-font-smoothing: antialiased;
   1572     -moz-osx-font-smoothing: grayscale;
   1573     text-decoration: none !important;
   1574     position: absolute;
   1575     right: 8px;
   1576     top: 50%;
   1577     margin-top: -9px;
   1578 }
   1579 
   1580 li.category-title.closeable[data-item-open]:after {
   1581     content: "\f343";
   1582 }
   1583 
   1584 li.category-title + li.available-item {
   1585     margin-top: 40px;
   1586 }
   1587 
   1588 span.customize-control-title:first-letter {
   1589     text-transform: uppercase;
   1590 }
   1591 
   1592 #customize-controls .customize-control-kirki .wp-picker-active input {
   1593     display: inline-block !important;
   1594 }
   1595 
   1596 .data-edit-popup .customize-control-checkbox input {
   1597     margin-left: 0px;
   1598 }
   1599 
   1600 li.category-title.closeable {
   1601     user-select: none;
   1602     cursor: pointer;
   1603 }
   1604 
   1605 .pro-popup-preview-image {
   1606     box-shadow: 0px 10px 30px 0 rgba(49, 52, 57, 0.3), 0 10px 30px rgba(0, 0, 0, 0.08);
   1607     width: 75%;
   1608     display: block;
   1609     margin: 0px auto 40px auto;
   1610     border-radius: 10px;
   1611 }
   1612 
   1613 .pro-popup-preview-container {
   1614     text-align: center;
   1615     padding: 30px 0px;
   1616 }
   1617 
   1618 .pro-popup-preview-container h3 {
   1619     margin-bottom: 0;
   1620 }
   1621 
   1622 .pro-popup-preview-container p {
   1623     margin-top: 0;
   1624     margin-bottom: 0;
   1625 }
   1626 
   1627 .pro-popup-preview-container a.button.button-orange {
   1628     padding: 4px 20px;
   1629     height: auto;
   1630     text-transform: uppercase;
   1631 }
   1632 
   1633 #customize-control-woocommerce_thumbnail_cropping .woocommerce-cropping-control {
   1634     margin-right: 0px;
   1635 }
   1636 
   1637 #customize-control-woocommerce_thumbnail_cropping .woocommerce-cropping-control li {
   1638     margin-bottom: 16px;
   1639 }
   1640 
   1641 #customize-control-woocommerce_thumbnail_cropping .woocommerce-cropping-control li .description {
   1642     margin-top: 6px;
   1643     display: block;
   1644 }
   1645 
   1646 .customize-control-kirki-checkbox input[type=checkbox]:checked:before, .customize-control-kirki-multicheck input[type=checkbox]:checked:before, .customize-control-repeater input[type=checkbox]:checked:before {
   1647     line-height: 1;
   1648 }