@font-face
{
    font-family: 'open-sans';
    src: url('//shared.careme.loc/fonts/open-sans/open-sans-light.woff2') format('woff2'),
    url('//shared.careme.loc/fonts/open-sans/open-sans-light.woff') format('woff'),
    url('//shared.careme.loc/fonts/open-sans/open-sans-light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face
{
    font-family: 'open-sans';
    src: url('//shared.careme.loc/fonts/open-sans/open-sans-regular.woff2') format('woff2'),
    url('//shared.careme.loc/fonts/open-sans/open-sans-regular.woff') format('woff'),
    url('//shared.careme.loc/fonts/open-sans/open-sans-regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face
{
    font-family: 'open-sans';
    src: url('//shared.careme.loc/fonts/open-sans/open-sans-semibold.woff2') format('woff2'),
    url('//shared.careme.loc/fonts/open-sans/open-sans-semibold.woff') format('woff'),
    url('//shared.careme.loc/fonts/open-sans/open-sans-semibold.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
*:where(:not(html, iframe, canvas, img, svg, video):not(svg *, symbol *))
{
    all: unset;
    display: revert;
}

*, *::before, *::after
{
    box-sizing: border-box;
}

a, button
{
    cursor: pointer;
}

ol, ul, menu
{
    list-style: none;
}

/* revert the 'white-space' property for textarea elements on Safari */
textarea
{
    white-space: revert;
}

/* reset default text opacity of input placeholder */
::placeholder
{
    color: unset;
}
html, body
{
    padding: 0;
    margin: 0;
}

body
{
    overflow-y: scroll;
}

svg.icon
{
    stroke-width: 2;
}

#templateSet
{
    display: none;
}

#svgSet
{
    width:0;
    height:0;
    overflow:hidden
}

:root
{
    --careme-color-blue-005: rgba(17, 119, 204, 0.05);
}

.pt20
{
    padding-top: 20px;
}

.pl10
{
    padding-left: 10px;
}

.pb20
{
    padding-bottom: 20px;
}


.w90
{
    width: 90px;
}

.w100
{
    width: 100px;
}

.w110
{
    width: 110px;
}

.w120
{
    width: 120px;
}

.w150
{
    width: 150px;
}

.w280
{
    width: 280px;
}

.w300
{
    width: 300px;
}

.w100p
{
    width: 100%;
}
body
{
    min-height: 100vh;
    font-family: 'open-sans', sans-serif;
    font-weight: 300;
    color: #000000;
    background: #F4F4F8;
    letter-spacing: 0;
    position: relative;

}

body.single,
body.sideLeft,
body.sideRight
{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 70px 1fr 20px 50px;
    grid-template-areas: '.' 'm' '.' 'f';
}

body.single.breadcrumbs,
body.sideLeft.breadcrumbs,
body.sideRight.breadcrumbs
{
    grid-template-rows: 50px 40px 1fr 20px 50px;
    grid-template-areas: '.' 'b' 'm' '.' 'f';
}

@media (min-width: 440px)
{
    body.single,
    body.sideLeft,
    body.sideRight
    {
        grid-template-columns: 20px 1fr 20px;
        grid-template-areas: '. . .' '. m . ' '. . .' 'f f f';
    }

    body.single.breadcrumbs,
    body.sideLeft.breadcrumbs,
    body.sideRight.breadcrumbs
    {
        grid-template-rows: 50px 40px 1fr 20px 50px;
        grid-template-areas: '. . .' '. b .' '. m .' '. . .' 'f f f';
    }
}

@media (min-width: 1200px)
{
    body.single
    {
        grid-template-columns: 1fr 1160px 1fr;
    }

    body.sideLeft
    {
        grid-template-columns: 1fr 240px 20px 900px 1fr;
        grid-template-areas: '. . . . .' '. s . m .' '. . . . .' 'f f f f f';
    }

    body.sideRight
    {
        grid-template-columns: 1fr 900px 20px 240px 1fr;
        grid-template-areas: '. . . . .' '. m . s .' '. . . . .' 'f f f f f';
    }

    body.single.breadcrumbs
    {
        grid-template-areas: '. . .' '. b .' '. m .' '. . .' 'f f f';
    }

    body.sideLeft.breadcrumbs
    {
        grid-template-areas: '. . . . .' '. b b b .' '. s . m .' '. . . . .' 'f f f f f';
    }

    body.sideRight.breadcrumbs
    {
        grid-template-areas: '. . . . .' '. b b b .' '. m . s .' '. . . . .' 'f f f f f';
    }
}

body > .main
{
    grid-area: m;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

body > .main > div.block
{
    background: #FFFFFF;
    padding: 20px;
    flex-grow: 0;
}

body > .main > div.block.fullHeight
{
    flex-grow: 1;
}

body > .sidebar
{
    display: none;
    grid-area: s;
    background: #FFFFFF;
    padding: 20px
}

@media (min-width: 1200px)
{
    body > .sidebar
    {
        display: block;
    }
}
body > .main > .block > .blockSeparator
{
    height: 40px;
    padding: 20px 0 19px 0;

}

body > .main > .block > .blockSeparator:after
{
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    border-top: 1px dotted #CCCCCC;
}
body > .main > .block .titleGroup
{
    display: flex;
}

body > .main > .block .titleGroup[data-level='1']
{
    height: 50px;
    padding-bottom: 20px;
    gap: 10px;
}

body > .main > .block .titleGroup[data-level='1'] h1
{
    height: 30px;
    padding: 5px 0 6px 0;
    flex-grow: 1;
    font: 300 normal 24px/19px 'open-sans';
    color: #333333;
}

body > .main > .block .titleGroup[data-level='3']
{
    padding-bottom: 20px;
}

body > .main > .block .titleGroup h3
{
    height: 20px;
    padding-top: 5px;
    font: 300 normal 20px/15px 'open-sans';
    flex-grow: 1;
}

body > .main > .block .titleGroup > .linkSet
{
    display: flex;
    height: 20px;
    padding-top: 10px;
}

body > .main > .block .titleGroup > .linkSet a
{
    display: flex;
    font: 400 normal 13px/10px 'open-sans';
    color: #1177CC;
}

body > .main > .block .titleGroup > .linkSet a:before
{
    content: '';
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 2px;
    background-color: #888888;
    margin: 4px 8px;
}

body > .main > .block .titleGroup > .linkSet a:first-child:before
{
    content: none;
}
#garret
{
    position: fixed;

    display: grid;
    grid-template-columns: 1fr 920px 60px 180px 1fr;
    grid-template-rows: 50px;
    grid-template-areas: '. l n u .';

    z-index: 10;
    height: 50px;
    width: 100%;
    left: 0;
    top: 0;

    background: #FFFFFF;
    color: #333333;
    align-items: center;
    box-shadow: 0 4px 8px 0 rgba(51, 51, 51, 0.1);

}

#garret .left
{
    display: flex;
    gap: 10px;
    grid-area: l;
    width: 100%;
    height: 100%;
}

#garret .left .logo
{
    width: 40px;
    height: 40px;
    margin: 5px 5px;
    stroke: #444444;
    stroke-width: 1;
    cursor: pointer;
}

#garret .left .label
{
    margin-top: 20px;
    color: #444444;
    font: normal 500 16px/10px 'open-sans';
    text-transform: uppercase;
}

#garret .notify
{
    grid-area: n;
    width: 100%;
    height: 100%;
    position: relative;
}

#garret .notify > svg
{
    margin: 15px 0 0 7px;
    width: 24px;
    height: 24px;
    stroke: #CCCCCC;
    stroke-width: 2;
}

#garret .notify > svg.authedIs
{
    stroke: #333333;
    cursor: pointer;
}

#garret .notify > div
{
    display: none;
    position: absolute;
    top: 10px;
    left: 21px;
    height: 15px;
    border-radius: 7px;
    padding: 2px 4px 0 4px;
    color: #FFFFFF;
    background: #DD4433;
    font: normal 500 10px/10px 'open-sans';
    cursor: pointer;
}

#garret .notify > div.overflow,
#garret .notify > div.counter
{
    display: block;
}

#garret .user
{
    grid-area: u;
    display: flex;
    gap: 10px;
    width: 100%;
    height: 100%;
}

#garret .user .avatar
{
    cursor: pointer;
}

#garret .user .avatar.noMedia
{
    width: 40px;
    height: 40px;
    border-radius: 20px;
    margin-top: 5px;
    padding-top: 14px;
    background: rgba(17, 119, 204, 0.20);
    border: 1px solid  #1177CC;
    font: normal 400 16px/10px 'open-sans';
    text-align: center;
    color: #333333;
}

#garret .user .anon
{
    width: 40px;
    height: 40px;
    margin-top: 5px;
    border-radius: 20px;
    cursor: pointer;
    fill: rgba(17, 119, 204, 0.75);
}


#garret .user .anon:hover
{
    fill: rgba(17, 119, 204, 1.0);
}

#garret .user .shortName
{
    font: normal 400 13px/10px 'open-sans';
    color: #333333;
    margin: 20px 0;
    cursor: pointer;
}

#garret .user .shortName.isEmpty
{
    font-style: italic;
    color: #888888;
    cursor: pointer;
}

#garret .user .auth
{
    font: normal 400 13px/10px 'open-sans';
    color: #333333;
    margin: 20px 0;
    cursor: pointer;
}
body > .sidebar .menuItem
{
    display: flex;
    padding: 10px 0;
    gap: 5px;
}

body > .sidebar .menuItem.link span
{
    font: normal 400 13px/10px 'open-sans';
    color: #CCCCCC;
}

body > .sidebar .menuItem.link a
{
    font: normal 400 13px/10px 'open-sans';
    color: #333333;
}

body > .sidebar .menuItem.link a:hover
{
    color: #1177CC;
}

body > .sidebar .menuItem.link.isActive a
{
    font-weight: 500;
    color: #1177CC;
}

body > .sidebar .menuItem.link svg
{
    display: block;
    width: 16px;
    height: 16px;
    margin: -3px 0;
    fill: #CCCCCC;
    stroke: #444444;
    stroke-width: 1px;

}

body > .sidebar .menuItem.link.isActive svg
{
    fill: #1177CC;
    stroke: #1177CC;
}

body > .sidebar .menuItem .badge
{
    height: 15px;
    margin: -1px 0 -4px 0;
    padding: 1px 3px 0 3px;
    border-radius: 7px;
    font: normal 500 10px/10px 'open-sans';
    background-color: #DD4433;
    color: #FFFFFF;
}

body > .sidebar .menuItem .badge.none
{
    display: none;
}
body > footer
{
    grid-area: f;
    background: #333333;
    display: grid;
    align-items: center;
    text-align: center;
}

body > footer > .smm
{
    margin: 7px auto;
    height: 36px;
    display: flex;
    gap: 20px;
}

body > footer > .smm > a
{
    opacity: 0.9;
    transition: opacity 0.2s;
}

body > footer > .smm > a:hover
{
    opacity: 1.0;
}

body > footer > .smm > a > svg
{
    display: block;
    width: 36px;
    height: 36px;
}
body > .main > .block > h1
{
    height: 20px;
    text-wrap: none;
    padding-top: 1px;
    font: normal 300 24px/19px 'open-sans';
}

body > .main > .block > h2
{
    height: 20px;
    text-wrap: none;
    padding-top: 3px;
    font: normal 300 22px/17px 'open-sans';
}

body > .main > .block > h3
{
    height: 20px;
    text-wrap: none;
    padding-top: 5px;
    font: normal 300 20px/15px 'open-sans';
}

body > .main > .block > h1.mb20,
body > .main > .block > h2.mb20,
body > .main > .block > h3.mb20
{
    margin-bottom: 20px;
}

body > .main > .block > .text14multi
{
    padding-top: 5px;
    padding-bottom: 5px;
    font: normal 300 14px/20px 'open-sans'
}
careme-table careme-trow
{
    height: 30px;
}

careme-table careme-trow[data-mode='success']
{
    background-color: rgba(51, 170, 102, 0.05);
}

careme-table careme-trow[data-mode='warning']
{
    background-color: rgba(221, 136, 68, 0.05);
}

careme-table careme-trow[data-mode='alert']
{
    background-color: rgba(221, 68, 51, 0.05);
}

careme-table careme-trow[data-mode='inactive']
{
    background-color: rgba(204, 204, 204, 0.10);
}

careme-table careme-tcell
{
    height: 29px;
}

careme-table careme-tcell[data-look='icon']
{
    width: 20px;
    padding-top: 5px;
    stroke-width: 1px;
}

careme-table careme-tcell[data-look='icon'] > svg
{
    display: block;
    width: 18px;
    height: 18px;
}

careme-table careme-tcell[data-look='caption']
{
    flex-grow: 1;
}

careme-table careme-tcell[data-look='measure-info']
{
    display: flex;
}

careme-table careme-tcell[data-look='measure-info'] .quantity
{
    display: block;
    height: 10px;
    flex-grow: 1;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

careme-table careme-tcell[data-look='measure-info'] .unit
{
    display: block;
    height: 10px;
    padding-left: 5px;
    width: 35px;
}

careme-table careme-tcell[data-look='measure-info']:not([data-mode]),
careme-table careme-tcell[data-look='measure-info'][data-mode='default']
{
    color: #333333;
}

careme-table careme-tcell[data-look='measure-info'][data-mode='background']
{
    color: #888888;
    font-weight: 300;
}

careme-table careme-tcell[data-look='measure-info'][data-mode='success']
{
    color: #33AA66;
}

careme-table careme-tcell[data-look='measure-info'][data-mode='warning']
{
    color: #DD8844;
}

careme-table careme-tcell[data-look='measure-info'][data-mode='alert']
{
    color: #DD4433;
}

careme-table careme-tcell[data-look='caption'][data-mode='total']
{
    color: #333333;
    font-weight: 400;
}

careme-table careme-tcell[data-look='caption'][data-mode='total']
{
    color: #333333;
    font-weight: 400;
}

careme-table careme-tcell[data-look='actionSet']
{
    display: flex;
    gap: 5px;
    padding: 0;
}

careme-table careme-tcell[data-look='actionSet'].pl20
{
    padding-left: 20px;
}
careme-table[data-look='ribbon'] careme-trow
{
    padding: 0 10px 0 25px;
}

careme-table[data-look='ribbon'] careme-trow[data-mode='success']
{
    background-color: rgba(51, 170, 102, 0.05);
    padding-left: 5px;
}

careme-table[data-look='ribbon'] careme-trow[data-mode='warning']
{
    background-color: rgba(221, 136, 68, 0.05);
    padding-left: 5px;
}

careme-table[data-look='ribbon'] careme-trow[data-mode='alert']
{
    background-color: rgba(221, 68, 51, 0.05);
    padding-left: 5px;
}

careme-table[data-look='ribbon'] careme-tcell[data-look='caption']
{
    padding-left: 5px;
}
careme-button-down
{
    display: flex;
    height: 30px;
    padding: 0 9px 0 19px;
    gap: 5px;
    border-radius: 4px;
    font: normal 300 14px/10px 'open-sans';
    cursor: pointer;
}

careme-button-down:not([data-feel-look]),
careme-button-down[data-feel-look='default']
{
    background-color: rgba(17, 119, 204, 0.75);
    border: 1px solid rgba(17, 119, 204, 0.75);
    font-weight: 500;
    color: #FFFFFF;
}

careme-button-down[data-feel-look='cancel']
{
    background-color: rgba(17, 119, 204, 0.05);
    border: 1px solid rgba(17, 119, 204, 0.05);
    color: #444444;
}

careme-button-down[data-feel-look='elso']
{
    background-color: rgba(17, 119, 204, 0.05);
    border: 1px solid rgba(17, 119, 204, 0.75);
    color: #444444;
}

careme-button-down > .caption
{
    flex-grow: 1;
    padding-top: 9px;
    height: 10px;
}

careme-button-down > svg
{
    display: block;
    width: 16px;
    height: 28px;
    padding: 6px 0;
    stroke-width: 2.0;
    stroke: rgba(17, 119, 204, 0.75);
}
careme-button-orDown
{
    display: flex;
    height: 30px;
    border-radius: 4px;
    font: normal 300 14px/10px 'open-sans';
    cursor: pointer;
}

careme-button-orDown:not([data-feel-look]),
careme-button-orDown[data-feel-look='default']
{
    background-color: rgba(17, 119, 204, 0.75);
    border: 1px solid rgba(17, 119, 204, 0.75);
    font-weight: 500;
    color: #FFFFFF;
}

careme-button-orDown[data-feel-look='cancel']
{
    background-color: rgba(17, 119, 204, 0.05);
    border: 1px solid rgba(17, 119, 204, 0.05);
    color: #444444;
}

careme-button-orDown[data-feel-look='elso']
{
    background-color: rgba(17, 119, 204, 0.05);
    border: 1px solid rgba(17, 119, 204, 0.75);
    color: #444444;
}

careme-button-orDown > .caption
{
    flex-grow: 1;
    padding: 9px 10px 9px 19px;
    height: 28px;
}

careme-button-orDown > .down
{
    width: 29px;
    height: 28px;
    padding: 6px;
    border-left: 1px dotted rgba(17, 119, 204, 0.75);
}

careme-button-orDown > .down > svg
{
    display: block;
    width: 16px;
    height: 16px;
    stroke-width: 2.0;
    stroke: rgba(17, 119, 204, 0.75);
}
careme-button-simple
{
    display: flex;
    height: 30px;
    padding: 0 19px;
    gap: 5px;
    border-radius: 4px;
    font: normal 300 14px/10px 'open-sans';
    cursor: pointer;
}

careme-button-simple:not([data-feel-look]),
careme-button-simple[data-feel-look='default']
{
    background-color: rgba(17, 119, 204, 0.75);
    border: 1px solid rgba(17, 119, 204, 0.75);
    font-weight: 500;
    color: #FFFFFF;
}

careme-button-simple[data-feel-look='cancel']
{
    background-color: rgba(17, 119, 204, 0.05);
    border: 1px solid rgba(17, 119, 204, 0.05);
    color: #444444;
}

careme-button-simple[data-feel-look='elso']
{
    background-color: rgba(17, 119, 204, 0.05);
    border: 1px solid rgba(17, 119, 204, 0.75);
    color: #444444;
}

careme-button-simple > .caption
{
    flex-grow: 1;
    padding-top: 9px;
    height: 10px;
}
careme-button-switch
{
    width: 30px;
    height: 30px;
    padding: 5px;
    background-color: #888888;
    border-radius: 4px;
}

careme-button-switch > svg
{
    display: block;
    width: 20px;
    height: 20px;
    stroke-width: 1.5;
    stroke: #FFFFFF;
}
careme-cardSet
{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

careme-cardSet > careme-card
{
    position: relative;
    display: block;
    border: 1px solid #CCCCCC;
    border-radius: 5px;
}

careme-cardSet > careme-card:hover
{
    cursor: pointer;
    border-color: rgb(17, 153, 204, 0.50);
    background-color: rgb(17, 153, 204, 0.05);
}

careme-cardSet > careme-card[data-is-deleted='true']
{
    background-color: rgb(204, 204, 204, 0.2);
}

careme-cardSet > careme-card div.holder
{
    display: flex;
    justify-content: center;
    align-items: center;
}

careme-cardSet > careme-card > .holder.w280
{
    width: 278px;
}

careme-cardSet > careme-card > .holder.h210
{
    height: 210px;
}

careme-cardSet > careme-card[data-is-deleted='true'] > .holder img
{
    filter: saturate(0.0);
    mix-blend-mode: multiply;
}

careme-cardSet > careme-card:hover div.holder img
{
    mix-blend-mode: multiply;
}

careme-cardSet > careme-card div.name
{
    width: 100%;
    height: 50px;
    padding: 4px 9px 0 9px;
    text-align: center;
}

careme-cardSet > careme-card div.name:last-child
{
    height: 49px;
}

careme-cardSet > careme-card div.name a
{
    font: normal 400 14px/20px 'open-sans';
    color: #1177CC;
}
careme-table[data-look='inCard'] careme-trow
{
    border-top: 1px dotted #CCCCCC;
    border-bottom-width: 0;
}

careme-table[data-look='inCard']:not([data-is-deleted='true']) careme-trow:first-child
{
    background-color: rgba(204, 204, 204, 0.10);
}

careme-table[data-look='inCard'] careme-trow:last-child
{
    height: 29px;
}

careme-table[data-look='inCard'] careme-tbody careme-trow
{
    padding: 0;
}

careme-table[data-look='inCard'] careme-tbody careme-trow[data-mode='alert']
{
    background-color: rgba(221, 68, 51, 0.05);
    color: #DD4433;
    font-weight: 400;
}

careme-table[data-look='inCard'] careme-tbody careme-trow[data-mode='warning']
{
    background-color: rgba(221, 136, 68, 0.05);
    color: #DD8844;
    font-weight: 400;
}

careme-table[data-look='inCard'] careme-tcell
{
    padding: 0;
    font: normal 300 13px/10px 'open-sans';
}

careme-table[data-look='inCard'] careme-tcell[data-look='caption']
{
    padding-top: 10px;
    padding-left: 19px;
    color: #333333;
    flex-grow: 1;
}

careme-table[data-look='inCard'] careme-tcell[data-look='instant']
{
    padding-top: 10px;
    padding-right: 19px;
    color: #333333;
    flex-grow: 1;
    text-align: right;
}

careme-table[data-look='inCard'] careme-trow[data-mode='alert'] careme-tcell[data-look='caption'],
careme-table[data-look='inCard'] careme-trow[data-mode='warning'] careme-tcell[data-look='caption'],
careme-table[data-look='inCard'] careme-trow[data-mode='alert'] careme-tcell[data-look='instant'],
careme-table[data-look='inCard'] careme-trow[data-mode='warning'] careme-tcell[data-look='instant']
{
    font-weight: 400;
    color: inherit;
}


careme-table[data-look='inCard'] careme-tcell[data-look='measure-info'],
careme-table[data-look='inCard'] careme-tcell[data-look='measure-edit']
{
    display: flex;
    width: 119px;
}

careme-table[data-look='inCard'] careme-tcell[data-look='measure-info'] > .quantity
{
    flex-grow: 1;
    padding-top: 10px;
    text-align: right;
}

careme-table[data-look='inCard'] careme-tcell[data-look='measure-info'] > .unit
{
    padding: 10px 4px 0 5px;
    width: 54px;
    text-align: left;
}

careme-table[data-look='inCard'] careme-tcell[data-look="measure-edit"] .dropdownIcon
{
    width: 19px;
    height: 29px;
}
careme-cardSet careme-card careme-actionSet
{
    margin: 14px 14px 5px 14px;
    height: 30px;
    display: flex;
    justify-content: end;
}

careme-cardSet > careme-card > careme-actionSet > .icons
{
    flex-grow: 1;
}

careme-cardSet > careme-card > careme-actionSet > .icons > div
{
    width: 30px;
    height: 30px;
    padding: 2px;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.5);
    border: 1px solid #FFFFFF;
}

careme-cardSet > careme-card > careme-actionSet > .icons > div > svg
{
    width: 24px;
    height: 24px;
    stroke-width: 1;
    stroke: #888888;
}

careme-cardSet > careme-card > careme-actionSet > .buttons
{
    display: flex;
    flex-shrink: 0;
    gap: 10px;
}

careme-cardSet > careme-card > careme-actionSet > careme-action
{
    display: flex;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(17, 151, 196, 0.75);
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

careme-cardSet > careme-card > careme-actionSet > careme-action:hover
{
    border: 1px solid rgba(17, 151, 196, 1.00);
    background-color: rgba(17, 151, 196, 0.05);
}

careme-cardSet > careme-card > careme-actionSet > careme-action svg
{
    stroke-width: 1.5px;
    stroke: rgba(17, 151, 196, 0.75);
}

careme-cardSet > careme-card > careme-actionSet > careme-action:hover svg
{
    stroke: rgba(17, 151, 196, 1.00);
}
careme-actionSet
{
    display: flex;
}
careme-button-icon
{
    width: 30px;
    height: 30px;
    border-radius: 4px;
    cursor: pointer;
}

careme-button-icon[data-state='disabled']
{
    cursor: auto;
}

careme-button-icon > svg
{
    display: block;
}

careme-button-icon:not([data-look]) > svg
{
    width: 28px;
    height: 28px;
    padding: 6px;
}

careme-button-icon[data-look='inLine']
{
    width: 24px;
    height: 24px;
    padding: 1px;
    border-radius: 2px;
}

careme-button-icon[data-look='inLine'] > svg
{
    width: 20px;
    height: 20px;
}

careme-button-icon:not([data-feel-look]),
careme-button-icon[data-feel-look='default']
{

}

careme-button-icon[data-feel-look='elso']
{
    background-color: rgba(17, 119, 204, 0.05);
    border: 1px solid rgba(17, 119, 204, 0.75);
}

careme-button-icon[data-feel-look='elso'] > svg
{
    stroke-width: 2.0;
    stroke: rgba(17, 119, 204, 0.75);
}

careme-button-icon[data-look='inTableRibbon']
{
    display: block;
    width: 20px;
    height: 29px;
    padding: 6px 1px 0 1px;
    stroke-width: 1.5;
    stroke: rgba(17, 119, 204, 0.75);
}

careme-button-icon[data-look='inTableRibbon'] > svg
{
    width: 18px;
    height: 18px;
}

careme-button-icon[data-look='inTableRibbon'][data-state='disabled'] > svg
{
    stroke-width: 1.0;
    stroke: #888888;
}

careme-button-icon[data-look='inTableRibbon'][data-feel-look='tableHeader']
{
    cursor: auto;
}

careme-button-icon[data-look='inTableRibbon'][data-feel-look='tableHeader'] > svg
{
    stroke-width: 1.0;
    stroke: #888888;
}

careme-button-icon[data-look='inCard'][data-feel-look='actionSet']
{
    width: 30px;
    height: 30px;
    padding: 4px;
    border-radius: 4px;
    background-color: rgba(17, 119, 204, 0.05);
    border: 1px solid rgba(17, 119, 204, 0.75);
}

careme-button-icon[data-look='inCard'][data-feel-look='actionSet'] > svg
{
    width: 20px;
    height: 20px;
    stroke-width: 1.5;
    stroke: rgba(17, 119, 204, 0.75);
}
careme-check
{
    border: none;
    display: flex;
    height: 30px;
    cursor: pointer;
}

careme-check .wrapper
{
    display: block;
    margin: 7px;
    width: 16px;
    height: 16px;
    border-radius: 2px;
    border: 1px solid transparent;
    stroke-width: 2;
    flex-shrink: 0;
}

careme-check .wrapper > svg
{
    display: none;
    width: 14px;
    height: 14px;
}

careme-check[data-is-checked='true'] .wrapper > svg
{
    display: block;
    stroke: #FFFFFF;
    stroke-width: 2;
}

careme-check:not([data-mode]) .wrapper,
careme-check[data-mode='normal'] .wrapper
{
    border-color: #1177CC;
    background-color: #FFFFFF;
}

careme-check:not([data-mode])[data-is-checked='true'] .wrapper,
careme-check[data-mode='normal'][data-is-checked='true'] .wrapper
{
    background-color: #1177CC;
}

careme-check[data-mode='focus'] .wrapper
{
    border-color: #1177CC;
    background-color: rgba(17, 119, 204, 0.2);
}

careme-check[data-mode='focus'][data-is-checked='true'] .wrapper
{
    background-color: #1177CC;
}

careme-check[data-mode='correct'] .wrapper
{
    border-color: #33AA66;
    background-color: rgba(51, 170, 102, 0.2);
}

careme-check[data-mode='correct'][data-is-checked='true'] .wrapper
{
    background-color: #33AA66;
}

careme-check[data-mode='warning'] .wrapper
{
    border-color: #DD8844;
    background-color: rgba(221, 136, 68, 0.2);
}

careme-check[data-mode='warning'][data-is-checked='true'] .wrapper
{
    background-color: #DD8844;
}

careme-check[data-mode='error'] .wrapper
{
    border-color: #DD4433;
    background-color: rgba(221, 68, 51, 0.2);
}

careme-check[data-mode='error'][data-is-checked='true'] .wrapper
{
    background-color: #DD4433;
}

careme-check[data-mode='disabled'] .wrapper
{
    border-color: #CCCCCC;
    background-color: rgba(204, 204, 204, 0.2);
}

careme-check[data-mode='disabled'][data-is-checked='true'] .wrapper
{
    background-color: #CCCCCC;
}
careme-checkItem
{
    display: flex;
    cursor: pointer;
}

careme-checkItem .caption
{
    display: block;
    height: 30px;
    padding-top: 10px;
    font: 400 normal 13px/10px 'open-sans';
    color: #333333;
}
careme-line-instant
{
    display: flex;
}

careme-line-instant:not([data-look])
{
    height: 30px;
    border: 1px solid #1177CC;
    border-radius: 3px;
}

careme-line-instant > .icon
{
    width: 29px;
    height: 28px;
    padding: 4px 5px 4px 4px;
}

careme-line-instant > .icon > svg
{
    display: block;
    stroke-width: 1.5;
    stroke: rgba(17, 119, 204, 0.75);
}

careme-line-instant > .input > input
{
    display: block;
    height: 28px;
    padding: 9px;
    flex-grow: 1;
    font: normal 400  13px/10px 'open-sans';
    color: #333333;
}

careme-line-instant > .input > input::placeholder
{
    color: #888888;
    font-weight: 300;
}

careme-line-instant[data-is-icon='true'] > .input > input
{
    padding-left: 0;
}

careme-line-instant > careme-actionset
{
    display: flex;
    padding: 2px 2px 2px 0;
    gap: 2px;
}
careme-navActionSet
{
    display: flex;
    gap: 20px
}

careme-navAction
{
    display: flex;
    padding: 19px;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 200px;
    height: 250px;
    border-radius: 5px;
    border: 1px solid #CCCCCC;
}

careme-navAction > .holder
{
    width: 120px;
    height: 120px;
    padding: 19px;
    border: 1px solid rgba(17, 119, 204, 0.75);
    border-radius: 60px;

}

careme-navAction > .holder svg
{
    display: block;
    stroke-width: 1px;
    width: 80px;
    height: 80px;
}

careme-navAction:not([data-mode]) > .holder svg,
careme-navAction[data-mode='default'] > .holder svg
{
    stroke: rgba(17, 119, 204, 0.75);
}

careme-navAction[data-mode='alert'] > .holder svg
{
    stroke: rgba(221, 68, 51, 0.75);
}

careme-navAction .caption
{
    display: block;
    width: 160px;
    height: 70px;
    padding-top:13px;
    border: 1px solid rgba(17, 119, 204, 0.75);
    background-color: rgba(17, 119, 204, 0.05);
    border-radius: 5px;
    text-align: center;
    color: #1177CC;
    font: 400 normal 16px/20px 'open-sans';
}
careme-radio
{
    display: block;
    width: 30px;
    height: 30px;
    padding: 6px;
    cursor: pointer;
}

careme-radio div
{
    width: 18px;
    height: 18px;
    border: 1px solid #1177CC;
    border-radius: 9px;
    padding: 3px;
}

careme-radio div div
{
    display: none;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #1177CC;
}

careme-radio[data-is-checked='true'] div div
{
    display: block;
}
careme-radioItem
{
    display: flex;
    cursor: pointer;
}

careme-radioItem .caption
{
    display: block;
    height: 30px;
    padding-top: 10px;
    font: 400 normal 13px/10px 'open-sans';
    color: #333333;
}
careme-table[data-look='ribbon'] careme-trow[data-feel-mode='success']
{
    background-color: rgba(51, 170, 102, 0.05);
}

careme-table[data-look='ribbon'] careme-trow[data-feel-mode='warning']
{
    background-color: rgba(221, 136, 68, 0.05);
}

careme-table[data-look='ribbon'] careme-trow[data-feel-mode='alert']
{
    background-color: rgba(221, 68, 51, 0.05);
}
careme-table[data-look='ribbon'] careme-tcell[data-look='icon']
{
    display: block;
    width: 20px;
    height: 29px;
    padding: 6px 1px 0 1px;
}

careme-table[data-look='ribbon'] careme-tcell[data-look='icon'] > svg
{
    display: block;
    width: 18px;
    height: 18px;
}

careme-table[data-look='ribbon'] careme-tcell[data-look='icon'][data-feel-mode='header'] > svg
{
    stroke-width: 1.0px;
    stroke: #888888;
}

careme-table[data-look='ribbon'] careme-tcell[data-look='icon'][data-feel-mode='success'] > svg
{
    stroke-width: 1.5px;
    stroke: #33AA66;
}

careme-table[data-look='ribbon'] careme-tcell[data-look='icon'][data-feel-mode='warning'] > svg
{
    stroke-width: 1.5px;
    stroke: #DD8844;
}

careme-table[data-look='ribbon'] careme-tcell[data-look='icon'][data-feel-mode='alert'] > svg
{
    stroke-width: 1.5px;
    stroke: #DD4433;
}

careme-table[data-look='ribbon'] careme-tcell[data-look='icon'][data-feel-mode='inactive'] > svg
{
    stroke-width: 1.5px;
    stroke: rgba(136, 136, 136, 0.75);
}
careme-table[data-look='ribbon'] careme-tcell[data-look='measure-header']
{
    display: flex;
}

careme-table[data-look='ribbon'] careme-tcell[data-look='measure-header'] .quantity
{
    display: block;
    height: 10px;
    flex-grow: 1;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

careme-table[data-look='ribbon'] careme-tcell[data-look='measure-header'] .unit
{
    display: block;
    height: 10px;
    padding-left: 5px;
    width: 35px;
}
careme-breadcrumbs
{
    display: flex;
    height:10px;
    gap: 7px 10px;
    margin-bottom: 20px;
    font: 400 normal 13px/10px 'open-sans';
}

careme-breadcrumbs > div
{
    display: flex;
    height:10px;
    gap: 7px 10px;
}

careme-breadcrumbs > div > a
{
    display: block;
    height: 10px;
    color: #1177CC;
}

careme-breadcrumbs > span
{
    display: block;
    height: 10px;
    color: #333333;
}

careme-breadcrumbs > div > svg.separator
{
    display: block;
    margin-top: 1px;
    margin-bottom: -1px;
    width: 10px;
    height: 10px;
    stroke-width: 2px;
    stroke: #333333;
}
.alarmListBlock
{

}

.alarmListBlock .titleGroup
{
    display: flex;
}

.alarmListBlock .titleGroup h1
{
    flex-grow: 1;
    padding-top: 10px;
    font: normal 300 24px/10px 'open-sans';
}

.alarmListBlock .alarmList
{
    display: flex;
    flex-direction: column;
    padding-top: 20px;
    gap: 10px;
}

.alarmListBlock .alarmList .alarmShort
{
    border-top: 1px dotted #CCCCCC;
    padding-top: 9px;
}

.alarmListBlock .alarmList .alarmShort .header
{
    display: flex;
    height: 20px;
}

.alarmListBlock .alarmList .alarmShort .header h3
{
    flex-grow: 1;
    height: 20px;
    padding-top: 5px;
    font: normal 300 20px/15px 'open-sans';
}

.alarmListBlock .alarmList .alarmShort .date
{
    height: 20px;
    padding-top: 10px;
    font: normal 300 13px/10px 'open-sans';
}

.alarmListBlock .alarmList .alarmShort .notice
{
    padding: 10px 0;
    font: normal 300 14px/20px 'open-sans';
}

.alarmListBlock .alarmList .alarmShort .notice a
{
    font-weight: 400;
    color: #1177CC;
}

.alarmListBlock .alarmList .alarmShort .actionSet
{
    display: flex;
    gap: 10px;
}
.inputFrame[data-mode='none']
{
    display: none;
}

.inputFrame > .garret
{
    display: flex;
    justify-content: space-between;
    height: 10px;
    margin-bottom: 10px;
}

.inputFrame > .garret > .caption
{
    position: relative;
    display: block;
    height: 10px;
    padding-right: 10px;
    font: normal 300 14px/10px 'open-sans';
}

.inputFrame > .garret > .caption.requiredIs:after
{
    content: '';
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background-color: #DD8844;
}

.inputFrame > .garret > .feedback
{
    font: normal 400 12px/10px 'open-sans';
}

.inputFrame > .garret > .feedback[data-mode='none']
{
    display: none;
}

.inputFrame > .garret > .feedback[data-mode='normal'],
.inputFrame > .garret > .feedback[data-mode='focus'],
.inputFrame > .garret > .feedback[data-mode='disabled']
{
    font-weight: 300;
    color: #333333;
}

.inputFrame > .garret > .feedback[data-mode='correct']
{
    color: #33AA66;
}

.inputFrame > .garret > .feedback[data-mode='warning']
{
    color: #DD8844;
}

.inputFrame > .garret > .feedback[data-mode='alert']
{
    color: #DD4433;
}
.form .formGroup
{
    margin-top: 10px;
    position: relative;
    border-radius: 5px;
    border: 1px solid rgba(136, 136, 136, 0.5);
    padding: 30px 20px 20px 20px;
}

.form .formGroup > .garret
{
    position: absolute;
    top: -15px;
    left: 20px;
    right: 20px;
    height: 30px;
    display: flex;
    justify-content: space-between;
}

.form .formGroup > .garret .caption
{
    padding: 10px;
    border-radius: 15px;
    border: 1px solid rgba(136, 136, 136, 0.5);
    background-color: #FFFFFF;
    font: normal 300 14px/10px 'open-sans';
    color: #333333;
}

.form .formGroup > .garret .switchTwo
{
    width: 30px;
    height: 30px;
    border-radius: 15px;
    padding: 4px;
    border: 1px solid rgba(136, 136, 136, 0.5);
    background-color: #FFFFFF;
    cursor: pointer;
    stroke-width: 2;
    stroke: rgba(17, 119, 204, 0.75);
}

.form .formGroup > .garret > .switchMany
{
    display: flex;
    height: 30px;
    border-radius: 15px;
    border: 1px solid rgba(136, 136, 136, 0.5);
    background-color: #FFFFFF;
    overflow: hidden;
}

.form .formGroup > .garret > .switchMany > .option
{
    height: 28px;
    width: 29px;
    padding: 4px 5px 4px 4px;
    border-left: 1px solid rgba(136, 136, 136, 0.5);
    stroke: rgba(17, 119, 204, 0.75);
    cursor: pointer;
}

.form .formGroup > .garret > .switchMany > .option:first-child
{
    border-left-width: 0;
    padding: 4px 5px 4px 9px;
    width: 34px
}

.form .formGroup > .garret > .switchMany > .option:last-child
{
    width: 34px;
    padding: 4px 9px 4px 4px;
}

.form .formGroup > .garret > .switchMany > .option[data-value='true']
{
    background-color: rgba(17, 119, 204, 0.2);
    cursor: auto;
}

.form .formGroup > .garret > .switchMany > .option[data-value='true'] svg.icon
{
    stroke-width: 1;
    stroke: #888888;
}

.form .formGroup [data-is-child-visible='false']
{
    display: none;
}
.form .formMessage
{
    display: flex;
    border-style: solid;
    border-width: 1px 1px 1px 5px;

}

.form .formMessage[data-mode='none']
{
    display: none;
}


.form .formMessage[data-mode='info']
{
    background-color: rgba(17, 119, 204, 0.05);
    border-color: rgba(17, 119, 204, 0.2);
    stroke: rgba(17, 119, 204, 0.75);
    color: #1177CC;
}

.form .formMessage[data-mode='warning']
{
    background-color: rgba(221, 136, 68, 0.05);
    border-color: rgba(221, 136, 68, 0.2);
    stroke: rgba(221, 136, 68, 0.75);
    color: #DD8844;
}

.form .formMessage[data-mode='alert']
{
    background-color: rgba(221, 68, 51, 0.05);
    border-color: rgba(221, 68, 51, 0.2);
    stroke: rgba(221, 68, 51, 0.75);
    color: #DD4433;
}

.form .formMessage > .container
{
    height: 38px;
    width: 40px;
    align-self: center;
    padding: 3px 0 0 5px;
}

.form .formMessage > .container > svg
{
    stroke-width: 2;
    flex-shrink: 0;
}

.form .formMessage > .caption
{
    flex-grow: 1;
    align-self: center;
    padding: 4px 4px 4px 5px;
    font: normal 400 13px/20px 'open-sans';
}
.form .inputArea
{
    display: block;
    width: 100%;
    height: 90px;
    border-width: 1px;
    border-style: solid;
    border-color: #1177CC;
    background-color: #FFFFFF;
    border-radius: 3px;
    padding: 4px 0 4px 9px;
}

.form .inputArea[data-mode='normal']
{
    border-color: #1177CC;
    background-color: #FFFFFF;
}

.form .inputArea[data-mode='focus']
{
    color: #1177CC;
    border-color: #1177CC;
    background-color: rgba(17, 119, 204, 0.05);
}

.form .inputArea[data-mode='correct']
{
    color: #33AA66;;
    border-color: #33AA66;
    background-color: rgba(51, 170, 102, 0.05);
}

.form .inputArea[data-mode='warning']
{
    color: #DD8844;
    border-color: #DD8844;
    background-color: rgba(221, 136, 68, 0.05);
}

.form .inputArea[data-mode='error']
{
    color: #DD4433;
    border-color: #DD4433;
    background-color: rgba(221, 68, 51, 0.05);
}

.form .inputArea[data-mode='disabled']
{
    color: #CCCCCC;
    border-color: #CCCCCC;
    background-color: rgba(204, 204, 204, 0.05);
}

.form .inputArea textarea
{
    width: 100%;
    height: 100%;
    font: normal 400 13px/20px 'open-sans';
}

.form .inputArea textarea::placeholder
{
    font-weight: 300;
}
.form .checkFrame
{
    display: flex;
    cursor: pointer;
}

.form .checkFrame > .inputCheck
{
    border: none;
    display: flex;
    height: 30px;
}

.form .checkFrame .caption
{
    height: 30px;
    padding-top: 10px;
    font: normal 400 13px/10px 'open-sans';
    display: block;
}

.form .inputCheck .wrapper
{
    display: block;
    margin: 7px;
    width: 16px;
    height: 16px;
    border-radius: 2px;
    border: 1px solid transparent;
    stroke-width: 2;
    flex-shrink: 0;
}

.form .inputCheck .wrapper > svg
{
    display: none;
    width: 14px;
    height: 14px;
}

.form .inputCheck[data-value='checked'] .wrapper > svg
{
    display: block;
    stroke: #FFFFFF;
    stroke-width: 2;
}

.form .inputCheck[data-mode='normal'] .wrapper
{
    border-color: #1177CC;
    background-color: #FFFFFF;
}

.form .inputCheck[data-mode='normal'][data-value='checked'] .wrapper
{
    background-color: #1177CC;
}

.form .inputCheck[data-mode='focus'] .wrapper
{
    border-color: #1177CC;
    background-color: rgba(17, 119, 204, 0.2);
}

.form .inputCheck[data-mode='focus'][data-value='checked'] .wrapper
{
    background-color: #1177CC;
}

.form .inputCheck[data-mode='correct'] .wrapper
{
    border-color: #33AA66;
    background-color: rgba(51, 170, 102, 0.2);
}

.form .inputCheck[data-mode='correct'][data-value='checked'] .wrapper
{
    background-color: #33AA66;
}

.form .inputCheck[data-mode='warning'] .wrapper
{
    border-color: #DD8844;
    background-color: rgba(221, 136, 68, 0.2);
}

.form .inputCheck[data-mode='warning'][data-value='checked'] .wrapper
{
    background-color: #DD8844;
}

.form .inputCheck[data-mode='error'] .wrapper
{
    border-color: #DD4433;
    background-color: rgba(221, 68, 51, 0.2);
}

.form .inputCheck[data-mode='error'][data-value='checked'] .wrapper
{
    background-color: #DD4433;
}

.form .inputCheck[data-mode='disabled'] .wrapper
{
    border-color: #CCCCCC;
    background-color: rgba(204, 204, 204, 0.2);
}

.form .inputCheck[data-mode='disabled'][data-value='checked'] .wrapper
{
    background-color: #CCCCCC;
}

.form .inputCheck input
{
    display: none;
}
.form .inputLine
{
    display: flex;
    height: 30px;
    border: 1px solid transparent;
    border-radius: 3px;
}

.form .inputLine[data-mode='normal']
{
    border-color: #1177CC;
    background-color: #FFFFFF;
}

.form .inputLine[data-mode='focus']
{
    border-color: #1177CC;
    background-color: rgba(17, 119, 204, 0.05);
}

.form .inputLine[data-mode='correct']
{
    border-color: #33AA66;
    background-color: rgba(51, 170, 102, 0.05);
}

.form .inputLine[data-mode='warning']
{
    border-color: #DD8844;
    background-color: rgba(221, 136, 68, 0.05);
}

.form .inputLine[data-mode='error']
{
    border-color: #DD4433;
    background-color: rgba(221, 68, 51, 0.05);
}

.form .inputLine[data-mode='disabled']
{
    border-color: #CCCCCC;
    background-color: rgba(204, 204, 204, 0.05);
}

.form .inputLine > input
{
    min-width: 30px;
    flex-grow: 1;
    font: normal 400 13px/10px 'open-sans';
}

.form .inputLine > input::placeholder
{
    font-weight: 300;
}

.form .inputLine > input:first-child
{
    margin-left: 10px;
}

.form .inputLine[data-mode='normal'] > input
{
    color: #333333;
}

.form .inputLine[data-mode='normal'] > input::placeholder
{
    color: #888888;
}

.form .inputLine[data-mode='focus'] > input,
.form .inputLine[data-mode='focus'] > input::placeholder
{
    color: #1177CC;
}

.form .inputLine[data-mode='correct'] > input,
.form .inputLine[data-mode='correct'] > input::placeholder
{
    color: #33AA66;
}

.form .inputLine[data-mode='warning'] > input,
.form .inputLine[data-mode='warning'] > input::placeholder
{
    color: #DD8844;
}

.form .inputLine[data-mode='error'] > input,
.form .inputLine[data-mode='error'] > input::placeholder
{
    color: #DD4433;
}

.form .inputLine > svg.icon:first-child
{
    margin: 4px 5px 4px 4px;
    flex-shrink: 0;
}

.form .inputLine[data-mode='normal'] > svg.icon:first-child,
.form .inputLine[data-mode='focus'] > svg.icon:first-child
{
    stroke: rgba(17, 119, 204, 0.75);
}

.form .inputLine[data-mode='correct'] > svg.icon:first-child
{
    stroke: rgba(51, 170, 102, 0.75);
}

.form .inputLine[data-mode='warning'] > svg.icon:first-child
{
    stroke: rgba(221, 136, 68, 0.75);
}

.form .inputLine[data-mode='error'] > svg.icon:first-child
{
    stroke: rgba(221, 68, 51, 0.75);
}

.form .inputLine[data-mode='disabled'] > svg.icon:first-child
{
    stroke: rgba(204, 204, 204, 0.75);
}

.form .inputLine > .subBtn
{
    height: 24px;
    width: 24px;
    margin: 2px 2px 2px 0;
    border: 1px solid transparent;
    padding: 1px;
    cursor: pointer;
}

.form .inputLine[data-mode='normal'] > .subBtn,
.form .inputLine[data-mode='focus'] > .subBtn
{
    border-color: rgba(17, 119, 204, 0.2);
    stroke: rgba(17, 119, 204, 0.75);
}

.form .inputLine[data-mode='normal'] > .subBtn:hover,
.form .inputLine[data-mode='focus'] > .subBtn:hover
{
    stroke: #1177CC;
}

.form .inputLine[data-mode='correct'] > .subBtn
{
    border-color: rgba(51, 170, 102, 0.2);
    stroke: rgba(51, 170, 102, 0.75);
}

.form .inputLine[data-mode='correct'] > .subBtn:hover
{
    border-color: #33AA66;
    stroke: #33AA66;
}

.form .inputLine[data-mode='warning'] > .subBtn
{
    border-color: rgba(221, 136, 68, 0.2);
    stroke: rgba(221, 136, 68, 0.75);
}

.form .inputLine[data-mode='warning'] > .subBtn:hover
{
    border-color: #DD8844;
    stroke: #DD8844;
}

.form .inputLine[data-mode='error'] > .subBtn
{
    border-color: rgba(221, 68, 51, 0.2);
    stroke: rgba(221, 68, 51, 0.75);
}

.form .inputLine[data-mode='error'] > .subBtn:hover
{
    border-color: #DD4433;
    stroke: #DD4433;
}

.form .inputLine[data-mode='disabled'] > .subBtn
{
    border-color: rgba(204, 204, 204, 0.75);
    stroke: rgba(204, 204, 204, 0.75);
}
.dropdownList
{
    padding: 5px 0;
}

.dropdownList > .item
{
    display: flex;
    height: 30px;
    width: auto;
    padding: 0 20px 0 5px;
    gap: 5px;
    cursor: pointer;
}

.dropdownList > .item > svg.icon
{
    margin: 5px;
    stroke: #333333;
    stroke-width: 1;
}

.dropdownList > .item[data-mode='normal']
{
    background: #FFFFFF;
    color: #333333;
}

.dropdownList > .item[data-mode='normal'] > svg.icon
{
    stroke: #333333;
}

.dropdownList > .item[data-mode='normal'][data-is-current='true']
{
    background: rgba(17, 119, 204, 0.2);
}

.dropdownList > .item[data-mode='normal'][data-is-current='true'] > svg.icon
{
    stroke: #333333;
    stroke-width: 1.5;
}

.dropdownList > .item[data-mode='disabled']
{
    cursor: not-allowed;
    background: rgba(204, 204, 204, 0.2);
    color: #888888;
}

.dropdownList > .item[data-mode='disabled'] > svg.icon
{
    stroke: #888888;
}

.dropdownList > .item[data-mode='selected']
{
    background: #1177CC;
    color: #FFFFFF;
}

.dropdownList > .item[data-mode='selected'] > svg.icon
{
    stroke: #FFFFFF;
    stroke-width: 1.5;
}



.dropdownList > .item > .caption
{
    margin-top: 10px;
    height: 10px;
    font: normal 400 13px/10px 'open-sans';
}
.dropdownList > .user
{
    display: flex;
    height: 50px;
    width: auto;
    padding: 5px 10px;
    gap: 10px;
    cursor: pointer;
}

.dropdownList > .user > .avatar.noMedia
{
    width: 40px;
    height: 40px;
    border-radius: 20px;
    padding-top: 14px;
    background: rgba(17, 119, 204, 0.20);
    border: 1px solid #1177CC;
    font: normal 400 16px/10px 'open-sans';
    text-align: center;
    color: #333333;
}

.dropdownList > .user[data-mode='normal']
{
    background: #FFFFFF;
    color: #333333;
}

.dropdownList > .user[data-mode='normal'][data-is-current='true']
{
    background: rgba(17, 119, 204, 0.2);
}

.dropdownList > .user[data-mode='disabled']
{
    cursor: not-allowed;
    background: rgba(204, 204, 204, 0.2);
    color: #888888;
}

.dropdownList > .user[data-mode='selected']
{
    background: #1177CC;
    color: #FFFFFF;
}


.dropdownList > .user> .caption
{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 5px;
    height: 40px;
    font: normal 400 13px/10px 'open-sans';
}

.dropdownList > .user> .caption > span:last-child
{
    font-weight: 300;
}

.dropdownList > .user> .caption > span.grey:last-child
{
    color: #888888;
}
.dropdown
{
    position: absolute;
    background: #FFFFFF;
    -webkit-box-shadow: 4px 4px 16px 4px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 4px 4px 16px 4px rgba(0, 0, 0, 0.2);
    box-shadow: 4px 4px 16px 4px rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    z-index: 20;
}

.dropdown.w280
{
    width: 280px;
}

.dropdown > .dropdownTriangle
{
    position: absolute;
    width: 20px;
    height: 10px;
    fill: #FFFFFF;
    transform-origin: bottom center !important;
}

.dropdown > .dropdownTriangle[data-orintation='top']
{
    top: -10px;
    transform: rotate(0);
}

.dropdown > .dropdownTriangle[data-orintation='right']
{
    transform: rotate(90deg);
    right: -10px;
}

.dropdown > .dropdownTriangle[data-orintation='bottom']
{
    transform: rotate(180deg);
    bottom: 0;
}

.dropdown > .dropdownTriangle[data-orintation='left']
{
    transform: rotate(270deg);
    left: -10px;
}

.contextMenu
{
    padding: 5px 0;
}

.contextMenu > .item
{
    height: 30px;
    width: 100%;
    padding: 0 10px 0 5px;
    display: flex;
    gap: 5px;
    font: normal 400 13px/10px 'open-sans';
    cursor: pointer;
}

.contextMenu > .item.subMenu
{
    padding-right: 0;
}

.contextMenu > .item:hover
{
    background: rgba(17, 119, 204, 0.2);
}

.contextMenu > .item > svg.menuIcon
{
    width: 20px;
    height: 20px;
    margin: 5px;
    stroke: #333333;
    stroke-width: 1.5;
}

.contextMenu > .item > .caption
{
    padding-top: 10px;
    flex-grow: 1;
    text-align: left;
}

.contextMenu > .item > .hotKey
{
    padding-top: 10px;
    flex-grow: 0;
    text-align: right;
}

.contextMenu > .item.subMenu > svg.subMenuIcon
{
    width: 16px;
    height: 16px;
    margin: 7px;
    stroke: #333333;
    stroke-width: 1.5;
}

.contextMenu > .separator
{
    width: 100%;
    height: 10px;
    padding-top: 4px;
}

.contextMenu > .separator:after
{
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: rgba(204, 204, 204, 0.75);
}
.datetimePicker
{
    padding: 5px 10px;
    font: normal 300 13px/10px 'open-sans';
}

.datetimePicker svg.icon
{
    stroke: #333333;
}

.datetimePicker > .selector
{
    display: flex;
}

.datetimePicker > .selector > .cardFull
{
    width: 210px;
    height: 240px;
}

.datetimePicker > .selector > .cardFull > .garret
{
    display: flex;
    height: 30px;
}

.datetimePicker > .selector > .cardFull > .garret > svg.icon
{
    margin: 5px;
    cursor: pointer;
}

.datetimePicker > .selector > .cardFull > .garret > .short
{
    height: 30px;
    padding-top: 10px;
    margin-right: 5px;
    cursor: pointer;
}

.datetimePicker > .selector > .cardFull > .garret > .long
{
    height: 30px;
    padding-top: 10px;
    flex-grow: 1;
    cursor: pointer;
}

.datetimePicker > .selector > .cardFull > .container
{
    display: flex;
    flex-wrap: wrap;
    width: 204px;
    height: 174px;
    margin: 3px;
    gap: 6px;
}

.datetimePicker > .selector > .cardFull > .container > div
{
    flex-shrink: 0;
    flex-grow: 0;
    position: relative;
    border-radius: 3px;
    border: 1px solid #FFFFFF;
    height: 24px;
    padding-top: 6px;
    text-align: center;
    font: normal 300 13px/10px 'open-sans';
    cursor: pointer;
}

.datetimePicker > .selector > .cardFull > .container > div:hover
{
    border: 1px solid #1177CC;
}

.datetimePicker > .selector > .cardFull > .container > div[data-is-selected='true']
{
    border: 1px solid #1177CC;
    background-color: #1177CC;
    font-weight: 400;
    color: #FFFFFF !important;
}

.datetimePicker > .selector > .cardFull > .container > div[data-is-today='true']:after
{
    position: absolute;
    content: '';
    display: block;
    border-radius: 2px;
    top: 1px;
    left: 1px;
    width: 4px;
    height: 4px;
    background-color: #1177CC;
}

.datetimePicker > .selector > .cardFull > .container > div[data-is-selected='true'][data-is-today='true']:after
{
    background-color: #FFFFFF;
}
.datetimePicker > .actionSet
{
    display: flex;
    padding: 10px 0;
    gap: 10px;
}
.datetimePicker > .selector > .month > .weekDays
{
    display: flex;
    height: 30px;
    width: 210px;
    background: rgba(204, 204, 204, 0.2);
}

.datetimePicker > .selector > .month > .weekDays > div
{
    height: 30px;
    width: 30px;
    padding-top: 10px ;
    text-align: center;
}

.datetimePicker > .selector > .month > .weekDays > div.dayOff
{
    color: #DD4433;
    font-weight: 400;
}

.datetimePicker > .selector > .month > .container > div
{
    width: 24px;
}

.datetimePicker > .selector > .month > .container > div.dayOff
{
    color: #DD4433;
    font-weight: 400;
}

.datetimePicker > .selector > .month > .container > div[data-day-grey='true']
{
    color: #888888;
}
.datetimePicker > .selector > .year > .container
{
    column-gap: 16px;
}

.datetimePicker > .selector > .year > .container > div
{
    width: 39px;
}
.datetimePicker > .selector > .decade > .container
{
    column-gap: 16px;
}

.datetimePicker > .selector > .decade > .container > div
{
    width: 39px;
}
.datetimePicker > .selector > .separator
{
    width: 20px;
    height: 240px;
    padding-left: 10px;
}

.datetimePicker > .selector > .separator:after
{
    display: block;
    content: '';
    width: 1px;
    height: 100%;
    background: rgba(204, 204, 204, 0.5);
}
.datetimePicker > .selector > .time
{
    display: flex;
    gap: 10px;
}

.datetimePicker > .selector > .time > .hourSet > svg.icon,
.datetimePicker > .selector > .time > .minuteSet > svg.icon
{
    margin: 5px;
    cursor: pointer;
}

.datetimePicker > .selector > .time > .hourSet > .hours,
.datetimePicker > .selector > .time > .minuteSet > .minutes
{
    width: 30px;
    height: 180px;
    overflow: hidden;
    position: relative;
}

.datetimePicker > .selector > .time > .hourSet > .hours > div,
.datetimePicker > .selector > .time > .minuteSet > .minutes > div
{
    position: absolute;
    top: 3px;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 30px;
    height: 174px;
    transition: top 0.3s;
}


.datetimePicker > .selector > .time > .hourSet > .hours > div > div,
.datetimePicker > .selector > .time > .minuteSet > .minutes > div > div
{
    flex-shrink: 0;
    flex-grow: 0;
    height: 24px;
    width: 30px;
    padding-top: 7px;
    border-radius: 2px;
    border: 1px solid #FFFFFF;
    text-align: center;
    cursor: pointer;
}

.datetimePicker > .selector > .time .hours div:hover,
.datetimePicker > .selector > .time .minutes div:hover
{
    border-color: #1177CC;
}

.datetimePicker > .selector > .time .hours div[data-is-selected='true'],
.datetimePicker > .selector > .time .minutes div[data-is-selected='true']
{
    background-color: #1177CC;
    border-color: #1177CC;
    font-weight: 400;
    color: #FFFFFF;
}
.dialog
{
    position: absolute;
    background: #FFFFFF;
    -webkit-box-shadow: 4px 4px 16px 4px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 4px 4px 16px 4px rgba(0, 0, 0, 0.2);
    box-shadow: 4px 4px 16px 4px rgba(0, 0, 0, 0.2);
}

.dialog > .garret
{
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    padding: 10px 10px 10px 20px;
    background-color: rgba(204, 204, 204, 0.2);
}

.dialog > .garret > .title
{
    display: flex;
    height: 20px;
    width: 100%;
    gap: 10px;
}

.dialog > .garret > .title > .caption
{
    font: normal 300 18px/20px 'open-sans';
    color: #444444;
    flex-grow: 1;
}

.dialog > .garret > .title svg.icon
{
    cursor: pointer;
    stroke: rgba(17, 119, 204, 0.75);
    stroke-width: 2;
}

.dialog > .garret > .description
{
    font: normal 300 13px/10px 'open-sans';
    color: #333333;
}

.dialog > .garret > .actionSet
{
    padding-top: 5px;
    height: 25px;
}

.dialog > .container
{
    width: 100%;
    height: 100%;
    padding: 20px;
    background-color: #FFFFFF;
}

.flexDown
{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.oauth
{
    height: 70px;
    margin-top: 20px;
    padding-top: 10px;
}

.oauth > .caption
{
    padding-bottom: 20px;
    width: 100%;
    text-align: center;
    color: #333333;
    font: normal 300 13px/10px 'open-sans';
}

.oauthGroup
{
    width: 110px;
    margin: 0 auto;
    display: flex;
    gap: 10px;
}

.oauthGroup .oauthPict
{
    display: block;
    width: 30px;
    height: 30px;
    cursor: pointer;
}

.dialog .subAction
{
    display: flex;
    flex-direction: column;
    margin: 30px 0 10px 0;
    gap: 20px;
    align-items: center;
}

.dialog .subAction .action
{
    display: block;
    height: 10px;
    color: #1177CC;
    font: normal 400 13px/10px 'open-sans';
    cursor: pointer;
}

.dialog .subAction .notice
{
    display: block;
    height: 10px;
    color: #333333;
    font: normal 400 13px/10px 'open-sans';
}

.dialog.register .checkFrame
{
    display: flex;
}

.dialog.register .checkFrame .caption
{
    display: block;
    padding-top: 0 !important;
    margin-top: 2px !important;
    margin-right: -5px;
    font: normal 300 11px/13px 'open-sans';
    height: 26px;
}

.dialog.register .checkFrame[data-mode='error'] .caption
{
    color: #DD4433;
}

.dialog.register .checkFrame .caption a
{
    font-weight: 400;
    color: #1177CC;
}

.dialog.login .actionSet,
.dialog.register .actionSet,
.dialog.recovery .actionSet,
.dialog.emailVerify .actionSet,
.dialog.phoneVerify .actionSet
{
    justify-content: space-around;
}

.dialog.login .actionSet .btn,
.dialog.register .actionSet .btn,
.dialog.recovery .actionSet .btn,
.dialog.emailVerify .actionSet .btn,
.dialog.phoneVerify .actionSet .btn
{
    width: 140px;
}

.dialog.w300
{
    width: 300px;
}

.dialog.w380
{
    width: 380px;
}

.dialog.w540
{
    width: 540px;
}

.dialog.tutorTrialFullPlanned
{
    width: 380px;
}

.dialog.tutorTrialFullPerformed
{
    width: 380px;
}


.form .actionSet
{
    display: flex;
    gap: 10px;
}

.dialog .actionSet
{
    display: flex;
    gap: 10px;
}

.dialog .mapFrame
{
    width: 500px;
    height: 500px;
    border-radius: 3px;
    border: 1px solid #1177CC;
}
.btn
{
    display: flex;
    height: 30px;
    gap: 5px;
    border-radius: 4px;
    background-color: rgba(17, 119, 204, 0.75);
    border: 1px solid rgba(17, 119, 204, 0.75);
    font: normal 500 14px/10px 'open-sans';
    color: #FFFFFF;
    cursor: pointer;
}

.btn.simple
{
    padding: 0 19px;
}

.btn.down
{
    padding: 0 9px 0 19px;
}

.btn.simple[data-is-compact='true'],
.btn.down[data-is-compact='true']
{
    height: 20px;
    padding: 0 9px;
    font-size: 13px;
}

.btn[data-mode='cancel']
{
    background-color: rgba(17, 119, 204, 0.05);
    border: 1px solid rgba(17, 119, 204, 0.05);
    font: normal 300 14px/10px 'open-sans';
    color: #444444;
}

.btn[data-mode='elso']
{
    font-weight: 300;
    background-color: rgba(17, 119, 204, 0.05);
    border: 1px solid rgba(17, 119, 204, 0.75);
    color: #444444;
}

.btn[data-mode='elso'] > svg
{
    stroke-width: 2px;
    stroke: rgba(17, 119, 204, 0.75);
}

.btn > .caption
{
    flex-grow: 1;
    padding-top: 9px;
    height: 10px;
}

.btn.center .caption
{
    text-align: center;
}

.btn[data-is-compact='true'] > .caption
{
    padding-top: 4px;
    height: 10px;
}

.btn.down > svg[data-role='dropdown']
{
    display: block;
    margin-top: 6px;
    width: 16px;
    height: 16px;
}

.btn.down[data-is-compact='true'] > svg[data-role='dropdown']
{
    margin-top: 1px;
}

.btn.imageBtn
{
    display: flex;
    width: 30px;
    height: 30px;
    padding: 0;
    align-items: center;
    justify-content: center;
}

.btn.imageBtn svg
{
    width: 16px;
    height: 16px;
}
.cookieConfirm
{
    position: fixed;
    display: flex;
    padding: 15px 20px;
    gap: 10px;
    width: 800px;
    height: 130px;
    bottom: 40px;
    left: calc(50% - 400px);
    background-color: #F3FAFC;
    -webkit-box-shadow: 4px 4px 16px 4px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 4px 4px 16px 4px rgba(0, 0, 0, 0.2);
    box-shadow: 4px 4px 16px 4px rgba(0, 0, 0, 0.2);
}

.cookieConfirm > svg
{
    display: block;
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    stroke-width: 1px;
    stroke: #333333;
}

.cookieConfirm > .info
{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cookieConfirm > .info > .title
{
    font: normal 400 13px/10px 'open-sans';
}

.cookieConfirm > .info > .caption
{
    font: normal 300 13px/20px 'open-sans';
}

.cookieConfirm > .info > .caption > a
{
    font-weight: 400;
    color: #1177CC;
}

.cookieConfirm > .info > .actionSet
{
    display: flex;
    gap: 10px;
}