@font-face {
  font-family: 'LuckyFellas';
  src: url(../fonts/LuckyFellas.eot);
  src: url(../fonts/LuckyFellas.eot?#iefix) format("embedded-opentype"), url(../fonts/LuckyFellas.otf) format("otf"), url(../fonts/LuckyFellas.svg#LuckyFellas) format("svg"), url(../fonts/LuckyFellas.ttf) format("truetype"), url(../fonts/LuckyFellas.woff2) format("woff2"), url(../fonts/LuckyFellas.woff) format("woff"); }
@font-face {
  font-family: 'CentraNo1-Black';
  src: url(../fonts/CentraNo1-Black.eot);
  src: url(../fonts/CentraNo1-Black.eot?#iefix) format("embedded-opentype"), url(../fonts/CentraNo1-Black.otf) format("otf"), url(../fonts/CentraNo1-Black.svg#CentraNo1-Black) format("svg"), url(../fonts/CentraNo1-Black.ttf) format("truetype"), url(../fonts/CentraNo1-Black.woff) format("woff"), url(../fonts/CentraNo1-Black.woff2) format("woff2"); }
@font-face {
  font-family: 'CentraNo1-Book';
  src: url(../fonts/CentraNo1-Book.eot);
  src: url(../fonts/CentraNo1-Book.eot?#iefix) format("embedded-opentype"), url(../fonts/CentraNo1-Book.otf) format("otf"), url(../fonts/CentraNo1-Book.svg#CentraNo1-Book) format("svg"), url(../fonts/CentraNo1-Book.ttf) format("truetype"), url(../fonts/CentraNo1-Book.woff) format("woff"), url(../fonts/CentraNo1-Book.woff2) format("woff2"); }
@font-face {
  font-family: 'CentraNo1-Extrabold';
  src: url(../fonts/CentraNo1-Extrabold.eot);
  src: url(../fonts/CentraNo1-Extrabold.eot?#iefix) format("embedded-opentype"), url(../fonts/CentraNo1-Extrabold.otf) format("otf"), url(../fonts/CentraNo1-Extrabold.svg#CentraNo1-Extrabold) format("svg"), url(../fonts/CentraNo1-Extrabold.ttf) format("truetype"), url(../fonts/CentraNo1-Extrabold.woff) format("woff"), url(../fonts/CentraNo1-Extrabold.woff2) format("woff2"); }

button {
    background: unset;
    border: unset;
    cursor: pointer;
}
html {
  overflow: hidden;
  width:100vw;
  height:100vh;
}
body {
  overflow: hidden;
  width:100vw;
  height:100vh;
}
main {
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background:#FAFAFA;
}
* {
	color:#707070;
	font-size:16px;
	font-family: 'CentraNo1-Book';
  touch-action: manipulation;
}
*:focus-visible {
    outline: 3px solid rgba(9, 83, 251, 0.45) !important;
    outline-offset: 2px;
}
div, p, html, body, main, img, canvas, span {
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}
.loading-view {
  width:100vw;
  height:100vh;
  top:0;
  left:0;
  z-index:9999999;
  position:fixed;
  padding: 0 24px;
  text-align:center;
  background:#FFF;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.loading-view img {
  max-width:100%;
}
.input-upload-label {
  cursor: pointer;
  background: #E6EEFF;
  color: #707070;
  margin-bottom: 10px;
  margin-top: 10px;
}
.input-upload {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}
.header {
  height: 60px;
  align-items:center;
  position:relative;
}
/*.header button {
  position:absolute;
}*/
.header .open-catalog {
  height: 60px;
  margin-left: 10px;
}
.editor-title {
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  margin:0;
  color:#3f3f3f;
  font-family:'CentraNo1-Extrabold';
  font-size:18px;
  white-space:nowrap;
}
.editor-status {
  min-height:24px;
  margin-top:8px;
  color:#545454;
  font-size:14px;
  text-align:center;
}
.editor-status[data-state="saved"] {
  color:#18703a;
}
.editor-status[data-state="error"] {
  color:#b42318;
}
.editor-status[data-state="saving"] {
  color:#0953FB;
}
.editor-save-mask {
    position: fixed;
    right: 20px;
    top: 10px;
}
.editor-save-mask-demo {
    position: fixed;
    right: 20px;
    top: 10px;
}
.save-label-mobile {
  display:none;
}
.editor-save-mask .save-label-desktop,
.editor-save-mask .save-label-mobile {
  color:inherit;
  font:inherit;
}

.my-editor {
    max-height: 40vh;
    height: 800px;
    width: calc(100% - 120px);
}
.right-controls {
  width: 60px;
  position: absolute;
  right: 0;
  top: 25px;
}
.right-controls .side-control {
  display:block;
  margin-bottom: 30px;
  margin-left: 10px;
  /* desktop : inline-block */
}
.side-control img {
    width: 35px;
}
.left-controls {
  width: 60px;
  position: absolute;
  left: 0;
  bottom: 136px;
}
.left-controls .side-control {
  display:block;
  margin-top: 30px;
  /* desktop : inline-block */
}
.markup-primary-controls {
  background:#E6EEFF;
  border-radius:0 0 8px 8px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.markup-secondary-control {
    display: none;
}
.markup-secondary-control.active {
    display: flex;
}
.markup-secondary-control .col {
  text-align:center;
}
.editor-wrapper[data-view="text"] .open-text-controls{
  background: #E6EEFF;
  border-radius: 8px;
}
.editor-wrapper[data-view="sticker"] .open-sticker-controls{
  background: #E6EEFF;
  border-radius: 8px;
}
.open-controls img {
    width: 25px;
}
.open-controls {
    max-width: 150px;
    padding: 7px;
}

.markup-primary-control-sticker {
  padding-bottom: 10px;
}
.editor-wrapper[data-view="sticker"] .markup-control-text, .editor-wrapper[data-view="sticker"] .markup-primary-control-text {
  display:none;
}

.editor-wrapper[data-view="text"] .markup-control-sticker, .editor-wrapper[data-view="text"] .markup-primary-control-sticker {
  display:none;
}
.markup-control.active {
  background:#E6EEFF;
  border-radius:8px 8px 0 0;
  padding-top: 5px;
}
.text-primary{
  color:#0953FB !important;
}
.btn-primary {
  color:white;
  background-color:#0953FB;
  border-color:#0953FB;
  border-radius:64px;
}
label.add-sticker {
    line-height: 40px;
    text-align: center;
    display:block;
    width:100%;
}
.button-undo[disabled] {
    opacity: 0.2;
    cursor:not-allowed;
}
.btn-background-white {
    background: white;
    border-radius: 10px;
    width: 40px;
    height: 40px;
    padding:0;
}
.side-control,
.select-markup-primary-control,
.select-markup-secondary-control,
.close-property-sheet {
  min-width:44px;
  min-height:44px;
}
.btn-background-white img {
  width:25px;
}

.btn-add {
  width: 100% !important;
  border: 1px solid #ced4da;
}
.editor-wrapper[data-view="text"] .add-sticker {
  display:none;
}
.editor-wrapper[data-view="sticker"] .add-text {
  display:none;
}
.add-wrapper {
    margin-bottom: 15px;
}
.select-markup-primary-control[data-property="color"] {
  position:relative;
}


.select-markup-primary-control[data-property="color"]:after {
    content: " ";
    background: var(--color, red);
    width: 13px;
    height: 13px;
    position: absolute;
    left: calc(50% - 6.5px);
    top: calc(50% - 4px);
    z-index: 1;
    border-radius: 10px;

}
.markup-control-text .markup-content {
  position: relative;
}
.markup-control-text .select-markup-primary-control {
    position: absolute;
    width: 44px;
    height: 44px;
    background-image: url(/assets/photoeditordoka/images/sticker_deletion.svg);
    right: 0;
    top: 0;
    border: none;
    background-repeat: no-repeat;
    background-size: 22px;
    background-position:center;
}

.markup-control-text.active input {
  border: 1px solid #0953FB;
}
.markup-control-text {
    padding-bottom: 10px;
}
.markup-control-text input {
  color: #707070;
}
.select-markup-primary-control[data-property="fontFamily"] span {
    display: block;
    margin-right: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 25px;
    line-height:40px;
    padding-top:2px;
}
.select-markup-primary-control[data-property="fontFamily"] img {
    position: absolute;
    right: 0;
    top: -4px;
  }
.select-markup-secondary-control.fill-data-color[data-property="color"][data-value] {
  width:32px;
  height:32px;
  border: 1px solid #707070;
  border-radius: 8px;
  background:green;
}
.select-markup-secondary-control[data-wrapper="text"][data-property="size"] {
  height:56px;
  padding:0;
}
.markup-secondary-control[data-wrapper="text"][data-property="size"] {
  text-align:center;
}

.markup-secondary-control[data-property="color"],.markup-secondary-control[data-property="fontFamily"] {
  width:100%;
  overflow-x:scroll;
  overflow-y:hidden;
  height: 60px;
}
.property-sheet-header,
.font-search {
  display:none;
}
.layers-title {
  display:none;
  font-family:'CentraNo1-Extrabold';
  font-size:16px;
}
.markup-secondary-control[data-property="color"] > div,.markup-secondary-control[data-property="fontFamily"] > div {
    white-space: nowrap;
}
.custom-color {
    background: url(/assets/photoeditordoka/images/text_color_custom.svg);
    width: 32px;
    height: 32px;
    background-size: 100%;
    background-repeat: no-repeat;
}
.eyedropper-btn {
    width: 32px;
    height: 32px;
    border: 1px solid #707070;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    margin: 5px;
    transition: background-color 0.2s ease;
}
.eyedropper-btn:hover {
    background-color: #E6EEFF;
}
.eyedropper-btn img {
    width: 20px;
    height: 20px;
}
.eyedropper-btn-large {
    width: auto;
    height: 40px;
    padding: 8px 16px;
    margin-top: 10px;
    font-size: 14px;
    color: #707070;
}
.eyedropper-btn-large img {
    margin-right: 8px;
}
.markup-secondary-controls[data-property="color"] {
  position: relative;
}
.select-markup-secondary-control[data-property="color"][data-value] {
    margin: 5px;
}
.select-markup-secondary-control[data-wrapper="text"][data-property="size"] {
  font-weight:bold;
}
.select-markup-secondary-control.active[data-wrapper="text"][data-property="size"] {
  color:#0953FB;
}
.select-markup-secondary-control[data-wrapper="text"][data-property="size"][data-value="small"] {
  font-size:16px;
}
.select-markup-secondary-control[data-wrapper="text"][data-property="size"][data-value="medium"] {
  font-size:26px;
}
.select-markup-secondary-control[data-wrapper="text"][data-property="size"][data-value="big"] {
  font-size:36px;
}



.font-weight-bold {
  font-family: 'CentraNo1-Extrabold';
}
.bottom-controls {
  position: relative;
}
.color-picker {
  display:none;
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  background:#E6EEFF;
  text-align: center;
  padding:24px;
  border-radius: 8px;
}
.colorpicker-saturation, .colorpicker-hue {
  border-radius:8px;
}
.color-picker.active {
  display:block;
}
.colorpicker-bar {
  display: none;
}
.colorpicker {
  border:none;
  margin-top:10px;
  padding:0;
  background:unset;
}
.top-controls {
  position: relative;
}
.zoom-in .top-controls, .zoom-in .left-controls, .zoom-in .markup-primary-controls, .zoom-in .markup-secondary-controls, .zoom-in .editor-save-mask, .zoom-in .editor-save-mask-demo, .zoom-in .header, .zoom-in .bottom-controls {
  display:none;
}
.zoom-in .my-editor img {
    height: auto;
    width: 100%;
    margin: auto;
}

.zoom-in .my-editor {
    height: 600px;
    width: auto;
    margin-top:70px;
    max-height:80vh;
}

.zoom-in .right-controls .side-control {
    display: inline;
}
.zoom-in .right-controls {
    width: 100%;
    top: 20px;
    left: 10px;
    position: fixed;
}


.form-control {
  border-radius: 8px;
}
.markup-control-sticker .markup-content img {
  height: 60px;
  width: auto;
  max-width: 70px;
  object-fit: contain;
}
.markup-control-sticker .markup-content {
    word-break: break-all;
    overflow: hidden;
    margin-bottom: 10px;
    height: 60px;
}
.markup-control-sticker .markup-title {
  text-align: center;
  padding-bottom:10px;
}

.markup-control-sticker.active .markup-title {
  color:#0953FB;
}
/* MODE TEST START */
.my-editor img {
  height:100%;
  width:auto;
  margin:auto;
}


.example-no-bg {
  display:none;
}

.example-bg {
  display:block;
}
.view-bg .example-no-bg {
  display:block;
}

.view-bg .example-bg {
  display:none;
}

/* MODE TEST END */

#confirmModal {
  text-align:center;
}
#confirmModal p, #confirmModal span {
  color:#D10309;
}

.confirm-modal-button {
  background: #FFFFFF;
  border: 1px solid #D10309;
  color:#D10309;
  border-radius: 29px;
  padding: 3px 20px 3px 20px;
}
.cancel-modal-button {
  background: #D10309;
  border: 1px solid #D10309;
  color:white;
  border-radius: 29px;
  padding: 3px 20px 3px 20px;
}

  .editor-wrapper[data-view="sticker"] .open-sticker-controls {
    color:#0953FB;
  }
  .editor-wrapper[data-view="text"] .open-text-controls {
    color:#0953FB;
  }

  .markup-primary-controls.no-control {
    display:none;
  }
/*  .select-markup-primary-control[data-property="deletion"] {
    display:none;
  }*/
  /*.focus-text .select-markup-primary-control[data-property="deletion"] {
    display:none;
  }*/

/* PINTURA START */
.PinturaUtilFooter {
    height: 1px !important;
    padding: 0 !important;
    width: 0 !important;
}
.PinturaNav {
  height:0;
  width:0;
  display:none !important;
}
.PinturaUtilMain {
  padding:0;
}
.PinturaShapeControls,.PinturaShapeManipulator {
  display: none !important;
}
.pintura-editor {
  background: #FAFAFA;
}
/* PINTURA END */

/* CATALOG START */

.catalog {
    overflow-y: scroll;
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    z-index:99999;
    padding-bottom:150px;
    background:#F2F2F2;
  }

  .catalog .catalog-validate-mask {
      position: fixed;
      bottom: 30px;
      left: calc(50% - 80px);
      display:none;
  }
  .catalog .catalog-select-mask .catalog-mask-wrapper {
    display:block;
    width:100%;
    height:100%;
    filter: drop-shadow(0px 2px 6px rgba(0, 0, 0, 0.18));
  }
  .catalog .catalog-select-mask.selected {
    box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 0.15);
    background:#F2F2F2;
    border-radius:8px;
    border:1px solid #0953FB;
  }
  .catalog .catalog-select-mask {
    border:1px solid transparent;
    color:#707070;
  }
  .catalog-mask-name {
    display:block;
    margin-top:10px;
    overflow:hidden;
    color:#444;
    font-size:14px;
    line-height:1.3;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .catalog-search {
    height:48px;
  }
  .catalog .catalog-select-mask .catalog-mask-wrapper img {
    width:100%;
    height:auto;
  }
  .catalog .catalog-select-mask.selected .catalog-mask-wrapper:after {
    content:"";
    background: url(/assets/photoeditordoka/images/mask_selection.png);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    background-size: 100%;
}
  .catalog .catalog-select-mask.background .catalog-mask-wrapper {
    background:url('/doka_js/catalog/photo-background-pintura.jpg');
    background-size:100% 100%;
  }
  .catalog .catalog-select-mask.background .catalog-mask-wrapper.landscape {
    background:url('/doka_js/catalog_landscape/photo-background-pintura.jpg');
    background-size:100% 100%;
  }
  .catalog .border-top-blue {
    border-top:1px solid #0953FB;
  }
  .catalog .colorpicker-inline.colorpicker-visible {
      display: block;
      margin-left:auto;
      margin-right:auto;
  }

/* CATALOG END */



  .focus-text .my-editor {
    margin-left:auto !important;
    margin-right:auto !important;
  }
.editor-load-error {
  position:absolute;
  inset:0 75px 0 0;
  z-index:10;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:24px;
  text-align:center;
  background:rgba(250,250,250,0.96);
}
.editor-load-error[hidden],
.save-success[hidden] {
  display:none !important;
}
.editor-load-error-actions {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
}
.editor-unavailable .bottom-controls,
.editor-unavailable .right-controls {
  pointer-events:none;
  opacity:0.35;
}
.editor-save-mask:disabled {
  opacity:0.55;
  cursor:not-allowed;
}
.save-success {
  position:fixed;
  inset:0;
  z-index:100000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(20,30,50,0.42);
}
.save-success-card {
  width:min(420px, 100%);
  padding:32px 24px;
  border-radius:16px;
  background:#fff;
  box-shadow:0 20px 50px rgba(0,0,0,0.18);
}
.save-success-card h2 {
  color:#18703a;
}
/* MOBILE START */
@media only screen and (max-width: 449px) {
  main {
    padding-bottom:32px;
  }
  .header {
    position:sticky;
    top:0;
    z-index:40;
    height:56px;
    margin:0;
    background:#FAFAFA;
    border-bottom:1px solid #e8e8e8;
  }
  .header .open-catalog {
    height:56px;
    max-width:105px;
    margin-left:0;
    overflow:hidden;
    font-size:14px;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .editor-title {
    right:116px;
    left:105px;
    overflow:hidden;
    transform:none;
    font-size:15px;
    text-align:center;
    text-overflow:ellipsis;
  }
  .editor-save-mask,
  .editor-save-mask-demo {
    position:fixed;
    z-index:45;
    top:8px;
    right:8px;
    min-height:40px;
    padding:7px 13px;
    font-size:13px;
  }
  .save-label-desktop {
    display:none;
  }
  .save-label-mobile {
    display:inline;
  }
  .editor-status {
    margin:6px 0 2px;
    padding:0 12px;
  }
  .top-controls {
    padding-top:4px;
    padding-right:0;
  }
  .editor-tabs {
    padding:0;
  }
  .editor-tabs > .col-6 {
    padding:0 6px;
  }
  .open-controls {
    max-width:none;
    min-height:44px;
  }
  .my-editor {
    width:100%;
    height:42vh;
    min-height:280px;
    max-height:440px;
  }
  .right-controls {
    position:static;
    display:flex;
    width:100%;
    justify-content:center;
    gap:18px;
    margin-top:8px;
  }
  .right-controls .side-control {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin:0;
  }
  .bottom-controls {
    padding:0 8px 24px;
  }
  .layers-title {
    display:block;
    margin:16px 0 8px;
  }
  .markup-controls {
    display:flex;
    flex-direction:column;
    gap:8px;
    margin:0;
  }
  .markup-control {
    flex:none;
    width:100%;
    max-width:none;
    padding:0;
  }
  .markup-control-text {
    padding-bottom:0;
  }
  .markup-control-text .markup-content {
    min-height:52px;
  }
  .markup-control-text input {
    height:52px;
    padding-right:52px;
    text-overflow:ellipsis;
  }
  .markup-control-text .select-markup-primary-control {
    top:4px;
    right:4px;
    bottom:auto;
  }
  .markup-control-sticker .markup-content {
    display:flex;
    align-items:center;
    height:64px;
    margin:0;
    padding:4px 50px 4px 8px;
    border:1px solid #ced4da;
    border-radius:8px;
    background:#fff;
  }
  .markup-primary-controls {
    margin:10px 0 0;
    padding:8px 2px;
    border-radius:10px;
  }
  .markup-primary-controls > div {
    padding:0 4px;
  }
  .markup-primary-controls .btn-background-white {
    width:48px;
    height:48px;
  }
  .select-markup-primary-control[data-property="fontFamily"] span {
    font-size:18px;
  }
  .markup-secondary-control.active {
    position:fixed !important;
    z-index:100001;
    left:0;
    right:0;
    bottom:0;
    display:flex;
    width:100vw !important;
    max-height:72vh;
    height:auto !important;
    margin:0 !important;
    padding:16px 16px calc(18px + env(safe-area-inset-bottom));
    overflow-x:hidden !important;
    overflow-y:auto !important;
    flex-wrap:wrap;
    border-radius:18px 18px 0 0;
    background:#E6EEFF;
    box-shadow:0 -12px 35px rgba(31,42,68,0.22);
  }
  .property-sheet-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex:0 0 100%;
    width:100%;
    margin-bottom:12px;
  }
  .property-sheet-header strong {
    color:#343434;
    font-size:18px;
  }
  .close-property-sheet {
    padding:6px 10px;
    color:#0953FB;
    font-family:'CentraNo1-Extrabold';
  }
  .font-search {
    display:block;
    flex:0 0 100%;
    height:46px;
    margin-bottom:10px;
  }
  .fonts {
    display:grid;
    grid-template-columns:1fr;
    width:100%;
    gap:4px;
  }
  .select-markup-secondary-control[data-property="fontFamily"] {
    width:100%;
    min-height:46px;
    padding:8px 10px;
    overflow:hidden;
    text-align:left;
    text-overflow:ellipsis;
    white-space:nowrap;
    border-radius:8px;
    background:#fff;
  }
  .markup-secondary-control[data-property="color"] > div,
  .markup-secondary-control[data-property="fontFamily"] > div {
    white-space:normal;
  }
  .default-colors {
    display:grid;
    grid-template-columns:repeat(5, 44px);
    justify-content:center;
    width:100%;
    gap:8px;
  }
  .select-markup-secondary-control.fill-data-color[data-property="color"][data-value],
  .custom-color,
  .eyedropper-btn {
    width:44px;
    height:44px;
    margin:0;
  }
  .markup-secondary-control[data-property="size"] > .col-4,
  .markup-secondary-control[data-property="position"] > .col {
    padding:4px;
  }
  .select-markup-secondary-control[data-wrapper="text"][data-property="size"] {
    width:100%;
    height:58px;
    border-radius:8px;
    background:#fff;
  }
  .markup-secondary-control[data-property="position"] {
    justify-content:center;
  }
  .markup-secondary-control[data-property="position"] .btn-background-white {
    width:52px;
    height:52px;
  }
  .editor-load-error {
    inset:0;
  }
  .zoom-in .my-editor {
    width:100%;
    height:calc(100vh - 85px);
    margin-top:60px;
  }
  .zoom-in .right-controls {
    position:fixed;
    top:8px;
    left:8px;
    z-index:100;
    justify-content:flex-start;
  }
  .zoom-in .right-controls .toggle-background,
  .zoom-in .right-controls .button-undo {
    display:none;
  }
}
/* MOBILE END */


/* DESKTOP START */

@media only screen and (min-width: 450px) {
  .pintura-editor {
    max-width: 50%;
    margin: auto;
  }
  .editor-save-mask {
    position: absolute;
    right: 0;
    top:0;
  }
  .editor-save-mask-demo {
    position: absolute;
    right: 0;
    top:0;
  }
  .my-editor {
    max-height: 60vh;
    width:100%;
    margin-left:auto;
  }
  .input-upload-label {
    background: white;
  }
  .zoom-in .right-controls {
    top: 50px;
    left: 50px;
  }
  .markup-secondary-controls[data-property="position"] {
    position: relative !important;
    height: 150px;
  }
  .markup-secondary-controls[data-property="position"] > div {
    flex-basis: unset;
    -ms-flex-positive: unset;
    flex-grow: unset;
    max-width: unset;
    padding:0;
    width:unset;
  }
  .select-markup-secondary-control[data-property="position"],.select-markup-secondary-control.active[data-property="position"] {
    position:absolute;
    border:1px solid #707070;
    background:unset;
  }
  .select-markup-secondary-control[data-property="position"][data-value="center"] {
    left: 0;
    top: 45px;
  }

  .select-markup-secondary-control[data-property="position"][data-value="left"] {
    left:75px;
    top: 45px;
  }
  .select-markup-secondary-control[data-property="position"][data-value="right"] {
    left:165px;
    top: 45px;
  }
  .select-markup-secondary-control[data-property="position"][data-value="up"] {
    left: 120px;
    top: 5px;
  }
  .select-markup-secondary-control[data-property="position"][data-value="down"] {
    left:120px;
    top:85px;
  }
  
  .markup-control-sticker .markup-content {
    cursor:pointer;
  }
  .markup-control-sticker .markup-title  {
    display:none;
  }
  .markup-control-sticker.active .markup-content {
    background:#E6EEFF;
    border-radius:8px;
  }
  .markup-primary-control-sticker[data-wrapper="sticker"],.markup-primary-control-sticker[data-wrapper="sticker"] > div {
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
  }
  .markup-primary-control-sticker[data-wrapper="sticker"] {
    justify-content: flex-end;
  }
  .markup-primary-control-sticker[data-wrapper="sticker"] > div {
    margin-bottom:10px;
  }
  
  .zoom-in .my-editor img {
    height: 100vh;
    width: auto;
  }
  .markup-secondary-control[data-property="color"] > div, .markup-secondary-control[data-property="fontFamily"] > div {
     white-space: inherit; 
  }
  .markup-secondary-control[data-property="fontFamily"] {
      overflow-x: hidden; 
      overflow-y: scroll; 
      height: 100%;
      position: absolute;
      top: 0;
      background:#E6EEFF;
      z-index: 2;
  }
  .fonts {
    width:100%;
  }
  .select-markup-secondary-control[data-property="fontFamily"] {
    width: 100%;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .select-markup-primary-control[data-property="fontFamily"] {
    border-radius: 8px;
    border: 1px solid #D1D1D1;
  }
  .markup-secondary-control[data-property="color"] {
      overflow-x: inherit; 
      overflow-y: inherit; 
      height: auto;
  }
  .left-controls {
    width: 60px;
    position: absolute;
    right: 0;
    left: unset;
  }
  .left-controls .side-control {
    display:block;
    margin-left: 10px;
  }
  .open-text-controls {
      float: right;
  }


  .markup-controls {
    flex-direction: column;
  }
  .bottom-controls {
    width: 200px;
    top: 60px;
    position: absolute;
    height: calc(100% - 60px);
  }
  .select-markup-primary-control[data-property="fontFamily"] {
    margin-bottom:10px;
    margin-top:10px;
  }
  .markup-primary-controls {
    background: unset;
  }
  .select-markup-primary-control {
    border:1px solid #707070;
  }
  .select-markup-primary-control[data-property="fontFamily"] img {
    width: 35px;
    right: 10px;
    top: 15px;
  }
  .btn-background-white.active {
    background-color:#E6EEFF;
    border:1px solid #E6EEFF;
  }
  .btn-background-white.active[data-property="deletion"] {
    background-color:white;
    border:1px solid #707070;
  }
  .markup-secondary-controls > .mt-2 {
      margin-bottom: 0.5rem;
  }
  .markup-secondary-controls {
    background-color:#E6EEFF;
    border-radius:8px;
    padding: 10px;
  }
  .markup-secondary-control[data-property="size"] {
    text-align: center;
  }
  .select-markup-primary-control[data-property="fontFamily"] span {
    text-align: left;
  }
  .markup-control.active {
    background: none;
    border-radius: 8px 8px 0 0;
    padding-top: 5px;
  }
  .markup-control.active input {
    background: #E6EEFF;
  }
}

/* DESKTOP END */