/* mukta-200 - latin */
@font-face {
  font-family: 'Mukta';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/mukta-v13-latin-200.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/mukta-v13-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/mukta-v13-latin-200.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/mukta-v13-latin-200.woff') format('woff'), /* Modern Browsers */
       url('../fonts/mukta-v13-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/mukta-v13-latin-200.svg#Mukta') format('svg'); /* Legacy iOS */
}
/* mukta-300 - latin */
@font-face {
  font-family: 'Mukta';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/mukta-v13-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/mukta-v13-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/mukta-v13-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/mukta-v13-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/mukta-v13-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/mukta-v13-latin-300.svg#Mukta') format('svg'); /* Legacy iOS */
}
/* mukta-regular - latin */
@font-face {
  font-family: 'Mukta';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/mukta-v13-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/mukta-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/mukta-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/mukta-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/mukta-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/mukta-v13-latin-regular.svg#Mukta') format('svg'); /* Legacy iOS */
}
/* mukta-500 - latin */
@font-face {
  font-family: 'Mukta';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/mukta-v13-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/mukta-v13-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/mukta-v13-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/mukta-v13-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/mukta-v13-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/mukta-v13-latin-500.svg#Mukta') format('svg'); /* Legacy iOS */
}
/* mukta-600 - latin */
@font-face {
  font-family: 'Mukta';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/mukta-v13-latin-600.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/mukta-v13-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/mukta-v13-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/mukta-v13-latin-600.woff') format('woff'), /* Modern Browsers */
       url('../fonts/mukta-v13-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/mukta-v13-latin-600.svg#Mukta') format('svg'); /* Legacy iOS */
}
/* mukta-700 - latin */
@font-face {
  font-family: 'Mukta';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/mukta-v13-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/mukta-v13-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/mukta-v13-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/mukta-v13-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/mukta-v13-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/mukta-v13-latin-700.svg#Mukta') format('svg'); /* Legacy iOS */
}
/* mukta-800 - latin */
@font-face {
  font-family: 'Mukta';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/mukta-v13-latin-800.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/mukta-v13-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/mukta-v13-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/mukta-v13-latin-800.woff') format('woff'), /* Modern Browsers */
       url('../fonts/mukta-v13-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/mukta-v13-latin-800.svg#Mukta') format('svg'); /* Legacy iOS */
}







@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 100;
  font-display: swap;
  src: url("../fonts/Inter-Thin.woff2?v=3.19") format("woff2"),
       url("../fonts/Inter-Thin.woff?v=3.19") format("woff");
}
@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 100;
  font-display: swap;
  src: url("../fonts/Inter-ThinItalic.woff2?v=3.19") format("woff2"),
       url("../fonts/Inter-ThinItalic.woff?v=3.19") format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 200;
  font-display: swap;
  src: url("../fonts/Inter-ExtraLight.woff2?v=3.19") format("woff2"),
       url("../fonts/Inter-ExtraLight.woff?v=3.19") format("woff");
}
@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 200;
  font-display: swap;
  src: url("../fonts/Inter-ExtraLightItalic.woff2?v=3.19") format("woff2"),
       url("../fonts/Inter-ExtraLightItalic.woff?v=3.19") format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/Inter-Light.woff2?v=3.19") format("woff2"),
       url("../fonts/Inter-Light.woff?v=3.19") format("woff");
}
@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/Inter-LightItalic.woff2?v=3.19") format("woff2"),
       url("../fonts/Inter-LightItalic.woff?v=3.19") format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Inter-Regular.woff2?v=3.19") format("woff2"),
       url("../fonts/Inter-Regular.woff?v=3.19") format("woff");
}
@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Inter-Italic.woff2?v=3.19") format("woff2"),
       url("../fonts/Inter-Italic.woff?v=3.19") format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Inter-Medium.woff2?v=3.19") format("woff2"),
       url("../fonts/Inter-Medium.woff?v=3.19") format("woff");
}
@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Inter-MediumItalic.woff2?v=3.19") format("woff2"),
       url("../fonts/Inter-MediumItalic.woff?v=3.19") format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Inter-SemiBold.woff2?v=3.19") format("woff2"),
       url("../fonts/Inter-SemiBold.woff?v=3.19") format("woff");
}
@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Inter-SemiBoldItalic.woff2?v=3.19") format("woff2"),
       url("../fonts/Inter-SemiBoldItalic.woff?v=3.19") format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Inter-Bold.woff2?v=3.19") format("woff2"),
       url("../fonts/Inter-Bold.woff?v=3.19") format("woff");
}
@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Inter-BoldItalic.woff2?v=3.19") format("woff2"),
       url("../fonts/Inter-BoldItalic.woff?v=3.19") format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/Inter-ExtraBold.woff2?v=3.19") format("woff2"),
       url("../fonts/Inter-ExtraBold.woff?v=3.19") format("woff");
}
@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/Inter-ExtraBoldItalic.woff2?v=3.19") format("woff2"),
       url("../fonts/Inter-ExtraBoldItalic.woff?v=3.19") format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/Inter-Black.woff2?v=3.19") format("woff2"),
       url("../fonts/Inter-Black.woff?v=3.19") format("woff");
}
@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/Inter-BlackItalic.woff2?v=3.19") format("woff2"),
       url("../fonts/Inter-BlackItalic.woff?v=3.19") format("woff");
}





:root 
{
    --ui_base:#f4f4f4;
    --ui_color:#cfc8b8;

    --underline-intrinsic-width: 8;
    --underline-width: 12;
    --underline-color: #f1a1e3;
    --underline-cap-width: 4px;
    --underline-offset-y: -2px;
    --underline-padding-x: 0.12em;
    --cap-image-left: url(https://files-d4s40otz1.now.sh/left.svg);
    --cap-image-right: url(https://files-4vvqilj8v.now.sh/right.svg);
}


/* Main styles */

html 
{
    /* height: -webkit-fill-available; */
}

body
{
    margin:0;
    padding:0;
    overflow-x:hidden !important;
    -webkit-overflow-x:hidden !important;
    background:transparent !important; 
    max-width:100vw !important;
    /* min-height: 100vh; */
    /* min-height: -webkit-fill-available; */
}

* 
{
    position:relative;
    float:left;
    display:table-cell;
    width:100%;
    margin:0;
    padding:0;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    font-family:"Inter",sans-serif;
    font-size:12px;
    line-height:25px;
    font-weight:500;
    color:#1e2227;
    border:none;
    outline:none;
    text-decoration:none;
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    font-smoothing:antialiased;
    -webkit-font-smoothing:antialiased;
    -moz-font-smoothing:antialiased;
    -webkit-backface-visibility: hidden;
}

head, link, meta, script, style, title
{
    display:none !important;
    opacity:0 !important;
    width:0 !important;
    height:0 !important;
}

.center_horizontal
{   
    left:50% !important;
    transform:translate(-50%,0) !important;
    -webkit-transform:translate(-50%,0) !important;
    -moz-transform:translate(-50%,0) !important;
}

.center_vertical
{   
    top:50% !important;
    transform:translate(0,-50%) !important;
    -webkit-transform:translate(0,-50%) !important;
    -moz-transform:translate(0,-50%) !important;
}

.center_total
{
    left:50%;
    top:50%;
    transform:translate(-50%,-50%) !important;
    -webkit-transform:translate(-50%,-50%) !important;
    -moz-transform:translate(-50%,-50%) !important;
    margin:0 0 0 0 !important;
}

.center_page
{
    position:absolute !important;
    left:50%;
    top:50vh;
    transform:translate(-50%,-50%);
    -webkit-transform:translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    margin:0 !important;
}

.content_width
{
    width:90vw;
    max-width:1080px;
}

.content_width_small
{
    width:90vw;
    max-width:500px;
}

.content_width_smallest
{
    width:90vw;
    max-width:400px;
}

.screen_width
{
    width:calc(100vw - 20px); 
}

.no_scroll
{
    overflow:hidden;
}

.blur
{
    filter:blur(2px);
}

.blur_double
{
    filter:blur(4px);
}

.blur_inactive
{
    filter:blur(4px) !important;
    pointer-events:none !important;
}








/* Content settings */

.content
{
    display:none;
    padding:0 0 0 0;
    min-height:calc(100vh - 0px);
}

.content.with_menu
{
    margin-left:150px;
    width:calc(90vw - 300px) !important;
    max-width:980px !important;
}

@media screen and (max-width: 800px) 
{  
    .content.with_menu
    {
        margin-left:0 !important;
        width:90vw !important;
        max-width:980px !important;
    }
}

/* Blurred */

.content.blurred
{
    filter: blur(10px);
    -webkit-filter: blur(10px);
}

.content.content_padding
{
    min-height:calc(100vh + 130px);
    padding:0 0 130px 0;
}






.content_menu_bar .logo_holder
{
    width:auto;
    height:20px;
    cursor:pointer;
    filter:grayscale(100%);
    opacity:0.7;
} 

.content_menu_bar .logo
{
    width:80px;
    height:20px;
    background-size:cover !important;
    background-repeat:no-repeat !important;
    background-position:center center !important;
} 

.content_menu_bar .logo_separator
{
    width:2px;
    height:20px;
    background:rgba(30,34,39,0.2);
    margin:0 7px 0 7px;
} 


.content_menu_bar
{
    position:fixed;
    left:0;
    top:0;
    width:300px;
    height:100%;
    background:rgba(30,34,39,0.05);
    padding:80px 30px 30px 30px;
}

.content_menu_bar .title
{
    height:30px;
    line-height:30px;
    font-size:21px;
    font-weight:600;
    text-align:left;
}

.content_menu_bar .menu_item
{
    height:40px;
    line-height:38px;
    font-size:14px;
    font-weight:600;
    text-align:left;
    padding:0 15px 0 15px;
    border-radius:5px;
    border:1px solid rgba(30,34,39,0.1);
    margin:0 0 10px 0;
    background:#fff;
    color:rgba(30,34,39,0.4);
}

.content_menu_bar .menu_item:hover
{
    color:rgba(30,34,39,1);
}

.content_menu_bar .menu_item.selected
{
    line-height:36px;
    border:2px solid rgba(30,34,39,0.1);
    color:rgba(30,34,39,1);
}







/* Margin */

.width_10 { width:10% !important; }
.width_20 { width:20% !important; }
.width_25 { width:25% !important; }
.width_30 { width:30% !important; }
.width_33 { width:33.3333% !important; }
.width_40 { width:40% !important; }
.width_50 { width:50% !important; }
.width_60 { width:60% !important; }
.width_66 { width:66.6666% !important; }
.width_70 { width:70% !important; }
.width_75 { width:75% !important; }
.width_80 { width:80% !important; }
.width_90 { width:90% !important; }
.width_100 { width:100% !important; }
.width_full { width:100vw !important; }
.width_100_mobile {}
@media screen and (max-width: 800px) { .width_100_mobile { width:100% !important; }}

.margin_top_0 { margin-top:0 !important; }
.margin_top_10 { margin-top:10px !important; }
.margin_top_20 { margin-top:20px !important; }
.margin_top_30 { margin-top:30px !important; }
.margin_top_40 { margin-top:40px !important; }

.margin_bottom_0 { margin-bottom:0 !important; }
.margin_bottom_10 { margin-bottom:10px !important; }
.margin_bottom_20 { margin-bottom:20px !important; }
.margin_bottom_30 { margin-bottom:30px !important; }
.margin_bottom_40 { margin-bottom:40px !important; }

.padding_0 { padding:0 !important; }
.padding_10 { padding:10px !important; }
.padding_20 { padding:20px !important; }
.padding_30 { padding:30px !important; }
.padding_40 { padding:40px !important; }

.padding_top_0 { padding-top:0 !important; }
.padding_top_10 { padding-top:10px !important; }
.padding_top_20 { padding-top:20px !important; }
.padding_top_30 { padding-top:30px !important; }
.padding_top_40 { padding-top:40px !important; }

.padding_left_0 { padding-left:0 !important; }
.padding_left_10 { padding-left:10px !important; }
.padding_left_20 { padding-left:20px !important; }
.padding_left_30 { padding-left:30px !important; }
.padding_left_40 { padding-left:40px !important; }

.padding_right_0 { padding-right:0 !important; }
.padding_right_10 { padding-right:10px !important; }
.padding_right_20 { padding-right:20px !important; }
.padding_right_30 { padding-right:30px !important; }
.padding_right_40 { padding-right:40px !important; }

.border_radius_small { border-radius:7px; }
.border_radius_medium { border-radius:13px; }
.border_radius_large { border-radius:17px; } 

.shadow_small { box-shadow: 0 1px 1px 0 rgb(0 0 0 / 8%), 0 1px 16px 0 rgb(0 0 0 / 8%); }
.shadow_large { box-shadow: 0 50px 100px -20px rgb(50 50 93 / 25%), 0 30px 60px -30px rgb(0 0 0 / 30%); }



.headline_huge
{
    line-height:70px;
    font-size:60px;
    font-weight:600;
}

.headline_large
{
    line-height:35px;
    font-size:27px;
    font-weight:800;
}

.headline_medium
{
    line-height:29px;
    font-size:21px;
    font-weight:800;
}

.headline_small
{
    line-height:26px;
    font-size:17px;
    font-weight:800;
}

.headline_mini
{
    line-height:22px;
    font-size:13px;
    font-weight:800;
}


.text_large
{
    line-height:33px;
    font-size:22px;
    font-weight:400;
}

.text_medium
{
    line-height:28px;
    font-size:17px;
    font-weight:400;
}

.text_small
{
    line-height:24px;
    font-size:13px;
    font-weight:400;
}


.text_centered { text-align:center !important; }


.cursor_pointer { cursor:pointer; }







/* Content settings */

.window
{
    position:fixed;
    left:0;
    top:0;
    width:100vw;
    height:100vh;
    background:rgba(255,255,255,0.8);
    display:none;
    overflow-x:hidden !important;
    -webkit-overflow-x:hidden !important;
    overflow-y:auto;
    z-index:99999;
    justify-content: center;
    align-items: center;
}

.window .close
{
    position:absolute;
    right:20px; 
    top:70px;
    width:50px;
    height:50px;
    line-height:50px;
    background:rgba(30,34,39,0.2);
    border-radius:10px;
    cursor:pointer;
}

.window .close:before
{
    content:"+";
    position:absolute;
    left:0;
    top:0;
    width:50px;
    height:50px;
    line-height:50px;
    text-align:center;
    font-weight:200;
    font-size:30px;
    color:#fff;
    transform:rotate(45deg);
    -webkit-perspective:1000;
}

.window .close:hover
{
    background:rgba(30,34,39,0.3);
}

.window .content
{
    min-height:0 !important;
    margin:auto !important;
    padding:80px 0 80px 0;
}










/* Content settings */

.iframe
{
    position:fixed;
    left:0;
    top:0;
    width:100vw;
    height:100vh;
    background:rgba(255,255,255,0.4);
    display:none;
}

.iframe .close
{
    position:absolute;
    right:20px; 
    top:20px;
    width:60px;
    height:60px;
    line-height:60px;
    text-align:center;
    font-weight:200;
    font-size:30px;
    cursor:pointer;
    color:#1e2227;
    transform:rotate(45deg);
}

.iframe .close:hover
{

}

.iframe .content
{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:#fff;
}

.iframe_background
{
    position:fixed;
    top:0;
    width:100vw;
    min-height:100vh;
    height:100%;
    background:#fff;
}








.content_box textarea
{
    height:120px;
    line-height:25px;
    padding:10px 15px 10px 15px;
    background:#f8f8f8;
    margin:10px 0 10px 0;
    border-radius:6px;
    -webkit-border-radius:6px;
}





 

/* Content items */

.content_item
{
    background:#fff;
    padding:20px 40px 20px 40px;
    margin:0 0 40px 0;
    border-radius:6px;
    -webkit-border-radius:6px;
    box-shadow:0 5px 20px -10px #3F7FE0;
    -webkit-box-shadow:0 5px 20px -10px #3F7FE0;
}












/* Content boxes */

.content_box .toggle
{
    height:40px;
}

.content_box .toggle .label
{
    height:40px;
    line-height:40px;
}

.content_box .toggle .label .slide
{
    position:absolute;
    right:0;
    top:8px;
    height:24px;
    width:30px;
    border-radius:12px;
    -webkit-border-radius:12px;
    background:#f8f8f8;
}

.content_box .toggle .label .slide .knob
{
    position:absolute;
    left:2px;
    top:2px;
    height:20px;
    width:20px;
    border-radius:50%;
    -webkit-border-radius:50%;
    background:#fff;
}

.content_box .toggle .label .slide .knob_false
{
    left:2px;
}

.content_box .toggle .label .slide .knob_true
{
    left:8px;
}







/* Item box */

.item_box
{
    max-width:100%;
    margin:10px 0 10px 0;
    padding:20px 40px 20px 40px; 
    overflow:hidden;
}

.item_box .item_name
{
    background:#fff;
    text-align:left;
    padding:0;
    color:#33334f;
    font-weight:700;
    height:40px;
    line-height:40px;
    margin:0;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:2px;
}

.item_box .item_buttons
{
    position:absolute;
    right:40px;
    top:20px;
    width:auto;
    height:40px;
}

.item_box .item_buttons .button
{
    width:40px;
    height:40px;
    margin:0 0 0 10px;
    border-radius:6px;
    -webkit-border-radius:6px;
    background: #2A84D1;
    background: -moz-linear-gradient(45deg, #2A84D1 0%, #a34aff 100%);
    background: -webkit-linear-gradient(45deg, #2A84D1 0%,#a34aff 100%);
    background: linear-gradient(45deg, #2A84D1 0%,#a34aff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2A84D1', endColorstr='#a34aff',GradientType=1 );
    cursor:pointer;
    transition:all 0.1s ease-in-out;
    -webkit-transition:all 0.1s ease-in-out;
    box-shadow:0 1px 5px -2px #3F7FE0;
    -webkit-box-shadow:0 1px 5px -2px #3F7FE0; 
}

.item_box .item_buttons .button .icon
{ 
    position:absolute; 
    left:0;
    top:0;
    width:40px;
    height:40px;
    background-position:center center !important;
    background-size:40% auto !important;
    background-repeat:no-repeat !important;
}

.item_box .item_buttons .button:hover
{
    transform:translate(0,-1px);
    -webkit-transform:translate(0,-1px); 
    box-shadow:0 2px 5px -2px #3F7FE0;
    -webkit-box-shadow:0 2px 5px -2px #3F7FE0;
}

.item_box .item_buttons .edit_button .icon
{
    background-image:url('../img/edit.png');
}

.item_box .item_buttons .delete_button .icon
{
    background-image:url('../img/delete.png');
}

.item_box .item_buttons .sort_button .icon
{
    background-image:url('../img/move.png');
}






 
/* Admin box */

.admin_holder
{
    width:calc(100% + 40px);
}

.admin_box
{
    width:calc(33.33% - 40px);
    margin:20px;
    padding:100px 40px 40px 40px; 
    overflow:hidden;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:2px;
    color:#33334f;
    font-weight:700;
    text-align:center;
}



















.content_box .image_input
{
    height:auto;
    max-width:150px;
    margin:10px 0 10px 0;
    background:#f8f8f8;
    border-radius:6px;
    -webkit-border-radius:6px;
}

.content_box .image_input:before
{
    content:"";
    padding-top:100%;
    display:block;
}

.content_box .image_input input
{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    opacity:0;
}

.content_box .image_input .showcase
{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    border-radius:6px;
    -webkit-border-radius:6px;
    pointer-events:none;
    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
}

.content_box .image 
{ 
    background:#f8f8f8;
    border-radius:6px;
    -webkit-border-radius:6px;
    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
    margin:10px 0 10px 0;
}

.content_box .image:before
{
    content:"";
    padding-top:100%;
    display:block;
}

.content_box .save:before
{
    content:"";
    position:absolute;
    right:10px;
    top:10px;
    width:20px;
    height:20px;
    background:#2A84D1 url("../img/loader.gif") center center no-repeat;;
    background-size:60% auto;
    border-radius:50%;
    -webkit-border-radius:50%;
    z-index:999;
}

.content_box .saved:before
{
    content:"";
    position:absolute;
    right:10px;
    top:10px;
    width:20px;
    height:20px;
    background:#2A84D1 url("../img/save.png") center center no-repeat;;
    background-size:40% auto;
    border-radius:50%;
    -webkit-border-radius:50%;
    z-index:999;
}










/* Theme colors */

.background_blue
{
    background:#2A84D1 !important;
}

.background_red
{
    background:#BE554A !important;
}

.background_green
{
    background:#84a98c !important; 
}

.background_yellow
{
    background:#fec054 !important;
}

.border_blue
{
    border-color:#2A84D1 !important;
}

.border_red
{
    border-color:#BE554A !important;
}

.border_green
{
    border-color:#84a98c !important; 
}

.border_yellow
{
    border-color:#fec054 !important;
}





.core_content_separator
{
    height:10px;
}

.core_content_separator .background
{
    position:absolute;
    top:0;
    width:100vw;
    height:100%;
    background:#fff;
}




.core_content
{
    padding:120px 0 120px 0;
}

.core_content .background
{
    position:absolute;
    top:0;
    width:100vw;
    height:100%;
    background:#ccc;
    background-size:cover !important;
    background-repeat:no-repeat !important;
    background-position:center center !important;
}

.core_content .background .overlay
{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:#333;
    opacity:0.3;
}

.core_content .pretitle
{
    font-family:"600";
    color:#333;
    font-size:13px;
    line-height:13px;
    text-align:center;
    opacity:0.4;
    text-transform:uppercase;
    margin:0 0 25px 0;
}

.core_content .title
{
    font-family:"600";
    color:#333;
    font-size:30px;
    line-height:40px;
    text-align:center;
    text-transform:uppercase;
}

.core_content .text
{
    font-family:"400";
    color:#333;
    font-size:15px;
    line-height:25px;
    text-align:center;
    opacity:0.4;
    margin:25px 0 40px 0;
}







:root 
{
    --ui_base:#f8f8f8;
    --ui_color:#e55b5b;
}



.ui_main_background
{
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    z-index:0;
    background:#FFFFFF; 
}

.ui_main_background .lines
{
    position:absolute;
    top:0;
    height:100%;
    border-left: 1px solid #fff;
    opacity:0.1;
}

.ui_main_background .lines.dark {
    border-left: 1px solid #1e2227;
    opacity: 0.025;
}

.ui_main_background .lines .line
{
    width: 25%;
    height: 100%;
    border-right: 1px solid #fff;
}

.ui_main_background .lines.dark .line {
    border-right: 1px solid #1e2227;
}















/* Header */

.header
{
    position:fixed;
    left:0;
    top:0;
    width:100%;
    z-index:99999;
    height:auto;
    background:#fff;
    box-shadow: 0 1px 8px 0 rgb(0 0 0 / 15%);
}

.header .background
{
    position:absolute;
    top:0;
    width:100vw;
    height:100%;
    background:#fff;
}

.header .header_content
{
    height:50px;
}

.header.large .header_content
{
    height:70px;
}

.header .logo_holder
{
    position:absolute;
    left:50%;
    width:auto;
    height:50px;
    cursor:pointer;
    transform:translateX(-50%);
} 

.header.large .logo_holder
{
        left:20px;
        margin-top:10px;
        transform:none;
} 

@media screen and (max-width: 800px) 
{
        .header .logo_holder
        {
                position:absolute;
                left:20px;
                transform:translateX(0);
        }   

        .header.large .logo_holder
        {
        } 
}

.header .logo
{
    margin-top:11px;
    width:112px;
    height:28px;
    background-size:cover !important;
    background-repeat:no-repeat !important;
    background-position:center center !important;
} 

.header .logo_separator
{
    width:2px;
    height:28px;
    background:rgba(30,34,39,0.2);
    margin:11px 13px 0 13px;
} 

.header .content_menu 
{
    position:absolute;
    left:0;
    bottom:0;
    width:auto;
    max-width:calc(50% + 150px);
    height:50px;
    display:inline-block !important;
}

.header .content_menu .backbutton
{
    width:34px;
    height:34px;
    left:0;
    top:0;
    margin:8px 12px 8px 8px;
    background-color:rgba(30,34,39,0);
    background-image:url('../img/back_icon.png') !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
    background-size:12px 12px !important;
    background-color:rgba(30,34,39,0.05);
    border-radius:8px;
}

.header .content_menu .backbutton:hover
{
    background-color:rgba(30,34,39,0.1);
}

.header .content_menu .homebutton
{
    width:34px;
    height:34px;
    left:0;
    top:0;
    margin:8px 0 8px 8px;
    background-color:rgba(30,34,39,0);
    background-image:url('../img/home_icon.png') !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
    background-size:12px 12px !important;
    background-color:rgba(30,34,39,0.05);
    border-radius:8px;
}

.header .content_menu .homebutton:hover
{
    background-color:rgba(30,34,39,0.1);
}

.header .content_menu .icon_button
{
    width:34px;
    height:34px;
    left:0;
    top:0;
    margin:8px 0 8px 8px;
    background-color:rgba(30,34,39,0);
    background-image:url('../img/home_icon.png') !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
    background-size:13px 13px !important;
    background-color:rgba(30,34,39,0.05);
    border-radius:8px;
}

.header .content_menu .icon_button:hover
{
    background-color:rgba(30,34,39,0.1);
}

.header .content_menu .icon_button.reminder
{
    background-image:url('../img/reminder_icon.png') !important;
    background-size:12px 12px !important;
}

.header .content_menu .icon_button.more
{
    background-image:url('../img/more_icon_dark.png') !important;
}

.header .content_menu .icon_button.configuration
{
    background-image:url('../img/configuration_icon_dark.png') !important;
}

.header .content_menu .icon_button.settings
{
    background-image:url('../img/settings_icon_dark.png') !important;
}

.header .content_menu .icon_button.notification
{
    background-image:url('../img/bell_icon_dark.png') !important;
}

.header .content_menu .icon_button.integration
{
    background-image:url('../img/evaluator_icon.png') !important;
}

.header .content_menu .icon_button.patients
{
    background-image:url('../img/user_icon_dark.png') !important;
}

.header .content_menu .icon_button.password
{
    background-image:url('../img/password_icon_dark.png') !important;
}

.header .content_menu .icon_button .count
{
    position:absolute;
    right:0;
    top:0;
    width:14px;
    height:14px;
    background-color:#c75146;
    border-radius:50%;
    color:#fff;
    font-size:10px;
    line-height:14px;
    font-weight:700;
    text-align:center;
    margin:-4px -4px 0 0;
}

.header .content_menu .filter
{
    width:auto;
    height:34px;
    margin:8px 0 8px 8px;
    line-height:34px;
    padding:0px 30px 0px 15px;
    font-weight:700;
    text-align:left;
    font-size:10px;
    letter-spacing:1px;
    text-transform:uppercase;
    background:rgba(30,34,39,0.05); 
    background-image:url('../img/select_icon_dark.png') !important;
    background-position:right 10px center !important;
    background-repeat:no-repeat !important;
    background-size:8px auto !important;
    border-radius:0px;
}

.header .content_menu .title
{
    width:auto;
    height:50px;
    top:0;
    font-weight:600;
    text-align:center;
    font-size:12px;
    line-height:50px;
    color:#1e2227 !important;
    padding:0 15px 0 15px;
    letter-spacing:1px;
    text-transform:uppercase;
}

.header .content_menu .item
{
    width:auto;
    height:50px;
    line-height:50px;
    color:#1e2227;
    font-size: 13px;
    font-weight: 800;
    padding: 0 20px 0 40px;
    padding:0 20px 0 20px;
    text-align:center;
    cursor:pointer;
    float:left !important; 
    display:table-cell !important;
    white-space: nowrap !important;
    border-right:1px solid rgba(30,34,39,0.05);
}

.header .content_menu .item:hover
{
    background:rgba(30,34,39,0.05);
}






.header .server_menu
{
    position:absolute;
    left:0;
    bottom:0;
    width:auto;
    height:50px;
    display:inline-block !important;
}

.header .server_menu .item
{
    width:auto;
    height:50px;
    line-height:50px;
    font-size:13px;
    font-weight:800;
    padding:0 20px 0 40px;
    background-position:left 15px center !important;
    background-size:12px auto !important;
    background-repeat:no-repeat !important;
    margin:0;
    border-radius:0px;
    box-shadow:none;
    border-right:1px solid rgba(30,34,39,0.05);
}

.header .server_menu .item:hover
{
    box-shadow:none;
    transform:translateY(0);
    background-color:rgba(30,34,39,0.05);
}

.header .server_menu .item.more
{
    background-image:url('../img/more_icon_dark.png');
} 

.header .server_menu .item.configuration
{
    background-image:url('../img/messenger_icon_dark.png');
}

.header .server_menu .item.settings
{
    background-image:url('../img/settings_icon_dark.png');
}





.header .menu 
{
    position:absolute;
    left:150px;
    top:2px;
    width:auto;
    max-width:calc(50% + 150px);
    height:50px;
    display:inline-block !important;
}

.header.large .menu 
{   
        margin-top:10px;
}

.header .menu .separator
{
        width:20px;
        height:34px;
}

.header .menu .item
{
    width:auto;
    height:34px;
    line-height:34px;
    color:#1e2227;
    font-weight:500;
    margin:7px 0 7px 30px;
    font-size:16px;
    text-align: center;
    cursor: pointer;
        float:left !important; 
    display:table-cell !important;
    white-space: nowrap !important;
        border-radius:8px;
    text-transform:none;
    padding:0 10px 0 10px;
    transition:all 0.1s ease-in-out;
   background:url('../img/arrow_down_dark.png') right center no-repeat;
   background-size:10px auto;
   padding:0 20px 0 0;
}

.header .menu .item.bordered
{
        font-weight:700;
        background:#fff;
    padding:0 15px 0 15px;
    box-shadow: 0 0 1px 0 rgb(0 0 0 / 8%), 0 1px 4px 0 rgb(0 0 0 / 12%);
    font-size:15px;
    color:rgba(30,34,39,0.8);
    transition:all 0.1s ease-in-out;
}

.header .menu .item.colored
{
        font-weight:700;
        color:#fff;
        background:#C75146;
    padding:0 15px 0 15px;
    box-shadow: 0 0 1px 0 rgb(0 0 0 / 8%), 0 1px 4px 0 rgb(0 0 0 / 12%);
    font-size:15px;
    transition:all 0.1s ease-in-out;
}

.header .menu .item:hover
{
    opacity:0.8;
}

.header .menu .item.bordered:hover
{
    color:rgba(30,34,39,1);
    background:rgba(30,34,39,0.05);
    box-shadow:none;
}

.header .menu .item.colored:hover
{
    color:#fff;
}

@media screen and (max-width: 800px) 
{
        .header.large .menu .item
        {
            display:none !important;
        }

        .header.large .menu .item.colored
        {
            display:block !important;
            margin-top:-2px;
        }
}

.header .menu .icon_button
{
    width:34px;
    height:34px;
    left:0;
    top:0;
    margin:8px 0 8px 8px;
    background-color:rgba(30,34,39,0);
    background-image:url('../img/home_icon.png') !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
    background-size:13px 13px !important;
    background-color:rgba(30,34,39,0.05);
    border-radius:8px;
}

.header .menu .icon_button:hover
{
    background-color:rgba(30,34,39,0.1);
}

.header .menu .icon_button.support
{
    background-image:url('../img/support_icon_dark.png') !important;
    background-size:14px 14px !important;
}

.header .menu .icon_button.settings
{
    background-image:url('../img/settings_icon_dark.png') !important;
}

.header .menu .icon_button.notification
{
    background-image:url('../img/bell_icon_dark.png') !important;
}

.header .menu .icon_button.integration
{
    background-image:url('../img/evaluator_icon.png') !important;
    background-color: #fec054;
    animation: blinking 1.5s infinite;
} 

@keyframes blinking {
    0%, 49% {
    background-color: #fec054;
  }
  50%, 100% {
    background-color: rgba(30,34,39,0.1);
  }
}

.header .menu .icon_button.password
{
    background-image:url('../img/password_icon_dark.png') !important;
}

.header .menu .icon_button.tips
{
    background-image:url('../img/bulb_icon_dark.png') !important;
    background-size:16px 16px !important;
    background-position:center top 45% !important;
}

.header .menu .icon_button .count {
    position: absolute;
    right: 0;
    top: 0;
    width: 14px;
    height: 14px;
    background-color: #c75146;
    border-radius: 50%;
    color: #fff;
    font-size: 10px;
    line-height: 14px;
    font-weight: 700;
    text-align: center;
    margin: -4px -4px 0 0;
}



.header .call_to_action
{
    position:absolute;
    right:20px;
    top:10px;
    width: auto;
    height: 34px;
    line-height: 34px;
    margin: 7px 0 7px 10px;
    text-align: center;
    cursor: pointer;
    display: table-cell !important;
    white-space: nowrap !important;
    border-radius: 11px;
    text-transform: none;
    transition: all 0.1s ease-in-out;
    font-weight: 700;
    color: #fff;
    background: #C75146;
    padding: 0 15px 0 15px;
    font-size: 15px;
    transition: all 0.1s ease-in-out;
}



.header .mobile_menu_button
{
    position:absolute;
    right:150px;
    top:10px;
    width: auto;
    height: 34px;
    line-height: 34px;
    margin: 7px 0 7px 10px;
    text-align: center;
    cursor: pointer;
    float: left !important;
    border-radius: 11px;
    text-transform: none;
    padding: 0 10px 0 10px;
    transition: all 0.1s ease-in-out;
    font-weight: 700;
    color: #1e2227;
    background: #fff;
    padding: 0 15px 0 15px;
    box-shadow:inset 0 0 0 1px rgba(30,34,39,0.1);
    font-size: 15px;
    transition: all 0.1s ease-in-out;
    display:none;
}

@media screen and (max-width: 800px) 
{
    .header .mobile_menu_button
    {
        display:block;
    }
}



.header .submenu_holder
{
}

.header .submenu
{
    padding:20px 40px 40px 40px;
    display:none;
}

@media screen and (max-width: 800px) 
{
    .header .submenu_holder
    {
        display:none;
        height:calc(100vh - 70px);
        overflow-y:auto;
    }

    .header .submenu
    {
        display:block;
        height:60px;
        overflow:hidden;
        padding:20px 20px 20px 20px;
    }

    .header .submenu.opened
    {
        height:auto;
    }
}

.header .submenu .label
{
    width:auto;
   height:40px;
   font-size:17px;
   font-weight:700;
   line-height:40px;
   margin-bottom:20px;
   display:none;
   background:url('../img/arrow_down_dark.png') right center no-repeat;
   background-size:12px auto;
   padding:0 30px 0 0;
}

@media screen and (max-width: 800px) 
{
    .header .submenu .label
    {
       display:block;
    }
}

.header .submenu .column
{
    width:calc(33.33% - 40px);
    margin:0 20px 0 20px;
}

@media screen and (max-width: 800px) 
{
    .header .submenu .column
    {
        width:100%;
        margin:0;
    }
}

.header .submenu .column .submenu_item
{
    padding:15px 20px 15px 70px;
    border-radius:13px;
    box-shadow:inset 0 0 0 1px rgba(30,34,39,0.1);
    margin:0 0 20px 0;
    transition:all 0.1s ease-in-out;
}

.header .submenu .column .submenu_item:hover
{
    box-shadow:none;
    background:rgba(207,200,184,0.15);
}

.header .submenu .column .submenu_item .icon
{
    position:absolute;
    left:20px;
    width:40px;
    height:40px;
    top:50%;
    background-position: center center !important;
    background-repeat:no-repeat !important;
    background-size:24px auto !important;
    transition:all 0.1s ease-in-out;
    margin-top:-20px; 
    border-radius:30%;
    transition:all 0.1s ease-in-out;
}

.header .submenu .column .submenu_item:hover .icon
{
    background-color:#fff;
}

.header .submenu .column .submenu_item .title
{
   height:20px;
   font-size:14px;
   font-weight:700;
   line-height:20px;
   color:#1E2227;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.header .submenu .column .submenu_item .text
{
   height:20px;
   font-size:14px;
   font-weight:400;
   line-height:20px;
   color:#656F7E;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.header .submenu .column .submenu_item .arrow_icon
{
    width:20px;
    height:20px;
    position:absolute;
    top:50%;
    left:100%;
    opacity:0;
    background:url('../img/arrow_right_dark.png') center center no-repeat;
    background-size:12px auto;
    transition:all 0.1s ease-in-out;
    margin-top:-10px;
    margin-left:-20px;
}

.header .submenu .column .submenu_item:hover .arrow_icon
{
    margin-left:-40px;
    opacity:1;
}







/* footer */

.footer
{
    position:absolute;
    bottom:0;
    width:100%;
    padding:40px 0 40px 0;
}

.footer .background
{
    position:absolute;
    top:0;
    width:100vw;
    height:100%;
    background:#1e2227;
}

.footer .menu
{
    width:auto;
    overflow:hidden;
}

.footer .menu .item
{
    width:auto;
    height:50px;
    padding:0 10px 0 10px;
    line-height:50px;
    font-size:13px;
    font-weight:300;
    color:#fff;
    opacity:0.4;
    cursor:pointer;
    transition:all 0.1s ease-in-out;
    -webkit-transition:all 0.1s ease-in-out;
}

.footer .menu .item:hover
{
    opacity:1; 
} 





.server_footer
{
    position:fixed;
    left:0;
    bottom:0;
    width:100%;
    height:50px;
    background:#fff;
    z-index:998;
}











.content_first_margin
{
    margin-top:100px !important;
}

.content_last_margin
{
    margin-bottom:90px !important;
}

.content_top_margin
{
    margin-top:20px !important;
}

.content_bottom_margin
{
    margin-bottom:20px !important;
}

.content_top_margin_small
{
    margin-top:10px !important;
}

.content_bottom_margin_small
{
    margin-bottom:10px !important;
}

.content_no_margin
{
    margin:0 !important;
}








.text_left
{
    text-align:left !important;
}

.text_center
{
    text-align:center !important;
}






.content_box
{
    max-width:500px;
    border-radius:13px;
}

.content_box.wide
{
    max-width:100%;
    border-radius:13px;
}

.window .content_box
{
    box-shadow:0 20px 100px -20px rgba(0,0,0,0.4);
    padding:60px 60px 50px 60px;
}

.content_box_content
{
    max-width:900px;
    padding:60px 60px 50px 60px;
}

.content_box_wide
{
    max-width:700px;
    padding:60px 60px 50px 60px;
}

.content_box_small
{
    max-width:300px;
}






.settings_content
{
    margin-top:40px;
    width:100%;
}

.settings_content .settings_menu
{
    width:100%;
    margin:0 0 60px 0;
}

.settings_content.tiled .settings_menu
{
    width:25%;
    margin:0;
}

.settings_content .settings_menu .settings_headline
{
    width:100%;
    font-weight: 800 !important;
    font-size: 22px;
    line-height: 25px;
    text-align: left;
    color: #cfc8b8;
    margin: 0 0 20px 0;
    padding: 0 0 0 20px;
    border-left: 2px solid #cfc8b8;
}

.settings_content .settings_menu .settings_item
{
    height: 25px;
    font-weight: 800 !important;
    font-size: 15px;
    line-height: 25px;
    text-align: left;
    color: #cfc8b8;
    margin: 0 0 10px 0;
    padding: 0 20px 0 20px;
    border-left: 2px solid #cfc8b8;
    opacity:0.4;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.settings_content .settings_menu .settings_item.selected
{
    opacity:1;
}

.settings_content .settings_container
{
    width:100%;
    padding:0 0 0 0;
}

.settings_content.tiled .settings_container
{
    width:75%;
    padding:0 0 0 0;
}

.settings_content .settings_container.blank
{
    padding:0 !important;
    box-shadow:none !important;
}






.content_tiled
{
    width:calc(100% + 20px);
}

.content_tiled.stream
{
    padding:0 0 0 40px;
}

.content_tiled.stream:before
{
    content:"";
    position:absolute;
    left:24px;
    top:10px;
    width:4px;
    height:calc(100% - 20px);
    background:#fff; 
    border-radius:2px;
    box-shadow:0 5px 15px rgba(30,34,39,0.1);
}

.content_tiled .stream_tile:before
{
    content:"";
    position:absolute;
    left:-40px;
    top:50%;
    width:4px;
    height:4px;
    background:rgba(30,34,39,0.05);
    border-radius:50%;
    margin:-6px 0 0 0;
    border:4px solid #fff;
    box-shadow:0 5px 15px rgba(30,34,39,0.1);
}

.content_tiled .single_tile
{
    width:calc(100% - 20px);
    margin:0 10px 0 10px;
}

.content_tiled .double_tile
{
    width:calc(50% - 20px);
    margin:0 10px 0 10px;
}

.content_tiled .tripple_tile
{
    width:calc(33.33% - 20px);
    margin:0 10px 0 10px;
}

.content_tiled .quad_tile
{
    width:calc(25% - 20px);
    margin:0 10px 0 10px;
}

.content_tiled .penta_tile
{
    width:calc(20% - 20px);
    margin:0 10px 0 10px;
}

.content_tiled .doubletripple_tile
{
    width:calc(66.66% - 20px);
    margin:0 10px 0 10px;
}

@media screen and (max-width: 800px) 
{

    .content_tiled .double_tile
    {
        width:calc(100% - 20px) !important;
    }

    .content_tiled .tripple_tile
    {
        width:calc(100% - 20px) !important;
    }

    .content_tiled .quad_tile
    {
        width:calc(100% - 20px) !important;
    }

    .content_tiled .penta_tile
    {
        width:calc(100% - 20px) !important;
    }

    .content_tiled .doubletripple_tile
    {
        width:calc(100% - 20px) !important;
    }
}

.content_tiled .square_tile
{
    margin-top:20px !important;
    margin-bottom:20px !important;
}

.content_tiled .square_tile:before
{
    content:"";
    padding-top:100%;
    display:block;
}


.content_tiled.normal_space
{
    width:calc(100% + 20px) !important;
}

.content_tiled.normal_space .single_tile
{
    width:calc(100% - 20px) !important;
    margin:0 10px 0 10px !important;
}

.content_tiled.normal_space .double_tile
{
    width:calc(50% - 20px) !important;
    margin:0 10px 0 10px !important;
}

.content_tiled.normal_space .tripple_tile
{
    width:calc(33.33% - 20px) !important;
    margin:0 10px 0 10px !important;
}

.content_tiled.normal_space .quad_tile
{
    width:calc(25% - 20px) !important;
    margin:0 10px 0 10px !important;
}

.content_tiled.normal_space .penta_tile
{
    width:calc(20% - 20px) !important;
    margin:0 10px 0 10px !important;
}

.content_tiled.normal_space .doubletripple_tile
{
    width:calc(66.66% - 20px) !important;
    margin:0 10px 0 10px !important;
}



.content_tiled.double_space
{
    width:calc(100% + 40px);
}

.content_tiled.double_space .single_tile
{
    width:calc(100% - 40px);
    margin:0 20px 0 20px;
}

.content_tiled.double_space .double_tile
{
    width:calc(50% - 40px);
    margin:0 20px 0 20px;
}

.content_tiled.double_space .tripple_tile
{
    width:calc(33.33% - 40px);
    margin:0 20px 0 20px;
}

.content_tiled.double_space .quad_tile
{
    width:calc(25% - 40px);
    margin:0 20px 0 20px;
}

.content_tiled.double_space .penta_tile
{
    width:calc(20% - 40px);
    margin:0 20px 0 20px;
}

.content_tiled.double_space .doubletripple_tile
{
    width:calc(66.66% - 40px);
    margin:0 20px 0 20px;
}







.flow_step
{
    margin:0 0 0 0;
}

.flow_step.small
{
    width:33.3333%;
    padding:0 0 0 20px;
    z-index:2;
    margin:0 0 60px 0;
}

.flow_step .dot
{
    position:absolute;
    left:50%;
    top:100%;
    width:30px;
    height:30px;
    border-radius:50%;
    margin:20px 0 0 -15px;
    background-image:url('../img/arrow_right_light.png') !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
    background-size:35% auto !important;
    z-index:999;
    transform:rotate(90deg);
}

.flow_step .flow_step_headline
{
    width:100%;
    font-weight: 800 !important;
    font-size: 22px;
    line-height: 25px;
    text-align: left;
    color: #cfc8b8;
    margin: 0 0 20px 0;
}





.content_container
{
    padding:0 0 0 0;
}




.content_separator
{
    height:10px;
}

.content_separator_5 { height:5px; }
.content_separator_10 { height:10px; }
.content_separator_20 { height:20px; }
.content_separator_30 { height:30px; }
.content_separator_40 { height:40px; }
.content_separator_50 { height:50px; }
.content_separator_60 { height:60px; }

.content_separator.small
{
    height:20px;
}




.square_tile_button
{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:#f1f1f1;
    border-radius:30%;
}

.square_tile_button .icon
{
    position:absolute;
    left:50%;
    top:50%;
    width:30px;
    height:30px;
    margin-left:-15px;
    margin-top:-30px;
    background-size:80% auto !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
}

.square_tile_button .label
{
    position:absolute;
    left:0;
    top:50%;
    width:100%;
    height:20px;
    line-height:20px;
    font-size:13px;
    font-weight:800;
    text-align:center;
    margin-top:10px;
}




.content_headline
{
    line-height:35px;
    margin:0 0 20px 0;
    padding:0 ;
    font-weight:800;
    text-align:left;
    font-size:27px;
}

.content_headline.small
{
    line-height:30px;
    font-size:20px;
    text-align:center;
}

.content_headline_large 
{
    font-size: 60px;
    line-height: 70px;
    font-weight: 600;
    text-align: center;
}

.content_headline_text 
{
    max-width: 700px;
    font-size: 20px;
    line-height: 31px;
    font-weight: 400;
    text-align: center;
    color:rgba(30,34,39,0.6);
}

.content_headline_text span
{
    width:auto;
    height:inherit;
    line-height:inherit;
    font-size:inherit;
    color:inherit;
    font-weight:800;
    display:inline;
    float:none;
}

.content_colorheadline
{
    width:100%;
    font-weight: 800 !important;
    font-size: 22px;
    line-height: 25px;
    text-align: left;
    color: #cfc8b8;
    margin: 0 0 20px 0;
}

.settings_content .settings_container .content_colorheadline
{
    margin-left:0;
}

.content_subheadline
{
    line-height:25px;
    margin:20px 0 20px 0;
    padding:0 ;
    font-weight:800;
    text-align:left;
    font-size:17px;
}

.content_subsubheadline
{
    line-height:20px;
    margin:10px 0 10px 0;
    padding:0 ;
    font-weight:800;
    text-align:left;
    font-size:15px;
}

.content_container .content_headline23
{
    min-height:40px;
    line-height:20px;
    margin:0 0 20px 0;
    padding:0 0 20px 0;
    font-weight:600;
    text-align:left;
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:2px;
}

.content_headline.centered, .content_subheadline.centered, .content_colorheadline.centered
{
    text-align:center;
}

.content_text 
{
    line-height:25px;
    margin:0 0 20px 0;
    font-weight:300;
    text-align:left;
    font-size:17px;
}

.content_text_tripple
{
    width:33.3333%;
    line-height:25px;
    margin:0 0 10px 0;
    font-weight:300;
    text-align:left;
    font-size:17px;
}

.content_notice
{
    padding:15px;
    line-height:22px;
    margin:10px 0 10px 0;
    font-weight:400;
    text-align:left;
    font-size:15px;
    border-radius:10px;
    border:1px solid rgba(30,34,39,0.1);
}

.content_notice .background
{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    opacity:0.05;
    border-radius:10px;
}

.content_text a
{
    float:none;
    display:inline;
    font-size:inherit;
    line-height:inherit;
    width:auto;
    color:inherit;
    font-weight:800;
    color:#cfc8b8;
    cursor:pointer;
    margin:0;
    padding:0;
}

.content_text.left 
{
    text-align:left;
}

.content_label
{
    line-height:20px;
    margin:20px 0 10px 0;
    font-weight:600;
    text-align:left;
    text-transform:none;
    font-size:14px;
    opacity:0.4;
}

.content_label.centered
{
    text-align:center;
}

.content_info
{
    height:40px;
    line-height:20px;
    padding:10px 15px 10px 15px;
    margin:0 0 20px 0;
    font-weight:400;
    text-align:center;
    font-size:14px;
    background:rgba(30,34,39,0.05); 
    border-radius:20px;
}

.content_info.red
{
    background-color:#c75146 !important;
    color:#fff !important;
}

.content_info.yellow
{
    background-color:#f2cc8f !important;
    color:#fff !important;
}

.content_info.green
{
    background-color:#84a98c !important;
    color:#fff !important;
}

.content_input
{
    height:40px;
    line-height:20px;
    padding:10px 15px 10px 15px;
    margin:0 0 10px 0;
    font-weight:400;
    text-align:left;
    font-size:15px;
    background:rgba(30,34,39,0.025); 
    border-radius:5px;
    border:1px solid rgba(30,34,39,0.1);
}

.required_data
{
    
}

.required_data.required
{
    box-shadow:0 0 0 2px #BE554A;
}

.content_input.uneditable
{
    color:rgba(30,34,39,0.2) !important; 
}

.white_content .content_input
{
    background:rgba(30,34,39,0.05); 
}

.content_box .content_input
{
    background:rgba(30,34,39,0.05); 
}

.content_textarea
{
    height:40px;
    line-height:20px;
    padding:10px 15px 10px 15px;
    margin:0 0 20px 0;
    font-weight:400;
    text-align:left;
    font-size:15px;
    background:rgba(30,34,39,0.025); 
    border-radius:5px;
    border:1px solid rgba(30,34,39,0.1);
}

.white_content .content_textarea
{
    background:rgba(30,34,39,0.05);
}

.content_box .content_textarea
{
    background:rgba(30,34,39,0.05); 
}

.content_select
{
    height:40px;
    line-height:20px;
    padding:10px 30px 10px 15px;
    margin:0 0 10px 0;
    font-weight:400;
    text-align:left;
    font-size:16px;
    background:rgba(30,34,39,0.05); 
    background-image:url('../img/select_icon_dark.png') !important;
    background-position:right 10px center !important;
    background-repeat:no-repeat !important;
    background-size:8px auto !important;
    border-radius:5px;
}

.white_content .content_select
{
    background:rgba(30,34,39,0.05); 
}

.content_box .content_select
{
    background:rgba(30,34,39,0.05); 
}

.content_select_large
{
    height:50px;
    line-height:30px;
    padding:10px 30px 10px 20px;
    margin:0 0 10px 0;
    font-weight:700;
    text-align:left;
    font-size:17px;
    box-shadow: 0 1px 1px 0 rgb(0 0 0 / 8%), 0 1px 16px 0 rgb(0 0 0 / 8%);
  background: #fff;
    background-image:url('../img/select_icon_dark.png') !important;
    background-position:right 15px center !important;
    background-repeat:no-repeat !important;
    background-size:10px auto !important;
  border-radius: 14px;
}

.content_image
{
    width:70%;
    height:auto;
    box-shadow:0 5px 30px -3px rgba(30,34,39,0.2);
    border-radius:5px;
    margin:30px 0 30px 0;
}

.content_infobutton
{
    width:auto;
    height:26px;
    line-height:26px;
    font-size:13px;
    font-weight:800;
    border-radius:13px;
    margin:0 0 20px 0;
    padding:0 30px 0 12px;
    background-image:url('../img/arrow_right_light.png');
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-size:10px auto;
}

.content_helpbutton
{
    position:absolute;
    right:0;
    top:50%;
    width:auto;
    height:26px;
    line-height:26px;
    font-size:13px;
    font-weight:800;
    border-radius:13px;
    margin:-13px 0 0 0;
    padding:0 30px 0 12px;
    background-image:url('../img/arrow_right_light.png');
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-size:10px auto;
    opacity:0.4;
}

.content_helpbutton:hover
{
    opacity:1;
}




.content_explainer_headline
{
    width:100%;
    font-weight: 700 !important;
  font-size: 24px;
  line-height: 40px;
  height:40px;
  text-align: left;
  color: #cfc8b8;
  margin:0 0 40px 0;
}

.content_explainer_headline .explainerbutton
{
    position:absolute;
    right:0;
    top:0px;
    width:auto;
    height:40px;
    line-height:40px;
    font-size:13px;
    font-weight:800;
    border-radius:7px;
    margin:0 0 0 0;
    padding:0 40px 0 12px;
    background-image:url('../img/play_icon_light.png');
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-size:16px auto;
  box-shadow: 0 0 1px 0 rgb(0 0 0 / 8%), 0 1px 4px 0 rgb(0 0 0 / 12%);
  cursor:pointer;
}

.content_explainer_headline .explainerbutton:hover
{
    opacity:0.8;
  box-shadow:none;
}



.content_addbutton
{
    position:absolute;
    right:0;
    top:50%;
    width:auto;
    height:26px;
    line-height:26px;
    font-size:13px;
    font-weight:800;
    border-radius:13px;
    margin:-13px 0 0 0;
    padding:0 30px 0 12px;
    background-image:url('../img/plus_icon_light.png');
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-size:10px auto;
    opacity:0.4;
}

.content_addbutton:hover
{
    opacity:1;
}

.flow_step_headline .content_helpbutton
{
    right:-20px;
}





.content_image_input
{
    height:40px;
    background:rgba(30,34,39,0.05); 
    border-radius:5px;
    margin:0 0 20px 0;
    overflow:hidden;
}

.content_image_input .showcase
{
    position:absolute;
    left:0;
    top:0;
    width:40px;
    height:40px;
    background-color:rgba(30,34,39,0.05); 
    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
}

.content_image_input .button
{
    position:absolute;
    right:0;
    top:0;
    width:40px;
    height:40px;
    background-color:#CFC8B8;
    cursor:pointer;
    background-position:center center !important;
    background-repeat:no-repeat !important;
    background-size:30% auto !important;
    border-radius:0 5px 5px 0;
}

.content_image_input .button.second
{
    right:41px;
    border-radius:0;
}

.content_image_input .button:hover
{
    background-color:#1e2227;
}

.content_image_input .button.view
{
    background-image:url('../img/view_icon_light.png');
}

.content_image_input .button.edit
{
    background-image:url('../img/edit_icon_light.png');
}

.content_image_input .button.settings
{
    background-image:url('../img/settings_icon_light.png');
}

.content_image_input .button.delete
{
    background-image:url('../img/delete_icon_light.png');
}

.content_image_input .button.check
{
    background-image:url('../img/check_icon_light.png');
}

.content_image_input .button.cancel
{
    background-image:url('../img/cancel_icon_light.png');
}

.content_image_input .selector
{
    position:absolute;
    top:0; 
    left:0;
    width:100%;
    height:100%;
    cursor:pointer;
    opacity:0;
}



.content_file_input
{
    height:40px;
    background:rgba(30,34,39,0.05); 
    border-radius:5px;
    margin:0 0 20px 0;
    overflow:hidden;
}

.content_file_input .file_name
{
    position:absolute;
    left:0;
    top:0;
    width:calc(100% - 80px);
    height:40px;
    line-height:40px;
    font-size:14px;
    font-weight:400;
    padding:0 15px 0 15px;
}

.content_file_input .button
{
    position:absolute;
    right:0;
    top:0;
    width:40px;
    height:40px;
    background-color:#CFC8B8;
    cursor:pointer;
    background-position:center center !important;
    background-repeat:no-repeat !important;
    background-size:30% auto !important;
    border-radius:0 5px 5px 0;
}

.content_file_input .button.second
{
    right:41px;
    border-radius:0;
}

.content_file_input .button:hover
{
    background-color:#1e2227;
}

.content_file_input .button.view
{
    background-image:url('../img/view_icon_light.png');
}

.content_file_input .button.edit
{
    background-image:url('../img/edit_icon_light.png');
}

.content_file_input .button.settings
{
    background-image:url('../img/settings_icon_light.png');
}

.content_file_input .button.delete
{
    background-image:url('../img/delete_icon_light.png');
}

.content_file_input .button.check
{
    background-image:url('../img/check_icon_light.png');
}

.content_file_input .button.cancel
{
    background-image:url('../img/cancel_icon_light.png');
}

.content_file_input .selector
{
    position:absolute;
    top:0; 
    left:0;
    width:100%;
    height:100%;
    cursor:pointer;
    opacity:0;
}



.content_checkbox
{
    width:30px;
    border-radius:30%;
    background-image:url('../img/check_icon_light.png') !important;
    background-size:44% auto !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
    background-color:rgba(30,34,39,0.2);
    cursor:pointer;
}

.content_checkbox:before
{
    content:"";
    padding-top:100%;
    display:block;
}

.content_checkbox .checkmark
{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    border-radius:30%;
    background-image:url('../img/check_icon_light.png') !important;
    background-size:44% auto !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
    display:none;
}

.content_checkbox.selected .checkmark
{
    display:block !important;
}

.content_checkbox:hover .checkmark
{
    display:block !important;
}



.content_toggle_input
{
    height:40px;
    line-height:40px;
    text-align:left;
    padding:0 0 0 15px;
    font-weight:600;
    font-size:14px;
    margin:0 0 10px 0;
    background:rgba(30,34,39,0.05);
    cursor:pointer;
    border-radius:5px;
}

.content_toggle_input .slide
{
    position:absolute;
    right:10px;
    top:8px;
    width:40px;
    height:24px;
    background:rgba(30,34,39,0.05);
    border-radius:12px;
    -webkit-border-radius:12px;
    opacity:0.4;
}

.content_box .content_toggle_input .slide
{
    background:#fff; 
}

.content_toggle_input .slide .knob
{
    position:absolute;
    left:3px;
    top:3px;
    width:18px;
    height:18px;
    background:#fff;
    border-radius:50%;
    -webkit-border-radius:50%;
    transition:all 0.1s ease-in-out;
    -webkit-transition:all 0.1s ease-in-out;
    cursor:pointer;
}

.content_box .content_toggle_input .slide .knob
{
    background:rgba(30,34,39,0.05); 
}

.content_toggle_input.selected { }

.content_toggle_input.selected .slide
{
    background:#CFC8B8;
    opacity:1 !important; 
}

.content_toggle_input.selected .slide .knob
{
    left:19px;
}






.button_select
{
    
}

.button_select .option
{
    width:calc(100% - 0px);
    height:54px;
    margin:0 10px 0 0;
    border-radius:7px;
    border:1px solid rgba(30,34,39,0.1);
    margin-bottom:20px;
}

.button_select .option .option_background
{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    border-radius:7px;
    opacity:0.05;
}

.button_select .option .option_label
{
    position:absolute;
    left:0;
    top:50%;
    width:100%;
    height:40px;
    line-height:40px;
    font-size:14px;
    font-weight:700;
    text-align:left;
    margin-top:-20px;
    padding:0 20px 0 50px;
    overflow:hidden;
    text-overflow:ellipsis;
  white-space:nowrap;
}

.button_select .option .option_label:before
{
    content:"";
    position:absolute;
    left:20px;
    top:50%;
    width:14px;
    height:14px;
    margin:-7px 0 0 0;
    border-radius:50%;
    background:rgba(255,255,255,0.5);
    border:1px solid rgba(30,34,39,0.2);
}

.button_select .option.image
{
    height:auto;
    padding:54px 20px 20px 50px;
}

.button_select .option.image .option_label
{
    position:absolute;
    left:0;
    top:26px;
}

.button_select .option .image
{
    width:100%;
    height:auto;
}

.button_select .option.selected
{
    border: 2px solid #f1f1f1;
}

.button_select .option.selected .option_background
{
    opacity:0.1;
}

.button_select .button_select_input
{
        display:none !important;
        opacity:0 !important;
}



.database_checkarray
{
    width:calc(100% + 20px);
    padding:0;
}

.content_check_input
{
    width:calc(50% - 20px);
    height:40px;
    line-height:40px;
    text-align:left;
    padding:0 40px 0 15px;
    font-weight:600;
    font-size:14px;
    margin:10px;
    background:rgba(30,34,39,0.05);
    cursor:pointer;
    border-radius:5px;
    opacity:0.4;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}

.content_check_input:hover
{
    opacity:1;
}

.content_check_input:hover .checkbox
{
    border:none;
}

.content_check_input:hover .checkbox .check
{
    opacity:0.4;
}

.content_check_input .checkbox
{
    position:absolute;
    right:10px;
    top:8px;
    width:24px;
    height:24px;
    border:1px solid rgba(30,34,39,0.2);
    border-radius:50%;
}

.content_box .content_check_input .checkbox
{
    background:#fff; 
}

.content_check_input .checkbox .check
{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    border-radius:50%;
    opacity:0;
    background-image:url('../img/check_icon_light.png') !important;
    background-size:40% auto !important;
    background-repeat:no-repeat !important;
    background-position:center center !important;
}

.content_box .content_check_input .checkbox .check
{
}

.content_check_input.selected 
{ 
    opacity:1;
}

.content_check_input.selected .checkbox
{
    opacity:1; 
    border:none;
}

.content_check_input.selected .checkbox .check
{
    opacity:1 !important;
}





.content_slider
{
    height:60px;
}

.content_slider .bar
{
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:15px;
}

.content_slider .bar .value
{
    width:100%;
    height:15px;
}

.content_slider .bar .value .label
{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:20px;
    line-height:20px;
    font-size:20px;
    font-weight:500;
    text-align:center;
    margin-top:-40px;
}

.content_slider.slider_small .bar .value,
.content_slider.slider_emotion .bar .value,
.content_slider.slider_consent .bar .value
{
    width:33.33%;
}

.content_slider.slider_large .bar .value
{
    width:10%;
}

.content_slider .bar .value .marker
{
    position:absolute;
    left:50%;
    bottom:3px;
    width:4px;
    height:9px;
    border-radius:2px;
    margin-left:-2px;
}

.content_slider .bar .line
{
    position:absolute;
    left:0;
    bottom:5px;
    width:100%;
    height:5px;
    border-radius:5px;
    opacity:0.2;
}

.content_slider .bar .knob
{
    position:absolute;
    left:0;
    top:0;
    width:15px;
    height:15px;
    border-radius:50%;
}

.content_slider.slider_small .bar .knob,
.content_slider.slider_emotion .bar .knob,
.content_slider.slider_consent .bar .knob
{
    width:33.33%;
}

.content_slider.slider_large .bar .knob
{
    width:10%;
}

.content_slider .bar .knob .dot
{
    position:absolute;
    left:50%;
    top:0;
    width:15px;
    height:15px;
    border-radius:50%;
    transform:translateX(-50%);
    cursor:pointer;
}

.content_slider .bar .knob .dot:before
{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:5px;
    height:5px;
    border-radius:50%;
    transform:translate(-50%,-50%);
    background:#fff;
    display:block;
}






.content_option_switch
{
    height:40px;
    line-height:40px;
    margin:0 0 20px 0;
    background:rgba(30,34,39,0.05);
    cursor:pointer;
    border-radius:5px;
    overflow:hidden;
}

.content_option_switch .left
{
    height:40px;
    line-height:40px;
    width:50%;
    text-align:left;
    padding:0 0 0 15px;
    font-weight:800;
    font-size:10px;
    letter-spacing:1px;
    text-transform:uppercase;
    border-right:1px solid #fff;
}

.content_option_switch .right
{
    height:40px;
    line-height:40px;
    width:50%;
    text-align:left;
    padding:0 0 0 15px;
    font-weight:800;
    font-size:10px;
    letter-spacing:1px;
    text-transform:uppercase;
}

.content_option_switch.activate .left
{
    background-color:#84a98c !important;
    background-size:22px auto !important;
    background-position:right 15px center !important;
    background-repeat:no-repeat !important;
    background-image:url('../img/toggle_on_icon_light.png');
    color:#fff !important;
}

.content_option_switch.activate .right
{
    background-size:22px auto !important;
    background-position:right 15px center !important;
    background-repeat:no-repeat !important;
    background-image:url('../img/toggle_off_icon_light.png');
}

.content_option_switch.activate:hover .left
{
    background-color:rgba(30,34,39,0) !important;
    background-size:22px auto !important;
    background-position:right 15px center !important;
    background-repeat:no-repeat !important;
    background-image:url('../img/toggle_off_icon_light.png');
}

.content_option_switch.activate:hover .right
{
    background-color:#84a98c !important;
    background-size:22px auto !important;
    background-position:right 15px center !important;
    background-repeat:no-repeat !important;
    background-image:url('../img/toggle_on_icon_light.png');
    color:#fff !important;
}

.content_option_switch.inactivate .right
{
    background-color:#84a98c !important;
    background-size:22px auto !important;
    background-position:right 15px center !important;
    background-repeat:no-repeat !important;
    background-image:url('../img/toggle_on_icon_light.png');
    color:#fff !important;
}

.content_option_switch.inactivate .left
{
    background-size:22px auto !important;
    background-position:right 15px center !important;
    background-repeat:no-repeat !important;
    background-image:url('../img/toggle_off_icon_light.png');
}

.content_option_switch.inactivate:hover .right
{
    background-color:rgba(30,34,39,0) !important;
    background-size:22px auto !important;
    background-position:right 15px center !important;
    background-repeat:no-repeat !important;
    background-image:url('../img/toggle_off_icon_light.png');
}

.content_option_switch.inactivate:hover .left
{
    background-color:#84a98c !important;
    background-size:22px auto !important;
    background-position:right 15px center !important;
    background-repeat:no-repeat !important;
    background-image:url('../img/toggle_on_icon_light.png');
    color:#fff !important;
}

.content_toggle_switch
{
    height:40px;
    line-height:40px;
    text-align:left;
    padding:0 0 0 15px;
    font-weight:800;
    font-size:10px;
    margin:0 0 20px 0;
    background:rgba(30,34,39,0.05);
    cursor:pointer;
    border-radius:5px;
    letter-spacing:1px;
    text-transform:uppercase;
    color:#fff !important;
}

.content_toggle_switch.activate
{
    background-color:#c75146 !important;
    background-size:22px auto !important;
    background-position:right 15px center !important;
    background-repeat:no-repeat !important;
    background-image:url('../img/toggle_off_icon_light.png');
}

.content_toggle_switch.activate:hover
{
    background-color:#84a98c !important;
    background-image:url('../img/toggle_on_icon_light.png');
}

.content_toggle_switch.inactivate
{
    background-color:#84a98c !important;
    background-size:22px auto !important;
    background-position:right 15px center !important;
    background-repeat:no-repeat !important;
    background-image:url('../img/toggle_on_icon_light.png');
}

.content_toggle_switch.inactivate:hover
{
    background-color:#c75146 !important;
    background-image:url('../img/toggle_off_icon_light.png');
}

.content_module_switch
{
    text-align:left;
    padding:0;
    font-weight:800;
    font-size:10px;
    margin:0 0 20px 0;
    background:rgba(30,34,39,0.05);
    cursor:pointer;
    border-radius:30%;
    letter-spacing:1px;
    text-transform:uppercase;
    color:#fff !important;
}

.content_module_switch:before
{
    content:"";
    display:block;
    padding-top:100%;
}

.content_module_switch .icon 
{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30px;
    height: 30px;
    margin-top: -40px;
    margin-left: -15px;
    background-size: auto 50% !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

.content_module_switch .label 
{
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 30px;
    padding: 0 0 0 0;
    margin-top: -10px;
    line-height: 30px;
    font-weight: 800;
    text-align: center;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color:#fff;
}

.content_module_switch.activate
{
    background-color:#c75146 !important;
    background-size:22px auto !important;
    background-position:center bottom 10px !important;
    background-repeat:no-repeat !important;
    background-image:url('../img/toggle_off_icon_light.png');
}

.content_module_switch.activate:hover
{
    background-color:#84a98c !important;
    background-image:url('../img/toggle_on_icon_light.png');
}

.content_module_switch.inactivate
{
    background-color:#84a98c !important;
    background-size:22px auto !important;
    background-position:center bottom 10px !important;
    background-repeat:no-repeat !important;
    background-image:url('../img/toggle_on_icon_light.png');
}

.content_module_switch.inactivate:hover
{
    background-color:#c75146 !important;
    background-image:url('../img/toggle_off_icon_light.png');
}







.content_flow
{
    min-height:calc(100vh - 160px); 
}

.content_flow .buttons
{
    padding:30px 10px 30px 10px;
}

.content_flow .buttons.full_width
{
    width:100vw;
}

.content_flow .buttons.centered
{
    position:absolute;
    left:0;
    top:50vh;
    margin-top:-80px;
    transform:translateY(-50%);
}

.content_flow .buttons .buttons_headline
{
    line-height:30px;
    margin:0 0 30px 0;
    padding:0 ;
    font-weight:700;
    text-align:center;
    font-size:19px;
}

.content_flow .buttons .button_50
{
    width:calc(50% - 20px);
    margin:0 10px 0 10px;
    border-radius:7px;
    border:1px solid rgba(30,34,39,0.1);
    background:#fff !important;
}

.content_flow .buttons .button_50:before
{
    content:"";
    padding-top:45%;
    display:block;
}

.content_flow .buttons .button_100
{
    width:calc(100% - 20px);
    height:54px;
    margin:0 10px 0 10px;
    border-radius:7px;
    border:1px solid rgba(30,34,39,0.1);
    margin-bottom:20px;
    background:#fff !important;
}

.hidden_form_input
{
    position:absolute;
    left:100%;
    top:100%;
    opacity:0 !important;
    width:1px !important;
    height:1px !important;
    background:rgba(255,255,255,0) !important;
    color:rgba(255,255,255,0) !important;
    border:none !important;
    font-size:1px !important;
}

.content_flow .buttons .button_background
{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    border-radius:7px;
    opacity:0.05;
}

.content_flow .buttons .button_label
{
    position:absolute;
    left:0;
    top:50%;
    width:100%;
    height:40px;
    line-height:40px;
    font-size:14px;
    font-weight:700;
    text-align:center;
    margin-top:-20px;
}

.content_flow .buttons .button_100 .button_label
{
    position:absolute;
    left:0;
    top:50%;
    width:100%;
    height:40px;
    line-height:40px;
    font-size:14px;
    font-weight:700;
    text-align:left;
    margin-top:-20px;
    padding:0 20px 0 50px;
    overflow:hidden;
    text-overflow:ellipsis;
  white-space:nowrap;
}

.content_flow .buttons .button_100 .button_label:before
{
    content:"";
    position:absolute;
    left:20px;
    top:50%;
    width:14px;
    height:14px;
    margin:-7px 0 0 0;
    border-radius:50%;
    background:rgba(255,255,255,0.5);
    border:1px solid rgba(30,34,39,0.2);
}

.content_flow .button_back
{
    margin-top:20px;
    width:auto;
    height:20px;
    line-height:20px;
    padding:0 ;
    font-weight:600;
    text-align:center;
    font-size:13px;
    opacity:0.3;
    padding:0 0 0 20px;
    background-size:10px auto !important;
    background-position:left center !important;
    background-repeat:no-repeat !important;
    background-image:url('../img/back_icon_dark.png');
}

.content_flow .button_back:hover
{
    opacity:1;
}











.content_rating
{
    height:auto;
    min-height:40px;
    margin:0 0 20px 0;
    padding:0 20px 0 20px;
    border-radius:0px;
}

.content_rating .number
{
    height:25px;
    line-height:25px;
    font-weight:300;
    text-align:center;
    font-size:25px;
    text-transform:uppercase;
    letter-spacing:1px;
}

.content_rating .rating
{
    height:40px;
}

.content_rating .rating .star
{
    width:20%;
    height:100%;
    background-size:16px auto !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
    background-image:url('../img/evaluator_icon.png');
    opacity:0.4;
}

.content_rating .rating .star.selected
{
    opacity:1;
}

.content_rating .note
{
    min-height:20px;
    line-height:20px;
    font-weight:400;
    text-align:left;
    font-size:14px;
}





.content_evaluation_analysis
{
    margin:0 0 20px 0;
    padding:0 20px 0 20px;
    border-radius:0px;
}

.content_evaluation_analysis .number
{
    height:25px;
    line-height:25px;
    font-weight:300;
    text-align:center;
    font-size:25px;
    text-transform:uppercase;
    letter-spacing:1px;
}

.content_evaluation_analysis .rating
{
    height:40px;
}

.content_evaluation_analysis .rating .star
{
    width:20%;
    height:100%;
    background-size:16px auto !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
    background-image:url('../img/evaluator_icon.png');
    opacity:0.4;
}

.content_evaluation_analysis .rating .star.selected
{
    opacity:1;
}

.content_evaluation_analysis .distribution
{
    height:60px;
    margin:5px 0 0 0;
}

.content_evaluation_analysis .distribution .star
{
    width:20%;
    height:60px;
}

.content_evaluation_analysis .distribution .star .bar
{
    position:absolute;
    left:50%;
    top:0;
    width:6px;
    height:40px;
    margin-left:-3px;
    border-radius:6px;
    background:rgba(30,34,39,0.05);
}

.content_evaluation_analysis .distribution .star .bar .value
{
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:0%;
    border-radius:6px;
    background:#CFC8B8;
}

.content_evaluation_analysis .distribution .star .label
{
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:15px;
    line-height:15px;
    font-size:10px;
    font-weight:800;
    text-align:center;
    text-transform:uppercase;
}





/* Switch */

.database_switch .item
{
    height:40px;
    line-height:40px;
    text-align:left;
    padding:0 0 0 15px;
    font-weight:600;
    font-size:14px;
    margin:0 0 20px 0;
    background:rgba(30,34,39,0.05);
    cursor:pointer;
    border-radius:5px;
}

.database_switch .item .slide
{
    position:absolute;
    right:10px;
    top:8px;
    width:40px;
    height:24px;
    background:rgba(30,34,39,0.05);
    border-radius:12px;
    -webkit-border-radius:12px;
    opacity:0.4;
}

.database_switch .item .slide
{
    background:#fff; 
}

.database_switch .item .slide .knob
{
    position:absolute;
    left:3px;
    top:3px;
    width:18px;
    height:18px;
    background:#fff;
    border-radius:50%;
    -webkit-border-radius:50%;
    transition:all 0.1s ease-in-out;
    -webkit-transition:all 0.1s ease-in-out;
    cursor:pointer;
}

.content_box .database_switch .item .slide .knob
{
    background:rgba(30,34,39,0.05); 
}

.database_switch .item.selected { }

.database_switch .item.selected .slide
{
    background:#CFC8B8;
    opacity:1 !important; 
}

.database_switch .item.selected .slide .knob
{
    left:19px;
}


.content_button
{
    height:40px;
    line-height:20px;
    padding:10px 15px 10px 15px;
    margin:0 0 20px 0;
    font-weight:800;
    text-align:center;
    font-size:14px;
    background:#CFC8B8;
    cursor:pointer; 
    border-radius:5px;
    color:#fff;
    box-shadow: 0 0 1px 0 rgb(0 0 0 / 8%), 0 1px 4px 0 rgb(0 0 0 / 12%);
    text-overflow: ellipsis;
    overflow: hidden; 
    white-space: nowrap;
}

.content_button.unselected
{
    opacity:0.4;
    color:#1e2227 !important;
    background-color:rgba(30,34,39,0.1) !important;
}

.content_button:hover
{
    opacity:0.9;
}

.content_button.add_touchpoint
{
    height:50px;
    line-height:20px;
    padding:15px;
    margin:0 0 20px 0;
    font-weight:800;
    text-align:center;
    font-size:15px;
    background:#CFC8B8;
    cursor:pointer; 
    border-radius:14px;
    color:#fff;
}


.content_text_button
{
    height:40px;
    line-height:40px;
    padding:0 10px 0 10px;
    margin:0 0 20px 0;
    font-weight:800;
    text-align:left;
    font-size:14px;
    cursor:pointer; 
    color:#1e2227;
    background:url('../img/arrow_right_dark.png') right 15px center no-repeat;
    background-size: 12px auto;
    opacity:0.4;
}

.content_text_button:hover
{
    opacity:1;
}


.content_link
{
    line-height:20px;
    margin:20px 0 20px 0;
    font-weight:700;
    text-align:center;
    text-transform:uppercase;
    font-size:10px;
    opacity:0.4;
    letter-spacing:1px;
}

.content_link:hover
{
    opacity:1;
}







.content_list.stream
{
    padding:0 0 0 20px;
}

.content_list.stream:before
{
    content:"";
    position:absolute;
    left:4px;
    top:0;
    width:4px;
    height:calc(100% - 20px);
    background:rgba(30,34,39,0.05); 
    border-radius:2px;
}

.content_list .item
{
    background-color:#fff;
    padding:0 15px 0 15px;
    margin:0 0 20px 0;
    border-radius:5px;
    box-shadow: 0 0 1px 0 rgb(0 0 0 / 8%), 0 1px 4px 0 rgb(0 0 0 / 12%);
}

.content_list .touchpoint_item
{
    padding:15px 15px 15px 15px;
    border-radius:14px;
}

.content_list .serviceaction_item
{
    background-image:url('../img/serviceaction_icon_dark.png') !important;
    background-repeat:no-repeat !important;
    background-size:16px auto !important;
    background-position:right 15px center !important;
    border:none;
}

.content_list .item.milestone
{
    padding:15px;
}

.content_list.stream .item:before
{
    content:"";
    position:absolute;
    left:-20px;
    top:50%;
    width:4px;
    height:4px;
    background:#fff; 
    border-radius:50%;
    margin:-6px 0 0 0;
    border:4px solid rgba(30,34,39,0.05);
}

.content_list .item.unavailable
{
    pointer-events:none;
    opacity:0.4;
}

.content_list .item .timestamp
{
    width:calc(100% - 40px);
    margin:0;
    min-height:20px;
    line-height:20px;
    font-weight:400;
    text-align:left;
    font-size:12px;
    opacity:0.4;
}

.content_list .item .title
{
    width:calc(100% - 120px);
    height:40px;
    line-height:20px;
    font-weight:600;
    text-align:left;
    font-size:15px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    padding:10px 0 10px 0 !important;
}

.content_list .item .title .database_input, .content_list .item .title .content_input
{
    position:absolute;
    left:0 !important;
    top:0 !important;
    width:100% !important;
    height:40px !important;
    line-height:20px !important;
    font-weight:600 !important;
    text-align:left !important;
    font-size:15px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    padding:10px 0 10px 0 !important;
    background:#fff !important;
    border:none;
}

.content_list .item .text
{
    width:calc(100% - 40px);
    margin:10px 0 10px 0;
    min-height:20px;
    line-height:20px;
    font-weight:400;
    text-align:left;
    font-size:14px;
    opacity:0.4;
}

.content_list .item .image
{
    position:absolute;
    left:0;
    top:0;
    width:40px;
    height:40px;
    border-radius:0px 0 0 10px;
    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
}

.content_list .item .image:before
{
    content:"";
    padding-top:60%;
    display:block;
}

.content_list .item .action_button
{
    height:40px;
    line-height:20px;
    padding:10px;
    margin:20px 0 0 0;
    font-weight:600;
    text-transform:uppercase;
    text-align:center;
    font-size:10px;
    letter-spacing:1px;
    background:#CFC8B8;
    cursor:pointer; 
    border-radius:0px;
    box-shadow:0 5px 30px rgba(30,34,39,0.1);
    color:#fff;
}

.content_list .item .action_button:hover
{
    color:#fff;
    box-shadow:0 5px 30px rgba(30,34,39,0.2);
    transform:translateY(-1px);
}

.content_list .item .button
{
    position:absolute;
    right:0;
    top:0;
    width:40px;
    height:40px;
    background-color:#CFC8B8;
    cursor:pointer;
    background-position:center center !important;
    background-repeat:no-repeat !important;
    background-size:30% auto !important;
    border-radius:0 5px 5px 0;
}

.content_list .item .button.second
{
    right:41px;
    border-radius:0;
}

.content_list .item .button.third
{
    right:82px;
    border-radius:0;
}

.content_list .item .button:hover
{
    background-color:#1e2227;
}



.content_list .touchpoint_item .button
{
    position:absolute;
    right:17px;
    top:50%;
    width:34px;
    height:34px;
    background-color:#CFC8B8;
    cursor:pointer;
    background-position:center center !important;
    background-repeat:no-repeat !important;
    background-size:30% auto !important;
    border-radius:8px !important;
    margin-top:-17px;
}

.content_list .touchpoint_item .button.second
{
    right:61px;
    border-radius:8px !important;
}

.content_list .touchpoint_item .button.third
{
    right:105px;
    border-radius:8px !important;
}

.content_list .touchpoint_item .button:hover
{
    background-color:#1e2227;
}



.content_list .item .button.view
{
    background-image:url('../img/view_icon_light.png');
}

.content_list .item .button.edit
{
    background-image:url('../img/edit_icon_light.png');
}

.content_list .item .button.settings
{
    background-image:url('../img/settings_icon_light.png');
}

.content_list .item .button.order
{
    background-image:url('../img/order_icon_light.png');
}

.content_list .item .button.delete
{
    background-image:url('../img/delete_icon_light.png');
}

.content_list .item .button.check
{
    background-image:url('../img/check_icon_light.png');
}

.content_list .item .button.cancel
{
    background-image:url('../img/cancel_icon_light.png');
}

.content_list .item .button.activate
{
    width:60px;
    background-color:#c75146 !important;
    background-size:40% auto !important;
    background-image:url('../img/toggle_off_icon_light.png');
}

.content_list .item .button.activate:hover
{
    background-color:#84a98c !important;
    background-image:url('../img/toggle_on_icon_light.png');
}

.content_list .item .button.inactivate
{
    width:60px;
    background-color:#84a98c !important;
    background-size:40% auto !important;
    background-image:url('../img/toggle_on_icon_light.png');
}

.content_list .item .button.inactivate:hover
{
    background-color:#c75146 !important;
    background-image:url('../img/toggle_off_icon_light.png');
}

.content_list .item .message
{
    position:absolute;
    left:-7px;
    top:-7px;
    width:20px;
    height:20px;
    border-radius:50%;
    background:#c75146 url('../img/message_icon_light.png') center center no-repeat;
    background-size:50% auto !important;
}







.server_menubar
{
    position:fixed;
    bottom:0;
    width:100vw;
    height:50px;
    background:#fff;
    z-index:999;
    box-shadow:0 -10px 50px -15px rgba(30,34,39,0.1);
}
.server_menubar .menu
{
    width:auto;
    height:50px;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

.server_menubar .menu .item
{
    width:34px;
    height:34px;
    background-size:12px 12px !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
    background:rgba(30,34,39,0.05);
    margin:8px 8px 8px 8px;
    border-radius:30%;
}

.server_menubar .menu .item:hover
{
    background:rgba(30,34,39,0.1);
}

.server_menubar .menu .item .notification
{
    position:absolute;
    left:100%;
    top:0;
    width:14px;
    height:14px;
    border-radius:50%;
    background:#c75146;
    margin:-2px 0 0 -8px;
    line-height:16px;
    font-size:9px;
    font-weight:800;
    text-align:center;
    color:#fff;
    display:none;
}

.server_menubar .menu .item.home_link
{
    background-image:url('../img/home_icon_dark.png');
}

.server_menubar .menu .item.live_link
{
    background-image:url('../img/live_icon.png');
}

.server_menubar .menu .item.waitingroom_link
{
    background-image:url('../img/waitingroom_icon.png');
}
 
.server_menubar .menu .item.homepage_link
{
    background-image:url('../img/homepage_icon_dark.png');
}

.server_menubar .menu .item.messenger_link
{
    background-image:url('../img/messenger_icon_dark.png');
}

.server_menubar .menu .item.organizer_link
{
    background-image:url('../img/organizer_icon_dark.png');
}

.server_menubar .menu .item.manager_link
{
    background-image:url('../img/manager_icon_dark.png');
}

.server_menubar .menu .item.supporter_link
{
    background-image:url('../img/supporter_icon_dark.png');
}

.server_menubar .menu .item.evaluator_link
{
    background-image:url('../img/evaluator_icon_dark.png');
}

.server_menubar .menu .item.settings_link
{
    background-image:url('../img/settings_icon.png');
}

.server_menubar .menu .item.users_link
{
    background-image:url('../img/users_icon.png');
}











:root 
{
    --ui_base:#f8f8f8;
    --ui_color:#d35656;
    --ui_color_hover:#f66767;

  --content-inner-width:calc(100vw - 100px);  

  --content-hepta-item-width:calc(var(--content-inner-width)/7);  
}



#content_menu_content
{
    position:absolute !important;
    left:0 !important;
    top:0 !important;
    display:none !important;
    opacity:0 !important;
    width:1px !important;
    height:1px !important;
}


.server_hero
{
    width:100%;
    height:50px;
    margin:100px 0 0 0;
    z-index:888;
    background:rgba(30,34,39,0.05);
    border-radius:0px;
}

.server_hero.margin
{ 
    margin:0 0 50px 0;
}

.server_hero .title
{
    width:auto;
    height:50px;
    margin-left:50px;
    top:0;
    font-weight:600;
    text-align:center;
    font-size:12px;
    line-height:50px;
    color:#1e2227 !important;
    padding:0 15px 0 15px;
    letter-spacing:1px;
    text-transform:uppercase;
}

.server_hero .filter
{
    height:34px;
    width:160px;
    font-weight:600;
    text-align:center;
    line-height:32px;
    text-transform:uppercase;
    font-size:10px;
    padding:0 15px 0 15px;
    border-radius:0px;
    margin:8px 0 8px 8px;
    color:#1e2227;
    letter-spacing:1px;
    border:1px solid #f8f8f8;
    cursor:pointer;
}

.server_hero .filter:hover
{
    background:rgba(30,34,39,0.05);
    color:#1e2227;
}

.server_hero .menu
{
    position:absolute;
    width:auto;
    height:50px;
    right:10px;
    top:0;
    font-family:"600";
    text-align:center;
    font-size:16px;
    line-height:50px;
    margin:0;
}

.server_hero .menu .item
{
    height:34px;
    width:auto;
    font-weight:600;
    text-align:center;
    line-height:32px;
    text-transform:uppercase;
    font-size:10px;
    padding:0 15px 0 15px;
    border-radius:0px;
    margin:8px 0 8px 8px;
    color:#1e2227;
    letter-spacing:1px;
    border:1px solid #f8f8f8;
    cursor:pointer;
}

.server_hero .menu .item:hover
{
    background:rgba(30,34,39,0.05);
    color:#1e2227;
}





.server_subhero
{
    width:calc(100vw - 100px);
    height:50px;
    font-family:"600";
    text-align:center;
    font-size:12px;
    line-height:50px;
    margin:0 0 0 0;
    text-transform:uppercase;
    background:#fff;
    color:#222f3e !important;
    box-shadow:0 0 10px rgba(0,0,0,0.05); 
    z-index:888;
}

.server_subhero.margin
{ 
    margin:0 0 50px 0;
}

.server_subhero .left_action
{
    position:absolute;
    width:var(--content-hepta-item-width);
    height:50px;
    left:0;
    top:0;
    font-weight:700;
    text-align:center;
    font-size:10px;
    text-transform:uppercase;
    line-height:50px;
    letter-spacing:1px;
    margin:0;
    color:#fff !important;
    padding:0 20px 0 20px;
    background-color:var(--ui_color);
    cursor:pointer;
}

.server_subhero .left_action:hover
{
    background-color:var(--ui_color_hover);
}

.server_subhero .right_action
{
    position:absolute;
    width:var(--content-hepta-item-width);
    height:50px;
    right:0;
    top:0;
    font-weight:700;
    text-align:center;
    font-size:10px;
    line-height:50px;
    text-transform:uppercase;
    letter-spacing:1px;
    margin:0;
    color:#fff !important;
    padding:0 20px 0 20px;
    background-color:var(--ui_color);
    cursor:pointer;
}

.server_subhero .right_action:hover
{
    background-color:var(--ui_color_hover);
}

.server_subhero .menu
{
    position:absolute;
    left:calc(var(--calendar-item-width) + 5px);
    top:0;
    height:50px;
    width:calc((5*var(--calendar-item-width)) - 10px);
}

.server_subhero .menu .item
{
    height:34px;
    width:calc(33.33% - 10px);
    font-weight:600;
    letter-spacing:1px;
    text-align:left;
    line-height:34px;
    text-transform:uppercase;
    font-size:10px;
    padding:0 15px 0 15px;
    margin:8px 5px 8px 5px;
    background-color:#fff;
    color:#c8c8c8;
    box-shadow:inset 0 0 0 1px #f8f8f8;
    cursor:pointer;
    border-radius:0px;
}

.server_subhero .menu .item:hover
{
    background-color:#f8f8f8;
    color:#1e2227;
}

.server_subhero .menu select, .server_subhero .menu .select
{
    background-image:url('../img/select_dark.png');
    background-size:9px auto !important;
    background-position:right 15px top 50% !important;
    background-repeat:no-repeat !important;
    color:#c8c8c8;
    cursor:pointer;
}

.server_subhero .menu select:hover, .server_subhero .menu .select:hover
{
    background-color:#f8f8f8;
    color:#1e2227;
}

.server_subhero .menu select:hover, .server_subhero .menu .select:hover
{
    background-image:url('../img/select_dark.png');
}

.server_subhero .menu .button
{
    text-align:center;
}

.server_subhero .menu .button:hover
{
    background-color:#f8f8f8;
    color:#1e2227;
}

.server_subhero .menu .searchbar
{
    height:50px;
    width:calc((3* var(--calendar-item-width)) - 2px);
    font-family:"600";
    text-align:center;
    line-height:50px;
    text-transform:uppercase;
    font-size:9px;
    padding:0 20px 0 20px;
    background-color:#fff !important;
    border-radius:0px !important;
    margin:0 1px 0 1px;
    cursor:pointer;
    color:#c8c8c8;
}

.server_subhero .menu .searchbar:hover
{
    color:#222f3e;
    box-shadow:inset 0 0 0 1px var(--ui_color);
}

.server_subhero .menu .searchbar.active_search
{
    color:#222f3e;
    box-shadow:inset 0 0 0 1px var(--ui_color);
}










.server_date_selector
{

}

.server_date_selector .control_holder
{
    width:calc(100% + 10px);
    height:auto;
    margin:0 0 10px 0;
}

.server_date_selector .control_holder .last_month
{
    width:calc(28.5714% - 10px);
    margin:5px;
    height:40px;
    background:rgba(255,255,255,0.2);
    cursor:pointer;
    color:#fff;
    font-size:10px;
    text-align:center;
    font-weight:600;
    text-transform:uppercase;
    line-height:40px;
    border-radius:0px;
    letter-spacing:1px;
}

.server_date_selector .control_holder .last_month:hover
{
    background:#fff;
    color:#1e2227;
}

.server_date_selector .control_holder .current_month
{
    width:calc(42.8571% - 10px);
    margin:5px;
    height:40px;
    background:#fff;
    font-size:10px;
    text-align:center;
    font-weight:600;
    text-transform:uppercase;
    line-height:40px;
    color:#1e2227;
    letter-spacing:1px;
    border-radius:0px;
}

.server_date_selector .control_holder .next_month
{
    width:calc(28.5714% - 10px);
    margin:5px;
    height:40px;
    background:rgba(255,255,255,0.2);
    cursor:pointer;
    color:#fff;
    font-size:10px;
    text-align:center;
    font-weight:600;
    text-transform:uppercase;
    line-height:40px;
    border-radius:0px;
    letter-spacing:1px;
}

.server_date_selector .control_holder .next_month:hover
{
    background:#fff;
    color:#1e2227;
}

.server_date_selector .label_holder
{
    width:calc(100% + 10px);
    height:auto;
}

.server_date_selector .label_holder .label
{
    width:calc(14.2857% - 10px);
    height:30px;
    margin:5px;
    background:#fff;
    font-size:10px;
    text-align:center;
    font-weight:600;
    text-transform:uppercase;
    color:#222f3e;
    line-height:30px;
    border-radius:0px;
    letter-spacing:1px;
}

.server_date_selector .calendar_holder
{
    width:calc(100% + 10px);
    height:auto;
}

.server_date_selector .calendar_holder .offset
{
    width:calc(14.2857% - 10px);
    height:30px;
    opacity:0;
    margin:5px;
}

.server_date_selector .calendar_holder .day
{
    width:calc(14.2857% - 10px);
    margin:5px;
    cursor:pointer;
    border-radius:0px;
    background:rgba(255,255,255,0.2);
}

.server_date_selector .calendar_holder .day .label
{
    position:absolute;
    left:0;
    top:50%;
    width:100%;
    height:20px;
    font-size:12px;
    text-align:center;
    font-weight:600;
    text-transform:uppercase;
    line-height:20px;
    color:#fff;
    margin-top:-10px;
}

.server_date_selector .calendar_holder .day:before
{
    content:"";
    padding-top:50%;
    display:block;
}

.server_date_selector .calendar_holder .day:hover
{
    background:#fff;
}

.server_date_selector .calendar_holder .day:hover .label
{
    color:#1e2227;
}










.server_legend
{
    width:auto !important;
    min-width:var(--calendar-width);
    height:40px;
    margin:0 0 0 0;
    display:flex !important;
    border-radius:0px;
    background-color:#fff;
    box-shadow:0 0 10px rgba(0,0,0,0.05); 
}

.server_legend .item
{
    width:var(--calendar-item-width);
    height:40px;
    background:#fff;
    line-height:40px;
    font-weight:700;
    text-align:center;
    font-size:9px;
    letter-spacing:1px;
    text-transform:uppercase; 
    color:#222f3e;
    border-radius:0px;
    border-right:1px solid #f8f8f8;
}









.server_content_title
{
    height:20px;
    line-height:20px;
    font-family:"600";
    text-align:center;
    font-size:12px;
    text-transform:uppercase;
    margin:40px 0 10px 0;
}

.server_content_title.no_margin
{
    margin-top:10px;
}

.server_content_description
{
    max-width:600px;
    line-height:20px;
    font-family:"500";
    text-align:center;
    font-size:12px;
    text-transform:none;
    margin:0 0 30px 0;
    opacity:0.4;
}

.server_content_description.no_margin
{
    margin-top:10px;
}

.server_content_label
{
    height:20px;
    line-height:20px;
    font-family:"600";
    text-align:left;
    font-size:9px;
    text-transform:uppercase;
    margin:20px 0 0 0;
    color:#B8B8B8;
}

.server_input_holder .server_content_label
{
    margin:20px 0 0 10px;
}







.server_input_holder
{
    width:calc(100% + 20px);
}



.server_input
{
    width:calc(100% - 20px);
    height:50px;
    line-height:20px;
    padding:15px;
    background:FFF !important;
    font-family:"600";
    text-align:left;
    font-size:9px;
    margin:10px;
    border-radius:3px !important;
    box-shadow:inset 0 0 0 1px #fff !important;
    text-transform:uppercase !important;
    color:#222f3e;
}

.server_input.default_input
{
    color:#c8c8c8 !important;
}

.server_input.default_input:focus
{
    color:#222f3e !important;
}



.server_select
{
    width:calc(100% - 20px);
    height:50px;
    line-height:20px;
    padding:15px;
    background:#FFF !important;
    font-family:"600";
    text-align:left;
    font-size:9px;
    margin:10px;
    border-radius:3px !important;
    box-shadow:inset 0 0 0 1px #fff !important;
    text-transform:uppercase !important;
    color:#222f3e;
}



.server_textarea
{
    width:calc(100% - 20px);
    height:90px;
    line-height:20px;
    padding:15px;
    background:#FFF !important;
    font-family:"600";
    text-align:left;
    font-size:9px;
    margin:10px;
    border-radius:3px !important;
    box-shadow:inset 0 0 0 1px #fff !important;
    text-transform:uppercase !important;
    color:#222f3e;
}

.server_textarea.default_input
{
    color:#c8c8c8 !important;
}

.server_textarea.default_input:focus
{
    color:#222f3e !important;
}





.server_half_input_holder
{
    width:calc(100% + 20px);
}

.server_half_input_holder .server_input_label
{
    width:calc(50% - 20px);
    height:20px;
    line-height:20px;
    font-family:"600";
    text-align:left;
    font-size:11px;
    text-transform:uppercase;
    margin:0 10px 10px 10px;
}

.server_half_input_holder .server_input
{
    width:calc(50% - 20px);
    height:50px;
    line-height:20px;
    padding:15px;
    background:#FFF !important;
    font-family:"600";
    text-align:left;
    font-size:11px;
    margin:10px;
    border-radius:3px !important;
    box-shadow:inset 0 0 0 1px #fff !important;
}

.server_half_input_holder .server_select
{
    width:calc(50% - 20px);
    height:50px;
    line-height:20px;
    padding:15px;
    background:#FFF !important;
    font-family:"600";
    text-align:left;
    font-size:11px;
    margin:10px;
    border-radius:3px !important;
    box-shadow:inset 0 0 0 1px #fff !important;
}

.server_half_input_holder .server_double_input_holder
{
    width:calc(50% - 20px);
    margin:0 10px 0 10px !important;
}

.server_half_input_holder .server_tripple_input_holder
{
    width:calc(50% - 20px);
    margin:0 10px 0 10px !important;
}







.server_image_input_container
{
    width:calc(100% + 0px);
}

.server_image_input_holder
{
    width:calc(100% - 20px);
    background:#FFF !important;
    border-radius:3px !important;
    box-shadow:inset 0 0 0 1px #fff !important;
}

.server_image_input_holder_half
{
    width:calc(50% - 20px);
    margin:10px;
}

.server_image_input_holder:before
{
    content:"";
    display:block;
    padding-top:60%;
}

.server_image_input_holder .showcase
{
    position:absolute;
    left:5px;
    top:5px;
    width:calc(100% - 10px);
    height:calc(100% - 10px);
    background-position:center center !important;
    background-size:cover !important;
    background-repeat:no-repeat !important;
}

.server_image_input_holder .server_image_input
{
    position:absolute;
    left:50%;
    bottom:50px;
    width:250px;
    height:50px;
    background:rgba(255,255,255,0);
    font-size:0px;
    color:rgba(255,255,255,0);
    opacity:0;
    cursor:pointer;
}

.server_image_input_holder .server_image_input_button
{
    position:absolute;
    left:50%;
    bottom:50px;
    width:250px;
    height:50px;
    background:#fff;
    border-radius:3px;
    font-family:"600";
    text-align:center;
    font-size:9px;
    line-height:50px;
    text-transform:uppercase;
    pointer-events:none;
}








.server_button
{
    height:50px;
    line-height:20px;
    padding:15px;
    font-family:"600";
    text-align:left;
    font-size:11px;
    color:#fff;
    text-align:center;
    text-transform:uppercase;
    background:#333 !important;
    border-radius: 3px !important;
    margin:50px 0 100px 0;
    cursor:pointer;
    opacity:0.4;
}

.server_button:hover
{
    opacity:1;
}













.server_list_menu
{
    width:100%;
    margin:0;
}

.server_list_menu.last_content
{
    width:100%;
    margin:0 0 90px 0 !important;
}

.server_list_menu .item
{
    width:100%;
    height:50px;
    margin:10px 0 10px 0;
    background:#fff;
    border-radius:3px;
}

.server_list_menu .item:hover
{
    box-shadow:0 5px 30px #CFD2E6;
}

.server_list_menu .item .icon
{
    position:absolute;
    left:0;
    top:0;
    width:70px;
    height:50px;
    background-size:auto 30% !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
}

.server_list_menu .item .image
{
    position:absolute;
    left:0;
    top:0;
    width:50px;
    height:50px;
    border-right:2px solid #f8f8f8;
    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
    border-radius:3px 0 0 3px;
}

.server_list_menu .item .label
{
    position:absolute;
    left:70px;
    top:0;
    width:calc(100% - 150px);
    height:50px;
    padding:0 15px 0 0;
    line-height:50px;
    font-family:"600";
    text-align:left;
    font-size:11px;
    text-transform:uppercase;
}












.server_tile_menu
{
    width:calc(100% + 80px);
    margin:0;
}

.server_tile_menu .item
{
    width:calc(50% - 80px);
    margin:40px;
    background:#fff;
    box-shadow:0 5px 30px rgba(30,34,39,0.1);
    border-radius:30%;
}

.server_tile_menu .item:before
{
    content:"";
    display:block;
    padding-top:100%;
}

.server_tile_menu .item:hover
{
    box-shadow:0 5px 30px rgba(30,34,39,0.2);
    transform:translateY(-1px);
}

.server_tile_menu .item .icon
{
    position:absolute;
    left:50%;
    top:10px;
    width:50px;
    height:50px;
    margin-left:-25px;
    background-size:auto 30% !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
}

.server_tile_menu .item .label
{
    position:absolute;
    left:0; 
    top:50px;
    width:100%;
    height:40px;
    padding:0 0 0 0;
    line-height:40px;
    font-weight:500;
    text-align:center;
    font-size:12px;
    letter-spacing:2px;
    text-transform:uppercase;
}












.server_notification
{
    padding:10px;
    background:#c75146;
    border-radius:5px;
    margin-bottom:40px;
}

.server_notification.regular
{
    background:#cfc8b8;
}

.server_notification .text
{
    max-width:600px;
    font-size:16px;
    font-weight:400;
    line-height:25px;
    text-align:center;
    color:#fff;
}

.server_notification .button_holder
{
    width:auto;
    height:40px;
    margin:20px 0 0 0;
}

.server_notification .button_holder .button
{
    width:auto;
    height:40px;
    color:#fff;
    font-size:12px;
    font-weight:800;
    line-height:36px;
    letter-spacing:1px;
    text-align:center;
    text-transform:uppercase;
    background:transparent;
    border:2px solid #fff;
    margin:0 10px 0 10px;
    border-radius:20px;
    padding:0 20px 0 20px;
    background:rgba(255,255,255,0.2);
}

.server_notification .button:hover
{
    background:rgba(255,255,255,0.4);
}






.server_menu
{
    margin:0;
}

.server_menu .item
{
    height:100px;
    margin:20px 0 20px 0;
    background:#fff;
    box-shadow:0 5px 20px -5px rgba(30,34,39,0.2);
    border-radius:20px;
}

.server_menu .item.add
{
    height:50px;
    margin:40px 0 0 0;
    background:rgba(0,0,0,0.05);
    box-shadow:none;
    border-radius:0;
    opacity:0.5;
}

.server_menu .item:hover
{
    box-shadow:0 10px 30px -3px rgba(30,34,39,0.3);
    transform:translateY(-2px);
}

.server_menu .item.add:hover
{
    box-shadow:none;
    transform:translateY(0);
    opacity:1;
}

.server_menu .item .label
{
    position:absolute;
    left:0; 
    top:0;
    width:100%;
    height:100px;
    padding:0 0 0 0;
    line-height:100px;
    font-weight:800;
    text-align:center;
    font-size:16px;
    letter-spacing:1px;
    text-transform:uppercase;
}

.server_menu .item.add .icon
{
    position:absolute;
    left:0;
    top:0;
    width:50px;
    height:50px;
    background-size:auto 20% !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
}

.server_menu .item.add .label
{
    height:50px;
    line-height:50px;
    font-weight:700;
    text-align:center;
    font-size:10px;
    letter-spacing:1px;
    text-transform:uppercase;
}












.server_administration_menu
{
    width:calc(100% + 60px);
    margin:0;
}

.server_administration_menu .item
{
    width:calc(25% - 60px);
    margin:30px;
    background:#fff;
    box-shadow:0 5px 30px rgba(30,34,39,0.05);
    border-radius:21%/30%;
}

.server_administration_menu .item:before
{
    content:"";
    display:block;
    padding-top:70%;
}

.server_administration_menu .item.quad
{
    width:calc(25% - 60px);
}

.server_administration_menu .item.add
{
    width:calc(25% - 80px);
    margin:40px;
    background:rgba(0,0,0,0.05);
    box-shadow:none;
    border-radius:20px;
    opacity:0.5;
}

.server_administration_menu .item:hover
{
    box-shadow:0 5px 30px rgba(30,34,39,0.1);
    transform:translateY(-1px);
}

.server_administration_menu .item.add:hover
{
    box-shadow:none;
    transform:translateY(0);
    opacity:1;
}

.server_administration_menu .item .icon
{
    position:absolute;
    left:50%;
    top:50%;
    width:30px;
    height:30px;
    margin-top:-30px;
    margin-left:-15px;
    background-size:auto 50% !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
}

.server_administration_menu .item .label
{
    position:absolute;
    left:0; 
    top:50%;
    width:100%;
    height:30px;
    padding:0 0 0 0;
    line-height:30px;
    font-weight:700;
    text-align:center;
    font-size:14px;
}












.server_module_menu
{
    width:calc(100% + 60px);
    margin:0;
}

.server_module_menu .item
{
    width:calc(20% - 60px);
    margin:30px;
    background:#fff;
    box-shadow:0 5px 30px rgba(30,34,39,0.05);
    border-radius:30%;
}

.server_module_menu .item .notification
{
    position:absolute;
    left:100%;
    top:0;
    width:25px;
    height:25px;
    border-radius:25px;
    background:#c75146;
    margin:-2px 0 0 -13px;
    line-height:25px;
    font-size:12px;
    font-weight:800;
    text-align:center;
    color:#fff;
    display:none;
}

.server_module_menu .item.add
{
    width:calc(16.66% - 40px);
    margin:20px;
    background:rgba(0,0,0,0.05);
    box-shadow:none;
    border-radius:30%;
    opacity:0.5;
}

.server_module_menu .item:before
{
    content:"";
    display:block;
    padding-top:100%;
}

.server_module_menu .item:hover
{
    box-shadow:0 5px 30px rgba(30,34,39,0.1);
    transform:translateY(-1px);
}

.server_module_menu .item.add:hover
{
    box-shadow:none;
    transform:translateY(0);
    opacity:1;
}

.server_module_menu .item .icon
{
    position:absolute;
    left:50%;
    top:50%;
    width:30px;
    height:30px;
    margin-top:-30px;
    margin-left:-15px;
    background-size:auto 50% !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
}

.server_module_menu .item .label
{
    position:absolute;
    left:0; 
    top:50%;
    width:100%;
    height:30px;
    padding:0 0 0 0;
    line-height:30px;
    font-weight:700;
    text-align:center;
    font-size:14px;
}




















.website_messenger
{
    display:none;
    height:auto;
    padding:80px 0 80px 0;
}


.website_organizer
{
    display:none;
    height:auto;
    padding:80px 0 80px 0;
}

.website_evaluator
{
    display:none;
    height:auto;
    padding:80px 0 80px 0;
}









.code_holder
{
    width:calc(100% + 30px);
    height:40px;
    margin:0 0 20px 0;
}

.code_holder .code_boxes
{
    width:calc(33.33% - 20px);
    margin:0 10px 0 10px;
    height:40px;
}

.code_holder .code_box
{
    width:calc(33.33% - 10px);
    height:40px;
    margin:0 5px 0 5px;
    padding:10px 0 10px 0;
    background:#fff;
    font-size:20px;
    line-height:20px;
    text-align:center;
    text-transform:uppercase;
    border-radius:0px;
}

.content_box .code_holder .code_box
{
    background:rgba(30,34,39,0.05); 
}

.messenger_option .code_holder .code_box
{
    background:rgba(30,34,39,0.05); 
}





.authentification_status
{
    height:40px;
    border-radius:0px;
    background:#e55039;
    margin:0 0 20px 0;
    line-height:40px;
    font-weight:600;
    text-align:left;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:1px;
    color:#fff;
    text-align:center;
}

.authentification_status.authenticated
{
    background:#38ada9;
}










.module_container
{
    width:100vw !important;
    max-width:none !important;
    min-height:100vh !important;
    height:auto !important;
    margin:0 !important;
    padding:100px 0 0 0 !important;
    background:#fff;
    overflow:hidden;
        border-radius:0 !important;
}

.module_content
{
    width:100%;
    min-height:auto;
    padding:20px;
}

.module_container.messenger
{
    height:80vh;
}

.module_container.messenger .module_content
{
    position:absolute;
    left:0;
    top:100px;
    width:100%;
    height:calc(100% - 100px);
}

.module_content .module_hero
{
    position:absolute;
    left:0;
    top:0;
    margin-top:-100px;
    width:100%;
    height:100px;
    padding:20px 20px 20px 70px;
}

.module_content .module_hero .background
{
    position:absolute;
    top:0; 
    width:100vw;
    height:100%;
    background:#cfc8b8;
    transition:opacity 0.5s ease;
}

.module_content .module_hero .title
{
    line-height:20px;
    font-size:20px;
    font-weight:800;
    text-align:left;
    color:#fff;
    margin-bottom:10px;
} 

.module_content .module_hero .text
{
    line-height:20px;
    font-size:14px;
    font-weight:400;
    text-align:left;
    color:#fff;
} 

.module_content .module_hero .back 
{
    position: absolute;
    left: 10px;
    top: 50%;
    width: 40px;
    height: 40px;
    background: url(https://321med.com/cdn/img/back_icon.svg) center center / 40% no-repeat rgb(255, 255, 255, 0.2);
    border-radius: 10px;
    margin-top:-20px;
    cursor: pointer;
}

.module_content .module_hero .back:hover
{
    background-color:rgba(255,255,255,0.4);
}

.module_content .module_explainer
{
    margin:0 0 40px 0;
    line-height:25px;
    text-align:center;
    font-size:16px;
    font-weight:800;
    color:#1e2227;
}

.module_content .module_headline
{
    margin:20px 0 20px 0;
    line-height:25px;
    text-align:center;
    font-size:20px;
    font-weight:800;
    color:#1e2227;
}

.module_content .module_separator
{
    height:30px;
}




















/* Loader CSS */

.loader
{
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    z-index:888;
    background:#fff; 
}

.loader_spinner
{
    position:absolute;
    width:60px;
    height:60px;
    background:url("../img/loader.gif") center center no-repeat;
    background-size:100% auto;
}






















/* General */

.database_element
{
    margin:0;
    padding:0;
}

.database_element_save:before
{
    content:"";
    position:absolute;
    left:100%;
    top:10px;
    width:20px;
    height:20px;
    margin:0 0 0 -30px;
    background:#c75146 url("../img/loader.gif") center center no-repeat;;
    background-size:60% auto;
    border-radius:50%;
    -webkit-border-radius:50%;
    z-index:999;
}

.database_element_saved:before
{
    content:"";
    position:absolute;
    left:100%;
    top:10px;
    width:20px;
    height:20px;
    margin:0 0 0 -30px;
    background:#84a98c url("../img/save.png") center center no-repeat;;
    background-size:40% auto;
    border-radius:50%;
    -webkit-border-radius:50%;
    z-index:999;
}






















/* Payment */

.payment_info
{
    width:calc(100% - 100px);
}
 
.payment_info .item
{
    width:28%;
    line-height:20px;
    height:20px;
    padding:0 30px 0 0;
    font-weight:500;
    text-align:left;
    font-size:12px;
    overflow:hidden;
    text-overflow:ellipsis;
}

.payment_info .item:last-child
{
    width:16%;
    line-height:20px;
    height:20px;
    padding:0 30px 0 0;
    font-weight:700;
    text-align:right;
    font-size:12px;
    overflow:hidden;
    text-overflow:ellipsis;
}

.payment_status
{
    width:100px;
    height:26px;
    line-height:26px;
    background:#E26A6A;
    font-weight:700;
    text-align:center;
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:1px;
    color:#fff;
    border-radius:4px;
    -webkit-border-radius:4px;
    margin:-3px 0 0 0;
}

.payment_status_pending
{
    background:#F5D76E;
}

.payment_status_succeeded
{
    background:#3FC380;
}

.payment_status_refunded
{
    background:#E26A6A;
}

.mandate
{
    padding:20px;
    box-shadow:0 0 0 2px #f5fafe;
    -webkit-box-shadow:0 0 0 2px #f5fafe;
    margin:10px 0 10px 0;
    border-radius:6px;
    -webkit-border-radius:6px;
    font-size:10px;
}

.stripe_card_form
{
    padding:20px;
    box-shadow:0 0 0 2px #f5fafe;
    -webkit-box-shadow:0 0 0 2px #f5fafe;
    margin:10px 0 10px 0;
    border-radius:6px;
    -webkit-border-radius:6px;
}

.amount
{
    margin:10px 0 10px 0;
    font-size:20px;
    text-align:center;
}

.receipt
{
    max-width:300px;
    margin:10px 0 30px 0; 
    border-radius:18px;
    -webkit-border-radius:18px; 
}

.receipt .head
{ 
    padding:30px;
    border-radius:18px 18px 0 0;
    -webkit-border-radius:18px 18px 0 0;
    background:#f5fafe;
    border-bottom:4px dashed #fff;  
}  
 
.receipt .head .logo
{
    position:absolute;
    left:30px;
    top:30px;
    height:calc(100% - 60px);
    width:calc(100% - 60px);
    background-position:left center !important;
    background-size:auto 100% !important;
    background-repeat:no-repeat !important;
    background-image:url('../img/logo.png?123');
}   

.receipt .head .info
{
    text-align:right;
    margin:0;
}  
 
.receipt .details
{
    padding:30px;
    background:#f5fafe;
    text-align:center;
    border-bottom:4px dashed #fff;
}

.receipt .foot
{
    padding:30px;
    font-size:20px;
    border-radius:0 0 18px 18px;
    -webkit-border-radius:0 0 18px 18px;
    text-align:center;
    background:#f5fafe;
} 


.save_payment
{
    width:auto;
    padding:10px 15px 10px 15px;
    background:#f5fafe;
    margin:10px 0 10px 0;
    border-radius:6px;
    -webkit-border-radius:6px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    text-align:center;
    font-size:9px;
    line-height:9px;
    cursor:pointer;  
}

.saved_payment
{
    padding:20px;
    box-shadow:0 0 0 2px #f5fafe;
    -webkit-box-shadow:0 0 0 2px #f5fafe;
    margin:10px 0 10px 0;
    border-radius:6px;
    -webkit-border-radius:6px;
    cursor:pointer;
}

.credit_card, .sepa_account
{
    border-radius:6px;
    -webkit-border-radius:6px;
    padding:30px 30px 20px 30px;
    margin:10px 0 10px 0;
    background:#f5fafe;
}

.credit_card .title, .sepa_account .title
{
    line-height:20px;
    margin:0 0 20px 0;
    padding:0 0 20px 0;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    text-align:center;
    font-size:14px;
    border-bottom:2px solid #fff;
}

.credit_card .data, .sepa_account .data
{
    margin:0 0 20px 0;
    padding:0 0 20px 0;
    font-weight:500;
    text-align:center;
    font-size:12px;
    line-height:25px;
    border-bottom:2px solid #fff;
}














.more_statistics_holder
{

}

.more_statistics_holder .total
{
    height:126px;
    border-radius:5px;
    background:rgba(30,34,39,0.05);
}

.more_statistics_holder .total .label
{
    line-height:11px;
    font-size:11px;
    font-weight:600;
    color:#1e2227;
    text-align:center;
    opacity:0.4;
    margin:10px 0 10px 0;
}

.more_statistics_holder .total .count
{
    line-height:40px;
    font-size:40px;
    font-weight:400;
    color:#1e2227;
    text-align:center;
    margin:10px 0 10px 0;
}

.more_statistics_holder .months
{
    width:calc(100% + 20px);
}

.more_statistics_holder .months .month
{
    float:right;
    width:calc(16.6666% - 20px);
    margin:0 10px 0 10px;
    border-radius:5px;
    background:rgba(30,34,39,0.05);
}

.more_statistics_holder .months .month .label
{
    line-height:11px;
    font-size:11px;
    font-weight:600;
    color:#1e2227;
    text-align:center;
    opacity:0.4;
    margin:10px 0 10px 0;
}

.more_statistics_holder .months .month .bar
{
    left:50%;
    width:8px;
    height:60px;
    margin:0 0 0 -4px;
    background:rgba(30,34,39,0.05);
    border-radius:4px;
}

.more_statistics_holder .months .month .bar .value
{
    position:absolute;
    left:0;
    bottom:0;
    width:8px;
    border-radius:4px;
    background:#cfc8b8;
}

.more_statistics_holder .months .month .count
{
    line-height:13px;
    font-size:13px;
    font-weight:400;
    color:#1e2227;
    text-align:center;
    margin:10px 0 10px 0;
}























/* Contact */

.contact_holder
{
    position:fixed;
    right:50px;
    bottom:50px;
    width:auto;
    height:50px;
    z-index:999;
}

.contact_holder .item
{
    width:auto;
    height:50px;
    line-height:50px;
    background-color:#fff;
    background-image:url('../img/messenger_icon_dark.png') !important;
    background-position:left 20px center !important;
    background-repeat:no-repeat !important;
    background-size:16px auto !important;
    border-radius:30px;
    box-shadow:0 5px 20px -5px rgba(30,34,39,0.2);
    text-align:center;
    font-size:16px;
    font-weight:800;
    color:#1e2227;
    margin:0 0 0 20px;
    padding:0 20px 0 50px;
}

.contact_holder .item:hover
{
    box-shadow:0 5px 30px -3px rgba(30,34,39,0.3);
    margin-top:-1px;
}












.cookie_notice
{
    position:fixed;
    width:80%;
    max-width:670px;
    bottom:20px;
    padding:20px 100px 20px 20px;
    background:#fff;
    border-radius:18px;    
    box-shadow: 0 20px 50px -20px rgb(50 50 93 / 25%), 0 15px 30px -15px rgb(0 0 0 / 30%);
}

.cookie_notice .text
{
    height:auto;
    line-height:18px;
    font-size:12px;
    color:#1e2227;
    text-align:left;
    font-weight:600;
}

.cookie_notice .text .link
{
    float:none;
    display:inline-block;
    width:auto;
    line-height:inherit;
    font-size:inherit;
    color:inherit;
    font-weight:800;
    cursor:pointer;
}

.cookie_notice .confirm
{
    position:absolute;
    right:20px;
    top:50%;
    width:60px;
    height:30px;
    margin-top:-15px;
    background:#CFC8B8;
    line-height:30px;
    font-size:13px;
    color:#fff;
    font-weight:800;
    text-align:center;
    z-index:9999;
    cursor:pointer;
    border-radius:12px;
}












.backend_menu
{
    width:100vw;
    height:50px;
    box-shadow: 0 10px 50px -15px rgb(12 13 15 / 20%);
    background:#fff;
}

.backend_menu.margin_top
{
    margin-top:50px;
}
 
.backend_menu .item
{
    width:16.6666%;
    height:50px;
    line-height:50px;
    font-size:13px;
    font-weight:800;
    text-align:center;
    border-right:1px solid rgba(30,34,39,0.05);
}
 
.backend_menu_crm .item
{
    width:9.0909%;
}
 
.backend_menu_prm .item
{
    width:25%;
}
 
.backend_menu .item:hover, .backend_menu .item.selected
{
    background:rgba(30,34,39,0.05);
    border-bottom:4px solid #cfc8b8;
}














.backend_index_hero
{
    padding:150px 0 150px 0;
}

.backend_index_hero .background
{
    position:absolute;
    top:0;
    width:100vw;
    height:100%;
    background:#cfc8b8;
}

.backend_index_hero .title
{
    line-height:40px;
    font-size:40px;
    color:#fff;
    margin:0 0 10px 0;
    text-align:center;
    font-weight:200;
}

.backend_index_hero .title span
{
    width:auto;
    float:none;
    display:inline-block;
    line-height:inherit;
    font-size:inherit;
    color:inherit;
    margin:0;
    text-align:inherit;
    font-weight:800;
}

.backend_index_hero .subtitle
{
    line-height:30px;
    font-size:30px;
    color:#fff;
    margin:0 0 20px 0;
    text-align:center;
    font-weight:200;
}








.backend_servers
{
    width:100%;
}

.backend_servers .server
{
    width:calc(25% - 20px);
    margin:20px 20px 20px 0;
    padding:20px 20px 70px 20px;
    background:rgba(30,34,39,0.05);
    border-radius:5px;
}

.backend_servers .server .title
{
    height:20px;
    line-height:20px;
    font-size:15px;
    margin:0;
    text-align:left;
    font-weight:800;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#cfc8b8;
}

.backend_servers .server .meta
{
    height:20px;
    line-height:20px;
    font-size:11px;
    margin:0 0 5px 0;
    text-align:left;
    font-weight:800;
    opacity:0.4;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.backend_servers .server .mail
{
    height:20px;
    line-height:20px;
    font-size:13px;
    margin:0 0 5px 0;
    text-align:left;
    font-weight:400;
    opacity:0.4;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.backend_servers .server .button
{
    position:absolute;
    bottom:20px;
    width:30px;
    height:30px;
    border-radius:50%;
    background-color:rgba(30,34,39,0.05);
    background-size:10px auto !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
}

.backend_servers .server .button:hover
{
    background:rgba(30,34,39,0.1);
}

.backend_servers .server .button.manage_button
{
    right:100px;
    background-image:url('../img/edit_icon_dark.png');
}

.backend_servers .server .button.website_button
{
    right:60px;
    background-image:url('../img/view_icon_dark.png');
}

.backend_servers .server .button.delete_button
{
    right:20px;
    background-image:url('../img/delete_icon_dark.png');
}






.large_square_menu
{
    width:calc(100% + 40px);
}

.large_square_menu .item
{
    width:calc(20% - 40px);
    height:85px;
    margin:20px;
    border-radius:20px;
    background:#fff;
    background-position: top 35% center !important;
    background-repeat: no-repeat !important;
    background-size: 20px auto !important;
    box-shadow: 0 50px 100px -20px rgb(50 50 93 / 25%), 0 30px 60px -30px rgb(0 0 0 / 30%);
}

.large_square_menu .item .title
{
    position:absolute;
    left:0;
    top:50%;
    margin-top:10px;
    line-height:15px;
    font-size:12px;
    font-weight:800;
    text-align:center;
    color:#1e2227;
}









.actions_menu
{
    width:calc(100% + 40px);
}

.actions_menu .item
{
    width:calc(25% - 40px);
    height:85px;
    margin:20px;
    padding:30px 15px 10px 15px;
    border-radius:20px;
    background:#fff;
    background-position: top 40% center !important;
    background-repeat: no-repeat !important;
    background-size: 30% auto !important;
    box-shadow: 0 25px 50px -10px rgb(50 50 93 / 25%), 0 15px 30px -15px rgb(0 0 0 / 30%);
    transition:opacity 0.1s ease-in-out;
}

.actions_menu .item .type
{
    position:absolute;
    left:50%;
    top:15px;
    width:20px;
    height:20px;
    background-size:20px auto !important;
    background-position:center top !important;
    background-repeat:no-repeat !important;
    margin-left:-10px;
}

.actions_menu .item .title
{
    position:absolute;
    left:0;
    top:45px;
    height:40px;
    line-height:15px;
    font-size:12px;
    font-weight:800;
    text-align:center;
    color:#1e2227;
    padding:0 15px 0 15px;
}









.messages_menu
{
    width:calc(100% + 0);
}

.messages_menu .item
{
    width:calc(25% - 40px);
    margin:20px;
    padding:10px 15px 10px 15px;
    border-radius:10px;
    background:#fff;
    background-position: top 40% center !important;
    background-repeat: no-repeat !important;
    background-size: 30% auto !important;
    box-shadow: 0 25px 50px -10px rgb(50 50 93 / 25%), 0 15px 30px -15px rgb(0 0 0 / 30%);
}

.messages_menu .item .type
{
    line-height:20px;
    font-size:13px;
    font-weight:300;
    text-align:left;
    color:#1e2227;
    opacity:0.4;
}

.messages_menu .item .title
{
    line-height:20px;
    font-size:13px;
    font-weight:800;
    text-align:left;
    color:#1e2227;
}









.answers_menu
{
    width:calc(100% + 0);
}

.answers_menu .item
{
    width:calc(25% - 40px);
    min-height:40px;
    margin:20px;
    padding:10px 15px 10px 15px;
    border-radius:10px;
    background:#fff;
    background-position: top 40% center !important;
    background-repeat: no-repeat !important;
    background-size: 30% auto !important;
    box-shadow: 0 25px 50px -10px rgb(50 50 93 / 25%), 0 15px 30px -15px rgb(0 0 0 / 30%);
}

.answers_menu .item .type
{
    line-height:20px;
    font-size:13px;
    font-weight:300;
    text-align:left;
    color:#1e2227;
    opacity:0.4;
}

.answers_menu .item .title
{
    line-height:20px;
    font-size:13px;
    font-weight:800;
    text-align:left;
    color:#1e2227;
}




.flow_box
{
    padding:40px 40px 30px 40px;
    box-shadow: 0 1px 1px 0 rgb(0 0 0 / 8%), 0 1px 16px 0 rgb(0 0 0 / 8%);
    background:#fff;
    border-radius:14px;
}

.flow_box.openable
{
    height:114px;
    overflow:hidden;
}

.flow_box.open
{
    height:auto !important;
}

.flow_box.openable .trigger_button
{
    position:absolute;
    right:0;
    top:0;
    width:80px;
    height:114px;
    background:url('../img/arrow_right_dark.png') center center no-repeat;
    background-size:14px auto;
    transform:rotate(90deg);
    z-index:99999;
    cursor:pointer;
}

.flow_box.open .trigger_button
{
    position:absolute;
    right:0;
    top:0;
    width:80px;
    height:114px;
    background:url('../img/arrow_right_dark.png') center center no-repeat;
    background-size:14px auto;
    transform:rotate(-90deg);
    z-index:99999;
    cursor:pointer;
}




.step_title_holder
{
    height:34px;
}

.step_title_holder .step_pretitle
{
    width:auto;
    height:34px;
    line-height:34px;
    padding:0 15px 0 15px;
    border-radius:5px;
    background:#fff;
    box-shadow: 0 0 1px 0 rgb(0 0 0 / 8%), 0 1px 4px 0 rgb(0 0 0 / 12%);
    font-size:14px;
    font-weight:800;
    margin-right:40px;
}

.step_title_holder .step_pretitle:before
{
    content:"";
    position:absolute;
    left:100%;
    top: 0;
    width: 40px;
    height: 100%;
    background:url('../img/arrow_right_dark.png') center center no-repeat;
    background-size:12px auto;
}

.step_title_holder .separator
{
    display:none;
}

@media screen and (max-width: 800px) 
{
    .step_title_holder .separator
    {
        display:block;
    }
}

.step_title_holder .step_title
{
    width:auto;
    line-height:34px;
    font-size:16px;
    font-weight:800;
}





.flow_separator
{
    height:80px;
}

.flow_separator .connector
{
    position:absolute;
    left:50%;
    top:0;
    width:10px;
    height:100%;
    opacity:0.4;
    margin-left:-5px;
}

.flow_line
{
    height:20px;
    background:url('../img/flow_line_icon_dark.png') center center no-repeat;
    background-size:auto 100%;
    opacity:0.1;
}

.flow_connector
{
    height:80px;
    background:url('../img/flow_connector_icon_dark.png') center center no-repeat;
    background-size:auto 100%;
    opacity:0.1;
}

/* 
.window .flow_line
{
    background:url('../img/flow_line_icon_light.png') center center no-repeat;
    background-size:auto 100%;
    opacity:0.4;
}

.window .flow_connector
{
    background:url('../img/flow_connector_icon_light.png') center center no-repeat;
    background-size:auto 100%;
    opacity:0.4;
} */




.touchpoint_flow
{

}

.touchpoint_flow .touchpoint
{
    height:70px;
    line-height:25px;
    box-shadow:inset 0 0 0 1px rgba(30,34,39,0.1);
    border-radius:14px;
    padding:10px 15px 10px 15px;
    margin:0;
    font-size:17px;
    font-weight:800;
    cursor:pointer;
    color:rgba(30,34,39,1);
    text-align:center;
    background:#fff;
}

.touchpoint_flow .touchpoint:hover
{
    background:#fff;
    box-shadow: 0 1px 1px 0 rgb(0 0 0 / 8%), 0 1px 16px 0 rgb(0 0 0 / 8%);
}

.touchpoint_flow .touchpoint.current, .touchpoint_flow .touchpoint.current:hover
{
    background:#fff;
    box-shadow: 0 1px 1px 0 rgb(0 0 0 / 8%), 0 1px 16px 0 rgb(0 0 0 / 8%);
}

.touchpoint_flow .touchpoint span
{
    line-height:25px;
    font-size:15px;
    font-weight:800;
    text-align:center;
}


/*
.sub_level:before
{
    content:"";
    position:absolute;
    left:-20px;
    top:0;
    width:20px;
    height:100%;
    background:url('../img/turn_down_icon_dark.png') left center no-repeat;
    background-size:14px auto;
    opacity:0.4;
}

.level_1
{
    margin-left:20px !important;
}

.level_2
{
    margin-left:40px !important;
}

.level_3
{
    margin-left:60px !important;
}

.level_4
{
    margin-left:80px !important;
}

.level_5
{
    margin-left:100px !important;
}

.level_6
{
    margin-left:120px !important;
}

.level_7
{
    margin-left:140px !important;
}
*/


.touchpoint_flow .touchpoint:last-child
{
    margin-bottom:0;
}








.notifications
{

}

.notifications .notification
{
    padding:30px;
    border-radius:14px;
    background:rgba(30,34,39,0.05);
    margin:0 0 40px 0;
}

.notifications .notification.unseen
{
    box-shadow: 0 1px 1px 0 rgb(0 0 0 / 8%), 0 1px 16px 0 rgb(0 0 0 / 8%);
    background:#fff;
}

.notifications .notification.unseen:before
{
    content:"";
    display:block;
    position:absolute;
    left:-30px;
    top:50%;
    width:14px;
    height:14px;
    background:#c75146;
    border-radius:50%;
    margin-top:-7px;
}

.notifications .notification .gradient
{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:linear-gradient(120deg,rgba(207,200,184,0) 50%, rgba(207,200,184,1) 100%);
}

.notifications .notification .title
{
    font-weight:600;
    font-size:25px;
    line-height:35px;
    overflow:hidden;
    margin:0 !important;
}

.notifications .notification .text
{
    max-width:calc(100% - 250px);
    font-weight:400;
    font-size:15px;
    line-height:23px;
    overflow:hidden;
    margin:0 !important;
    opacity:1;
}

.notifications .notification .button
{
    position:absolute;
    right:30px;
    top:50%;
    width: auto;
    height:50px;
    border-radius:8px;
    color:#fff;
    line-height:50px;
    padding:0 50px 0 20px;
    font-size:17px;
    font-weight:600;
    margin-top:-25px;
    background-image:url('../img/arrow_right_light.png');
    background-position:right 20px center;
    background-repeat:no-repeat;
    background-size:12px auto;
    cursor:pointer;
    transition:all 0.1s ease-in-out;
}

.notifications .notification .button:hover
{
    opacity:0.8;
}

.notifications .notification .seen
{

}

.notifications .notification .seen .customer
{
    width:auto;
    height:30px;
    border-radius:6px;
    line-height:30px;
    padding:0 7px 0 7px;
    font-size:11px;
    font-weight:600;
    margin-right:10px;
    background:rgba(30,34,39,0.05);
    display:table-cell;
}




.absence_message_holder
{
    position:absolute;
    left:0;
    top:0;
    width:100% !important;
    height:100vh !important;
    background:rgba(255,255,255,0.2);
}

.absence_message_holder .absence_message
{
    position:absolute;
    left:40px;
    top:50%;
    width:calc(100% - 80px) !important;
    height:auto !important;
    background:#fff;
    border-radius:15px;
    padding: 30px;
  box-shadow: 0 5px 20px 0 rgb(0 0 0 / 8%), 0 5px 40px 0 rgb(0 0 0 / 8%);
  font-size:16px;
  line-height:25px;
  font-weight:500;
  text-align:center;
  transform:translateY(-50%);
}








.working_hours
{
    margin:0 0 10px 0;
}

.working_hours .item
{
    width:16.6666%;
    line-height:25px;
    font-weight:300;
    text-align:left;
    font-size:17px;
}






.customform
{
    padding: 40px 40px 30px 40px;
  box-shadow: 0 1px 1px 0 rgb(0 0 0 / 8%), 0 1px 16px 0 rgb(0 0 0 / 8%);
  background: #fff;
  border-radius: 14px;
}

.customform .form_header
{
    line-height:25px;
    font-weight:700;
    text-align:left;
    font-size:20px;
    margin:0 0 5px 0;
}

.customform .form_timestamp
{
    line-height:20px;
    font-weight:400;
    text-align:left;
    font-size:14px;
    margin:0 0 50px 0;
    opacity:0.4;
}

.customform .form_patient
{
    width:auto;
    padding:30px;
    border:2px solid rgba(30,34,39,0.2);
    line-height:25px;
    font-weight:400;
    text-align:left;
    font-size:16px;
    margin:0 0 20px 0;
}

.customform .form_question
{
    line-height:25px;
    font-weight:700;
    text-align:left;
    font-size:16px;
    margin:30px 0 5px 0;
}

.customform .form_answer
{
    line-height:25px;
    font-weight:400;
    text-align:left;
    font-size:16px;
    margin:0 0 10px 0;
}





.jobform
{
    padding: 40px 40px 30px 40px;
  box-shadow: 0 1px 1px 0 rgb(0 0 0 / 8%), 0 1px 16px 0 rgb(0 0 0 / 8%);
  background: #fff;
  border-radius: 14px;
}

.jobform .form_header
{
    line-height:25px;
    font-weight:700;
    text-align:left;
    font-size:20px;
    margin:0 0 5px 0;
}

.jobform .form_timestamp
{
    line-height:20px;
    font-weight:400;
    text-align:left;
    font-size:14px;
    margin:0 0 50px 0;
    opacity:0.4;
}

.jobform .form_patient
{
    width:auto;
    padding:30px;
    border:2px solid rgba(30,34,39,0.2);
    line-height:25px;
    font-weight:400;
    text-align:left;
    font-size:16px;
    margin:0 0 20px 0;
}

.jobform .form_question
{
    line-height:25px;
    font-weight:700;
    text-align:left;
    font-size:16px;
    margin:30px 0 5px 0;
}

.jobform .form_answer
{
    line-height:25px;
    font-weight:400;
    text-align:left;
    font-size:16px;
    margin:0 0 10px 0;
}






.video_holder
{
    padding:10px;
    box-shadow: 0 50px 100px -20px rgb(50 50 93 / 25%), 0 30px 60px -30px rgb(0 0 0 / 30%);
    background:#fff;
    border-radius:13px;
    overflow:hidden;
}





.video_link_box
{
    padding:30px 30px 30px 150px;
    box-shadow: 0 50px 100px -20px rgb(50 50 93 / 25%), 0 30px 60px -30px rgb(0 0 0 / 30%);
    background:#fff;
    border-radius:13px;
    overflow:hidden;
    cursor:pointer;
    transition:all 0.1s ease-in-out;
}

.video_link_box:hover
{
    box-shadow: 0 50px 100px -20px rgb(50 50 93 / 35%), 0 30px 60px -30px rgb(0 0 0 / 40%);
    transform:scale(1.01);
}

.video_link_box .thumbnail
{
    position:absolute;
    left:0px;
    top:0px;
    width:120px;
    height:100%;
    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
}

.video_link_box .thumbnail:before
{
    content:"";
    display:block;
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.2) url('../img/play_icon_light.png') center center no-repeat;
    background-size:30px auto;
}

.video_link_box .title
{
    line-height:20px;
    font-size:18px;
    font-weight:700;
}









.onboarding_demo_holder
{
    width:calc(100% + 40px);
}

.onboarding_demo_holder .demo
{
    width:calc(50% - 40px);
  box-shadow: 0 0 1px 0 rgb(0 0 0 / 8%), 0 1px 4px 0 rgb(0 0 0 / 12%);
    border-radius:13px;
    margin:0 20px 0 20px;
    background:#fff;
}

.onboarding_demo_holder .demo:before
{
    content:"";
    display:block;
    padding-top:60%;
}

.onboarding_demo_holder .demo .background
{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:#fff;
    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
    opacity:0.4;
    border-radius:13px;x
}

.onboarding_demo_holder .demo .label
{
    position:absolute;
    left:0;
    top:50%;
    height:auto;
    line-height:30px;
    font-size:18px;
    text-align:center;
    font-weight:700;
    transform:translate(0,-50%);
}

.onboarding_demo_holder .demo .label span
{
    width:auto;
    height:inherit;
    line-height:inherit;
    font-size:16px;
    color:inherit;
    font-weight:800;
    display:inline;
    float:none;
    text-transform:uppercase;
}






.onboarding_info_box
{
    max-width:600px;
    padding:30px;
    box-shadow: 0 1px 1px 0 rgb(0 0 0 / 8%), 0 1px 16px 0 rgb(0 0 0 / 8%);
    background:#fff;
    border-radius:14px;
    cursor:pointer;
    transition:all 0.1s ease-in-out;
}

.onboarding_info_box:hover
{
    box-shadow: 0 5px 30px -10px rgb(50 50 93 / 25%), 0 7px 20px -10px rgb(0 0 0 / 30%);
    transform:translate(-50%,0) scale(1.01) !important;
}

.onboarding_info_box .label
{
    position:absolute;
    left:7px;
    top:7px;
    height:46px;
    width:46px;
    font-size:16px;
    font-weight:700;
    line-height:46px;
    border-radius:8px;
    text-align:center;
}

.onboarding_info_box.openable
{
    height:60px;
    overflow:hidden;
}

.onboarding_info_box.open
{
    height:auto !important;
}

.onboarding_info_box.openable .trigger_button
{
    position:absolute;
    right:0;
    top:0;
    width:60px;
    height:60px;
    background:url('../img/arrow_right_dark.png') center center no-repeat;
    background-size:12px auto;
    transform:rotate(90deg);
    z-index:99999;
    cursor:pointer;
}

.onboarding_info_box.open .trigger_button
{
    position:absolute;
    right:0;
    top:0;
    width:60px;
    height:60px;
    background:url('../img/arrow_right_dark.png') center center no-repeat;
    background-size:12px auto;
    transform:rotate(-90deg);
    z-index:99999;
    cursor:pointer;
}

.onboarding_info_box_title
{
    position:absolute;
    left:0;
    top:0;
    height:60px;
    line-height:60px;
    font-size:16px;
    font-weight:700;
    text-align:center;
}

.onboarding_info_box_text
{
    line-height:25px;
    font-size:17px;
    font-weight:400;
    text-align:center;
    color:rgba(30,34,39,0.4);
}

.onboarding_info_box_code
{
    width:auto;
    padding:15px;
    background:rgba(30,34,39,0.05);
    border:1px solid rgba(30,34,39,0.1);
    color:rgba(30,34,39,0.6);
    line-height:22px;
    font-size:14px;
    font-weight:400;
    text-align:center;
    border-radius:8px;
}

.onboarding_info_box_text span
{
    width:auto;
    height:inherit;
    line-height:inherit;
    font-size:inherit;
    color:inherit;
    font-weight:800;
    display:inline;
    float:none;
}

.onboarding_video_link_box
{
    max-width:600px;
    padding:20px 20px 20px 120px;
    box-shadow: 0 1px 1px 0 rgb(0 0 0 / 8%), 0 1px 16px 0 rgb(0 0 0 / 8%);
    background:#fff;
    border-radius:14px;
    overflow:hidden;
    cursor:pointer;
    transition:all 0.1s ease-in-out;
}

.onboarding_video_link_box:hover
{
    box-shadow: 0 5px 30px -10px rgb(50 50 93 / 25%), 0 7px 20px -10px rgb(0 0 0 / 30%);
    transform:translate(-50%,0) scale(1.01) !important;
}

.onboarding_video_link_box .thumbnail
{
    position:absolute;
    left:0px;
    top:0px;
    width:90px;
    height:100%;
    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
}

.onboarding_video_link_box .thumbnail:before
{
    content:"";
    display:block;
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.2) url('../img/play_icon_light.png') center center no-repeat;
    background-size:30px auto;
}

.onboarding_video_link_box .title
{
    line-height:20px;
    font-size:15px;
    font-weight:700;
}





.image_banner
{
    width: 60%;
    height:120px;
    box-shadow: 0 50px 100px -20px rgb(50 50 93 / 25%), 0 30px 60px -30px rgb(0 0 0 / 30%);
    border-radius: 18px;
    background-color:#fff !important;
    background-size:70% auto !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
    margin: 0;
}





.encrypted_attachment
{
        cursor:pointer;
}






.consent_confirmation
{
        width:auto;
        padding:0 0 0 30px;
}

.consent_confirmation .consent_confirmation_checkbox
{
        position:absolute;
        left:0;
        top:0;
        width:20px;
        height:20px;
        background:transparent !important;
        border:1px solid rgba(30,34,39,0.4);
        border-radius:25%;
}

.consent_confirmation .consent_confirmation_checkbox:checked
{
        background:rgba(30,34,39,0.05) url('../img/check_icon_dark.png') center center no-repeat !important;
        background-size:50% auto !important;
}

.consent_confirmation .consent_confirmation_label
{
        width:auto;
        font-size:12px;
        line-height:20px;
        font-weight:500;
        color:rgba(30,34,39,0.4);
}

.consent_confirmation .consent_confirmation_label a
{
        float:none;
        display:inline;
        width:auto;
        font-size:inherit;
        line-height:inherit;
        font-weight:600;
        color:rgba(30,34,39,0.5);
}








.content_logo
{
    width:auto;
    height:50px;
} 

.content_logo .logo
{
    width:160px;
    height:40px;
    background-size:cover !important;
    background-repeat:no-repeat !important;
    background-position:center center !important;
} 

.content_logo .logo_separator
{
    width:2px;
    height:40px;
    background:rgba(30,34,39,0.2);
    margin:0 16px 0 16px;
} 




.safe_patient_contact
{
    display:none;
}





.form_progress
{
    width:200px;
    height:20px;
}

.form_progress .bar
{
    position:absolute;
    top:8px;
    width:25%;
    height:4px;
    background:#F6F6F6;
}

.form_progress .bar.second
{
    left:25%;
}

.form_progress .bar.third
{
    left:50%;
}

.form_progress .bar.fourth
{
    left:75%;
}

.form_progress .step
{
    position:absolute;
    top:3px;
    width:14px;
    height:14px;
    transform:translateX(-50%);
    border-radius:50%;
    background:#F6F6F6;
}

.form_progress .step.second
{
    left:25%;
}

.form_progress .step.third
{
    left:50%;
}

.form_progress .step.fourth
{
    left:75%;
}

.form_progress .step.fifth
{
    left:100%;
}


.checklist_play_box 
{
    padding: 20px 20px 20px 80px;
    box-shadow: 0 1px 1px 0 rgb(0 0 0 / 8%), 0 1px 16px 0 rgb(0 0 0 / 8%);
    background: #fff;
    border-radius: 14px;
    background:url('../img/play_icon_dark.png') left 20px center no-repeat;
    background-size:24px auto;
    cursor:pointer;
}

.checklist_left
{
    position:absolute;
    left:40px;
    top:50%;
    transform:translateY(-50%);
}

.checklist_right
{
    margin-left:70px;
    width:calc(100% - 380px);
}

.checklist_video
{
    max-width:500px;
    padding:10px;
    box-shadow:0 1px 1px 0 rgb(0 0 0 / 8%), 0 1px 16px 0 rgb(0 0 0 / 8%);
    background:#fff;
    border-radius:14px;
}

.checklist_video_mini
{
    position:absolute;
    right:40px;
    top:50%;
    max-width:140px;
    padding:5px;
    box-shadow:0 1px 1px 0 rgb(0 0 0 / 8%), 0 1px 16px 0 rgb(0 0 0 / 8%);
    background:#fff;
    border-radius:11px;
    transform:translateY(-50%);
    pointer-events:none;
}

.checklist_video_small
{
    position:absolute;
    right:40px;
    top:50%;
    max-width:260px;
    padding:5px;
    box-shadow:0 1px 1px 0 rgb(0 0 0 / 8%), 0 1px 16px 0 rgb(0 0 0 / 8%);
    background:#fff;
    border-radius:11px;
    transform:translateY(-50%);
}

.checklist_headline
{
    line-height:30px;
    font-weight:800;
    text-align:left;
    font-size:21px;
}

.checklist_text
{
    line-height:24px;
    font-weight:400;
    text-align:left;
    font-size:15px;
    color:rgba(30,34,39,0.6);
}

.checklist_info
{
    width:auto;
    line-height:24px;
    font-weight:400;
    text-align:left;
    font-size:15px;
    color:rgba(30,34,39,0.6);
    padding:12px 15px;
    border-radius:13px;
    background:rgba(30,34,39,0.1);
    margin-right:20px;
}

.checklist_button
{
    height:40px;
    line-height:20px;
    padding:10px 15px 10px 15px;
    margin:0 0 20px 0;
    font-weight:800;
    text-align:center;
    font-size:15px;
    background:#CFC8B8;
    cursor:pointer; 
    border-radius:5px;
    color:#fff;
    box-shadow: 0 0 1px 0 rgb(0 0 0 / 8%), 0 1px 4px 0 rgb(0 0 0 / 12%);
    text-overflow: ellipsis;
    overflow: hidden; 
    white-space: nowrap;
}

.checklist_button:hover
{
    opacity:0.9;
}




.demo_customer_color
{
    position:absolute;
    left:20px;
    top:12px;
    width:5px;
    height:calc(100% - 24px);
}












.academy_content
{
    width:calc(100% + 40px);
}

.academy_content .row
{
    width:calc(100% + 40px);
}

.academy_content .block
{
    padding:30px;
    border-radius:13px;
    box-shadow: 0 1px 1px 0 rgb(0 0 0 / 8%), 0 1px 16px 0 rgb(0 0 0 / 8%);
    margin:20px;
    transition:all 0.1s ease-in-out;
    cursor:pointer;
}

.academy_content .block:hover
{
    transform:scale(1.02);
}

.academy_content .block_100
{
    width:calc(100% - 40px);
}

.academy_content .block_50
{
    width:calc(50% - 40px);
}

.academy_content .block_33
{
    width:calc(33.3333% - 40px);
}

.academy_content .block_25
{
    width:calc(25% - 40px);
}

.academy_content .block_66
{
    width:calc(66.6666% - 40px);
}

.academy_content .block .background
{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    border-radius:13px;
    background:url('../img/landingpage_hero') center center no-repeat;
    background-size:cover !important;
}

.academy_content .block .background:before
{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0);
    border-radius:13px;
}

.academy_content .block .play_placeholder
{
    height:100px;
    background:url('../img/play_icon_dark.png') center center no-repeat;
    background-size:40px auto !important;
}

.academy_content .block .image
{
    height:100px;
    background-color:rgba(0,0,0,0.1);
}





.blob_background
{
    position:absolute;
    left:50%;
    top:50%;
    width:100vw;
    height:150%;
    transform:translate(-50%,-50%);
    overflow:hidden;
}

.blob_background_content
{
    position:absolute;
    left:50%;
    top:50%;
    height:100%;
    transform:translate(-50%,-50%);
    max-width:700px;
    width:90vw;
}


.blob_background .blob_background_left
{
    position:absolute;
    left:50%;
    top:40%;
    width:80%;
    box-shadow:inset 0 0 0 1px rgba(30, 34, 39,0.05);
    border-radius: 35% 65% 70% 30% / 57% 47% 53% 43%;
    transform-origin:center;
    transform:scale(0.9999) rotate(0deg) translate(-50%,-50%);
    margin-left:-50vw;
    overflow:hidden;
}

.blob_background .blob_background_left_second
{
    position:absolute;
    left:50%;
    top:30%;
    width:40%;
    border-radius: 35% 65% 70% 30% / 57% 47% 53% 43%;
    transform-origin:center;
    transform:scale(0.9999) rotate(10deg) translate(-50%,-50%);
    margin-left:-30vw;
    overflow:hidden;
}

.blob_background .blob_background_left_third
{
    position:absolute;
    left:50%;
    top:50%;
    width:25%;
    box-shadow:inset 0 0 0 1px rgba(30, 34, 39,0.05);
    border-radius: 35% 65% 70% 30% / 57% 47% 53% 43%;
    transform-origin:center;
    transform:scale(0.9999) rotate(10deg) translate(-50%,-50%);
    margin-left:-35vw;
    overflow:hidden;
}

.blob_background .blob_background_left_second .contained_video
{
    position:absolute;
    left:50%;
    top:50%;
    width:200%;
    height:120%;
    transform:translate(-50%,-50%) rotate(-10deg);
    opacity:0.3;
}

.blob_background .blob_background_right
{
    position:absolute;
    left:50%;
    top:60%;
    width:80%;
    box-shadow:inset 0 0 0 1px rgba(30, 34, 39,0.05);
    border-radius: 35% 65% 70% 30% / 57% 47% 53% 43%;
    transform-origin:center;
    transform:scale(0.9999) rotate(0deg) translate(-50%,-50%);
    margin-left:50vw;
    overflow:hidden;
}

.blob_background .blob_background_right_second
{
    position:absolute;
    left:50%;
    top:70%;
    width:40%;
    border-radius: 35% 65% 70% 30% / 57% 47% 53% 43%;
    transform-origin:center;
    transform:scale(0.9999) rotate(-10deg) translate(-50%,-50%);
    margin-left:30vw;
    overflow:hidden;
}

.blob_background .blob_background_right_third
{
    position:absolute;
    left:55%;
    top:45%;
    width:15%;
    box-shadow:inset 0 0 0 1px rgba(30, 34, 39,0.05);
    border-radius: 35% 65% 70% 30% / 57% 47% 53% 43%;
    transform-origin:center;
    transform:scale(0.9999) rotate(-10deg) translate(-50%,-50%);
    margin-left:30vw;
    overflow:hidden;
}

.blob_background .blob_background_right_second .contained_video
{
    position:absolute;
    left:50%;
    top:50%;
    width:200%;
    height:120%;
    transform:translate(-50%,-50%) rotate(10deg);
    opacity:0.3;
}

.blob_background .blob_background_left:before,.blob_background .blob_background_left_second:before,.blob_background .blob_background_left_third:before,.blob_background .blob_background_right:before,.blob_background .blob_background_right_second:before,.blob_background .blob_background_right_third:before
{
    content:"";
    display:block;
    padding-top:100%;
}


@media screen and (max-width: 800px) 
{  

    .blob_background .blob_background_left
    {
        position:absolute;
        left:50%;
        top:40%;
        width:100%;
        border-radius: 35% 65% 70% 30% / 57% 47% 53% 43%;
        transform-origin:center;
        transform:scale(0.9999) rotate(0deg) translate(-50%,-50%);
        margin-left:-70vw;
        overflow:hidden;
    }

    .blob_background .blob_background_left_second
    {
        position:absolute;
        left:50%;
        top:30%;
        width:40%;
        border-radius: 35% 65% 70% 30% / 57% 47% 53% 43%;
        transform-origin:center;
        transform:scale(0.9999) rotate(10deg) translate(-50%,-50%);
        margin-left:-40vw;
        overflow:hidden;
    }

    .blob_background .blob_background_left_third
    {
        position:absolute;
        left:50%;
        top:60%;
        width:25%;
        border-radius: 35% 65% 70% 30% / 57% 47% 53% 43%;
        transform-origin:center;
        transform:scale(0.9999) rotate(10deg) translate(-50%,-50%);
        margin-left:-40vw;
        overflow:hidden;
    }

    .blob_background .blob_background_right
    {
        position:absolute;
        left:50%;
        top:60%;
        width:100%;
        border-radius: 35% 65% 70% 30% / 57% 47% 53% 43%;
        transform-origin:center;
        transform:scale(0.9999) rotate(0deg) translate(-50%,-50%);
        margin-left:70vw;
        overflow:hidden;
    }

    .blob_background .blob_background_right_second
    {
        position:absolute;
        left:50%;
        top:70%;
        width:40%;
        border-radius: 35% 65% 70% 30% / 57% 47% 53% 43%;
        transform-origin:center;
        transform:scale(0.9999) rotate(-10deg) translate(-50%,-50%);
        margin-left:40vw;
        overflow:hidden;
    }

    .blob_background .blob_background_right_third
    {
        position:absolute;
        left:50%;
        top:40%;
        width:15%;
        border-radius: 35% 65% 70% 30% / 57% 47% 53% 43%;
        transform-origin:center;
        transform:scale(0.9999) rotate(-10deg) translate(-50%,-50%);
        margin-left:40vw;
        overflow:hidden;
    }

    .blob_background .problem .title 
    {
        line-height: 21px;
        font-size: 15px;
        font-weight: 500;
        color: #fff;
        white-space:nowrap;
    }
}









.problem_holder
{
    max-width:700px;
}

.problem_holder .problem
{
    left:50%;
    width:auto;
    padding:20px 20px 20px 60px;
    border-radius:17px;
    background:#AD1E20;
    background-image:url('../img/cancel_icon.png');
    background-position: left 20px center;
    background-repeat:no-repeat;
    background-size:24px auto;
    transform:translateX(-50%);
    margin-left:-5vw;
    box-shadow: 0 50px 40px -10px rgba(0, 0, 0, 0.3);
}

.problem_holder .problem:before 
{
    position: absolute;
    content:"";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 100%);
    border-radius:17px;
}

.problem_holder .problem.second
{
    margin-left:5vw;
}

.problem_holder .problem .title 
{
    line-height: 17px;
    font-size: 17px;
    font-weight: 500;
    color: #fff;
    white-space:nowrap;
}

@media screen and (max-width: 800px) 
{  
    .problem_holder .problem .title 
    {
        line-height: 21px;
        font-size: 15px;
        font-weight: 500;
        color: #fff;
        white-space:nowrap;
    }
}












.solution_holder
{
    max-width:700px;
}


.solution_holder .solution
{
    left:50%;
    width:auto;
    padding:20px 20px 20px 60px;
    border-radius:17px;
    background:rgba(255,255,255,1);
    background-image:url('../img/check_icon_color.png');
    background-position: left 20px center;
    background-repeat:no-repeat;
    background-size:24px auto;
    transform:translateX(-50%);
    margin-left:-5vw;
    box-shadow: 0 50px 40px -10px rgba(0, 0, 0, 0.3);
}

.solution_holder .solution:before 
{
    position: absolute;
    content:"";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255,255,255,0.2) 100%);
    border-radius:17px;
}

.solution_holder .solution.second
{
    margin-left:5vw;
}

.solution_holder .solution .title 
{
    line-height: 17px;
    font-size: 17px;
    font-weight: 500;
    color:#1e2227;
    white-space:nowrap;
}

@media screen and (max-width: 800px) 
{  
    .solution_holder .solution .title 
    {
        line-height: 21px;
        font-size: 15px;
        font-weight: 500;
        color:#1e2227;
        white-space:nowrap;
    }
}
















.result_holder
{
    max-width:700px;
}

.result_holder .result
{
    left:50%;
    width:auto;
    padding:20px 20px 20px 60px;
    border-radius:17px;
    background:#345043;
    background-image:url('../img/cancel_icon.png');
    background-position: left 20px center;
    background-repeat:no-repeat;
    background-size:24px auto;
    transform:translateX(-50%);
    margin-left:-5vw;
    box-shadow: 0 50px 40px -10px rgba(0, 0, 0, 0.3);
}

.result_holder .result:before 
{
    position: absolute;
    content:"";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 100%);
    border-radius:17px;
}

.result_holder .result.second
{
    margin-left:5vw;
}

.result_holder .result .title 
{
    line-height: 17px;
    font-size: 17px;
    font-weight: 500;
    color: #fff;
    white-space:nowrap;
}

@media screen and (max-width: 800px) 
{  
    .result_holder .result .title 
    {
        line-height: 21px;
        font-size: 15px;
        font-weight: 500;
        color: #fff;
        white-space:nowrap;
    }
}









.testimonial_holder
{
    max-width:900px;
}

.testimonial_holder .testimonial
{
    left:50%;
    width:auto;
    max-width:80%;
    padding:30px 30px 30px 130px;
    border-radius:31px;
    background:#fff;
    transform:translateX(-50%);
    margin-left:-5vw;
    box-shadow: 0 40px 40px -10px rgba(0, 0, 0, 0.1);
    transition:all 0.1s ease-in-out;
}

.testimonial_holder .testimonial:hover
{
    transform:translateX(-50%) scale(1.01);
    box-shadow: 0 40px 40px -10px rgba(0, 0, 0, 0.2);
}

.testimonial_holder .testimonial.second
{
    margin-left:5vw;
}

.testimonial_holder .testimonial .text
{
    line-height: 23px;
    font-size: 15px;
    font-weight: 400;
    color: #1e2227;
}

.testimonial_holder .testimonial .name
{
    line-height: 21px;
    font-size: 15px;
    font-weight: 700;
    color:#1e2227;
    opacity:0.4;
}

.testimonial_holder .testimonial .profession
{
    line-height: 21px;
    font-size: 15px;
    font-weight: 400;
    color: #1e2227;
    opacity:0.4;
}

.testimonial_holder .testimonial .avatar
{
    position:absolute;
    left:-20px;
    top:50%;
    width:120px;
    height:120px;
    margin-top:-60px;
    border-right:7px solid #cfc8b8;
    box-shadow:0 -20px 30px -5px rgba(0,0,0,0.2);
}

.testimonial_holder .testimonial .avatar .contained_video
{
    position:absolute;
    left:50%;
    top:50%;
    width:160%;
    height:100%;
    transform:translate(-55%,-50%);
}

.testimonial_holder .testimonial .avatar .ux_play_overlay 
{ 
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.2) url(../img/play_icon_light.png) center center no-repeat;
    background-size: 30px auto;
}

.testimonial_holder .testimonial .avatar .ux_view_overlay 
{ 
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.2) url(../img/view_icon_light.png) center center no-repeat;
    background-size: 30px auto;
}

@media screen and (max-width: 800px) 
{

    .testimonial_holder .testimonial
    {
        padding:130px 30px 30px 30px;
    }

    .testimonial_holder .testimonial .avatar
    {
        position:absolute;
        left:50%;
        top:-20px;
        width:120px;
        height:120px;
        margin-left:-60px;
        margin-top:0;
    }

    .testimonial_holder .testimonial .text
    {
        text-align:center;
    }

    .testimonial_holder .testimonial .name
    {
        text-align:center;
    }

    .testimonial_holder .testimonial .profession
    {
        text-align:center;
    }

}












.system_features
{

}

.system_features .system_features_column
{
    width:33.3333%;
    margin:0 33.3333% 0 0;
}

.system_features .system_features_column.second
{
    margin:0;
}


@media screen and (max-width: 800px) 
{  
    .system_features_column
    {
        width:100% !important;
        margin:0 10% 0 10% !important;
    }
}




.system_features .system_circle_one
{
    position:absolute;
    left:50%;
    top:50%;
    transform:scale(0.9999) rotate(-10deg) translate(-50%,-50%);
    width:40%;
    border-radius: 35% 65% 70% 30% / 57% 47% 53% 43%;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,0.4),inset 0 0 50px rgba(255,255,255,0.15);
}

@media screen and (max-width: 800px) 
{  
    .system_circle_one
    {
        display:none;
    }
}

.system_features .system_circle_one:before
{
    content:"";
    padding-top:100%;
    display:block;
}


.system_features .system_circle_two
{
    position:absolute;
    left:50%;
    top:50%;
    transform:scale(0.9999) rotate(-10deg) translate(-50%,-50%);
    width:55%;
    border-radius: 35% 65% 70% 30% / 57% 47% 53% 43%;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,0.3),inset 0 0 50px rgba(255,255,255,0.1);
}

@media screen and (max-width: 800px) 
{  
    .system_circle_two
    {
        display:none;
    }
}

.system_features .system_circle_two:before
{
    content:"";
    padding-top:100%;
    display:block;
}


.system_features .system_circle_three
{
    position:absolute;
    left:50%;
    top:50%;
    transform:scale(0.9999) rotate(-10deg) translate(-50%,-50%);
    width:70%;
    border-radius: 35% 65% 70% 30% / 57% 47% 53% 43%;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,0.2),inset 0 0 50px rgba(255,255,255,0.05);
}

@media screen and (max-width: 800px) 
{  
    .system_circle_three
    {
        display:none;
    }
}

.system_features .system_circle_three:before
{
    content:"";
    padding-top:100%;
    display:block;
}




.system_features .system_mockup
{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:30%;
    background:#fff;
    border-radius:43px;
    box-shadow: 0 60px 60px -30px rgba(0,0,0,0.2), inset 0 0 10px rgba(30, 34, 39, 0.2);
}

@media screen and (max-width: 800px) 
{  
    .system_mockup
    {
        top:auto;
        position:relative !important;
        width:80% !important;
        transform:translate(-50%,0) !important;
        margin:60px 0 60px 0 !important;
    }
}

.system_features .system_mockup:before
{
    content:"";
    padding-top:180%;
    display:block;
}

.system_features .system_mockup_image
{
    position:absolute;
    left:10px;
    top:10px;
    width:calc(100% - 20px);
    height:calc(100% - 20px);
    background:url('../img/mockup_or.png') center center no-repeat;
    background-size:cover;
    border-radius:34px;
}

.system_features .system_feature
{
    padding:20px 20px 20px 70px;
    background:#fff;
    border-radius:23px;
    margin-bottom:30px;
    width:80%;
    box-shadow: 0px 6px 13px rgba(145, 145, 145, 0.2);
}

.system_features .system_feature.moved_in
{
    margin-left:10%;
}

.system_features .system_features_column.second .system_feature.moved_in
{
    margin-right:10%;
}

.system_features .system_features_column.second .system_feature
{
    float:right;
}

@media screen and (max-width: 800px) 
{ 
    .system_features .system_features_column.second .system_feature
    {
        float:left;
    }

    .system_features .system_feature.moved_in
    {
        margin-left:0;
    }

    .system_features .system_features_column.second .system_feature.moved_in
    {
        margin-right:0;
    }
}

.system_features .system_feature .icon
{
    position:absolute;
    left:25px;
    top:50%;
    width:24px;
    height:24px;
    background-size:cover !important;
    background-repeat:no-repeat !important;
    background-position:center center !important;
    margin:-12px 0 0 0;
}

.system_features .system_feature .line
{
    position:absolute;
    left:100%;
    top:50%;
    width:31%;
    height:1px;
    margin-top:-1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 100%);
}

.system_features .system_features_column.second .system_feature .line
{
    position:absolute;
    left:0;
    top:50%;
    width:31%;
    height:1px;
    margin-top:-1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.4) 100%);
    transform:translateX(-100%);
}

@media screen and (max-width: 800px) 
{  
    .system_features .system_feature .line
    {
        display:none;
    }
}



.system_features .system_feature .title
{
    line-height: 21px;
    font-size: 15px;
    font-weight: 600;
    width:auto;
}