:root {
    --primary-color: #fab741;
    --dark-primary-color: #e3a315;
    --light-primary-color: #fecf5a;
    --very-light-primary-color: #fadc9b;
    --primary-color-subtle: #fcf8ea;

    --accent-color: #31787d;
    --accent-color-hover: #569fa4;
    --accent-color-light: #dee8e9;
    --accent-color-light-hover: #bad5d5;

    --lightgrey: #e1e1e1;
    --darkgrey: #706f6f;
  
    --secondary-color: #464646;
    --dark-secondary-color: #2e2e2e;
    --light-secondary-color: #7b7b7b;
  
    --very-light-background-color: #f3f3f3;
    --light-background-color: #e9e9e9;
    --grey-background-color: #d3d3d3;
  
    --warning: #C73228;
    --success: #A9CF54;
  
    --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  
    --font-color: #464646;
  
    --font-size: 16px;
  
    --line-height: 18px;
  
    --border-radius: 4px;

    /* 5.10.2022 */

    --button-dark-grey: #878787;
    --button-dark-blue: #36394c;
    --button-dark-blue-hover: #565a78;
    --button-outline: 1px solid #878787;
}

@font-face {
    font-family: "Futura";
    src: url("https://konfigurator.dev.stempelcloud24.com/font/futura_md.ttf") format("woff2");
}

#designer b{
    font-weight: bold;
}

#designer{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    font-family: BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
    font-family: Futura;

    background-color: white;
}

#designer_editor{
    display: flex;
    flex-direction: column;
    color: var(--font-color);
    min-height: 500px;
    position: relative;
    width: 100%;
}

#designer .main_area{
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
}



#designer #canvas{
    flex-grow: 1;
    padding: 8px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: baseline;
}

#designer_editor button{
    padding: 4px;
    border: 1px solid #aaa;
    font-family: 'Futura';
    border-radius: 0px;
    line-height: 27px;
}

#designer_editor input{
    padding: 4px;
    font-size: large;
    margin: 4px;
    height: unset;
    width: unset;
}

#designer_editor input[type=range] {
    min-width: 110px;
}

/*
#designer_editor input[type=range] {
    width: 110px;
    -webkit-appearance: none;
    background: transparent;
    appearance: none;
}

#designer_editor input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 10px;
    cursor: pointer;
    background: var(--dark-primary-color);
    border-radius: 5px;
    border: 0.5px solid #eee;
}

input[type=range]::-webkit-slider-thumb {
    height: 24px;
    width: 24px;
    border-radius: 12px;
    border: 1px solid var(--very-light-primary-color);;
    background: var(--light-primary-color);
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -7px;
  }*/

#designer_editor select{
    padding: 4px;
    border:1px solid #aaa;
    font-size: large;
    appearance: auto;
    background: none;
    text-indent: 0px;
    padding-left: 8px;
    padding-right: 8px;
    font-family: 'Futura';
    width: initial;
}


#designer .center{
    display: flex;
    justify-content: center;
}

#designer .font_select{
    border-left: none;
    width: 100px;
}

#designer .choices {
    margin-bottom: unset;
    overflow: unset;
    width: 100px;
}

#designer .choices .choices__item{
    padding-right: unset;
}

#designer .choices .choices__inner{
    min-height: 20px;
    padding: 4px;
    min-width: 100px;
    height: 100%;
}

#designer .choices .choices__list--dropdown{
    width: 200px;
    z-index: 101;
    white-space: nowrap;
}

#designer .choices .choices__list--single{
    width: 70px;
    overflow-x: clip;
    white-space: nowrap;
}




/*
#designer .font_select { 
    height: 30px;
    width: 100px;
    border: 1px #000 solid;
    list-style-type: none;
    padding-left: 0px;
}
#designer .font_select li { 
    padding: 5px 10px; z-index: 2; 
}
#designer .font_select li:not(.selected) { 
    float: left;
    width: 130px;
    
    background: #ddd; 
}
#designer .font_select li:not(.selected):hover, ul li.selected:not(.selected) { 
    background: #09f; 
}
#designer .font_select li.selected { 
    cursor: pointer; 
}*/

#designer .menu_button{
    padding: 4px;
    background-color: var(--light-background-color);
    border: 1px solid var(--light-secondary-color);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#designer .menu_button:hover{
    background-color: white;
}

#designer .toggle_button{
    background: #ccc;
    color: #666;
    width:32px;
    font-size: large;
}

#designer .toggle_button_on{
    background: #fdc958;
    color: black;
}

#designer .text_input{
    margin: 0;
    min-width: 140px;
}

#designer .bold{
    font-weight: bold;
}
#designer .italic{
    font-style: italic;
}
#designer .underline{
    text-decoration: underline;
}

#designer #image_upload{
    color: white;
}

#designer #image_uplaod_label{
    padding: 6px;
    font-size: 18px;
}

#designer .button{
    padding: 4px;
    background: var(--lightgrey);
    color: black;
    border: none;
    display: inline-block;
    margin: 8px;
    box-sizing: content-box;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    user-select: none;
    cursor: pointer;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

#designer .button:hover{
    background: var(--dark-primary-color);
}

#designer .PDFButton{
    color: white;
    display: flex;
    align-items: center;
    flex-grow: 1;
    font-size: 16px;
    font-weight: 500;
    justify-content: center;
}

#designer .PDFButton:hover{
    background: var(--light-secondary-color);
}

#designer .PDFButton > img{
    padding: 4px;
}

#designer .pdf_loading{
    background: var(--grey-background-color) !important;
}

#designer .pdf_ready{
    background: var(--success) !important;
}

#designer .large{
    font-size: 18px;
    padding: 7px;
    font-weight: 500;
}

#designer .spaced{
    margin-top: 16px;
}

#designer .hidden_upload{
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    display: block;
    cursor: pointer;
}


#designer .toolbar{
    background-color: var(--accent-color);
    color: white;
    font-size: 16px;
    display: flex;
    flex-direction: row;
    min-height: 40px;
    z-index: 100;
    margin-bottom: 0px;
}

#designer #toolbar_tabs{
    background-color: white;
    color: var(--accent-color);
}

#designer #toolbar_sub{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0px 8px;
}

#designer #toolbar_sub > div{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 4px;
    gap: 8px;
}

#designer #toolbar_sub .right_side{
    margin-left: auto;
}

#designer #toolbar_right{
    justify-content: flex-end;
    color: white;
}

#designer #toolbar_right > .icon_bar > div{
    flex-grow: 0;
}

#designer #toolbar_right .right_side{
    gap: 8px;
}

#designer #toolbar_right .left_side{
    justify-content: flex-start;
    gap: 8px;
    user-select: none;
}

#designer #toolbar_undo > img, #designer #toolbar_redo > img {
    width: 30px;
    height: 30px;
}

#designer .copy_button{
    padding: 2px;
}

#designer .icon{
    width: 24px;
    height: 24px;
}

#designer .icon_bar{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    gap: 2px;
}

#designer .icon_bar > div{
    flex-grow: 1;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 6px 10px;
    padding-bottom: 8px;
    box-shadow: inset 0px -4px 6px 0px #30787d5b;
}

#designer .icon_bar > div{
    border-top: 2px solid var(--accent-color);
    border-right: 1px solid var(--accent-color);
    border-left: 1px solid var(--accent-color);
    border-radius: 16px 16px 0 0;
}

#designer .icon_bar>div:not(.active):hover{
    background-color: var(--accent-color-light);
}

#designer .toolbar_icon_text{
    font-size: 16px;
    font-weight: bold;
}

#designer .toolbar_icon{
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    user-select: none;
}

#designer .toolbar_icon > img{
    width: 30px;
    height: 30px;
    margin-right: 4px;
}

#designer .toolbar_icon > svg{
    fill: var(--accent-color);
}
#designer .toolbar_icon.active > svg{
    fill: white;
}

#designer .toolbar_icon:hover{
    cursor: pointer;
}

#designer .toolbar_icon.active{
    background-color: var(--accent-color);
    color: white;
    padding-top: 12px;
}

#designer .toolbar_icon > img{
    filter: brightness(0) saturate(100%) invert(37%) sepia(28%) saturate(778%) hue-rotate(135deg) brightness(103%) contrast(92%);
}

#designer .toolbar_icon.active > img{
    filter: none;
}

#designer #inkpad_colors{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 8px;
    flex-wrap: wrap;
}

#designer #inkpad_group{
    display: flex;
    align-items: center;
}

#designer .padColor{
    width: 24px;
    height: 24px;
    margin: 3px;
    display: inline-block;
    box-sizing: content-box;
    border-radius: 2px;
}

#designer .padColor:hover, #designer .padColor.active{
    border: 2px solid var(--primary-color);
    margin: 1px;
}

#designer .inactive>img{
    filter: brightness(0.5);
}

#designer .pattern_select_header{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 8px;
    background-color: var(--accent-color-light);
}

#designer #pattern_select{
    background-color: white;
    margin: 6px;
    width: 300px;
}

#designer #pattern_area{
    display: flex;
    flex-direction: row;
    margin-bottom: 4px;
    gap: 8px;
    width: 100%;
    min-height: 128px;
    max-height: 480px;
    overflow-y: auto;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

#designer #text_patterns, #design_patterns, #userpattern_patterns_list{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    max-height: 255px;
    overflow-y: auto;
    justify-content: space-evenly;
    scrollbar-color: var(--light-primary-color) var(--light-background-color);
    margin-top: 4px;
    margin-bottom: 4px;
    margin-left: auto;
    margin-right: auto;
}

#designer #userpattern_patterns, #userpattern_create{
    padding: 8px;
}

#designer #userpattern_create, #designer #userpattern_load{
    font-weight: bold;
}

#designer #userpattern_load{
    padding: 8px;
}

#designer .pattern_user_title{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    cursor: pointer;
}

#designer .pattern_user_title_delete{
    color: #f00;
    font-weight: bold;
}

#designer .pattern_user_title_delete:hover{
    color: rgb(171, 0, 0);
}

#designer .new_scrollbar::-webkit-scrollbar {
    width: 10px;
    height: 15px;
}

#designer .new_scrollbar::-webkit-scrollbar-track-piece {
    background-color: var(--light-background-color);
}

#designer .new_scrollbar::-webkit-scrollbar-thumb:vertical {
    height: 30px;
    background-color: var(--light-primary-color);
}


#designer .block_title, .block_subtitle{
    padding: 6px;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 1px;
    color: var(--accent-color);
}

#designer .block_subtitle{
    font-size: 16px;
    font-weight: 500;
}

#designer .sub_tab{
    padding: 8px;
    background-color: var(--accent-color-light);
}

#designer .sub_tab #qr_submit{
    margin: 4px;
}

#designer .sub_tab_select{
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    border-bottom: 1px solid var(--accent-color);
}

#designer .sub_tab_select button{
    border-top: 2px solid var(--accent-color);
    border-left: 1px solid var(--accent-color);
    border-right: 1px solid var(--accent-color);
    /*border-radius: 16px 16px 0px 0px;*/

    background-color: white;
    color: var(--accent-color);
    flex-grow: 1;
    margin: 0px;
}

#designer .sub_tab_select button.active{
    background-color: var(--accent-color);
    color: white;
}



#designer .pattern_box{
    display: flex;
    flex-direction: column;
    width: 180px;
    height: 130px;
    padding: 8px;
}

#designer .pattern_box:hover{
    background: var(--accent-color-light-hover);
}

#designer .pattern_box> div{
    padding: 4px;
}

#designer .pattern_box_image{
    flex-grow: 1;
    border: 1px solid var(--secondary-color);
    background-color: white;
}

#designer .pattern_box_image > div{
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#designer #border_settings, #designer #spawn_line{
    background-color: var(--accent-color-light);
    padding: 8px;
}

#designer #border_settings>div, #designer #spawn_line>div{
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 18px;
}

#designer #border_settings>div>div:first-child, #designer #spawn_line>div>div:first-child{
    min-width: 25%;
}

#designer .button_group{
    display: flex;
    flex-direction: row;
    align-items: center;
}

#designer .list_button{
    background: var(--primary-color);
    color: white;
    padding: 2px;
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#designer .list_button_active{
    background: var(--dark-primary-color);
    border: 2px solid var(--dark-secondary-color);
}

#designer .list_button:hover{
    background: var(--dark-primary-color);
}

#designer .input_short{
    max-width: 80px;
}

#designer .rotate90{
    transform: rotate(90deg);
}

#designer #clipart_area{
    display: flex;
    flex-direction: column;
    margin-bottom: 4px;
}

#designer #clipart_list{
    display: flex;
    flex-wrap: wrap;
    max-height: 400px;
    overflow-y: auto;
    padding: 8px;
    justify-content: center;
}

#designer #clipart_category{
    margin: 8px;
    padding: 6px;
    font-size: 22px;
}

#designer .clipart{
    min-width: 48px;
    min-height: 48px;
    margin: 4px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#designer .clipart:hover{
    background-color: var(--light-background-color);
}

#designer .disabled{
    opacity: 0.2;
}


#designer #showgrid_checkbox, #designer #snapgrid_checkbox{
    position: initial;
    pointer-events: initial;
    opacity: 1;
}


#designer.loading div{
    opacity: 0;
}

#designer #loadingCircle{
    align-self: center;
    position: absolute;
    opacity: 1 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 24px;
}

#designer #loadingCircle > img{
    width: 128px;
    height: 128px;
    filter: brightness(0.1);
    animation-duration: 1.5s;
    animation-name: rotate;
    animation-iteration-count: infinite;
    margin-bottom: 32px;
}

#designer .welcome_screen{
    position: absolute;
    background: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 3px solid var(--very-light-background-color);
    z-index: 99;
    min-height: calc(500px - 44px);
    height: calc(100% - 44px);
    width: 100%;
    height: 100%;
    padding-bottom: 8px;
}

#designer .welcome_banner{
    background-color: var(--primary-color);
    padding: 40px;
    width: 100%;
    text-align: center;
    font-weight: bold;
}

#designer .welcome_title{
    font-size: 37px;
    color: white;
    text-align: center;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, .2);
}

#designer .welcome_subtitle{
    font-size: 20px;
    color: white;
}

#designer .welcome_buttons{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    flex-grow: 1;
    gap: 24px;

    width: 100%;

    padding: 12px;
    padding-top: 24px;

    overflow-y: scroll;
}

#designer #welcome_buttons_functions{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: row;

    width: auto;
    flex-wrap: wrap;
    gap: 24px;
    background-color: unset;
    padding: 0px;
    padding-bottom: 30px;
    /*
    padding-bottom: 60px;
    border-radius: 0px;
    border-bottom: 2px solid #dfdfdf;*/
}

#designer .welcome_buttons > .welcome_function_button{
   background-color: var(--lightgrey); 
}

#designer .welcome_buttons > .welcome_function_button:hover{
   background-color: var(--light-background-color); 
}

#designer .welcome_buttons_fill{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
}

#designer .welcome_buttons>div, #designer #welcome_buttons_functions>div{
    padding-top: 8px;
    display: inline-block;
    margin: 0px;
    padding: 16px;
    padding-top: 24px;
    box-sizing: content-box;
    font-weight: bold;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 270px;
    height: 207px;
    cursor: pointer;
    background-color: var(--very-light-background-color);
    transition-property: background-color;
    transition-duration: 0.25s;
    font-size: 16px;
}

#designer #welcome_buttons_functions>div{
    background-color: var(--light-background-color);
}

#designer .welcome_buttons>div:hover{
    background-color: var(--light-background-color)
}

#designer #welcome_buttons_functions>div:hover{
    background-color: var(--grey-background-color);
}

#designer #welcome_buttons_functions>div:hover{
    background-color: var(--grey-background-color);
}

#designer #welcome_buttons_functions>div:hover .welcome_button_icon{
    padding: 12px;
}


#designer .welcome_buttons .welcome_button_inactive{
    color: #aaa !important;
    cursor: default !important;
    border: none !important;
}

#designer .welcome_buttons .welcome_button_inactive>.welcome_buttons_img{
    background-color: var(--light-secondary-color) !important;
    padding: 36px !important;
    transition: none !important;
}

#designer .welcome_button_icon{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: var(--primary-color);
    box-shadow: 3px 3px 12px 0px rgba(0,0,0,0.2);
    width: 112px;
    height: 112px;
    padding: 18px;

    transition-property: padding;
    transition-duration: 0.25s;
}

#designer .empty_pattern_box{
    width: 100%;
    height: 130px;
    height: auto;
    background-color: white;
}

#designer .empty_pattern_box_date_inside{
    border: solid 1px red;
    position: relative;
    top: 30%;
    left: 15%;
    width: 70%;
    height: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
}

#designer .welcome_button_img{
    width: 100%;
}

#designer .welcome_button_img img{
    max-height: 160px;
    max-width: 240px;
}

#designer .welcome_button_icon img{
    height: 100%;
}

#designer .welcome_button_text{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 16px;
    font-size: 16px;
    text-align: center;
}

#designer .welcome_buttons_mini{
    display: flex;
    justify-content: center;
    align-items: center;
}

#designer .welcome_buttons_mini > div{
    font-size: 18px;
    color: white;
    background-color: var(--primary-color);
    padding: 8px 18px;
    font-weight: bold;
    cursor: pointer;
    margin: 4px;
}

#designer .welcome_buttons_mini > div:hover{
    background-color: var(--light-primary-color);
}

#designer .welcome_buttons_mini .welcome_button_inactive{
    background-color: var(--light-secondary-color) !important;
    color: #aaa !important;
    cursor: default !important;
    border: none !important;
}

#designer .product_list_overlay{
    position: absolute;
    background: white;
    padding: 8px;
    display: flex;
    flex-direction: column;
    border: 3px solid var(--very-light-background-color);
    z-index: 99999;

    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}

#designer .product_list_window{
    padding: 20px;
    border-top: 2px solid var(--light-background-color);
    overflow-y: scroll;
    height: 100%;
}

#designer .product_topbar{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

#designer .product_headline{
    font-size: 26px;
    margin: 20px;
    font-weight: bold;
    line-height: 1.1;
}

#designer .product_headline_small{
    font-size: 18px;
    margin-bottom: 4px;
    font-weight: bold;
}

#designer #product_close{
    border: none;
    border-radius: 8px;
    padding-left: 10px;
    padding-right: 10px;
    margin-right: 8px;
}


#designer #products_larger_size, #designer #products_exact_size{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

#designer .product_card{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 16px;
    gap: 24px;
    width: 100%;
    min-height: 120px;
    border-bottom: 2px solid var(--very-light-background-color);
}

#designer .product_card:hover{
    background-color: var(--very-light-background-color);
}

#designer .product_card .product_image_box{
    flex-direction: row;
    align-items: center;
    padding: 8px;
    gap: 16px;
    flex-basis: 340px;
    flex-shrink: 0;

}

#designer .product_card .product_area_preview{
    border: 1px dashed black;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e6e6e6
}

#designer .product_card .product_area_preview>canvas{
    padding: 1px;
}

#designer .product_card>div{
    margin: 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4px;
}

#designer .product_card .product_color_list{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

#designer .product_card .product_color_box{
    width: 18px;
    height: 18px;
    cursor: pointer;
}

#designer .product_card .product_color_box_active{
    border: 1px solid transparent;
    outline: 1px solid #000;
    box-sizing: content-box;
    background-clip: padding-box;
}

#designer .product_card .product_info_box{
    font-size: 16px;
    flex-grow: 1;
    color: var(--dark-secondary-color);
}

#designer .product_card .product_action_box{
    font-size: 24px;
    font-weight: bold;
    color: var(--primary-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-grow: 0;
}

#designer .product_card .product_select_button{
    background-color: var(--primary-color);
    color: white;
    font-weight: bold;
    padding: 8px;
    border: none;
    cursor: pointer;
    margin: 8px;
    width: 180px;
    font-size: 16px;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 40px;
}

#designer .product_card .product_thumbnail{
    padding: 4px;
    width: 120px;
}

#designer .product_card .product_title{
    font-size: 18px;
    margin-bottom: 8px;
    font-weight: bold;
}

#designer .button_orange{
    background: var(--primary-color);
    color: white;
    border: var(--light-primary-color);
    vertical-align: unset;
}

#designer .button_orange:hover{
    background: var(--dark-primary-color);
    color: white;
    border: var(--primary-color);
}

@keyframes rotate {
    from {
        transform:rotate(0deg)
    }
  
    to {
        transform:rotate(360deg)
    }
}

@keyframes designer_popup_open{
    from {
        transform: scale(0.1);
    }
  
    to {
        transform: scale(1);
    }
}

#designer .designer_popup_menu{
    position: absolute;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    border: 2px solid var(--grey-background-color);
    background: rgba(233, 233, 233, 0.9);
    padding: 6px 12px;
    font-size: 22px;
    z-index: 10000;
    gap: 4px;

    max-width: 100%;
    width: 100%;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;

    animation-duration: 0.3s;
    animation-timing-function: ease-out;
    animation-name: designer_popup_open;
}

#designer .designer_popup_menu .popup_group{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin: 4px;
    flex-grow: 1;
    justify-content: center;
}

#designer .designer_popup_menu .popup_element_icon,
#designer .designer_popup_menu .popup_element_spacer{
    flex-shrink: 0;
}

#designer .designer_popup_menu img{
    height: 100%;
    width: 100%;
}

#designer .popup_element_toggle:hover{
    background-color: var(--light-background-color);
}

#designer .popup_element_toggle_active{
    border: 2px solid black;
    background-color: white;
}


#designer .popup_element_toggle{
    width: 32px;
    height: 32px;
    border: 1px solid var(--grey-background-color);
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    user-select: none;
    flex-grow: 1;
    color: black;
}



#designer .popup_element_slider{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    font-weight: bold;
    font-size: 16px;

    background: rgb(255, 255, 255);
    padding: 4px 8px;
    border-radius: 4px;
}

#designer .popup_element_slider input{
    flex-grow: 1;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    min-width: 200px;
    max-width: 300px;
}

#designer .popup_padding{
    padding: 4px;
}
#designer .popup_element_icon{
    margin: 4px;
}

#designer .designer_popup_menu .bold{
    font-weight: bold;
}

#designer .designer_popup_menu .italic{
    font-style: italic;
}

#designer .designer_popup_menu .underline{
    text-decoration: underline;
}

#designer .designer_popup_hover{
    z-index: 10001;
    align-items: center;
}

#designer .mci_toggle_button{
    border: 3px solid transparent;
    border-image: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
    border-image-slice: 1;
    padding: 2px;
    padding-top: 0px;
}

#designer .popup_submenu{
    position: absolute;
    width: calc(100% + 4px);
    bottom: 100%;
    position: absolute;
    left: calc(50%);
    transform: translateX(-50%);
    min-width: 120px;
    padding: 6px;
    border: 2px solid var(--grey-background-color);
    background: rgba(233, 233, 233, 0.95);
}

#designer .mci_color_button{
    width: 24px;
    height: 24px;
    margin: 3px;
    display: inline-block;
    box-sizing: content-box;
    border: 2px solid rgba(0.0,0.0,0.0,0.0);
    border-radius: 2px;
}

#designer .mci_date_colorpicker{
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 14px;
    column-gap: 8px;
}

#designer .menu_button.mci_toggle_button > img{
    max-height: 28px;
    height: 28px;
}


#designer .mci_toggle_button > img{
    border-bottom: 4px solid black; 
    padding-top: 2px;
}

#designer .mci_color_button.active{
    border: 2px solid var(--primary-color);
}

#designer .popup_element_number{
    display: flex;
    align-items: center;
}

#designer .popup_element_number>input{
    height: 30px;
}

#designer .designer_popup_menu label{
    font-size: 18px;
}

.invert{
    filter: invert(1);
}

.icon_darkened{
    filter: brightness(0.5);
}

#designer .full_upload_textbox, .full_upload_area{
    padding: 4px 12px;
}

#designer .full_upload_width_div{
    margin-bottom: 12px;
    margin-left: 8px;
}

#designer .indented_text{
    margin-left: 16px;
}

#designer .full_upload_area{
    display: flex;
    justify-content: center;
    align-items: center;
}

#designer .upload_info_area{
    display: flex;
    flex-direction: row;
    margin-top: 16px;
}

#designer .upload_image_area{
    background-color: var(--primary-color-subtle);
    padding: 8px;
}

#designer #upload_full_label, #designer #image_upload_label, #designer #vk_image_upload_label{
    position: relative;
    padding: 16px;
    font-size: 18px;
    font-weight: bold;

    transition: all 0.2s ease-in-out;
    flex-grow: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box !important; 

    background: white;
    border: 2px dotted var(--darkgrey);
    color: black;
    cursor: pointer;
}

#designer #upload_full_label {
    background: var(--very-light-background-color);
    padding-top: 48px;
    padding-bottom: 48px;
}



#designer #upload_full_label .big_icon{
    transition: all 0.2s ease;
}

#designer #full_upload_loading_icon{
    display: none;
}

#designer #upload_full_label_text_uploading{
    display: none;
}

#designer .uploading #full_upload_loading_icon{
    display: inline-block;
    animation-duration: 1.5s;
    animation-name: rotate;
    animation-iteration-count: infinite;
}

#designer .uploading #full_upload_icon{
    display: none;
}

#designer .uploading #upload_full_label_text_idle{
    display: none;
}

#designer .uploading #upload_full_label_text_uploading{
    display: inline-block;
}

#designer #upload_full_label:hover, #designer #upload_full_label.is-dragover,
#designer #image_upload_label:hover, #designer #image_upload_label.is-dragover,
#designer #vk_image_upload_label:hover, #designer #vk_image_upload_label.is-dragover{
    border: 2px solid var(--darkgrey);
    background-color: white;
}



#designer .big_icon{
    height: 64px;
    width: 64px;
}
#designer .medium_icon{
    height: 42px;
    width: 42px;
    max-width: unset;
}

#designer .lable_subtitle{
    font-size: 20px;
}




/* TEMPALTE CSS */

#designer .right_area{
    display: flex;
    flex-direction: column;
    border: 2px solid #eeeeee;
    border-top: none;
}

#designer #designer-canvas{
    touch-action: none;
}

#designer #canvas_details{
    display: flex;
    flex-direction: column;
    font-size: 14px;
    padding: 24px;
    padding-top: 0px;
    font-weight: 500;
}

#designer #canvas_details>div{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

#designer .canvas_sizes_0{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

#designer .canvas_sizes{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

#designer .canvas_sliders{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

#designer .canvas_sizes>div {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0px 12px;
}

#designer #canvas_details > .canvas_details_0{
    justify-content: center;
}


#designer .canvas_details_1{
    padding-bottom: 16px;
    flex-direction: column !important;
}

#designer .canvas_details_2{
    background: var(--light-background-color);
    width: 100%;
}

#designer #scale_fill{
    margin: 0px;
}

#designer .scale_fill_div{
    display: flex;
    flex-direction: row;
    gap: 4px;
}

#designer #delete_all, #designer .PDFButton{
    background: var(--accent-color);    
}

#designer #delete_all:hover, #designer .PDFButton:hover{
    background: var(--accent-color-hover);
}

#designer #actions{
    margin-bottom: 14px;
    margin-top: 14px;

    display: flex;
    flex-direction: column;
    font-weight: bold;
}

#designer #actions > div{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

#designer select#apply_to_all, #designer select.designer_apply_to_all_input{
    height: 41px;
    padding: 4px;
    border: 1px solid var(--grey-background-color);
}

#designer .apply_to_all_container{
    display: flex;
    flex-direction: row;
    justify-content: stretch;
    align-items: center;
    margin: 16px 0px;
}

#designer .apply_to_all_container > div{
    margin: 4px;
    flex-basis: 50%;

    display: flex;
    flex-direction: row;
    justify-content: stretch;
    align-items: center;

}

#designer .apply_to_all_container > div > *{
    flex-grow: 1;
}

#designer #list_actions{
    display: flex;
    align-items: stretch;
    flex-direction: row;
    justify-content: stretch;
    font-weight: bold;
}

#designer #actions>button, #list_actions>button{
    flex-grow: 1;
    font-weight: 500;
}

#designer #list_actions>button{
    margin: 4px;
    flex-basis: 50%;
}

#designer #delete_all{
    font-size: 16px;
    font-weight: normal;
    color: white;
    padding: 8px;
    margin: 8px;
    border: none;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: center;
}

#designer .finish{
    background-color: var(--primary-color);
    color: white;
    font-size: 16px;
    padding: 10px 16px;
    border: none;
    width: 100%;
}

#designer .finish:hover{
    background-color: var(--light-primary-color);
}

/* CONFIG AREA*/

#designer .right_area, #designer #left_area{
    flex-grow: 1;
    flex-basis: 50%;
}

#designer #left_area{
    display: flex;
    flex-direction: column;
    border: 2px solid #eeeeee;
    border-top: none;
}

#designer #config_area{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    padding: 4px;
    min-height: 720px;
}

#designer #config_tabs{
    padding: 4px;
    min-width: 460px;
    border-bottom: 2px solid #eeeeee;
}

.designer_tooltip_box{
    position: absolute;
    background: white;
    padding: 8px;
    font-family: 'Futura', 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
    font-size: 16px;
    text-align: center;
    border: 2px solid var(--grey-background-color);
    border-radius: 8px;
    z-index: 9999;

    max-width: 500px;

    transform-origin: center center;
    transform: translate(-50%, -100%);

    opacity: 0;
    animation-name: tooltip_open;
    animation-duration: 0.2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;

    pointer-events: none;

    box-shadow: 4px 4px 8px #00000036;
}

.designer_tooltip_box::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -7px;
    border-width: 7px;
    border-style: solid;
    border-color: var(--dark-secondary-color) transparent transparent transparent;
  }

@keyframes tooltip_open{
    from {
        opacity: 0;
    }
  
    to {
        opacity: 1;
    }
}

#designer .qr_form{
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px;
}

#designer .qr_form > *{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}	

#designer .qr_form > * > *{
    width: 150px;
    flex-grow: 1;
}

#designer .fullwidth{
    width: 100%;
}

#designer .qr_form label{
    display: flex;
    justify-content: center;
}

#designer .vk_links{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 8px;
    font-weight: bold;
    font-size: 1.1em;
}

#designer .vk_links a:hover{
    color: var(--light-primary-color);
}


#designer .copy_button{
    line-height: inherit;
    border-radius: 3px;
}


#designer #item_list{
    margin-bottom: 16px;
    max-height: 720px;
    overflow-y: auto;
    overflow-x: hidden;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
}


@media only screen and (max-width: 900px){
    #designer #item_list .choices__list--dropdown,
    #designer #item_list .choices__list[aria-expanded]{
        position: fixed;
        z-index: 10000;
    }
}

#designer #item_list .textsize_select{
    min-width: 60px;
    font-size: 16px;
}

#designer #item_list > div{
    display: flex;
    align-items: center;
    align-items: stretch;
    font-size: large;
    padding: 4px 4px;
    flex-grow: 1;
}

#designer #item_list > div > div{
    display: flex;
    flex-direction: row;
    flex-grow: 1;
}

/*
#designer #item_list > div > div:first-child{
    flex-grow: 0;
}*/

#designer #item_list > div input{
    flex-grow: 2;
}

#designer #item_list > div select{
    flex-grow: 1;
}



#designer #item_list > div:hover, #designer #item_list > .designer_highlight{
    background: #eeb73f;
}

#designer #item_list > div input, #designer #item_list > div select{
    border: 1px solid var(--grey-background-color);
}

#designer #item_list > div span{
    padding: 4px;
    background: #eee;
    border: 1px solid var(--grey-background-color);
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    user-select: none;
    min-width: 40px;
    text-align: center;
}

#designer .text_input_container{
    position: relative;
}

#designer .text_predefined_dropdown_container{
    position: absolute;
    z-index: 100;
    background: white;
    border: 1px solid var(--grey-background-color);
    width: 100%;
    top: 100%;
    left: 0;


    justify-content: center;
    align-items: center;
    padding: 4px;
    flex-direction: column;

    box-shadow: 2px 2px 8px #00000015;

    display: none;
}

#designer .text_predefined_dropdown_container > div{
    width: 100%;
    padding: 4px;
}

#designer .text_predefined_dropdown_container > div:nth-child(odd){
    border-bottom: 1px solid var(--grey-background-color);
}   

#designer .text_predefined_dropdown_container > div:hover{
    background: var(--very-light-primary-color);
    cursor: pointer;
}

#designer .text_select_options_div{
    flex-direction: column;
}

#designer .text_select_options_div:hover{
    background: unset !important;
}

#designer #item_list .text_select_options_list{
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 4px;
    margin-left: 4px;
}

#designer #item_list .text_select_options_list > div{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 6px;
    border-radius: 2px;
}
#designer #item_list .text_select_options_list > div:nth-child(odd){
    background: var(--very-light-background-color);
}

#designer #item_list .text_select_options_list > div:hover{
    background: var(--very-light-primary-color);
}

#designer #item_list .text_select_option_add_button{
    padding: 4px 8px;
}

#designer #toolbar_right > .icon_bar > div:not(:last-child){
    border: none;
}

#designer span.thumb {
    display: none;
}

#designer label {
    display: initial;
    margin-bottom: initial;
}

#designer .div_small_padding_sides{
    padding-left: 8px;
    padding-right: 8px;
}

#designer .div_small_margin{
    margin: 8px;
    margin-left: 8px;
    margin-right: 8px;
}

#designer .mobile_only{
    display: none;
}

#debug_template_select{
    width: 100%;
}

#designer .startPopOut{
    animation-duration: 1s;
    animation-name: popOut;
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
}

.designer_dialog{
    max-width: 960px;
    border: none;
    padding: 24px;
    border-radius: 8px;
}


.designer_dialog > div{
    display: flex;
    flex-direction: column;
    row-gap: 8px;
}

.designer_dialog > div > div:first-child{
    font-size: 120%;
    font-weight: bold;
}

.designer_dialog form{
    margin-top: 8px;
}

.designer_dialog button{
    border-radius: 3px;
    background: #eee;
    border: 1px solid #ccc;
    color: #333;
    font-family: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
    padding: 7px 14px;
    box-sizing: border-box;
    vertical-align: middle;
    font-weight: 600;

    font-size: 15px;
    line-height: 1.6rem;
    margin: 0px 4px;
}

.designer_dialog::backdrop{
    background: rgba(0,0,0,0.33);
}

#designer .menu_button img{
    width: 24px;
    height: 24px;
    max-width: 24px;
    max-height: 24px;
}

@keyframes popOut {
    from {
        transform: scale(1);
    }
  
    to {
        transform: scale(0);
        display: none;
    }
  }

/* MOBILE */
@media only screen and (max-width: 900px) {

    body{
        overflow-x: hidden;
    }

    #designer{
        width: 100vw;
    }

    #designer .welcome_buttons{
        flex-grow: 0;
        padding-top: 24px;
        justify-content: center;
    }

    #designer .designer_popup_menu{
        position: fixed;
        top: inherit !important;
        right: inherit !important;
        bottom: 0;
        left: 0 !important;
        width: 100vw;
        max-width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        padding: 10px;

        border-left: none !important;
        border-right: none !important;
        border-bottom: none !important;
        border-top: 4px solid var(--primary-color);

        background: white !important;
        box-shadow: 0px -2px 12px 2px rgba(170, 170, 170, 0.3);

        animation-duration: 0.3s;
        animation-timing-function: ease-out;
        animation-name: designer_popup_open_mobile;
        transform-origin: bottom center;
    }

    @keyframes designer_popup_open_mobile{
        from {
            transform: translate(0px, 100%);
        }
      
        to {
            transform: translate(0px, 0px);
        }
    }

    #designer .designer_popup_menu .popup_element_toggle{
        width: 48px;
        height: 48px;
        font-size: 32px;
        font-weight: bold;
    }

    #designer .designer_popup_menu .popup_element_number{
        font-size: 24px;
        padding: 4px;
        font-weight: bold;
    }

    #designer .designer_popup_menu .popup_element_slider{
        font-size: 20px;
        margin-right: 90px;
    }
    
    #designer .designer_popup_menu .popup_element_number>input{
        height: 48px;
    }

    #designer .popup_element_toggle_active{
        border: 3px solid black;
    }

    #designer .designer_popup_menu .italic {
        padding-right: 8px;
    }

    #designer #actions, #designer #list_actions{
        flex-direction: column;
    }

    #designer #actions > div{
        flex-direction: column;
        align-items: stretch;
        margin: 8px;
    }

    #designer select#apply_to_all, #designer select.designer_apply_to_all_input{
        margin: 4px 8px;
    }

    #designer .main_area{
        flex-direction: column-reverse;
    }

    #designer #left_area, #designer .right_area{
        width: 100% !important;
        max-width: 100vw !important;
    }

    /*
    #designer .right_area{
        position: sticky;
        top: 0;
        z-index: 10;
        background: white;
        box-shadow: 0px 2px 6px 2px #00000065;
    }*/

    #designer #config_tabs{
        min-width: unset;
        width: 100%;
    }

    #designer .toolbar_icon_text{
        display: none;
    }

    #designer .icon_bar{
        gap: 0px;
        width: 100%;
    }

    #designer .icon_bar > div{
        border-radius: 0px;
        padding: unset;
        padding-bottom: 4px;
    }

    #designer .toolbar_icon.active{
        padding-top: 6px;
    }

    #designer .popup_submenu {
        top: unset;
        bottom: 100%;
    }

    #designer #designer_editor{
        width: 100%;
    }

    #designer .zoom_slider_div{
        display: none;
    }

    #designer .scale_slider_div{
        font-size: 18px;
    }

    #designer .toolbar{
        z-index: 1;
    }

    #designer #toolbar_sub > div > div{
        display: flex;
        align-items: center;
    }

    #designer #toolbar_right{
        background-color: var(--light-background-color);
        font-size: 120%;
        color: var(--font-color);
    }

    #designer #toolbar_right .icon_bar>div:hover{
        background-color: var(--light-background-color);
    }

    #designer #toolbar_undo:hover, #designer #toolbar_redo:hover{
        background-color: var(--grey-background-color);
        filter: brightness(1);
    }

    #designer .toolbar_icon > img{
        width: 38px;
        height: 38px;
    }

    #designer #toolbar_undo > img, #designer #toolbar_redo > img {
        width: 40px;
        height: 40px;
    }

    #designer input[type=checkbox]{
        width: 20px;
        height: 20px;
    }

    #designer_editor input[type=range] {
        transform: scale(1.3);
        transform-origin: 0;
        margin-right: 30%;
    }

    #designer #item_list .textsize_select{
        min-width: 100px;
        flex-basis: 100px;
        font-size: 20px;
        height: auto;
    }
    

    #designer input, #designer select{
        font-size: 120%;
        padding: 6px;
    }

    #designer .padColor{
        width: 40px;
        height: 40px;
    }

    #designer #inkpad_colors{
        gap: 4px;
    }

    #designer #canvas_details{
        font-size: 120%;
        align-items: center;
        padding-bottom: 8px;
    }

    #designer .canvas_details_2 .finish{
        display: none !important;
    }

    #designer #inkpad_group{
        font-size: 120%;
        flex-wrap: wrap;
        justify-content: center;
    }

    #designer .finish{
        width: initial;
        margin: 8px;
    }

    #designer .mobile_only{
        display: block;
    }

    #designer .menu_button{
        padding: 6px;
    }

    #designer .menu_button > img{
        width: 28px;
        height: 28px;
        max-width: 28px;
        max-height: 28px;
    }

    #designer .large{
        font-size: 22px;
    }

    #designer #actions{
        font-size: 120%;
    }

    #designer #delete_all, #designer .finish{
        font-size: 120%;
    }

    #designer #item_list{
        max-height: initial;
    }

    #designer #item_list > div{
        flex-wrap: wrap;
        border-bottom: 3px solid rgb(240, 240, 240);
        padding-bottom: 8px;
        padding-top: 8px;
    }

    #designer #item_list > div span{
        font-size: 140%;
    }

    #designer .text_input{
        min-width: 180px;
    }

    #designer #toolbar_right .icon_bar{
        padding: 0px 8px;
    }

    #designer .welcome_screen{
        min-height: 100%;
        max-height: 100%;
        height: unset;
        top: 0;
    }


    #designer .block_title{
        font-size: 26px;
    }

    #designer #userpattern_create, #designer #userpattern_load{
        padding: 16px 8px;
    }

    #designer .clipart{
        width: 64px;
        height: 64px;
    }

    #designer #border_settings>div, #designer #spawn_line>div{
        justify-content: center;
        font-size: 20px;
    }
    
    #designer .list_button{
        width: 32px;
        height: 32px;
    }

    #designer #config_tabs > *{
        text-align: center;
    }

    #designer .apply_to_all_container {
        flex-direction: column;
        align-items: stretch;
    }

    #designer #toolbar_right .left_side{
        flex-wrap: wrap;
    }

    #designer .choices .choices__list--dropdown{
        top: 50%;
        left: 50%;
        position: fixed;
        transform: translate(-50%, -50%);
        width: 250px;
        height: 75vh;
    }

    #designer .choices .choices__list--dropdown .choices__list{
        max-height: 100%;
    }

    #designer .choices .choices__list--dropdown .choices__item{
        font-size: 18px;
    }

    #designer .choices__list--single{
        font-size: 18px;
        margin-right: 16px;
    }

    #designer .canvas_details_1{
        padding-bottom: 0px;
    }

    #designer .canvas_sliders{
        flex-grow: 1;
    }

    #designer .canvas_sliders input[type=range]{
        flex-grow: 1;
    }
    
    #designer .canvas_details{
        padding-bottom: 0px;
    }

    #designer .qr_form > * > *{
        width: 100%;
    }
}


/* S4Y Framework Override */

#designer #item_list select, #designer .item_list input{
    min-height: 38px;
}



#designer .icon_bar{
    font-size: 16px;
}

#designer #config_tabs{
    font-size: 16px;
}

#designer #clipart_category{
    min-height: 48px;
}

#designer #designer_alerts{
    font-size: 16px;
}

#designer #designer_alerts .alert{
    padding: 15px;
    padding-right: 20px;
    margin-bottom: 20px;
    border-radius: 4px;
}

#designer .highlight *{
    color: var(--font-color);
}

#designer .popup_element_toggle_active{
    border: 3px solid #444;
}

@media (prefers-color-scheme: dark) {
    #designer .popup_element_toggle{
        color-scheme: only light;
    }

    #designer .designer_popup_menu{
        box-shadow: none;
        border-top: 6px solid var(--primary-color); 
    }
}

/* S4Y Override */

#designer .alert-dismissible .close {
    position: absolute !important;
    top: -2px !important;
    right: 0 !important;
    padding: 0px 3px !important;
    background: transparent !important;
    border: none !important;
    opacity: 0.5 !important;
    font-size: 21px;
}

#designer .alert-dismissible .close:hover {
    opacity: 0.75;
}