/* * {
    box-sizing: border-box;
}

sup {
    top: -.5em;
}

sub,
sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
}

.acc_card,
.acc_position {
    z-index: 999999 !important;
    box-shadow: 0 0 10px 0 rgb(0 0 0 / 10%);
    display: flex
}

.acc_ui_container {
    bottom: 10% !important;
    top: unset !important;
    right: 0 !important;
    z-index: 999999 !important;
    font-family: Prompt, sans-serif;
    font-weight: 300;
    -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
}

.acc_position {
    position: fixed;
    box-sizing: initial;
    padding: 5px;
    cursor: pointer;
    border-radius: var(--acc-widget-icon-radius)
}

.acc_postion_bottom_right {
    bottom: 100px !important;
    right: 0;
}

.acc_postion_top_right {
    top: 50px;
    right: 0;
}

.acc_postion_bottom_left {
    bottom: 50px;
    left: 0;
}

.acc_postion_top_left {
    top: 50px;
    left: 0;
}

.DisplayNone {
    display: none;
}

.acc_card {
    position: fixed;
    text-align: right;
    padding: 10px;
    flex-direction: column;
    justify-content: space-between;
    top: var(--acc-widget-vertical-relative-position);
    bottom: var(--acc-widget-vertical-relative-position);
    height: calc(100vh - (var(--acc-widget-vertical-relative-position) *2))
}

.acc_card_one_column,
.acc_card_two_column {
    width: 375px;
}

#acc_toast,
.acc_card_three_column {
    width: 500px
}

.acc_card_header {
    align-items: center !important;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
    line-height: 17px !important;
    font-size: 17px !important;
}

.acc_card_header_title {
    margin: 0;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 0;
}

sup.acc_version {
    font-size: 12px;
    padding: 0 5px;
    font-weight: 400;
    margin: 5px;
}

.acc_card_header_close {
    cursor: pointer
}

#acc_toast_close svg,
.acc_card_header_close svg {
    height: 30px !important;
    padding: 5px;
    margin-bottom: -5px
}

.acc_settings {
    padding: 0;
    border-radius: var(--acc-widget-radius)
}

.acc_selected_box,
.acc_settings {
    color: var(--acc-background-color)
}

.acc_lang_select,
.acc_profile_select {
    cursor: pointer;
    padding: 10px 15px;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    justify-content: space-between
}

.acc_svg_arrow_down,
.acc_svg_arrow_left {
    height: 15px !important;
    width: auto;
    margin: auto 0
}

.acc_lang_list_li_span,
.acc_lang_selector,
.acc_profile_selector {
    display: flex;
    gap: 5px
}

.acc_svg_flag {
    height: 25px;
    width: 25px;
    margin: auto 0;
    border: 1px solid;
}

.acc_lang_list {
    text-align: left;
    margin: 2%;
    width: 96%;
    padding: 2px;
    cursor: pointer;
    background: var(--acc-text-color);
    border-radius: var(--acc-widget-radius)
}

ul.acc_lang_list_ul {
    list-style: none;
    position: relative;
    padding: 0 12px;
    margin: 2%;
    overflow: auto;
    max-height: 150px
}

li.acc_lang_list_li {
    font-size: 13px;
    font-weight: 400;
    padding: 5px 5px 5px 0;
    display: flex;
    justify-content: space-between
}

li.acc_lang_list_li:not(:last-child) {
    border-bottom: 1px solid
}

li.acc_lang_list_li_span {
    font-size: 13px;
    font-weight: 400
}

.acc_lang_select_arrow {
    margin: auto 0;
    display: flex
}

.acc_arrow_down {
    transform: rotate(90deg)
}

.acc_svg_check_mark {
    width: 15px;
    height: 15px;
    border-radius: 100%;
    padding: 2px;
    margin: auto 0;
}

.acc_lang_select,
.acc_profile_select {
    width: 100%
}

.acc_lang_select_span,
.acc_profile_select_span {
    align-self: center;
}

.acc_profile_list_li_span svg,
.acc_profile_selector svg {
    max-width: 30px;
    max-height: 30px;
    height: 28px;
    width: 28px;
    border: 1px solid var(--acc-text-color);
    border-radius: 20px;
    background-color: var(--acc-text-color);
    color: var(--acc-background-color)
}

.acc_lang_list_li_span svg,
.acc_lang_selector svg {
    max-width: 30px;
    max-height: 30px;
    height: 25px;
    width: 25px;
    border: 1px solid;
    border-radius: 20px
}

.acc_profile_box {
    align-items: center;
    position: relative;
    cursor: pointer;
    padding: 12px;
    border-width: 1px;
    border-style: solid;
    display: flex;
    margin: 1%;
    height: 80px;
    font-size: 14px;
    border-radius: var(--acc-widget-radius);
    opacity: .9;
}

.acc_profile_active_badge {
    line-height: 16px;
    letter-spacing: .6px;
    animation: none;
    font-size: 12px;
    padding: 0 5px;
    margin: 0 !important;
    height: 16px;
    min-height: auto;
    border-radius: 10px;
}

.acc_profile_active_badge,
.acc_profile_box {
    font-weight: 400;
    background: var(--acc-text-color);
    color: var(--acc-background-color);
}

.acc_card_box_left,
.acc_profile_box_left {
    float: left
}

.acc_profile_box_two_column {
    justify-content: center;
    flex-direction: column;
    width: 48%;
}

.acc_card_box_selected svg,
.acc_profile_box_selected svg {
    height: 20px;
    width: 20px;
}

.acc_card_box {
    align-items: center;
    position: relative;
    cursor: pointer;
    padding: 12px;
    border-width: 1px;
    border-style: solid;
    display: flex;
    margin: 2%
}

.acc_card_box_two_column {
    justify-content: center;
    flex-direction: column;
    width: 46%;
    height: 125px
}

.acc_card_box_one_column {
    justify-content: flex-start;
    flex-direction: row;
    width: 96%;
    height: 50px
}

.acc_card_box_three_column {
    justify-content: center;
    flex-direction: column;
    width: 29.2%;
    height: 125px
}

.acc_card_box svg {
    height: 50px;
    padding: 10px
}

.acc_card_box_right {
    float: right
}

.acc_card_box_left,
.acc_profile_box_left {
    float: left
}

.acc_card_box_text {
    text-align: center;
    line-height: 20px;
    font-size: 14px;
    font-family: Prompt, sans-serif;
    letter-spacing: 0
}

.acc_selected_box {
    border-radius: 20px;
    border-width: 1px;
    border-style: double;
    transition: border-color 3s;
    border-color: var(--acc-text-color) !important;
    background: var(--acc-text-color);
    box-shadow: inset 0 0 0 2px var(--acc-background-color)
}

.acc_card_box_steps {
    display: flex
}

.acc_card_box_steps1,
.acc_card_box_steps2,
.acc_card_box_steps3,
.acc_card_box_steps4,
.acc_card_box_steps_sub {
    background-color: var(--acc-background-color);
    display: block !important;
    padding: 2px 10px;
    border-radius: 20px;
    margin: 10px 1.5px 0;
    opacity: .3
}

.acc_card_box_selected,
.acc_card_box_steps_count,
.acc_profile_box_selected {
    position: absolute;
    right: 0;
    margin: 10px;
    top: 0;
    line-height: 14px;
    text-align: center;
    font-size: 12px !important;
    padding: 0 5px;
    letter-spacing: 0 !important
}

.acc_card_box_steps_count_number {
    background-color: transparent !important
}

#acc_toast {
    margin: auto;
    background-color: rgba(211, 40, 25, .9);
    color: #fff;
    border-radius: 20px;
    position: fixed;
    z-index: 999;
    left: 0;
    right: 0;
    bottom: 30px
}

#acc_toast #acc_toast_close {
    margin: 15px;
    float: right;
    border-radius: 30px;
    cursor: pointer;
    line-height: 20px !important
}

#acc_toast #acc_toast_message {
    padding: 15px 30px;
    line-height: 30px;
    font-size: 16px !important
}

.DisplayNone {
    display: none
}

.acc_read_focus,
.acc_read_focus_arrow {
    display: block !important;
    transform: translateX(-50%)
}

.grayscale {
    filter: grayscale(100%)
}

.invertcolor {
    filter: invert(100%)
}

.invertcolor_greayscale {
    filter: invert(1) grayscale(100%)
}

.acc_cursor {
    cursor: url("/apps/accessibility/assets/images/aca_cursor.svg"), auto !important
}

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

    .acc_card_one_column,
    .acc_card_three_column,
    .acc_card_two_column {
        width: 100%;
        bottom: 0 !important;
        right: 0 !important;
        left: 0 !important;
        top: 30vh;
        height: 70vh !important
    }

    .acc_card_postion_bottom_left,
    .acc_card_postion_bottom_right,
    .acc_card_postion_top_left,
    .acc_card_postion_top_right {
        bottom: 0;
        right: 0
    }
}

.acc_tooltip {
    height: auto !important;
    width: auto !important;
    padding: 5px 10px;
    border: 2px solid;
    margin: 10px;
    text-align: center;
    box-shadow: 0 0 5px 5px #ccc;
    border-radius: 10px;
    z-index: 9999;
    opacity: .7;
    position: absolute !important
}

.acc_tooltip:hover {
    opacity: 1 !important
}

.acc_read_focus {
    box-sizing: border-box;
    width: 40vw !important;
    min-width: 200px !important;
    position: absolute !important;
    height: 8px !important;
    border-radius: 5px;
    top: 20px;
    z-index: 2147483647;
    background: var(--acc-read-focus-color);
    border-color: var(--acc-read-focus-color)
}

.acc_read_focus_arrow {
    bottom: 100%;
    left: 50%;
    width: 20px;
    height: 0;
    position: absolute
}

.acc_read_focus_arrow:after,
.acc_read_focus_arrow:before {
    content: "";
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
}

.acc_read_focus_arrow:before {
    border-width: 17px;
    margin-left: -17px
}

.acc_read_focus_arrow:after {
    border-width: 14px;
    margin-left: -14px
}

.acc_svg_check_mark,
.appfiy_acc_menu_item {
    color: var(--acc-text-color)
}

.acc_1_row,
.acc_2_row,
.acc_card_row {
    overflow-y: auto;
}


.acc_card_footer_reset {
    align-items: center !important;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    font-size: 13px;
    line-height: 20px;
    letter-spacing: 0;
}

.acc_card_footer_reset_button {
    display: flex;
    color: var(--acc-background-color);
    padding: 5px 10px;
    cursor: pointer;
    font-weight: 400;
    justify-content: center;
}

.acc_card_footer_reset_text {
    font-size: 15px;
    text-align: center;
    line-height: 20px;
}

.acc_card_footer_reset a {
    font-size: 12px !important;
    line-height: 14px !important;
}

.acc_footer_link {
    text-align: center;
}

.acc_footer_link a {
    text-decoration: none !important;
    font-size: 13px !important;
    line-height: 13px !important;
    letter-spacing: 0 !important;
}

.acc_footer_link a:hover {
    padding: 0 10px;
    font-weight: 400;
    background-color: var(--acc-text-color) !important;
    color: var(--acc-background-color) !important
}

.acc_1_row:after,
.acc_2_row:after,
.acc_card_row:after {
    content: "";
    display: table;
    clear: both
}

.acc_1_row::-webkit-scrollbar,
.acc_2_row::-webkit-scrollbar,
.acc_card_row::-webkit-scrollbar,
.acc_lang_list_ul::-webkit-scrollbar {
    visibility: hidden;
    width: 6px
}

.acc_1_row::-webkit-scrollbar-thumb,
.acc_2_row::-webkit-scrollbar-thumb,
.acc_card_row::-webkit-scrollbar-thumb,
.acc_lang_list_ul::-webkit-scrollbar-thumb {
    border-radius: 30px
}

.acc_1_row::-webkit-scrollbar-track,
.acc_2_row::-webkit-scrollbar-track,
.acc_card_row::-webkit-scrollbar-track,
.acc_lang_list_ul::-webkit-scrollbar-track {
    background-color: #ffffff50;
    border-radius: 30px
}

.acc_lang_list_ul::-webkit-scrollbar:end {
    background: 0 0;
    margin-bottom: 10px
}

.acc_lang_list_ul::-webkit-scrollbar:start {
    background: 0 0;
    margin-top: 10px
}


/* [class*=acc_position] svg {
    height: var(--acc-icon-size)
} */

.acc_card_row::-webkit-scrollbar-track {
    background-color: var(--acc-background-color);
    border: .1px solid var(--acc-text-color)
}

.acc_lang_list_ul::-webkit-scrollbar-track {
    background-color: var(--acc-text-color);
    border: .1px solid var(--acc-background-color)
}

.acc_selected_box .acc_svg_hide_images path,
.acc_selected_box .acc_svg_highlight_colors path,
.acc_selected_box .acc_svg_mute_sounds path,
.acc_selected_box svg {
    fill: var(--acc-background-color) !important
}

.acc_card_box:hover {
    box-shadow: 0 0 0 2px var(--acc-text-color)
}

.acc_1_row::-webkit-scrollbar-thumb,
.acc_2_row::-webkit-scrollbar-thumb,
.acc_card_row::-webkit-scrollbar-thumb {
    background: var(--acc-text-color)
}

.acc_lang_list_ul::-webkit-scrollbar-thumb {
    background: var(--acc-background-color)
}

.acc_read_focus_arrow:after,
.acc_read_focus_arrow:before {
    border-bottom-color: var(--acc-read-focus-color)
}

.acc_card,
.acc_card_box,
.acc_card_box_steps_count,
.acc_card_footer_reset_button,
.acc_count_badge,
.acc_footer_link a,
.acc_version {
    border-radius: var(--acc-widget-radius) !important
}

.acc_count_badge {
    color: #fff;
    background: #ff0000cc;
    text-align: center;
    padding: 5px;
    line-height: 9px;
    height: 20px;
    width: 20px;
    position: absolute;
    margin: -5px;
}

.acc_count_badge {
    height: 21px !important;
    width: 21px !important;
}

.acc_count_badge span {
    line-height: 11px !important;
}

#acc_toast_close svg,
.acc_card_header_close svg {
    background: var(--acc-text-color);
    color: var(--acc-background-color);
    border-radius: var(--acc-widget-radius)
}

.acc_svg_hide_images path,
.acc_svg_highlight_colors path,
.acc_svg_mute_sounds path {
    fill: var(--acc-text-color) !important
}

.acc_highlight_link {
    color: var(--acc-highlight-link) !important;
    border-bottom: 2px solid var(--acc-highlight-link) !important;
    /* color: orange !important; */
}

.acc_highlight_header {
    background-color: var(--acc-highlight-headers) !important;
}

.acc_loader {
    border: 6px solid var(--acc-background-color);
    /* Light grey */
    border-top: 6px solid var(--acc-text-color);
    /* Blue */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.acc_card_play_button, .acc_card_pause_button, .acc_card_cancle_button{
    display: flex;
    color: var(--acc-text-color);
    cursor: pointer;
    justify-content: center;
    margin: 2px;
}


.acc_card_play_button svg,
.acc_card_pause_button svg,
.acc_card_cancle_button svg{
    height: 35px;
    padding: 3px;
    margin: 4px 0px -8px 0px;
} 

.acc_card_play_button svg polygon, 
.acc_card_pause_button svg line, 
.acc_card_cancle_button svg rect{
    fill: var(--acc-text-color) !important;
    stroke: var(--acc-text-color) !important;
}

.acc_card_read_buttons{
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* margin: 8px 0px 0px 0px; */
}

.anotherWindow {
    background-color: var(--acc-text-color);
    overflow: auto;
    color: var(--acc-background-color);
    border-radius: var(--acc-widget-radius);
    /* display: flex; */
    text-align: left;
    /* flex-direction: column; */
    padding: 10px;
}

.acc_card_back_button{
    cursor: pointer;
}

.anotherWindow::-webkit-scrollbar {
    visibility: hidden;
    width: 6px
}

.anotherWindow::-webkit-scrollbar-thumb {
    border-radius: 30px;
    background-color: var(--acc-background-color);
}

.anotherWindow::-webkit-scrollbar-track {
    background-color: var(--acc-text-color);
    border: .1px solid var(--acc-background-color);
    border-radius: 10px;
} */

.animationdiv{
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 2;
    animation-direction: alternate-reverse;  
  }
  
  @keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
  }