body .main_app_landing{
  overflow-x: hidden;
}
div[class^="button-preview-"] {
  transition: justify-content 1s ease-in-out, opacity 1s ease-in-out;
}
/* *{
  border: #AD2634 1px dashed;
} */
div[class^="button-preview-"] button {
    transition: transform 1s ease-in-out;
}

.addFont_system-ui{
  font-family: system-ui;
}
.addFont_arial{
  font-family: arial;
}
.addFont_helvetica{
  font-family: helvetica;
}
.addFont_times-new-roman{
  font-family: times-new-roman;
}
.addFont_georgia{
  font-family: georgia;
}
.addFont_roboto{
  font-family: roboto;
}
.addFont_open-sans{
  font-family: open-sans;
}
.addFont_cambria{
  font-family: cambria;
}
.addFont_menlo{
  font-family: menlo;
}
.addFont_monaco{
  font-family: monaco;
}
.addFont_consolas{
  font-family: consolas;
}
.addFont_liberation-mono{
  font-family: liberation-mono;
}
.addFont_courier-new{
  font-family: courier-new;
}
.addFont_monospace{
  font-family: monospace;
}



/* from header */
textarea:focus input:focus{
  outline: none;
}
textarea input{
  outline: none;
}
input[type="range"]::-moz-range-progress {
  background-color: #ff4500;
}
.container.playground_cont{
min-height: 100px;

}
input[type="range"] {
  -moz-appearance: none;
  height: 5px;
}

input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background-color: #ff4500;
  border: none;
  border-radius: 50%;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  /* display: none; <- Crashes Chrome on hover */
  -webkit-appearance: none;
  margin: 0;
  /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
  -moz-appearance: textfield;
  /* Firefox */
}

/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

/* from playground.php */


#container:hover .element {
    cursor: pointer;
}

#container.sub_sep_1 {
    display: none;
}

.sub_sep.sub_sep_2 {
    display: none;
}

#container.sub_sep_2 {
    display: block;
}

.selected {
    background-color: #b3d4fc;
}

@keyframes fadeInLeft {
    from {
        opacity: 0.5;
        transform: translateX(-90%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.fade-in-left {
    animation: fadeInLeft 0.4s ease-in-out;
}

/* .img-btn-playground:hover{
  background-color: #FF6A00;
} */
.img-btn-playground:focus{
  border: 2px solid #3182ce;
}
.popup_403.show_403{
  top: 90%;
  right: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
}

.popup_403.hide_403{
  top: 90%;
  right: 100%;
  transform: translate(-50%, -50%);
  opacity: 0.5;
}


#error_displayer.transition-right {
  transition: right 500ms ease-out; 
}
.popup_403.transition-right { 
  transition: right 250ms ease-out, opacity 300ms ease-out;

}
/* .popup_403.transition-left { 
  transition: left 2000ms ease-out;
} */
.blog_info{
  /* background: linear-gradient(45deg, #1b1b1b, #601a00); */
  /* box-shadow: 0 4px 8px 0 #4d4d4d, 0 6px 20px 0 #4d4d4d; */
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5), 0 6px 10px 0 rgba(0, 0, 0, 0.5);
}
.blog_info.show{
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
}  

.center_element{
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
}


/* Define initial and final positions */

.tag-remove {
  margin-left: 5px;
  cursor: pointer;
  font-weight: bold;
}

/*  css for the landing page  */
.headline{
  font-family: 'Georgia' , "Verdana";
}
.bg_image_1{
  width: 100%;
  height: 100%;
  background-image: url('/images/holding_glasses_variant_orange.webp');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  grid-column: span 1;
  padding: 0.5rem;
}


@media (max-width: 700px){
  .bg_image_1{
    height: 400px;
  }
}
.st0{fill:#15171F;}
.st1{fill:#2D223C;}
.st2{fill:#58244D;}
.st3{fill:#871F4A;}
.st4{fill:#AD2634;}
.st5{fill:#BF4700;}


ul.privacy {
  list-style-type: square;
}
/* END */

:root {
  /* Primary */
  --primary-50: rgb(255, 227, 217);
  --primary-100: rgb(255, 218, 204);
  --primary-200: rgb(255, 209, 191);
  --primary-300: rgb(255, 181, 153);
  --primary-400: rgb(255, 125, 77);
  --primary-500: rgb(255, 69, 0);
  --primary-600: rgb(230, 62, 0);
  --primary-700: rgb(191, 52, 0);
  --primary-800: rgb(153, 41, 0);
  --primary-900: rgb(125, 34, 0);

  /* Secondary */
  --secondary-50: rgb(255, 231, 217);
  --secondary-100: rgb(255, 223, 204);
  --secondary-200: rgb(255, 215, 191);
  --secondary-300: rgb(255, 191, 153);
  --secondary-400: rgb(255, 142, 77);
  --secondary-500: rgb(255, 94, 0);
  --secondary-600: rgb(230, 85, 0);
  --secondary-700: rgb(191, 71, 0);
  --secondary-800: rgb(153, 56, 0);
  --secondary-900: rgb(125, 46, 0);

  /* Tertiary */
  --tertiary-50: rgb(228, 230, 232);
  --tertiary-100: rgb(219, 221, 225);
  --tertiary-200: rgb(210, 213, 217);
  --tertiary-300: rgb(183, 187, 195);
  --tertiary-400: rgb(128, 136, 149);
  --tertiary-500: rgb(74, 85, 104);
  --tertiary-600: rgb(67, 77, 94);
  --tertiary-700: rgb(56, 64, 78);
  --tertiary-800: rgb(44, 51, 62);
  --tertiary-900: rgb(36, 42, 51);

  /* Success */
  --success-50: rgb(225, 250, 234);
  --success-100: rgb(216, 248, 228);
  --success-200: rgb(206, 246, 221);
  --success-300: rgb(176, 241, 200);
  --success-400: rgb(117, 230, 159);
  --success-500: rgb(58, 219, 118);
  --success-600: rgb(52, 197, 106);
  --success-700: rgb(44, 164, 89);
  --success-800: rgb(35, 131, 71);
  --success-900: rgb(28, 107, 58);

  /* Warning */
  --warning-50: rgb(255, 247, 217);
  --warning-100: rgb(255, 245, 204);
  --warning-200: rgb(255, 242, 191);
  --warning-300: rgb(255, 235, 153);
  --warning-400: rgb(255, 219, 77);
  --warning-500: rgb(255, 204, 0);
  --warning-600: rgb(230, 184, 0);
  --warning-700: rgb(191, 153, 0);
  --warning-800: rgb(153, 122, 0);
  --warning-900: rgb(125, 100, 0);

  /* Error */
  --error-50: rgb(255, 226, 226);
  --error-100: rgb(255, 216, 217);
  --error-200: rgb(255, 206, 207);
  --error-300: rgb(255, 177, 178);
  --error-400: rgb(255, 118, 121);
  --error-500: rgb(255, 59, 63);
  --error-600: rgb(230, 53, 57);
  --error-700: rgb(191, 44, 47);
  --error-800: rgb(153, 35, 38);
  --error-900: rgb(125, 29, 31);

  /* Surface */
  --surface-50: rgb(223, 224, 226);
  --surface-100: rgb(213, 213, 217);
  --surface-200: rgb(202, 203, 207);
  --surface-300: rgb(170, 171, 179);
  --surface-400: rgb(107, 109, 121);
  --surface-500: rgb(43, 46, 64);
  --surface-600: rgb(39, 41, 58);
  --surface-700: rgb(32, 35, 48);
  --surface-800: rgb(26, 28, 38);
  --surface-900: rgb(21, 23, 31);
}

/* Editor.js heading styles for dark theme */



#editorjs h1 {
  font-size: 2.75em;
  color: #fff;
}

#editorjs h2 {
  font-size: 2.25em;
  color: #fff;
}

#editorjs h3 {
  font-size: 2em;
  color: #fff;
}

#editorjs h4 {
  font-size: 1.5em;
  color: #fff;
}

#editorjs h5 {
  font-size: 1.25em;
  color: #fff;
}

#editorjs h6 {
  font-size: 1em;
  color: #fff;
}



.tg-spoiler {
  background-color: var(--secondary-400) !important;
}
.ce-block--selected .ce-block__content{
  background: var(--surface-500) !important;
  color: inherit;
}

.ce-block__content .ce-delimiter{
  color: white !important;
}

.ce-block__content .ce-delimiter hr{
  border-color: white !important;
}

.ce-inline-toolbar,
.codex-editor--narrow .ce-toolbox,
.ce-conversion-toolbar,
.ce-settings,
.ce-settings__button,
.ce-toolbar__settings-btn,
.cdx-button,
.ce-popover,
.ce-toolbar__plus:hover {
  background: var(--primary-500) !important;
  color: inherit;
}

.ce-inline-tool,
.ce-conversion-toolbar__label,
.ce-toolbox__button,
.cdx-settings-button,
.ce-toolbar__plus {
  color: inherit;
}

.codex-editor ::selection {
  background: var(--surface-400) !important;
  background-color: var(--surface-400) !important;
}

.ce-popover-item-html[data-item-name="TextSpolier"] button.ce-inline-tool--active{
  background-color: transparent !important;
  color: white !important;
}

.ce-popover-item-html[data-item-name="TextSpolier"]:has(.ce-inline-tool--active) {
  background-color: var(--primary-500) !important;
}

.ce-inline-tool--active{
  color: white !important;
  background-color: var(--primary-500) !important;
}

.ce-popover-item.ce-popover-item--active[data-item-name="bold"]{
  color: white !important;
  background-color: var(--primary-500) !important;
}

.cdx-settings-button:hover,
.ce-settings__button:hover,
.ce-toolbox__button--active,
.ce-toolbox__button:hover,
.cdx-button:hover,
.ce-inline-toolbar__dropdown:hover,
.ce-inline-tool:hover,
.ce-popover__item:hover{
  background-color: var(--surface-400) !important;
  color: inherit;
}
.ce-toolbar__settings-btn:hover{
  background-color: var(--primary-600) !important;
  border:1px solid var(--primary-600) !important;
}
.cdx-notify--error {
  background: var(--error-500) !important;
}

.cdx-notify__cross::after,
.cdx-notify__cross::before {
  background: white;
}

.ce-popover__container{
  border: 1px solid var(--tertiary-200) !important;
}

.ce-popover__container,
.cdx-search-field.ce-popover__search{
  background-color: var(--surface-800) !important;
  color: white !important;
}


.cdx-list-start-with-field__input, .ce-inline-tool-input{
  background: var(--surface-700) !important;
}
.cdx-list-start-with-field{
  background-color: var(--surface-700) !important;
  border: 1px solid var(--surface-700) !important;
}

.cdx-list__checkbox--checked .cdx-list__checkbox-check{
  background: var(--primary-500) !important;
  border-color: var(--primary-500) !important;
}
.cdx-list__checkbox-check:before{
  background-color: var(--primary-500) !important;

}
.ce-popover__items .ce-popover-item:not(button){
  color: var(--surface-100) !important;
}
.ce-popover__items .ce-popover-item{
  border-radius: 4px;
}

.ce-popover-item[data-item-name="delete"]:hover{
  background-color: var(--error-700) !important;
}

.ce-popover__container .ce-popover__items .ce-popover-item:not([data-item-name="delete"]):hover{
  background-color: var(--surface-400) !important;
}

button.ce-popover-item{
  color: white !important;
}

.cdx-settings-button svg path{
  fill: var(--primary-500);
  color: var(--primary-500);
}


.ce-code__textarea.cdx-input{
  background-color: var(--surface-400) !important;
  color: white !important;
}
.ce-popover-item-html[data-item-name="TextSpolier"]{
  width: 28px !important;
  display: flex;
  align-items: center;
  justify-content:center;
  cursor: pointer;
  border-radius: 4px;
}
.ce-popover-item-html[data-item-name="TextSpolier"] button{
  cursor: pointer;
  background: transparent !important;
}
.ce-popover-item-html[data-item-name="TextSpolier"]:hover {
  background: var(--surface-400) !important;
}

.ce-popover-item-html[data-item-name="TextSpolier"] svg path{
  fill: white !important;
  color: white !important;
}

.text-spoiler{
  background: var(--surface-200) !important;
  color: var(--surface-800) !important;
}

.ce-popover-item-html div:has(button.cdx-settings-button){
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
}

@media (max-width: 650px){
  .ce-toolbar__plus{
    background-color: var(--primary-500) !important;
    border:1px solid var(--primary-500) !important;
  }
  .ce-toolbar__settings-btn{
    border:1px solid var(--primary-500) !important;
  }
}


.editorjs-inline-hotkey {
  color        : var(--surface-100) !important;
  border       : 1px solid var(--surface-200) !important;
  box-shadow   : 0px 1px 0px var(--surface-200) !important;
}

#editorjs .cdx-marker{
  background: var(--warning-300) !important;
}

#editorjs a{
  text-decoration: none !important;
  color: var(--primary-500) !important;
}