h1, h2, h4, h5, h6 {
    text-align: right
}

h2 {
    line-height: 37px
}

img {
    border: none;
    border-radius: 12px
}

.clr {
    clear: both;
    height: 0;
    line-height: 0;
    display: block;
    float: none;
    padding: 0;
    margin: 0;
    border: none
}

.even {
    background: #f9f9f9;
    padding: 2px 10px;
    border-bottom: 1px dotted #ddd;
    border-right: 1px dotted #ddd;
    border-left: 1px dotted #ddd;
    list-style: none
}

.odd {
    background: #fefefe;
    padding: 2px 10px;
    border-bottom: 1px dotted #ddd;
    border-right: 1px dotted #ddd;
    border-left: 1px dotted #ddd;
    list-style: none
}

.clearList {
    display: none;
    float: none;
    clear: both
}

.lastItem {
    border: none
}

div.k2SearchBlock:after, div.k2SearchBlock:before, div.k2UsersBlock:after, div.k2UsersBlock:before, div.k2TagCloudBlock:after, div.k2TagCloudBlock:before, div.k2CategoriesListBlock:after, div.k2CategoriesListBlock:before, div.k2CategorySelectBlock, div.k2CategorySelectBlock:before, div.k2LoginBlock:after, div.k2LoginBlock:before, div.k2CalendarBlock:after, div.k2CalendarBlock:before, div.k2AuthorsListBlock:after, div.k2AuthorsListBlock:before, div.k2ArchivesBlock:after, div.k2ArchivesBlock:before, div.k2BreadcrumbsBlock:after, div.k2BreadcrumbsBlock:before, div.k2LatestCommentsBlock:after, div.k2LatestCommentsBlock:before, div.k2CustomCodeBlock:after, div.k2CustomCodeBlock:before, div.k2ItemsBlock:after, div.k2ItemsBlock:before {
    content: "";
    padding: 0
}

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

:root .fa-rotate-90, :root .fa-rotate-180, :root .fa-rotate-270, :root .fa-flip-horizontal, :root .fa-flip-vertical {
    filter: none
}

.fa-navicon:before, .fa-reorder:before, .fa-bars:before {
    content: "\f0c9"
}

.wf-columns {
    display: flex;
    gap: 1rem
}

    .wf-columns .wf-column {
        max-width: 100%;
        box-sizing: border-box;
        flex: 1
    }

.wf-columns-stack-large, .wf-columns-stack-medium, .wf-columns-stack-small, .wf-columns-stack-xlarge {
    flex-wrap: wrap
}

.wf-columns-gap-large {
    gap: 2rem
}

@media (max-width:960px) {
    .wf-columns-stack-medium > .wf-column {
        width: 100%;
        flex: auto !important
    }
}

@media (max-width:1200px) {
    .wf-columns-stack-large > .wf-column {
        width: 100%;
        flex: auto !important
    }
}

@media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
    .wf-columns .wf-column {
        margin-left: 1rem
    }

        .wf-columns .wf-column:first-child {
            margin-left: inherit
        }

        .wf-columns .wf-column:last-child {
            margin-right: inherit
        }

    .wf-columns-gap-large .wf-column {
        margin-left: 2rem
    }
}

@media all and (-ms-high-contrast:none) and (max-width:960px),(-ms-high-contrast:active) and (max-width:960px) {
    .wf-columns-stack-medium .wf-column {
        margin-left: inherit;
        margin-right: inherit;
        margin-top: 1rem
    }

        .wf-columns-stack-medium .wf-column:first-child {
            margin-top: inherit !important
        }
}

@media all and (-ms-high-contrast:none) and (max-width:1200px),(-ms-high-contrast:active) and (max-width:1200px) {
    .wf-columns-stack-large .wf-column {
        margin-left: inherit;
        margin-right: inherit;
        margin-top: 1rem
    }

        .wf-columns-stack-large .wf-column:first-child {
            margin-top: inherit !important
        }

    .wf-columns-stack-large.wf-columns-gap-large .wf-column {
        margin-top: 2rem
    }
}

@supports (not (scale:-1)) and (-webkit-hyphens:none) {
    .wf-columns .wf-column {
        margin-left: 1rem
    }

        .wf-columns .wf-column:first-child {
            margin-left: inherit
        }

        .wf-columns .wf-column:last-child {
            margin-right: inherit
        }

    .wf-columns-gap-large .wf-column {
        margin-left: 2rem
    }

    @media (max-width:960px) {
        .wf-columns-stack-medium .wf-column {
            margin-left: inherit;
            margin-right: inherit;
            margin-top: 1rem
        }

            .wf-columns-stack-medium .wf-column:first-child {
                margin-top: inherit !important
            }
    }

    @media (max-width:1200px) {
        .wf-columns-stack-large .wf-column {
            margin-left: inherit;
            margin-right: inherit;
            margin-top: 1rem
        }

            .wf-columns-stack-large .wf-column:first-child {
                margin-top: inherit !important
            }

        .wf-columns-stack-large.wf-columns-gap-large .wf-column {
            margin-top: 2rem
        }
    }
}

.rl_sliders .collapse {
    display: block;
    position: relative;
    height: auto;
    overflow: hidden;
    -webkit-transition: height 1ms ease;
    -moz-transition: height 1ms ease;
    -o-transition: height 1ms ease;
    transition: height 1ms ease
}

.rl_sliders.accordion {
    *zoom: 1;
    margin-bottom: 1em
}

    .rl_sliders.accordion > .accordion-group {
        margin-bottom: 2px;
        border: 1px solid #e5e5e5;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px
    }

        .rl_sliders.accordion > .accordion-group .accordion-heading {
            border-bottom: 0
        }

            .rl_sliders.accordion > .accordion-group .accordion-heading .accordion-toggle {
                display: block;
                padding: 8px 15px;
                cursor: pointer
            }

        .rl_sliders.accordion > .accordion-group > .accordion-body {
            padding: 0;
            border: 0
        }

            .rl_sliders.accordion:after, .rl_sliders.accordion:before, .rl_sliders.accordion > .accordion-group > .accordion-body > .accordion-inner:after, .rl_sliders.accordion > .accordion-group > .accordion-body > .accordion-inner:before {
                display: table;
                content: "";
                line-height: 0
            }

            .rl_sliders.accordion:after, .rl_sliders.accordion > .accordion-group > .accordion-body > .accordion-inner:after {
                clear: both
            }

    .rl_sliders.accordion:last-child {
        margin-bottom: 0
    }

    .rl_sliders.accordion > .accordion-group, .rl_sliders.accordion > .accordion-group > .accordion-heading > a.accordion-toggle {
        -webkit-transition-duration: .2s;
        -moz-transition-duration: .2s;
        -o-transition-duration: .2s;
        transition-duration: .2s
    }

        .rl_sliders.accordion > .accordion-group .panel-heading {
            padding: 0
        }

        .rl_sliders.accordion > .accordion-group > .accordion-heading > a.accordion-toggle:hover {
            background-color: #eee;
            color: #1f496e;
            text-decoration: none
        }

        .rl_sliders.accordion > .accordion-group.active > div > a:focus, .rl_sliders.accordion > .accordion-group > div > a:focus {
            outline: 0;
            -webkit-box-shadow: inset 0 0 2px #eab03f;
            box-shadow: inset 0 0 2px #eab03f
        }

        .rl_sliders.accordion > .accordion-group.icon > .accordion-heading > a.accordion-toggle span.rl_sliders-toggle-inner:before {
            display: inline-block;
            *margin-right: .3em;
            font-family: 'IcoMoon';
            font-style: normal;
            speak: none;
            content: "\2a"
        }

    .rl_sliders.accordion .rl_sliders-scroll {
        position: relative;
        visibility: hidden;
        padding: 0
    }

@media print {
    .rl_sliders .rl_sliders-group {
        border: 0 !important
    }

    .rl_sliders .accordion-heading {
        display: none !important
    }

    .rl_sliders .accordion-body {
        display: block !important;
        opacity: 1 !important;
        height: auto !important
    }

    .rl_sliders .rl_sliders-title {
        display: block !important
    }
}

.jf_mm_trigger {
    position: fixed;
    z-index: 981;
    width: 36px;
    height: 35px;
    color: #F5F5F5;
    top: 8px;
    font-size: 27px;
    text-align: center;
    cursor: pointer;
    background: #4A5052;
    line-height: 35px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px
}

#jf_mm_menu {
    position: fixed;
    top: 0;
    left: 0;
    height: 100% !important;
    z-index: 990
}

    #jf_mm_menu nav {
        z-index: 999
    }

.jf_mm_backout {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    background: #000;
    opacity: .3;
    filter: alpha(opacity=30);
    top: 0;
    left: 0;
    z-index: 980
}

#jf_mm_menu, .jf_mm_trigger {
    display: none
}

tbody {
    direction: rtl
}

div.chatallinonemod {
    bottom: 15px !important;
    right: 0px !important;
    position: fixed;
    z-index: 99999;
    width: auto !important
}

    div.chatallinonemod > button.chatallinonemodbuttonflat {
        height: 60px !important;
        width: 60px !important;
        padding: 0 !important;
        border-radius: 50%;
        line-height: 60px !important
    }

        div.chatallinonemod > button.chatallinonemodbuttonflat:hover {
            box-shadow: 0 8px 25px -5px rgba(45,62,79,.3);
            transition: all .3s;
            transition-property: all;
            transition-duration: 0.3s;
            transition-timing-function: ease;
            transition-delay: 0s
        }

        div.chatallinonemod > button.chatallinonemodbuttonflat span {
            display: block !important;
            height: 60px !important;
            background: url(/modules/mod_chatallinone/assets/images/phone3.svg) no-repeat 25% 45% !important;
            background-size: 59px 40px !important;
            background-repeat: no-repeat !important
        }

.chataio_agent {
    position: fixed;
    display: block !important;
    height: auto !important;
    z-index: 9999999 !important;
    bottom: 90px !important;
    background: #fff !important;
    box-shadow: rgba(0,0,0,0.3) 0px 0px 30px;
    font-family: "WYekan",WYekan,tahoma,sans-serif !important;
    box-sizing: content-box !important;
    border-radius: 10px;
    font-size: 14px;
    direction: rtl
}

    .chataio_agent h1, .chataio_agent h2, .chataio_agent p, .chataio_agent span {
        font-family: "WYekan",WYekan,tahoma,sans-serif !important;
        direction: rtl
    }

    .chataio_agent h1, .chataio_agent h2 {
        font-size: 22px;
        font-weight: 700;
        margin: 0 0 5px 0 !important
    }

    .chataio_agent p, .chataio_agent span {
        font-size: 14px;
        line-height: 130%
    }

.boxright {
    right: 15px
}

@media (max-width:360px) {
    .chataio_agent {
        width: 100% !important;
        bottom: 0;
        max-width: 100% !important;
        ;
        left: 0;
        right: 0
    }
}

.hide {
    display: none !important
}

.close_chat, .back_to_list {
    display: block;
    width: 40px !important;
    height: 40px;
    position: absolute;
    padding: 10px 0 5px 0;
    box-sizing: border-box;
    top: 10px;
    right: 10px;
    cursor: pointer;
    text-align: center;
    border-radius: 8px;
    background: url(/modules/mod_chatallinone/assets/images/arrow-down.svg) no-repeat center;
    background-size: 20px 20px !important
}

    .close_chat:hover, .back_to_list:hover {
        background-color: rgba(0,0,0,0.15)
    }

.back_to_list {
    background: url(/modules/mod_chatallinone/assets/images/arrow-left.svg) no-repeat center rgba(0,0,0,0.1)
}

.chataio_agent_header {
    border-radius: 10px 10px 0 0;
    padding: 20px 30px 35px 30px;
    display: block;
    text-align: left
}

.chataio_agent_image {
    width: 64px;
    float: left;
    border-radius: 50%;
    margin: 0;
    margin-right: 20px
}

.chataio_agent_header::before {
    content: "";
    top: 70px;
    left: 80px;
    width: 12px;
    height: 12px;
    box-sizing: border-box;
    background-color: rgb(74,213,4);
    display: block;
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    border-width: 2px;
    border-style: solid;
    border-color: rgb(239,239,239);
    border-image: initial
}

.chataio_agent_credentails {
    color: #fff !important;
    margin-top: 0;
    margin-bottom: 0 !important;
    padding-top: 10px
}

span.agent_name {
    font-weight: bold
}

.agents_icon_photo {
    width: 26%;
    float: left
}

.agents_message {
    width: 68%;
    background: #efefef;
    color: #000;
    padding: 10px 20px;
    margin-left: auto;
    border-radius: 0px 10px 10px 10px;
    text-align: left
}

p.agents_icon_photo > img {
    width: 30px;
    border-radius: 50%
}

.chatbuttons {
    float: left;
    width: 25%;
    height: 48px;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    margin: 0px 3px;
    border-radius: 6px;
    padding: 0px
}

.chatbutton {
    color: rgb(255,255,255);
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
    cursor: pointer;
    position: relative;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    -webkit-appearance: none;
    padding: 8px 12px;
    border-radius: 8px;
    border-width: initial;
    border-style: none;
    border-color: initial;
    border-image: initial;
    margin: 3px;
    overflow: hidden
}

.chat_buttons_cont {
    width: 96%;
    height: 100%;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    margin-bottom: 12px;
    margin-right: 2%;
    margin-left: 2%
}

.svgicons {
    fill: rgb(255,255,255);
    height: 26px !important;
    width: 26px !important
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

@media(max-width:768px) {
    .jf_mm_trigger, #jf_mm_menu {
        display: block
    }
}

#jf_mm_menu.jf_hidden {
    display: none !important
}

html {
    overflow-y: scroll;
    min-height: 100%
}

body {
    position: relative;
    margin: 0
}

img::selection {
    background: transparent
}

img::-moz-selection {
    background: transparent
}

p, hr, dl, blockquote, pre, fieldset, figure {
    margin: 15px 0 15px 0px
}

h1, h2, h3, h4, h5, h6 {
    margin: 25px 0 15px 0
}

dl {
    padding-left: 30px
}

dd {
    margin-left: 40px
}

h1, h2, h3, h4, h5, h6 {
    font-weight: normal
}

h1 {
    font-size: 36px;
    line-height: 36px
}

h2 {
    font-size: 24px;
    line-height: 30px
}

h3 {
    font-size: 18px;
    line-height: 22px
}

h4, h5, h6 {
    font-size: 16px;
    line-height: 18px
}

a, a:hover {
    text-decoration: none
}

b {
    font-weight: bold
}

small {
    font-size: 11px
}

ins {
    text-decoration: none
}

del {
    text-decoration: line-through
}

hr {
    display: block;
    height: 1px;
    padding: 0;
    border-top: 1px solid;
    border-bottom: 0
}

q, blockquote {
    quotes: '\201C' '\201D' '\2018' '\2019';
    font-family: "Times New Roman",Times,serif;
    font-style: italic
}

blockquote {
    padding: 0 20px;
    font-size: 16px;
    line-height: 22px
}

pre {
    padding: 10px;
    font-size: 12px;
    line-height: 18px
}

th, td {
    padding: 1px
}

button, input[type='button'], input[type='submit'] {
    padding: 2px 3px
}

body {
    padding: 0;
    font: inherit;
    color: inherit;
    background-color: inherit
}

img {
    vertical-align: baseline
}

pre, code {
    font-family: "Courier New",Monaco,monospace
}

pre {
    border-radius: 0;
    color: inherit
}

code {
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    color: inherit;
    font-size: inherit;
    white-space: normal
}

li {
    line-height: inherit
}

blockquote {
    border-left: none
}

q:before {
    content: open-quote
}

q:after {
    content: close-quote
}

.menu-dropdown .small {
    font-size: inherit
}

html {
    background: #2F302E
}

h1 {
    font-size: 28px;
    line-height: 34px
}

h1 {
    line-height: 30px !important
}

img, table {
    border: 0
}

body {
    font: normal 14px/20px Arial,Helvetica,sans-serif;
    color: #535353;
    background: #f9f9f9;
    border-top: 2px solid #000
}

a {
    color: #1F8DEF
}

    a:hover, em, code {
        color: #666
    }

ins, mark {
    background-color: #ffa
}

mark {
    color: #444
}

hr {
    border-top-color: #ddd
}

pre {
    border: 1px solid #ddd;
    background: #fafafa
}

h3 {
    line-height: 40px !important
}

#main {
}


textarea, input[type="text"], input[type="password"], select, #jform_email1, #jform_email2, #jform_email {
    border: 1px solid #DBDBDB;
    color: #888 !important;
    padding: 6px;
    border-radius: 0.2em
}

article p img, aside, details p img, figcaption p img, figure p img, footer p img, header p img, hgroup p img, nav p img, section p img, summary p img {
    max-width: 100%
}

button, input[type="button"], input[type="submit"] {
    cursor: pointer
}

.clearfix:before, .clearfix:after, .grid-block:before, .grid-block:after, .deepest:before, .deepest:after {
    content: "";
    display: table
}

.clearfix:after, .grid-block:after, .deepest:after {
    clear: both
}

.grid-box {
    float: left
}

.width20 {
    width: 20%
}

.width33 {
    width: 33.333%
}

.width66 {
    width: 66.666%
}

.width100 {
    width: 100%
}

[class*='width'] {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.float-right {
    float: right
}

.wrapper {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: auto
}

#header {
    position: relative
}

#headerbar .module {
    max-width: 300px;
    margin-right: 0;
    float: right
}

#logo, #logo > img, #menu {
    float: left
}

#footer {
    position: relative;
    text-align: center
}

.module, #content {
    margin: 4px
}

#header {
    min-height: 60px
}

#footer .module {
    margin: 0
}

#headerbar {
    margin-bottom: 15px
}

#block-top-b {
    padding-top: 13px !important
}

#block-bottom-a {
    padding-top: 5px !important
}

#block-bottom-b {
    padding-top: 5px !important
}

#block-bottom-c {
    padding-top: 5px !important
}

.menu-width {
    background: #238CF2 !important;
    border-top: 1px solid #4ab0e3 !important
}

    .menu-width .block-menu {
        box-shadow: none;
        background: none;
        border: none;
        margin-top: 8px;
        height: 53px
    }

#block-header {
    background: #F8F9FB
}

#toolbar {
    background: #F8F9FB;
    padding: 5px 0 1px
}

#headerbar {
    padding-top: 15px;
    min-height: 76px;
    margin: 0 !important
}

#block-bottom-c {
    background: #eaeaea;
    border-top: 4px solid #D7D7D7;
    border-bottom: 4px solid #D8D8D8
}

#menubar {
    background: #333;
    border-top: 1px solid #3A3A3A
}

#logo {
    width: 200px
}

    #logo p {
        margin: 0
    }

#menu {
    height: 40px
}

    #menu ul {
        margin-top: 7px
    }

#footer {
    padding: 35px 10px;
    color: #666;
    text-align: left
}

    #footer p {
        text-align: left
    }

    #footer a {
        color: #ddd
    }

        #footer a:hover {
            color: #f7f0ff !important
        }

.t1 {
    border-radius: .8em
}

.menu, .menu ul {
    margin: 0px;
    padding: 0px;
    list-style: none
}

    .menu a, .menu span {
        display: block
    }

    .menu a {
        text-decoration: none
    }

.menu-dropdown li {
    position: relative
}

.menu-dropdown, .menu-dropdown .level1, .menu-dropdown .level1 > span {
    float: left
}

    .menu-dropdown a.level1 > span, .menu-dropdown span.level1 > span {
        height: 30px;
        padding: 0 10px;
        line-height: 30px
    }

    .menu-dropdown .dropdown {
        display: none;
        position: absolute;
        top: 30px;
        left: 0;
        z-index: 100;
        width: 300px
    }

    .menu-dropdown li:hover .dropdown, .menu-dropdown li.remain .dropdown {
        display: block
    }

    .menu-dropdown .dropdown-bg > div {
        overflow: hidden
    }

    .menu-dropdown .column {
        float: left
    }

    .menu-dropdown a.level2 > span, .menu-dropdown span.level2 > span {
        padding: 7px 0;
        line-height: 21px;
        overflow: hidden
    }

.menu-sidebar a.level1 > span, .menu-sidebar span.level1 > span {
    padding: 5px 0;
    line-height: 20px
}

.menu-dropdown {
    margin-bottom: -10px
}

    .menu-dropdown li.level1 {
        margin-right: 10px;
        padding-bottom: 0px;
        background: none repeat scroll 0 0 rgba(0,0,0,0.07);
        border-radius: 5px 5px 0 0
    }

    .menu-dropdown a.level1, .menu-dropdown span.level1 {
        cursor: pointer
    }

        .menu-dropdown span.level1.parent, .menu-dropdown li.level1 a.parent {
            background: url("/templates/jp-kados/images/mix.png") no-repeat scroll right -126px transparent;
            padding-right: 7px
        }

            .menu-dropdown span.level1.parent > span {
                border-radius: 5px 5px 0 0
            }

    .menu-dropdown a.level1, .menu-dropdown span.level1 {
        color: #fff;
        padding-bottom: 4px
    }

    .menu-dropdown li.active .level1 {
        color: #6D6D6D;
        background: #fff !important;
        border-radius: 5px 5px 0 0;
        box-shadow: 0 -5px 8px -6px #A8A7A7 inset;
        -moz-box-shadow: 0 -5px 8px -6px #A8A7A7 inset;
        -webkit-box-shadow: 0 -5px 8px -6px #A8A7A7 inset
    }

    .menu-dropdown li.level1:hover .level1, .menu-dropdown li.remain .level1 {
        color: #6D6D6D;
        background: #fff;
        border-radius: 5px 5px 0 0;
        box-shadow: inset 0 -8px 8px -8px #A8A7A7,0 -8px 8px -8px #474747;
        -moz-box-shadow: inset 0 -8px 8px -8px #A8A7A7,0 -8px 8px -8px #474747;
        -webkit-box-shadow: inset 0 -8px 8px -8px #A8A7A7,0 -8px 8px -8px #474747
    }

        .menu-dropdown li.level1:hover .level1.parent, .menu-dropdown li.remain .level1.parent {
            box-shadow: 0 -8px 8px -8px #474747;
            -moz-box-shadow: 0 -8px 8px -8px #474747;
            -webkit-box-shadow: 0 -8px 8px -8px #474747;
            background: url("/templates/jp-kados/images/mix.png") no-repeat scroll right -168px #FFF !important
        }

    .menu-dropdown .dropdown {
        top: 34px
    }

    .menu-dropdown .dropdown-bg > div {
        padding: 0px;
        border: 1px solid #ddd;
        border-top: none;
        background: #fff
    }

    .menu-dropdown li.level2 {
        margin: 0;
        border-top: 1px solid #ECECEC
    }

        .menu-dropdown li.level2:first-child {
            border: none
        }

    .menu-dropdown a.level2, .menu-dropdown span.level2 {
        color: #7F7F7F;
        padding: 0 10px
    }

.menu-sidebar a, .menu-sidebar li > span {
    color: #535353
}

    .menu-sidebar a:hover, .menu-sidebar li > span:hover {
        color: #666
    }

.menu-sidebar li.level1 {
    border-top: 1px dotted #ddd
}

    .menu-sidebar li.level1:first-child {
        border-top: none
    }

.menu-sidebar a.level1 > span, .menu-sidebar span.level1 > span {
    padding: 8px 0
}

.wrapper {
    max-width: 1350px
}

#maininner {
    width: 100%
}

#menu .dropdown {
    width: 230px
}

.module {
    position: relative
}

.deepest > *:first-child {
    margin-top: 0
}

.deepest > *:last-child {
    margin-bottom: 0
}

.module .module-title {
    margin: 0 0 15px 0
}

.module .module-title {
    padding: 10px;
    margin: -15px -15px 15px;
    background: #f8f8f8
}

#block-bottom-c .module .module-title {
    background: none;
    margin: 0 -10px 15px;
    padding: 0 10px 10px 10px;
    border-bottom: 2px solid #D3D3D3
}

.mod-box, #content {
    background: #fefefe;
    border: 0px solid #F7F7F7;
    border-radius: .8em
}

.mod-box {
    padding: 12px
}

    .mod-box img {
        max-width: 100%
    }

#content {
    padding: 15px
}

.breadcrumbs {
    margin-left: 4px;
    margin-right: 4px;
    padding: 4px
}

#block-Breadcrumbs .mod-box, #block-bottom-c .mod-box, #block-Slideshow .mod-box, #block-top-first .mod-box {
    box-shadow: none;
    background: none;
    border: none
}

#block-top-first .mod-box {
    color: #ACACAC
}

#block-Slideshow .mod-box, #block-Slideshow .module {
    margin: 0;
    padding: 0
}

#block-bottom-c .mod-box ul.line > li, #block-bottom-c .module .module-title {
    border-top: none;
    text-shadow: 0 1px 1px #FFF
}

ul.blank, ul.space, ul.line, ul.check, ul.zebra {
    list-style: none;
    margin: 0;
    padding: 0
}

    ul.line > li {
        margin-top: 5px;
        padding-top: 5px
    }

        ul.line > li:first-child {
            margin-top: 0;
            padding-top: 0
        }

    ul.line > li {
        border-top: 1px dotted #ddd
    }

        ul.line > li:first-child {
            border: none
        }

.box-write {
    background: #fff;
    border: 1px solid #F6F6F6;
    border-radius: .8em;
    padding: 35px 25px
}

.box-button {
    background: #f8f8f8;
    border-radius: .8em;
    padding: 9px 35px
}

    .box-button:hover {
        background: #ffffff !important
    }

.box-write-home {
    color: #FFF !important;
    background: #6e4fbf;
    text-align: justify;
    border-radius: .8em;
    padding: 20px 35px;
    margin-bottom: 18px
}

.box-warning, .box-hint, .box-write-home {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd
}

.box-warning {
    color: #FFF !important;
    background: #68217A;
    border-color: 68217A;
    border-radius: .8em
}

.box-hint {
    color: #FFF !important;
    background: #22AD1F;
    text-align: justify;
    border: 1px solid #22AD1F;
    border-radius: .8em;
    padding: 20px 36px
}

.btn-class4, .btn-class6, .btn-class9, .btn-class4:hover, .btn-class6:hover, .btn-class9:hover {
    padding: 4px 8px;
    text-shadow: none !important;
    text-decoration: none !important;
    margin: 1px 3px;
    font-size: 1.1em;
    font-family: arial;
    cursor: pointer
}

.btn-class4, .btn-class6, .btn-class9 {
    color: #fff
}

i {
    padding-left: 5px;
    padding-right: 5px;
    vertical-align: middle
}

.btn-class4 {
    background: #6e4fbf !important;
    border: 4px solid #6e4fbf !important
}

    .btn-class4:hover {
        background: #5D35B0 !important;
        border: 4px solid #5D35B0 !important;
        color: #fff !important
    }

.btn-class6 {
    background: #EF3C52 !important;
    border: 4px solid #EF3C52 !important
}

    .btn-class6:hover {
        background: #ff3366 !important;
        border: 4px solid #f36 !important;
        color: #fff !important
    }

.btn-class9 {
    background: #fba236 !important;
    border: 3px #FEB737 !important
}

    .btn-class9:hover {
        background: #FFA70F !important;
        border: 3px #FFA70F !important;
        color: #fff !important
    }

.round {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px
}

.top-links {
    margin-top: -1px;
    padding-bottom: 1px
}

.cardbox {
    box-shadow: 0 15px 40px rgba(56,93,165,0.1)
}

.breadcrumbs {
    overflow: hidden
}

    .breadcrumbs a, .breadcrumbs span, .breadcrumbs strong {
        display: inline-block;
        text-decoration: none
    }

    .breadcrumbs a, .breadcrumbs > span {
        margin-right: 10px
    }

    .breadcrumbs a, .breadcrumbs > span {
        padding-right: 10px;
        background: url("/templates/jp-kados/images/mix.png") no-repeat scroll right -446px
    }

fieldset {
    border: none
}

#jform_email1, #jform_email2, #jform_email {
    padding: 5px;
    width: 250px
}

.clear:before, .clear:after {
    content: "";
    display: table
}

.clear:after {
    clear: both
}
/*
.uk-offcanvas-bar {
    padding: 20px;
    width: 250px;
    background: #212121 !important
}

    .uk-offcanvas-bar .menu-sidebar li.level1 {
        border-top: none;
        border-bottom: 1px solid #312f2f78
    }

        .uk-offcanvas-bar .menu-sidebar li.level1.active > div {
            height: auto !important
        }

    .uk-offcanvas-bar .menu-sidebar ul.level2 li {
        padding-right: 0 !important;
        padding-left: 0 !important;
        background: none
    }

    .uk-offcanvas-bar .menu-sidebar ul.level2 {
        padding: 0px 10px 0 0
    }

    .uk-offcanvas-bar .menu-sidebar li a.level1, .uk-offcanvas-bar .menu-sidebar li span.level1 span {
        font-size: 16px !important
    }

    .uk-offcanvas-bar .menu-sidebar .level2 a > span, .uk-offcanvas-bar .menu-sidebar .level2 span > span {
        font-size: 16px;
        line-height: 40px
    }

    .uk-offcanvas-bar .menu-sidebar a.current {
        font-weight: normal;
        color: #fffc
    }

    .uk-offcanvas-bar .menu-sidebar li.parent .level1 > span {
        background: none;
        padding: 13px 0
    }

.jf_mm_trigger {
    left: auto !important;
    right: 8px !important
}

.uk-offcanvas {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    background: rgba(0,0,0,0.1)
}

    .uk-offcanvas.uk-active {
        display: block
    }

.uk-offcanvas-page {
    position: fixed;
    -webkit-transition: margin-left 0.3s ease-in-out;
    transition: margin-left 0.3s ease-in-out
}

.uk-offcanvas-bar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    z-index: 1001;
    width: 270px;
    max-width: 100%;
    background: #333;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-transition: -webkit-transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out
}

.uk-offcanvas.uk-active .uk-offcanvas-bar.uk-offcanvas-bar-show {
    -webkit-transform: translateX(0%);
    transform: translateX(0%)
}

.uk-offcanvas-bar-flip {
    left: auto;
    right: 0;
    -webkit-transform: translateX(100%);
    transform: translateX(100%)
}

.uk-offcanvas .uk-panel {
    margin: 20px 15px;
    color: #777
}

.uk-offcanvas .uk-panel-title {
    color: #ccc
}

.uk-offcanvas .uk-panel a:not([class]) {
    color: #ccc
}

    .uk-offcanvas .uk-panel a:not([class]):hover {
        color: #fff
    }

@media (min-width:960px) {
    .uk-hidden-large {
        display: none !important
    }
}

@media (max-width:767px) {
    .uk-hidden-small {
        display: none !important
    }
}

.uk-hidden {
    display: none !important;
    visibility: hidden !important
}

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0,0)
}

.fa-rotate-90 {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg)
}

.fa-rotate-180 {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

.fa-rotate-270 {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg)
}

.fa-flip-horizontal {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0,mirror=1);
    -webkit-transform: scale(-1,1);
    -ms-transform: scale(-1,1);
    transform: scale(-1,1)
}

.fa-flip-vertical {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2,mirror=1);
    -webkit-transform: scale(1,-1);
    -ms-transform: scale(1,-1);
    transform: scale(1,-1)
}

:root .fa-rotate-90, :root .fa-rotate-180, :root .fa-rotate-270, :root .fa-flip-horizontal, :root .fa-flip-vertical {
    filter: none
}

.fa-bars:before {
    content: "\f0c9"
}

body#page {
    background: #fefefe
}

body {
    font-family: "WYekan",tahoma;
    font-size: 1.05em;
    line-height: 37px;
    text-align: justify
}

h1, h2, h2, h4, h5, h6 {
    text-align: right
}

button, input[type="button"], input[type="submit"], .btn-class1, .btn-class2, .btn-class3, .btn-class4, .btn-class5, .btn-class6, .btn-class7, .btn-class8, .btn-class9, .btn-class10, .btn-class11, .btn-class12, .btn-class13, .btn-class14, .btn-class15, .btn-class16, .btn-class17, .btn-class18 {
    font-family: "WYekan",tahoma;
    padding: 2px 6px
}

    .btn-class1:hover, .btn-class2:hover, .btn-class3:hover, .btn-class4:hover, .btn-class5:hover, .btn-class6:hover, .btn-class7:hover, .btn-class8:hover, .btn-class9:hover, .btn-class10:hover, .btn-class11:hover, .btn-class12:hover, .btn-class13:hover, .btn-class14:hover, .btn-class15:hover, .btn-class16:hover, .btn-class17:hover, .btn-class18:hover {
        font-family: "WYekan",tahoma;
        padding: 2px 6px
    }

#search .searchbox input, #header-responsive .searchbox input, button, input[type="button"], input[type="submit"], form, textarea, input {
    font-family: "WYekan",tahoma
}

.breadcrumbs {
    font-size: 13px
}

img {
    max-width: 100%;
    height: auto
}

#block-Breadcrumbs, .btn-class17:hover, .btn-class18:hover {
    background: #238CF2;
    height: 39px
}

#block-Slideshow {
    padding: 0px;
    background: #4b1395;
    border-bottom: 4px solid #D9D9D9;
    border-top: 1px solid #B5B5B5;
    box-shadow: inset 0 8px 8px -8px #1A1A1A,inset 0 -8px 8px -8px #696868;
    -moz-box-shadow: inset 0 8px 8px -8px #1A1A1A,inset 0 -8px 8px -8px #696868;
    -webkit-box-shadow: inset 0 8px 8px -8px #1A1A1A,inset 0 -8px 8px -8px #696868
}

.block-menu {
    background: repeat scroll 0 0% #2F98FE;
    margin-top: 11px;
    padding: 0 15px;
    border-radius: 5px 5px 0 0;
    box-shadow: inset 0 -8px 8px -8px #696868,0 -8px 8px -8px #222;
    -moz-box-shadow: inset 0 -8px 8px -8px #696868,0 -8px 8px -8px #222;
    -webkit-box-shadow: inset 0 -8px 8px -8px #696868,0 -8px 8px -8px #222;
    border-top: 1px solid #4AB0E3;
    border-left: 1px solid #40A6D9;
    border-right: 1px solid #40A6D9;
    width: auto;
    height: 42px
}

#block-footer {
    background: #2F302E;
    border-top: 4px solid #4C4C4C
}

.menu-dropdown a.level2:hover {
    color: #fff;
    background: #2A98FA
}

#menubar, .sticky2 {
    -webkit-transition: top 500ms ease 0s;
    -moz-transition: top 500ms ease 0s;
    -ms-transition: top 500ms ease 0s;
    -o-transition: top 500ms ease 0s;
    transition: top 500ms ease 0s
}

.sticky2 {
    background: rgba(0,0,0,0.7) !important;
    top: -80px;
    position: fixed;
    z-index: 1000;
    width: 100%;
    height: 36px
}

.module .module-title {
    border-bottom: 2px solid #1D86EC
}

    .module-title .color, .module .module-title .fa {
        color: #147BD8
    }

#totop-scroller {
    display: block;
    position: absolute;
    top: -42px;
    right: 0;
    z-index: 1;
    width: 32px;
    height: 39px;
    background: url(/templates/jp-kados/images/totop_scroller.png) no-repeat center 10px #4B4B4B;
    text-decoration: none
}

    #totop-scroller:hover {
        background-color: #52BBFE
    }

a {
    color: #6a49bf
}

#system .title a:hover, #footer a:hover {
    color: #800080
}

.block-menu {
    background-color: #8A61B1;
    border-top: 1px solid #A178C8;
    border-left: 1px solid #9D74C4;
    border-right: 1px solid #9D74C4
}

.module-title .color, .module .module-title .fa {
    color: #521f82
}
*/
.menu-dropdown:hover li.level2 a.parent:hover, .menu-dropdown li.level2 a.parent:hover, .menu-dropdown li.level2 span.parent:hover, .menu-dropdown a.level2:hover {
    background-color: #855CAC !important
}

textarea:hover, input[type="text"]:hover, input[type="password"]:hover, select:hover, textarea:focus, input[type="text"]:focus, input[type="password"]:focus, select:focus {
    border: 1px solid #855CAC !important
}

.module .module-title {
    border-color: #855CAC;
    border-radius: 0.4em 0.4em 0.4em
}

button, input[type="button"], input[type="submit"] {
    background: #855CAC;
    border-color: #855CAC;
    border-radius: 0.2em;
    color: #fff
}

    button:hover, input[type="button"]:hover, input[type="submit"]:hover {
        border-color: #855CAC
    }

#block-Breadcrumbs, .btn-class17:hover, .btn-class18:hover {
    background-color: #855CAC
}

#totop-scroller:hover {
    background-color: #A980D0
}

#block-Breadcrumbs .breadcrumbs {
    color: #F1C8FF
}

.menu-width {
    background-color: #8e56d8 !important;
    border-top-color: #A178C8 !important
}

.sticky2 {
    background: none repeat scroll 0 0 rgba(0,0,0,0.7) !important
}

ul, ol, dl {
    padding-left: 0;
    padding-right: 1px
}

dd {
    margin-left: 0;
    margin-right: 40px
}

.grid-box, .bfc-f, .float-left {
    float: right
}

.float-right {
    float: left
}

#headerbar .module {
    margin-left: 0;
    margin-right: 15px;
    float: left
}

#logo, #logo > img, #menu {
    float: right
}

#search {
    float: left
}

.menu-dropdown, .menu-dropdown .level1, .menu-dropdown .level1 > span {
    float: right
}

    .menu-dropdown .dropdown {
        left: auto;
        right: 0
    }

    .menu-dropdown .column {
        float: right
    }

.searchbox input {
    float: right
}

.breadcrumbs a, .breadcrumbs > span {
    margin-right: 0;
    margin-left: 10px
}

#totop-scroller {
    right: auto;
    left: 0
}

.menu-dropdown li.level1 {
    margin-right: 0;
    margin-left: 10px
}

    .menu-dropdown span.level1.parent, .menu-dropdown li.level1 a.parent {
        background-position: -13px -126px
    }

    .menu-dropdown li.level1.active a.parent, .menu-dropdown li.level1.parent.active span.separator, .menu-dropdown li.level1:hover .level1.parent, .menu-dropdown li.remain .level1.parent {
        background-position: -13px -168px !important
    }

    .menu-dropdown li.level1 a.parent, .menu-dropdown li.level1.parent span.separator {
        padding-right: 0px;
        padding-left: 7px
    }

.menu-dropdown li.level2 a.parent .level2, .menu-dropdown li.remain .level2 a.parent, .menu-dropdown li.level2 span.parent {
    background-position: left -168px !important;
    padding: 0 10px 0 0 !important
}

    .menu-dropdown li.level2 a.parent:hover .level2, .menu-dropdown li.remain .level2 a.parent:hover, .menu-dropdown li.level2 span.parent:hover {
        background-position: left -126px !important
    }

.menu-sidebar li.parent .level1 > span {
    background-position: left -205px !important
}

.menu-sidebar li.parent:hover .level1 > span {
    background-position: left -245px !important
}

#headerbar .module {
    margin-right: 5px
}

.menu-sidebar ul.level2 li {
    background-position: 103% -1px;
    padding-right: 18px;
    padding-left: 0px
}

    .menu-sidebar ul.level2 li:hover {
        background-position: 103% -21px;
        padding-right: 18px;
        padding-left: 0px
    }

#search {
    padding: 0
}

    #search .searchbox {
        background-position: 0 50%;
        right: auto
    }

        #search .searchbox input:focus {
            padding-left: 0px !important;
            padding-right: 10px !important
        }

.breadcrumbs a, .breadcrumbs > span {
    padding-right: 0;
    padding-left: 10px;
    background-position: 0 -761px;
    background-size: 150%
}

.searchbox {
    left: auto;
    padding: 0
}

#footer {
    text-align: right
}

    #footer p {
        text-align: right
    }

#footer {
    text-align: right
}

.uk-offcanvas-bar {
    left: auto !important;
    right: 0 !important;
    -webkit-transform: translateX(100%) !important;
    transform: translateX(100%) !important;
    padding: 20px;
    width: 250px
}

.uk-offcanvas.uk-active .uk-offcanvas-bar.uk-offcanvas-bar-show {
    -webkit-transform: translateX(0%) !important;
    transform: translateX(0%) !important
}

.uk-offcanvas-page {
    -webkit-transition: margin-right 0.3s ease-in-out !important;
    transition: margin-right 0.3s ease-in-out !important
}

.uk-offcanvas-bar .searchbox input {
    border: 1px solid #6161616e;
    padding: 5px 0;
    font-size: 1.125em;
    background: #00000026;
    border-radius: 4px;
    text-indent: 7px
}

#header-responsive {
    display: none
}

@media (max-width:959px) {
    #maininner, #sidebar-a, #sidebar-b {
        width: 100%;
        left: auto;
        right: auto
    }
}

@media (min-width:480px) and (max-width:959px) {
    .width16, .width20, .width25, .width40, .width60, .width75, .width80 {
        width: 50%
    }

        #sidebar-a .width100:nth-child(odd):last-child, #sidebar-b .width100:nth-child(odd):last-child, .width20:nth-child(odd):last-child {
            width: 100%
        }
}

@media (max-width:767px) {
    .width33, .width66 {
        width: 100%
    }

    #header-responsive {
        display: block
    }

        #header-responsive .logo, #header-responsive .searchbox {
            display: inline-block;
            width: 45%;
            vertical-align: middle
        }

        #header-responsive .logo {
            margin-right: 10%
        }

        #header-responsive .searchbox {
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box
        }
}

@media (max-width:479px) {
    body {
        word-wrap: break-word
    }

    .width16, .width20, .width25, .width40, .width50, .width60, .width75, .width80 {
        width: 100%
    }
}

@media (max-width:400px) {
    @-ms-viewport {
        width: 320px
    }
}

@media (min-width:960px) and (max-width:1280px) {
    #block-top-first, #block-header, #block-main, #menubar, #block-top-a, #block-top-b, #block-top-c, #block-bottom-a, #block-bottom-b, #block-bottom-c {
        padding: 0 15px
    }

    #toolbar {
        padding: 3px 15px 1px 15px
    }
}

@media (max-width:1023px) {
    .block-menu {
        width: 100% !important
    }

    .menu-dropdown li.level1 {
        margin-right: 5px
    }

    .menu-dropdown a.level1 > span, .menu-dropdown span.level1 > span {
        padding: 0 10px 0 6px
    }
}

@media (max-width:959px) {
    .block-menu {
        border-radius: 0
    }
}

@media (min-width:768px) and (max-width:959px) {
    .searchbox input:focus {
        width: 141px
    }
}

@media (max-width:767px) {
    #toolbar, #headerbar, #menubar, #breadcrumbs, #totop-scroller {
        display: none
    }

    #header-responsive .logo {
        width: 100%;
        margin-right: 0 !important;
        padding: 5px 0px;
        border-bottom: 1px solid #282828
    }

    #header-responsive .searchbox {
        width: auto;
        height: 39px;
        margin-bottom: 5px;
        margin-right: 0px;
        margin-top: 2px;
        float: right
    }

        #header-responsive .searchbox input:focus {
            width: 130px;
            height: 38px;
            float: right
        }
}

@media (max-width:479px) {
    #block-top-first {
        display: none
    }
}

ul.jp-social li a, ul.jp-social li a:hover, #btl-panel-registration, #btl-panel-registration:hover, #btl-panel-login, #btl-panel-login:hover, #search form, #search form:hover, a, a:hover, #toolbar ul.menu li a span, #toolbar ul.menu li a span:hover, button, button:hover, input[type="button"], input[type="submit"], input[type="button"]:hover, input[type="submit"]:hover, .menu-dropdown li.level1.parent span.separator, .menu-dropdown:hover li.level1.parent:hover span.separator, .gkIsWrapper-gk_corporate2 .gkIsList li:first-child, .gkIsWrapper-gk_corporate2 .gkIsList li, .gkIsWrapper-gk_corporate2 .gkIsList li:hover, .gkIsWrapper-gk_corporate2 .gkIsList li.active, .gkIsWrapper-gk_corporate2 .gkIsList li:first-child.active, .gkIsWrapper-gk_corporate2 .gkIsList li:first-child:hover, #pricing-table h3 span, #pricing-table h3 span:hover, #pricing-table .signup, #pricing-table .signup:hover, #top-slide, #block-top-first .bag:hover .over, #block-top-first .over, #block-top-first .bag:hover #top-slide, #btl-panel-profile, #btl-panel-profile:hover, .sprocket-mosaic-filter li:hover, .sprocket-mosaic-order li:hover, .sprocket-mosaic-filter li, .sprocket-mosaic-order li, .sprocket-mosaic .sprocket-mosaic-header li, .top-links a:after, .top-links a:hover:after, .searchbox input, .searchbox input:focus, .drop-down .box, .drop-down:hover .box, .sprocket-lists-title, .sprocket-lists ul li.active h4, .wk-slideshow-kados .next, .wk-slideshow-kados .prev, .wk-slideshow-kados .next:hover, .wk-slideshow-kados .prev:hover, .wk-slideshow-kados .nav span, .wk-slideshow-kados .nav span:hover, .username input, .password input, .username input:hover, .password input:hover, .sprocket-mosaic .sprocket-mosaic-item, .sprocket-mosaic .sprocket-mosaic-item:hover, .sprocket-strips-content, .sprocket-strips-content:hover, .mod-box-color8, .mod-box-color8:hover, .mod-box-color9, .mod-box-color9:hover, .sprocket-tabs-nav > li, .sprocket-tabs-nav > li.active, .sprocket-tabs-text, .sprocket-tabs-nav > li.active .sprocket-tabs-text {
    -webkit-transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -ms-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out
}

div.chatallinonemod {
    right: 25px !important
}

.boxright {
    right: 30px !important
}

div.chatallinonemod.chataio > button.chatallinonemodbuttonflat {
    background: #6e4fbf !important;
    color: #ffffff !important
}

    div.chatallinonemod.chataio > button.chatallinonemodbuttonflat:hover {
        background: #6e4fbf !important;
        color: #ffffff !important
    }

.chataio_agent {
    width: 330px
}

.chataio_agent_header {
    background: #6e4fbf !important
}

div.chatallinonemod > button.chatallinonemodbuttonflat span {
    background: url('/modules/mod_chatallinone/assets/images/bubbles/dialog.svg') no-repeat 52% 45% !important
}

.chatbutton-whatsapp {
    background: #4FCE5D !important
}

.chatbutton-telegram {
    background: #08C !important
}

.chatbutton-call {
    background: #685AB0 !important
}

@media only screen and (max-device-width:480px) {
    div.chatallinonemod {
        right: 5px !important
    }

    .chataio_agent {
        width: 96% !important
    }

    .boxright {
        right: 8px !important
    }
}

.chataio_agent_image {
    width: 64px;
    float: right;
    background-color: white;
    margin-left: 20px;
    margin-right: initial;
    padding: 2px
}

.chataio_agent_header {
    text-align: right
}

    .chataio_agent_header::before {
        right: 80px;
        left: initial
    }

.close_chat, .back_to_list {
    left: 10px;
    right: initial
}

.agents_icon_photo {
    float: right;
    padding: 2px;
    text-align: left
}

.agents_message {
    margin-right: auto;
    margin-left: 0;
    border-radius: 10px 0px 10px 10px;
    text-align: right
}

div.greeting > div:has(.agents_message) {
    margin: 10% 0% 12% 5% !important
}

.chataio_agent {
    font-family: inherit !important
}

    .chataio_agent h1, .chataio_agent h2, .chataio_agent p, .chataio_agent span {
        font-family: inherit !important
    }

.chatbuttons.chatbutton:hover {
    transform: scale(1.05)
}

@-webkit-keyframes flip {
    0% {
        -webkit-transform: perspective(400px) rotate3d(0,1,0,-360deg);
        transform: perspective(400px) rotate3d(0,1,0,-360deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    40% {
        -webkit-transform: perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);
        transform: perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    50% {
        -webkit-transform: perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);
        transform: perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    80% {
        -webkit-transform: perspective(400px) scale3d(.95,.95,.95);
        transform: perspective(400px) scale3d(.95,.95,.95);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    100% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
}

@keyframes flip {
    0% {
        -webkit-transform: perspective(400px) rotate3d(0,1,0,-360deg);
        transform: perspective(400px) rotate3d(0,1,0,-360deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    40% {
        -webkit-transform: perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);
        transform: perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    50% {
        -webkit-transform: perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);
        transform: perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    80% {
        -webkit-transform: perspective(400px) scale3d(.95,.95,.95);
        transform: perspective(400px) scale3d(.95,.95,.95);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    100% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
}

@-webkit-keyframes rollIn {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);
        transform: translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes rollIn {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);
        transform: translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}