@charset "UTF-8";
:root {
    --font-s0: 'Inter', Verdana, Arial, Sans-Serif;
    --font-s1: 'Roboto Condensed', Verdana, Arial, Sans-Serif;
    --font-mono: 'Roboto Mono', monospace;
    --font-icon: 'Font Awesome 6 Pro';
    --max-width: 1200px;
    --default-bg: #ffffff;
    --header-bg0: #262A33;
    --header-bg1: #3b4147;
    --header-icon: #999999;
    --header-text: #ffffff;
    --header-separator: #617189;
    --button-secondary: #8b8888;
    --text-s0: #333333;
    --text-na: #999999;
    --text-link: #0075e4;
    --text-strong: #37475e;
    --text-graph-label: #666666;
    --default-border-color: #B0B6BB;
    --success-s0: rgb(0,206,124);
    --success-s1: rgba(0,206,124,0.5);
    --success-s2: rgba(0,206,124,0.2);
    --info-s0: rgb(0,122,255);
    --info-s1: rgba(0,122,255,0.5);
    --info-s2: rgba(0,122,255,0.2);
    --warn-s0: rgb(249,181,105);
    --warn-s1: rgba(249,181,105,0.5);
    --warn-s2: rgba(249,181,105,0.2);
    --danger-s0: rgb(238,0,0);
    --danger-s1: rgba(238,0,0,0.5);
    --danger-s2: rgba(238,0,0,0.2);
    --stats-s0: #007aff;
    --stats-s1: #f9b569;
    --stats-s2: #00ce7c;
    --stats-s3: #d64c00;
    --stats-s4: #00B6BF;
}

html {
    margin: 0px;
    padding: 0px;
    height: 100%;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 14px;
}
*, *:before, *:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
    font-family: inherit;
}
body {
    font-family: var(--font-s0);
    color: var(--text-s0);
    background-color: var(--default-bg);
    margin: 0px;
    padding: 0px;
    min-width: fit-content;
}
body#security_history,
body#security_tracking,
body#vpn_events,
body#api_errors,
body#audit_view,
body#dids_view,
body#calls_view,
body#callstats_view {
    height: 100%;
}
.wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0px 20px 20px 20px;
}
.headers {
    width: calc(100% + 40px);
}
#main {
    width: 100%;
    min-height: calc(100% - 60px);
    min-width: calc(1024px - 40px);
    max-width: var(--max-width);
    padding-top: 20px;
    position: relative;
}
@media screen and (max-width: 1240px) {
    body#callstats_view #main,
    body#calls_view #main {
        width: calc(100vw - 51px);
    }
    .wrapper {
        align-items: flex-start;
    }
    .headers {
        margin-left: -20px;
    }
}

/* scroll bar */
::-webkit-scrollbar {
    width: 0.8em;
    height: 0.8em;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
::-webkit-scrollbar-thumb {
    background-color: #ccc;
    outline: 1px solid #333;
}

body.login {
    background-color: var(--header-bg0);
    color: var(--header-text);
}
strong {
    font-weight: 500;
    color: var(--text-strong);
}
.success {
    color: var(--success-s0);
}
.info {
    color: var(--info-s0);
}
.warning {
    color: var(--warn-s0);
}
.danger {
    color: var(--danger-s0);
}
.stats0 {
    color: var(--stats-s0);
}
.stats1 {
    color: var(--stats-s1);
}
.stats2 {
    color: var(--stats-s2);
}
.stats3 {
    color: var(--stats-s3);
}
.stats4 {
    color: var(--stats-s4);
}

.alert_dialog {
}
.alert_dialog p {
    display: flex;
}
.alert_dialog p .fal {
    color: var(--warn-s0);
    font-size: 40px;
    margin-top: 3px;
    margin-right: 15px;
}
.alert_dialog p .message {
    line-height: 22px;
}
.dialog_header_button {
    position: absolute;
    top: 2px;
    right: 0px;
    font-size: 15px;
    min-height: 30px;
    line-height: 30px;
}

/* input elements */
input, select, textarea {
    outline: none;
    resize: none;
    padding: 6px;
    background-color: #fff;
    border: solid 1px var(--default-border-color);
    font-size: 1rem;
    color: #555;
}
select, input[type=text], input[type=number], input[type=password], input[type=email], input[type=search] {
    width: 350px;
    height: 36px;
}
input:focus, select:focus, textarea:focus {
    outline: 1px solid var(--info-s1);
}
input[type=number] {
    text-align: right;
}
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px #fff inset;
    -webkit-text-fill-color: #555 !important;
}
textarea {
    width: 350px;
    height: 100px;
}
.text_input_required {
    border: solid 1px rgb(168, 168, 168);
}
.url_input {
    font-family: var(--font-mono);
    font-size: 13px;
}
.login_input_totp {
    width: 40px !important;
    margin-right: 5px;
    font-size: 2rem !important;
    height: 60px !important;
    text-align: center;
    font-weight: 500;
}
.sms_input {
    font-size: 14px;
    height: 80px;
    width: 420px;
}
.sms_textarea {
    align-items: baseline !important;
}
.sms_textarea textarea {
    width: 350px;
}
.sms_textarea .desc {
    width: calc(100% - 175px - 350px - 0.5em);
}
.check_input {
    margin: 0px 8px 0px 0px;
}
.checkbox_input {
    margin: 0px 8px 0px 0px;
}
.stats_profile_select {
    width: 210px;
}
.input_highlight {
    border: solid 1px var(--warn-s0);
}
.input_disabled {
    background-color: #eee;
}
.link {
    color: var(--text-link);
    text-decoration: none;
    cursor: pointer;
    font-weight: 400;
}
.link:hover {
    text-decoration: underline;
}
body.login .link {
    color: #ccc;
}
.small_link {
    font-size: 0.8em;
    font-weight: 400;
    text-decoration: none;
}
.header_link {
    text-decoration: none;
    margin-left: 15px;
    display: flex;
    align-items: center;
    position: relative;
}
.header_link:hover {
    text-decoration: none;
}
.header_link .title:hover {
    text-decoration: underline;
}
.help {
    font-size: 0.8em;
    font-weight: 400;
    text-decoration: none;
    margin-right: 10px;
    margin-top: 4px;
    display: inline-block;
}
.help:hover {
    text-decoration: underline;
}
.help_header {
    position: relative;
    top: -8px;
}
.is_default {
    color: var(--success-s0);
    font-weight: 600;
}
.advanced_mode {
    font-size: 0.8em;
    font-weight: 400;
    text-decoration: none;
    margin-right: 10px;
    margin-top: 4px;
    display: inline-block;
    position: relative;
    top: -5px;
}
p {
    margin: 0px 0px 4px 0px;
    min-height: 30px;
    display: flex;
    align-items: center;
    line-height: 1.3em;
}
p.no_data {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
header {
    background-color: #fff;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background-image: linear-gradient(to bottom, #fff 0%, #f6f6f6);
    background-repeat: repeat-x;
    background-position-y: bottom;
    border-bottom: solid 1px #eee;
}
header .header_block {
    position: relative;
    height: 100%;
}
#header_subnav {
    margin-bottom: 10px;
    margin-left: 200px;
}
footer {
    margin-top: 50px;
}
h4.section_title {
    margin-bottom: 10px;
    margin-top: 30px;
}
.header_links {
    display: inline-block;
    float: right;
    text-align: right;
    font-size: 0.8em;
    position: absolute;
    top: 0px;
    right: 0px;
    width: 300px;
}
.admin_select {
    width: 220px;
    height: 30px;
    display: inline-block;
    text-align: right;
    margin-top: 8px;
}

#top_nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    margin: 0 20px;
    max-width: var(--max-width);
}
#top_nav .top_nav_list {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    height: 100%;
    display: flex;
    align-items: center;
    z-index: 60;
}
#top_nav ul li.top_nav_menu_break {
    height: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.6em 0;
}
#top_nav ul li.top_nav_menu_break hr {
    height: 1px;
    background-color: var(--header-separator);
    border: none;
    margin: 0 1em;
    width: 100%;
}
#top_nav .top_nav_sub_list {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    height: 100%;
    position: relative;
    left: 200px;
    top: -47px;
}
#top_nav ul li {
    height: 100%;
}
#top_nav .top_nav_main {
    display: flex;
    align-items: center;
    height: 100%;
    text-align: center;
    color: var(--header-text);
    position: relative;
    margin: 0 0.5em;
}
#top_nav .top_nav_main_link:hover,
#top_nav .top_nav_main:hover .top_nav_main_link {
    border-bottom-color: rgba(0,117,228,0.5);
}
#top_nav .top_nav_main_link_no_sub {
    border-bottom: none !important;
}
#top_nav .top_nav_main_link {
    font-family: var(--font-s0);
    text-decoration: none;
    color: var(--text-s0);
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.5rem 4.5px 0.5rem;
    border-bottom: 3px solid transparent;
    transition: color 0.1s;
    letter-spacing: -0.22px;
}
#top_nav .top_nav_main_link i {
    font-size: 0.85em;
    color: var(--text-s0);
}
#top_nav .top_nav_main_link_selected {
    border-bottom: 3px solid rgb(0, 117, 228);
}
#top_nav .top_nav_menu {
    opacity: 0;
    visibility: hidden;
    width: 200px;
    background-color: #fff;
    border: 1px solid #999;
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    position: absolute;
    top: 46px;
}
#top_nav .top_nav_menu:hover, #top_nav .top_nav_main:hover .top_nav_menu {
    opacity: 1;
    visibility: visible;
}
#top_nav .top_nav_menu li:first-child {
    padding-top: 0.5em;
} 
#top_nav .top_nav_menu li:last-child {
    padding-bottom: 0.5em;
}
#top_nav .top_nav_entry {
    font-size: 13px;
    text-decoration: none;
    color: var(--text-link);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.5em;
    margin-left: 10px;
}
#top_nav .top_nav_entry:hover {
    text-decoration: underline;
}
#top_nav .top_nav_icon {
    display: inline-block;
    margin-left: 12px;
    margin-top: 12px;
    font-size: 20px;
    position: relative;
    top: -2px;
    color: var(--text-link);
}
#top_nav .top_nav_title {
    display: inline-block;
    position: relative;
}
#top_nav .top_nav_meta {
    z-index: 50;
}
#top_nav .top_nav_meta .top_nav_user {
    font-size: 2.5rem;
    margin-right: 0;
    color: var(--header-icon);
}
#top_nav .top_nav_meta span {
    font-size: 0.85rem;
    color: var(--text-s0);
}
#top_nav .top_nav_meta_menu {
    right: 0;
    width: 250px;
}
#top_nav .top_nav_meta_menu .top_nav_entry i {
    margin-right: 0.75em;
}
#top_nav .top_nav_meta_menu .top_nav_entry span {
    font-size: 13px;
    color: var(--text-link);
}
#top_nav .top_nav_meta_menu .top_nav_user_details {
    padding: 1em 0;
    display: flex;
    align-items: center;
    color: var(--text-link);
    text-decoration: none;
}
#top_nav .top_nav_meta_menu .top_nav_user_details i {
    font-size: 2.5rem;
    margin-right: 0.2em;
}
#top_nav .top_nav_meta_menu .top_nav_user_details div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
#top_nav .top_nav_meta_menu .top_nav_user_details div h5 {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 8px;
}
#top_nav .top_nav_meta_menu .top_nav_user_details div span {
    font-size: .9rem;
}
#top_nav .top_nav_meta_menu .top_nav_user_details div span:hover {
    text-decoration: underline;
}
#subnav {
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-bottom: solid 1px var(--default-border-color);
}
.subnav_link {
    text-decoration: none;
    color: var(--text-na);
    height: 100%;
    display: flex;
    align-items: center;
    text-transform: uppercase;
    margin-right: 20px;
    border-bottom: solid 3px transparent;
    margin-bottom: -2px;
}
.subnav_link:hover, .subnav_link_selected {
    color: var(--text-s0);
    border-bottom: solid 3px var(--text-strong);
}
.subnav_link_title {
    font-size: 1rem;
    font-weight: 600;
}

/* buttons */
.button {
    outline: none;
    cursor: pointer;
    color: var(--header-text);
    display: inline-block;
    padding: 10px 18px;
    text-decoration: none;
    text-transform: none;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    border: 1px solid transparent;
    position: relative;
    border-radius: 0.1rem;
    transition: opacity 0.15s ease-in-out;
    line-height: 1rem;
    white-space: nowrap;
}
.button:hover {
    opacity: 0.85;
}
.cancel_button {
    background-color: var(--danger-s0);
}
.close_button, .test_button, .reset_button, .export_button, .report_fields_button, .secondary_button, .next_button, .prev_button {
    background-color: var(--info-s0);
}
.report_fields_button {
    padding: 0px 8px 0px 8px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.save_button, .add_button, .add_answer {
    background-color: var(--success-s0);
}
.save_button i, .add_button i, .add_answer i, .cancel_button i, .close_button i, .test_button i, .reset_button i {
    margin-right: 2px;
}
.button_group {
    display: flex;
    align-items: center;
}
.secondary_button {
    padding: 0px 8px 0px 8px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.secondary_button i {
    font-size: 1.4rem;
}

/* standard style for drop areas */
.drop_area {
    border: dashed 1px #999;
    text-align: center;
    padding: 6px;
    font-weight: 400;
}
.drop_area:hover, .drop_area_hover {
    background-color: rgb(232, 242, 254);
}

/* loader icons */
#loader_section {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 10000;
}
#loader_transition {
    background: #aaa;
    opacity: .3;
    filter: Alpha(Opacity=30);
    position: fixed;
    display: block;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 10001;
}
#loader_section .big_loader {
    display: block;
    position: absolute;
    font-size: 175px;
    width: 175px;
    height: 175px;
    color: var(--header-text);
    z-index: 10002;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.save_changes_loader {
    display: inline-block;
    min-width: 130px;
    text-align: center;
    vertical-align: top;
}

/* page titles */
.main_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 45px;
}
.section_header {
    border: 0px;
}
.main_header_controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
}
.main_header_controls button {
    margin-left: 4px;
}
.page_title {
    font-size: 1.6rem;
    font-weight: 400;
}
.page_title .icon {
    font-size: 20px;
    margin-right: 4px;
}
.page_sub_title {
    margin: 0.8em 0 !important;
    line-height: 1.4em !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.page_title_update {
    border-bottom: none;
}
.sub_admin_header {
    font-size: 1.2em;
    margin: 20px 0px 15px 0px;
}
.main_content {
    height: calc(100% - 100px);
    padding-top: 20px;
    position: relative;
}
#call_details {
    height: calc(100% - 50px);
}
#update_form {
    height: 100%;
}
.edit_content {
    height: 100%;
}

/* edit page for widgets */
.data_edit_list {
    float: left;
    display: inline-block;
}
.data_edit_view {
    float: right;
    display: inline-block;
}

/* data summary header */
.data_summary {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 1em;
    grid-row-gap: 1em;
}
.data_summary_item {
    padding: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    box-shadow: 0 0 35px 0 rgba(154, 161, 171, 0.15);
    -webkit-box-shadow: 0 0 35px 0 rgba(154, 161, 171, 0.15);
}
.data_summary_item h4 {
    text-transform: uppercase;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1em;
}
.data_summary_item span {
    text-transform: uppercase;
    font-size: 1.1em;
    font-weight: 600;
}

/* data list table */
.data_list {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    width: 100%;
}
.data_list_row {
    border: solid 1px var(--default-border-color);
    background-color: var(--default-bg);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    width: 100%;
    margin-top: -1px;
}
.data_list_row:first-child {
    border-top: solid 1px var(--default-border-color);
}
.data_list_row:hover {
    background-color: rgb(232, 242, 254);
}
.data_list_empty {
    height: 80px;
    line-height: 80px;
    text-align:center;
    display: block;
}
.data_list_header_split {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.data_list_header_split > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.data_list_drop_row {
    height: 40px;
    line-height: 40px;
}
.data_list .right_cap {
    border-right: solid 1px var(--default-border-color);
}
.data_list_status {
    border-right: solid 1px var(--default-border-color);
    width: 50px;
    text-align: center;
    height: 100%;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
}
.data_list_content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.data_list_details {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    padding: 6px;
}
.data_list_no_status {
    padding: 5px;
}
.data_list_title {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 1.1rem;
}
.data_list_title a {
    font-weight: 500;
}
.data_list_title_details {
    font-style: italic;
    font-size: 0.8em;
    font-weight: 400;
    margin-left: 8px;
}
.data_list .post_notice {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-style: italic;
    font-size: 0.9rem;
    margin-top: 4px;
}

.data_list_stats {
    font-size: 0.85rem;
    display: block;
}
.data_list_controls ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
.data_list_controls ul li {
    display: inline-block;
    margin-right: 8px;
    font-size: 13px;
}
.data_list_controls ul li a {
    display: flex;
    align-items: center;
}
.data_list_controls ul li a:hover {
    text-decoration: none;
}
.data_list_controls ul li a .title {
    margin-left: 2px;
}
.data_list_controls ul li a .title:hover {
    text-decoration: underline;
}
.data_list_alert {
    color: var(--warn-s0);
    font-size: 1.4rem;
    position: absolute;
    top: 15px;
    left: 37px;
    background-color: var(--default-bg);
    width: 18px;
    height: 18px;
    border: solid 1px transparent;
    border-radius: 50%;
}
.data_list_sortable {
    position: relative;
}
.data_list_draggable {
    cursor: move;
    z-index: 100;
}
.data_dragged {
    min-height: 40px;
    min-width: 300px;
}
.data_drop_area {
    width: 250px;
    height: 30px;
    position: relative;
    top: -12px;
    line-height: 30px;
}

/* target groups */
.target_groups {
    margin-left: 48px;
    margin-bottom: 5px;
    width: unset;
}
.target_groups .icon_status {
    font-size: 14px;
}

/* scheduling overlay */
.schedule_add_shift {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* list of sliders */
.slider_list_row {
    display: flex;
    align-items: center;
    height: auto;
    padding-left: 20px;
}
.slider_list_controls {
    top: auto;
}
.limits_container {
    line-height: 32px;
    margin-left: 20px;
}
.limits_container span {
    font-size: 13px;
    margin-right: 4px;
}
.limits_container input {
    width: 60px;
    font-size: 0.9em;
}

/* profile preview */
#preview_icr_data ul, #preview_api_data ul {
    width: 100%;
    margin-top: 5px;
}
#preview_icr_data .data_list_details, #preview_api_data .data_list_details {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}
#preview_icr_data .preview_title, #preview_api_data .preview_title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
#preview_icr_data .preview_title .node_icon, #preview_api_data .preview_title .node_icon {
    width: 26px;
    height: 26px;
}
#preview_icr_data .preview_content, #preview_api_data .preview_content {
}
#preview_icr_data .preview_content input, #preview_api_data .preview_content input {
    font-family: var(--font-mono);
    text-align: right;
    width: 150px;
}
#preview_icr_data .preview_content span {
    font-style: italic;
}
textarea.preview_data_fields,
textarea.preview_data_fields_responsive ,
input.preview_data_fields {
    font-family: var(--font-mono);
    font-size: 0.8em;
    width: 100%;
}
textarea.preview_data_fields {
    height: 50px;
}
textarea.preview_data_fields_responsive {
    font-size: 0.8em;
    height: 105px;
    width: 100%;
}

/* profile appearance section */
.appearance_section {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.appearance_section ul {
    margin: 10px 0px 0px 30px;
    list-style-type: square;
}
.appearance_section ul li {
    line-height: 22px;
}
.appearance_settings {
    width: 65%;
}
.appearance_demo {
    width: 300px;
    display: flex;
    margin-top: 20px;
    min-height: 350px;
    flex-direction: column;
}
.color_input {
    font-family: var(--font-mono) !important;
    width: 100px !important;
}
.size_input {
    text-align: right !important;
    width: 60px !important;
}
.font_input {
    width: 300px !important;
}
.text_duration_input {
    width: 300px !important;
}

/* report fields table */
.report_fields_table {
    margin: 0px;
    padding: 0px;
    width: 600px;
    border: 0px;
}
.report_fields_table tr {
    border: 0px;
}
.report_fields_table td {
    border: 0px;
    padding: 2px;
    width: 33%;
}
.report_fields_list {
    margin: 0px;
    padding: 0px;
    width: 100%;
    border: 0px;
}
.report_fields_list li.report_field {
    list-style-type: none;
    display: inline-block;
    width: 200px;
    height: 28px;
    line-height: 28px;
    padding-right: 4px;
    float: left;
    cursor: move;
}
.report_fields_list_placeholder {
    list-style-type: none;
    display: inline-block;
    width: 200px;
    height: 28px;
    line-height: 28px;
    padding-left: 4px;
    padding-right: 4px;
    float: left;
    border: dashed 1px #333;
}
.report_field_label {
    cursor: move;
}

/* language options */
.language_options {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.language_options .language_option {
    min-width: 250px;
    height: 30px;
    line-height: 30px;
    padding-left: 4px;
    padding-right: 4px;
}

/* whitelist countries */
.whitelist_countries {
    padding: 0px;
    list-style-type: none;
    height: 350px;
    overflow: auto;
}
.whitelist_countries {
    list-style-type: none;
    padding: 5px 0px 0px 0px;
}
.whitelist_countries li {
    margin: 0px;
    padding: 3px 0px;
    list-style-type: none;
}
.whitelist_countries ul {
    list-style-type: none;
    padding: 5px 0px 0px 15px;
}
.whitelist_countries ul li {
    margin: 0px;
    padding: 3px 0px;
    list-style-type: none;
}

.whitelist_regions {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
}
.whitelist_regions li {
    display: inline-block;
    width: 200px;
    font-size: 0.87em;
}

/* password rules */
ul.password_rules {
    list-style-type: disc;
}
ul.password_rules li {
    margin: 0px 0px 4px 30px;
}

/* company permissions */
.company_permissions {
    padding: 0px;
}
.company_permissions li {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    display: inline-block;
    width: 32%;
    height: 25px;
}

/* admin notes */
.admin_note_header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.admin_note_user_initials {
    width: 38px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    background-color: var(--header-bg0);
    color: var(--header-text);
}
.admin_note_input {
    width: 730px;
    height: 100px;
}
.admin_note_input textarea {
    width: 100%;
    height: 100%;
    overflow: hidden;
    word-wrap: break-word;
    font-size: 0.95em;
}
.admin_note_submit {
}
.admin_data_container {
    margin-top: 25px;
    height: 300px;
    overflow-x: auto;
    width: 100%;
}
.admin_note_data {
}
.admin_note_data > ul > li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
}
.admin_note_data > ul > li.data_list_empty {
    justify-content: center;
}
.admin_note_data p {
    display: inline;
}
.admin_note {
    display: flex;
    flex-direction: column;
    margin-left: 10px;
    width: 100%;
}
.admin_note_meta {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}
.admin_note_name {
    font-weight: 600;
    font-size: 0.95em;
    margin-right: 10px;
}
.admin_note_date {
    font-size: 0.85em;
}
.admin_note_body {
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    padding: 10px;
    font-size: 0.95em;
    width: 100%;
    min-height: 50px;
    line-height: 1.4em;
    position: relative;
}
.admin_note_body:hover {
    background-color: rgb(232, 242, 254);
}
.admin_note_body_area {
    display: none;
}
.admin_note_body div textarea {
    width: 100%;
    height: 100%;
    min-height: 100px;
    overflow: auto;
    word-wrap: break-word;
    font-size: 0.95em;
}
.admin_note_controls {
    display: flex;
    align-items: center;
    margin-top:5px;
}
.admin_note_controls > button {
    margin-right: 10px;
}
.admin_note_delete {
    position: absolute;
    top: -10px;
    right: -10px;
    border-radius: 50%;
    height: 20px;
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    cursor: pointer;
}
.admin_note_delete > i {
    font-size: 1.4rem;
    color: var(--danger-s0);
}

/* file list */
.file_list_row {
    height: 30px;
}
.file_list_status {
    width: 32px;
}
.file_list_controls {
    top: 5px;
}
.file_list_details {
    display: block;
    padding: 8px;
}
.file_list_select_all {
    float: left;
    border: solid 1px transparent;
    padding-top: 6px;
    padding-bottom: 0px;
    height: 25px;
    width: 32px;
    text-align: center;
}
.file_list_folder_title {
    margin-bottom: 8px;
    padding-top: 6px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.file_list_folder_title a.folder_name {
    margin-left: 2px;
    margin-right: 4px;
    font-size: 0.95em;
    font-weight: 600;
}
.file_list_folder_title .folder_file_count {
    font-size: 0.85em;
    font-weight: 400;
    margin-right: 5px;
}
.file_list_title {
    font-size: 0.9rem;
    font-weight: 400;
}
.file_list_title a {
}
.file_list_title_desc {
    font-size: 0.9rem;
}
.file_list_move_to_folder {
}
.file_list_move_to_folder a {
    font-size: 0.85em;
    font-weight: 400;
}
.file_folder_control_box {
    margin-top: 4px;
    margin-left: 4px;
    height: 20px;
}
.file_folder_controls {
    display: none;
}

/* single boxes used on the pstn report page */
.single_box {
    font-size: 11px;
    padding: 4px;
    border: solid 1px var(--default-border-color);
    margin-top: 4px;
    display: inline-block;
}
.single_box:hover {
    background-color: rgb(232, 242, 254);
}

.playback_title {
    display: inline-block;
    width: 26px;
}

/* a form section */
.form_title {
    font-size: 1.4rem;
    font-weight: 500;
}
.form_title .show_archived {
    margin-left: 0.2em;
    font-size: 1.3rem;
    text-decoration: none;
}
.form_title button {
    top: -4px;
    margin-left: 8px;
}
.form_data {
    margin-bottom: 20px;
}
.form_data p {
    display: flex;
    align-items: center;
    margin: 0px 0px 4px 0px;
    position: relative;
    line-height: 30px;
    min-height: 36px;
}
.form_data p .no_data {
    display: flex;
    align-items: center;
}
.form_data p .no_data a {
    margin-left: 0.2rem;
    margin-right: 0.2rem;
}
.form_data .form_label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 175px;
}
.form_data .form_label_short {
    width: 120px;
}
.audio_profile_data .form_label {
    width: 220px;
    margin-right: 4px;
}
.form_data .desc {
    align-items: center;
    display: flex;
    margin-left: 0.5em;
    line-height: 1.2rem;
    font-size: 0.9rem;
}
.form_data .subdesc {
    font-style: italic;
    font-size: 0.85em;
    line-height: 20px;
}
.form_data .multi_select {
    width: 300px;
    height: 120px;
    border: solid 1px var(--default-border-color);
    padding: 4px;
    margin-left: 25px;
    margin-top: 10px;
}

/* call options page */
#phone_tree_select {
    padding: 4px 4px 4px 8px;
    margin-right: 6px;
}

/* profile appearance section */
.position_containers {
    display: flex;
    align-items: flex-start;
}

.widget_header {
    background-color: #D0D9E0;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    color: #37383B;
    font-weight: 700;
    width: 100%;
    height: 32px;
}
.widget_header h2 {
    font-size: 1.4rem;
    padding: 5px;
    margin: 0px;
}
#widget_option_list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: relative;
}
#widget_option_list_empty {
    height: 70px;
    line-height: 70px;
    text-align: center;
}

/* TODO: this needs to be here for a buffer for the sort list */
/* but the height needs to be adjusted for each node */
/* that's added to the list, so there's always a little */ /* extra for the sort. */
#widget_option_list_buffer {
    height: 165px;
}
.widget_option {
    height: 70px;
    border-bottom: solid 1px var(--default-border-color);
    background-color: #fff;
    position: relative;
    padding: 4px;
}
.widget_option_highlight {
    background-color: #CCEECC;
}
.widget_option_dragging {
    border: solid 1px var(--default-border-color);
}
.widget_option_top_row {
    height: 42px;
    width: 355px;
    display: inline-block;
}
.widget_option_icon, .node_icon {
    font-size: 1.4rem;
    color: #138bab;
    position: relative;
    width: 25px;
    height: 25px;
    margin-right: 6px;
    padding: 3px;
}
.widget_option_title {
    display: inline-block;
    width: 315px;
}
.widget_option_id {
    font-size: 13px;
    font-style: italic;
    float: left;
    display: inline-block;
    margin-top: 2px;
}
.widget_option_controls {
    float: right;
    display: inline-block;
}
.widget_option_controls ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.widget_option_controls ul li {
    display: inline-block;
    margin-right: 5px;
    font-size: 0.85em;
}
.widget_option_order {
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: move;
    font-size: 1.4rem;
    color: #ccc;
}
.widget_option_node_id {
    font-size: 0.8em;
    font-style: italic;
}

/* accounts page */
.account_login {
    font-style: italic;
    font-size: 0.8em;
    font-weight: 400;
}
.account_login a {
    font-weight: 400;
    text-decoration: none;
}
.account_login a:hover {
    text-decoration: underline;
}

/* date input sliders */
.slider_container {
    height: 34px;
    display: flex;
    align-items: center;
}
.date_slider {
    width: 400px;
    display: inline-block;
}
.date_value {
    margin-left: 20px;
    font-size: 0.9em;
}
.date_checkbox {
    margin-right: 18px;
}
.date_closed {
    display: inline-block;
}
.date_input {
    border: solid 1px var(--default-border-color);
    padding: 4px;
    width: 55px !important;
    height: 26px !important;
    text-align: right;
}

/* hold for me page */
.hfm_title {
    font-weight: 700;
    margin-bottom: 15px;
}
.hfm_listen {
    font-size: 0.8em;
    line-height: 16px;
}
.hfm_section_title {
    margin-bottom: 5px;
    margin-top: 15px;
    font-weight: 700;
}

/* data pass-through page */
.input_value_order {
    cursor: move;
    font-size: 1.4rem;
    color: #ccc;
}
.input_key_name {
    font-style: italic;
    font-size: 0.8em;
}
.input_section_title {
    margin-bottom: 10px;
    margin-top: 20px;
}
.input_section_sub_title {
    margin-bottom: 10px;
}

/* charts pages */
.count_text_big {
    font-family: var(--font-s1);
    font-size: 5.5em;
    text-align: right;
    letter-spacing: -2px;
    margin-bottom: 8px;
}
.count_text_small {
    color: #bdbdbd;
    display: block;
    text-align: right;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.95em;
}
.count_text_pie {
    font-family: var(--font-s1);
    font-size: 65px;
    line-height: 32px;
    display: inline-block;
    letter-spacing: -1px;
}
.count_text_error {
    color: var(--danger-s0);
}

/* icons */
.icon_items_font {
    font-size: 16px;
}
.icon_status {
    width: 16px;
    height: 16px;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    vertical-align: top;
}
.icon_player {
    position: relative;
    margin-right: 4px;
    cursor: pointer;
    font-size: 16px;
}

/* audio prompt sample icon */
.icon_prompt_sample {
    font-size: 16px;
    color: var(--info-s0);
}

/* generic controls */
.icon_edit, .icon_rename, .icon_validate {
    color: #1d9ae6;
}
.icon_play, .icon_stop, .icon_add, .icon_restore, .icon_download, .icon_set_default, .icon_sync_appliance, .icon_appliance_good, .icon_run_report, .icon_move, .icon_complete {
    color: var(--success-s0);
}
.icon_delete, .icon_archive, .icon_endcall {
    color: var(--danger-s0);
}
.icon_unlock {
    color: var(--warn-s0);
}
.icon_key {
    var(--success-s0);
}
.icon_lock {
    position: relative;
    font-size: 1.4rem;
    top: -1px;
    color: var(--warn-s0);
}

/* TODO: change these to fontawesome */
.icon_decode {
    background-image: url(../images/icon_decode.png);
}
.icon_export {
    background-image: url(../images/icon_export.png);
}
.icon_stats {
    margin-right: 2px;
}
.icon_stats_download {
    height: 14px;
    width: 14px;
    vertical-align: middle;
    color: var(--success-s0);
}
.icon_stats_play, .icon_stats_stop {
    height: 14px;
    width: 14px;
    vertical-align: middle;
    color: var(--success-s0);
    position: relative;
    top: -1px;
}

/* prompt folders */
.icon_folder {
    color: var(--text-link);
}
.icon_folder_move {
    color: var(--text-link);
}

/* sub-nave text links */
.sub_link_nav {
    list-style-type: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 15px auto 30px auto;
    flex-wrap: wrap;
    width: 60%;
}
.sub_link_nav li {
    margin: 4px 8px;
}
.sub_link_nav li a i {
    margin-right: 2px;
}
.sub_link_nav_selected {
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}
.sub_link_nav_icon_selected {
    font-weight: 400;
}

/* stats icons */
.stats_header_links {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    z-index: 50;
    top: 93px;
    padding-left: 65px;
    padding-right: 40px;
    width: 100%;
}
.stats_appliance_selected {
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* generic status icons */
.icon_status_active {
    color: var(--success-s0);
    font-size: 1.4rem;
}
.icon_status_completed {
    color: #138bab;
    font-size: 1.4rem;
}
.icon_status_pending {
    color: var(--warn-s0);
    font-size: 1.4rem;
}
.icon_status_paused, .icon_status_non-active {
    color: var(--danger-s0);
    font-size: 1.4rem;
}
.icon_status_inactive {
    color: var(--danger-s0);
    font-size: 1.4rem;
}

/* status colors */
.icon_status_good {
    color: var(--success-s0);
}
.icon_status_degraded {
    color: var(--warn-s0);
}
.icon_status_down {
    color: var(--danger-s0);
}

/* generic modal box format */
.modal {
    display: none;
    position: absolute;
    border: solid 1px #999;
    background-color: #000;
    z-index: 50;
}
.modal .arrow {
    position: absolute;
    transform: rotate(45deg);
    border-top: solid 1px #999;
    border-left: solid 1px #999;
    background-color: #000;
}

/* stats page controls */
.stats_header_controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
}
.stats_header_controls .icon_items_font {
    margin-right: 2px;
}
.stats_header_controls .title:hover {
    text-decoration: underline;
}

/* report fields editor on the calls page */
.stats_header_controls .report_fields {
}
.stats_header_controls .report_fields i {
    font-size: 1.3rem;
}

/* date select modal */
.date_select_container {
    position: relative;
}
.stats_small_modal {
    width: 314px;
    height: 53px;
    right: 0px;
    top: 25px;
}
.stats_small_modal .arrow {
    width: 10px;
    height: 10px;
    top: -6px;
    right: 75px;
}
.stats_small_modal .stats_small_modal_form {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 100%;
    height: 100%;
}
.stats_small_modal p {
}
.stats_small_modal select {
    width: 210px;
    padding: 4px 4px 4px 8px;
}
.stats_small_modal button {
}

/* carrier stats page */
#carrier_details {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.stats_number_details_block {
    width: 48%;
    display: inline-block;
}
.stats_number_details_graph {
    width: 100%;
    height: 370px;
}
.stats_number_details_data {
}
.stats_number_details_data h3 {
    margin-top: 0px;
    font-size: 1.1em;
}
.status_number_details_name {
    display: inline-block;
    font-size: 13px;
    float: left;
}
.status_number_details_total {
    display: inline-block;
    font-size: 13px;
    text-align: right;
    float: right;
}
.status_number_details_perc {
    display: inline-block;
    font-size: 13px;
    text-align: right;
    float: right;
    font-style: italic;
    width: 70px;
}

/* tipsie */
.tipsy {
    position: absolute;
    padding: 5px;
    z-index: 100000;
}
.tipsy-inner {
    background-color: #000;
    color: #fff;
    max-width: 400px;
    padding: 12px;
    text-align: center;
    line-height: 17px;
    font-size: 14px;
}

/* Rounded corners */ .tipsy-inner { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }

/* Uncomment for shadow */ /*.tipsy-inner { box-shadow: 0 0 5px #000000; -webkit-box-shadow: 0 0 5px #000000; -moz-box-shadow: 0 0 5px #000000; }*/

.tipsy-arrow { position: absolute; width: 0; height: 0; line-height: 0; border: 5px dashed #000; }

/* Rules to colour arrows */ .tipsy-arrow-n { border-bottom-color: #000; } .tipsy-arrow-s { border-top-color: #000; } .tipsy-arrow-e { border-left-color: #000; } .tipsy-arrow-w { border-right-color:
#000; }

.tipsy-n .tipsy-arrow { top: 0px; left: 50%; margin-left: -5px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent; } .tipsy-nw .tipsy-arrow {
top: 0; left: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent;} .tipsy-ne .tipsy-arrow { top: 0; right: 10px; border-bottom-style:
solid; border-top: none; border-left-color: transparent; border-right-color: transparent;} .tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -5px; border-top-style: solid; border-bottom: none;
border-left-color: transparent; border-right-color: transparent; } .tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; border-top-style: solid; border-bottom: none; border-left-color: transparent;
border-right-color: transparent; } .tipsy-se .tipsy-arrow { bottom: 0; right: 10px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; }
.tipsy-e .tipsy-arrow { right: 0; top: 50%; margin-top: -5px; border-left-style: solid; border-right: none; border-top-color: transparent; border-bottom-color: transparent; } .tipsy-w .tipsy-arrow {
left: 0; top: 50%; margin-top: -5px; border-right-style: solid; border-left: none; border-top-color: transparent; border-bottom-color: transparent; }

/* advanced scheduling page */ .schedulding_nav_left {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    margin-right: 0px;
}
.schedulding_nav_right {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}
.schedulding_nav_selected {
    background-color: #5985b1;
}

/* calendar */
#target_calendar_nav {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    margin-top: 30px;
}
.calendar_label {
    display: flex;
    min-width: 200px;
    align-items: center;
    justify-content: center;
    padding: 0px 20px 0px 20px;
}
.calendar_date {
    display: inline-block;
    width: 200px;
    height: 20px;
}
.calendar_month, .calendar_year {
    font-size: 1.4rem;
    font-weight: 500;
}
.calendar_back, .calendar_next {
    color: var(--text-link);
    font-size: 1.4rem;
}
#target_calendar {
    border-spacing: 0px;
    border: solid 1px var(--default-border-color);
    border-bottom: none;
    border-collapse: unset;
    width: 100%;
    padding: 0;
    margin: 0;
}
#target_calendar th {
    text-align: center;
    padding: 10px;
    border-bottom: solid 1px var(--default-border-color);
    border-right: solid 1px var(--default-border-color);
}
#target_calendar th:last-child {
    border-right: none;
}
#target_calendar .target_calendar_row {
    height: 65px;
}
#target_calendar .target_calendar_empty {
    height: 65px;
    background-color: #E6E6EC;
    border-bottom: solid 1px var(--default-border-color);
    border-right: solid 1px var(--default-border-color);
}
#target_calendar .target_calendar_empty:last-child {
    border-right: none;
}
#target_calendar .target_calendar_day {
    width: 14%;
    height: 65px;
    background-color: #fff;
    border-bottom: solid 1px var(--default-border-color);
    border-right: solid 1px var(--default-border-color);
    cursor: pointer;
    position: relative;
}
#target_calendar .target_calendar_holiday {
    font-size: 11px;
    width: 105px;
    display: inline-block;
    position: absolute;
    top: 2px;
    left: 2px;
}
#target_calendar .target_calendar_custom {
    font-size: 0.8em;
    font-weight: 700;
    color: var(--success-s0);
    position: absolute;
    top: 45px;
    left: 5px;
}
#target_calendar .target_calendar_closed {
    font-size: 0.8em;
    font-weight: 700;
    color: var(--danger-s0);
    position: absolute;
    top: 45px;
    left: 5px;
}
#target_calendar .target_calendar_day:hover {
    background-color: rgba(223,255,229,0.5);
}
#target_calendar .target_calendar_today {
    background-color: rgb(223,255,229);
}
#target_calendar .target_calendar_day:last-child {
    border-right: none;
}
#target_calendar .target_calendar_day_number {
    background-color: var(--header-bg0);
    color: var(--header-text);
    width: 20px;
    height: 20px;
    font-weight: 700;
    font-size: 0.8em;
    display: flex;
    align-items: center;
    justify-content: center;
}
#edit_date_label {
    font-weight: 700;
}

/* file input formatting */
.file_input_textbox {
    border: solid 1px var(--default-border-color);
    padding: 4px;
    width: 205px;
    color: #555;
    vertical-align: top;
}
.file_input_div {
    position: relative;
    width:90px;
    height:32px;
    overflow: hidden;
    display: inline;
}
.file_input_button {
    position:absolute;
    top: -40px;
    left: 335px;
}
.file_input_hidden {
    font-size:1em;
    position:absolute;
    left: 125px;
    top: -34px;
    cursor:pointer;
    opacity:0;
    filter:alpha(opacity=0);
    -ms-filter:"alpha(opacity=0)";
    -khtml-opacity:0;
    -moz-opacity:0;
    height: 30px;
    width: 300px;
    border: solid 1px;
    padding: 2px;
}

/* login area */
.login_message_area {
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}
.login_message_area .fal {
    font-size: 26px;
    margin-right: 10px;
}
.login_message_area .title {
    font-size: 1.05em;
    line-height: 1.3em;
}
.error_box {
    color: #CC0000;
    color: var(--warn-s0);
    border: solid 2px #CCCC99;
    background-color: #FFFFCC;
}
.notice_box {
    color: #09A761;
    border: solid 2px #82EB96;
    background-color: #DEFFE5;
}
.login_box {
    color: var(--success-s0);
    border: unset;
    background-color: unset;
}

.login_area {
    position: relative;
    margin: 50px auto auto;
    padding: 0px 20px 10px 20px;
    width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.login_area .notice_box {
    color: var(--success-s0);
}
.login_area .error_box {
    color: var(--danger-s0);
}
.login_area input {
    width: 100%;
    font-size: 1.2rem;
}
.login_totp div.totp {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.login_area div.totp-desc {
    text-align: center;
    line-height: 1.2rem;
    font-size: 1rem;
    margin: 1em 0px;
}
.login_area label {
    text-align: left;
    margin-bottom: 0.6em;
    display: flex;
    font-size: 1.1rem;
    font-weight: 500;
}
.login_area > div {
    margin: 8px 0px 8px 0px;
    width: 100%;
}
.signup_recaptcha {
    display: flex;
    justify-content: center;
}
.signup_recaptcha .g-recaptcha {
    width: 100%;
    transform: scale(1.193);
    -webkit-transform: scale(1.193);
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
}
.login_button {
    background-color: var(--success-s0);
    color: var(--header-text);
    border: solid 1px var(--success-s0);
    font-size: 1.2rem;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: 500;
}
.login_button:hover {
    opacity: 0.85;
}
.login_area_logo {
    height: 120px;
    margin-bottom: 20px;
}
.login_under {
    margin: auto;
    margin-top: 15px;
    width: 100%;
    font-size: 0.85em;
    text-align: center;
}
.login_email {
    font-weight: 500;
    font-size: 1.2rem;
    margin-bottom: 1em;
}
.login_email .title {
    color: #999;
}
.login_copy {
    text-align: center;
    color: #999;
    margin-top: 40px;
}
@media screen and (max-width: 500px) {

    .login_area, .login_message_area {
        width: 100%;
    }
}

#save_message {
    display: none;
    border-color: #82EB96;
    padding: 6px 15px 6px 15px;
    margin-right: 5px;
    align-items: center;
    justify-content: center;
}

/* export header */
.export_header {
    width: 100%;
    height: 30px;
    font-size: 0.9em;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* new pagination */
.paging_header {
    width: 100%;
    height: 30px;
    font-size: 0.9em;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.paging_header > span {
    display: flex;
    align-items: center;
}
.paging {
    display: flex;
    align-items: center;
}
.paging_option {
    font-size: 18px;
    color: #1E7FAB;
    position: relative;
}
.paging_disabled {
    color: #ccc;
}
.paging_totals {
    display: inline-block;
    margin: 0px 5px;
}

/* stats/graphs section */
.graphbox {
    margin-top: 20px;
    width: 100%;
    min-height: 520px;
    position: relative;
}
.graphbox .summary {
    width: 100%;
    height: 85px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
}
.graphbox .summary .summarybox {
    width: 33%;
    height: 100%;
    background-color: #eee;
    overflow: hidden;
    position: relative;
    margin-right: 10px;
    margin-left: 10px;
}
.graphbox .stats_export {
    position: absolute;
    right: 0px;
    top: -46px;
}

/* styling graphs */
.graphs-donut path {
    stroke: var(--default-bg);
}
.graphs-donut-labels text { 
    font-family: var(--font-s0);
    fill: var(--text-s0) !important;
    stroke: none !important;
    font-weight: 300 !important;
    font-size: 0.9rem !important;
}
.graphs-donut-labels text tspan {
    font-family: var(--font-s0);
    fill: var(--text-s0) !important;
    font-weight: 300 !important;
    stroke: none !important;
    color: var(--text-s0) !important;
}

/* stats box shadows */
.stats_graphs_box_shadow {
    box-shadow: 0 0 35px 0 rgba(154, 161, 171, 0.15);
    -webkit-box-shadow: 0 0 35px 0 rgba(154, 161, 171, 0.15);
}

/* main page stats */
.stats_layout_main {
    display: grid;
    grid-template-columns: repeat(4, 1fr);    
    grid-template-rows: repeat(4, 1fr);
    grid-column-gap: 1em;
    grid-row-gap: 1em;
    height: 650px;          
}              
.stats_layout_main1 { grid-area: 1 / 1 / 2 / 2; }
.stats_layout_main2 { grid-area: 1 / 2 / 2 / 3; }            
.stats_layout_main3 { grid-area: 1 / 3 / 2 / 4; }
.stats_layout_main4 { grid-area: 1 / 4 / 2 / 5; }
.stats_layout_main5 { grid-area: 2 / 1 / 5 / 5; }

#stats_layout_main_asr {
    height: 120px;
    margin-bottom: 1em;
}
#stats_layout_main_calls {
    height: 330px;
}

/* stats section layouts */
.stats_layout {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 1em;
    grid-row-gap: 1em;
    height: 550px;
}
.stats_layout1 { grid-area: 1 / 1 / 4 / 5; }
.stats_layout2 { grid-area: 1 / 5 / 2 / 6; }
.stats_layout3 { grid-area: 2 / 5 / 3 / 6; }
.stats_layout4 { grid-area: 3 / 5 / 4 / 6; }

#stats_layout_asr, #stats_layout_acl {
    height: 174px;
    margin-bottom: 1em;
}
#stats_layout_calls, #stats_layout_minutes {
    height: calc(100% - 1em - 174px);
}
#stats_layout_minutes_by_hour {
    height: 100%;
    width: 100%;
}

.stats_layout_value {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1em;
    align-items: center;
}
.stats_layout .stats_layout_value {
    justify-content: space-evenly;
}
.stats_layout_value h3 {
    text-transform: uppercase;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
}
.stats_layout_value span {
    font-family: var(--font-s1);
    font-size: 4rem;
    text-align: center;
    color: var(--text-graph-label);
}
.stats_layout_asr_graph {
    width: 100%;
    height: 100px;
    position: relative;
}
.stats_layout_asr_graph .stats_layout_asr_value {
    font-family: var(--font-s1);
    font-size: 4rem;  
    text-align: center;
    margin-top: 10px;
    color: var(--text-graph-label);;
    position: absolute;
    top: 30px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}
.stats_layout_asr_value_unit {
    font-size: 1.8rem !important;
}
#stats_date_select_modal {
    width: 430px;
    height: 160px;
    right: -4px;
    top: 25px;
}
#stats_date_select_modal .arrow {
    width: 10px;
    height: 10px;
    top: -6px;
    right: 100px;
}
#stats_date_select_modal .monitor_arrow, .api_arrow {
    width: 9px;
    height: 5px;
    top: -5px;
    right: 125px;
}
#stats_date_select_modal button {
    position: absolute;
    top: 117px;
    left: 344px;
}
.stats_summary_value {
    font-family: var(--font-s1);
    font-size: 50px;
    color: #fff;
    line-height: 65px;
    text-align: right;
    float: right;
    padding-right: 10px;
}
.stats_summary_title {
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.9em;
    display: block;
    width: 100%;
    position: absolute;
    bottom: 0px;
    text-align: right;
    right: 0px;
    padding: 5px 10px 5px 2px;
    background-color: rgba(0,0,0,0.1);
}
.stats_summary_icon {
    font-size: 125px;
    position: absolute;
    left: -15px;
    top: -2px;
    display: inline-block;
    opacity: 0.25;
}
#datefrom {
    height: 160px;
    width: 370px;
    display: inline-block;
}
.stats_area {
    width: 1100px;
    display: inline-block;
    vertical-align: top;
}

/* licensing page */
.licensing {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.licensing .licensing_left {
}
.licensing .licensing_right {
    width: 250px;
    height: 250px;
    position: relative;
}

.contract_pending {
    font-weight: 700;
    color: var(--warn-s0);
}
.contract_completed {
    font-weight: 700;
    color: var(--info-s0);
}
.contract_expired {
    font-weight: 700;
    color: var(--danger-s0);
}
.contract_active {
    font-weight: 700;
    color: var(--success-s0);
}
.contract_future {
    font-style:italic;
    font-size: 13px;
    width: 100%;
    text-align: right;
}
.contract_used {
    font-size: 1.3em;
    font-weight: 600;
}
.contract_upcoming {
    font-size: 16px;
}
.contract_upcoming .fa-check-circle {
    color: var(--success-s0);
}
.contract_upcoming .fa-times-circle {
    color: var(--danger-s0);
}

/* next/prev buttons on the contract calendar pop-up */
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
    cursor: pointer;
}
.ui-datepicker .ui-datepicker-next span, .ui-datepicker .ui-datepicker-prev span {
    color: var(--text-s0);
    font-family: var(--font-icon);
    font-size: 14px;
    font-weight: 500;
    display: inline-block;
    text-indent: 0px;
    text-align: center;
    width: 1.25em;
}
.ui-datepicker .ui-datepicker-prev span:before {
    content: '\f104';
}
.ui-datepicker .ui-datepicker-next span:after {
    content: '\f105';
}

/* dropzone styles */
.audio_drop_area {
    height: 180px;
    cursor: pointer;
    overflow-x: auto;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}
#audio_drop_previews {
    margin-top: 10px;
    padding-top: 2px;
    overflow-x: auto;
    height: 150px;
}
#audio_drop_message {
    text-align: center;
    width: 100%;
    display: inline-block;
    line-height: 165px;
}
.dz-preview {
    height: 32px;
    border: solid 1px var(--default-border-color);
    font-size: 0.8rem;
    position: relative;
    margin-right: 6px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}
.dz-details {
    display: inline-block;
}
.dz-filename {
    display: inline-block;
    text-overflow:ellipsis;
    max-width: 300px;
    white-space: nowrap;
}
.dz-size {
    display: inline-block;
    vertical-align: top;
}
.dz-progress {
    display: none;
}
.dz-success-mark {
    display: none;
}
.dz-error-mark {
    display: none;
}
.dz-error-message {
    display: none;
}
.dz-remove {
    cursor: pointer;
    font-size: 1rem;
    font-family: var(--font-icon);
    font-weight: 300;
    margin-left: 6px;
    text-decoration: none;
    color: var(--danger-s0);
}
.dz-remove:before {
    content: '\f056';
}
.dz-alert {
    font-size: 16px;
    color: var(--warn-s0);
    display: inline-block;
}

/* password strength meter */
.testresult {
    position: absolute;
    height: 2px;
    left: 181px;
    top: 25px;
}
.shortPass {
    width: 50px;
    background-color: red;
}
.badPass {
    width: 100px;
    background-color: red;
}
.goodPass {
    width: 150px;
    background-color: orange;
}
.strongPass {
    width: 200px;
    background-color: green;
}

/* */
.preformat {
    font-family: var(--font-mono);
    font-size: 1rem;
}
.auth_token_toggle, .shared_secret_toggle {
    cursor: pointer;
    margin-right: 4px;
}

/* IP address styling */
.ipblock_list {
    flex-wrap: wrap;
    margin-top: 2em !important;
}
.ipblock {
    border: solid 1px var(--default-border-color);
    padding: 5px 10px 5px 10px;
    margin: 0px 8px 8px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ipblock:hover {
    background-color: rgb(232, 242, 254);
}
.ipblock_info {
    margin-right: 8px;
}
.ipblock_remove, .remove_number {
    text-decoration: none;
    position: relative;
}

/* audio player styles */
body#calls_view .audio_player, 
body#callstats_view .audio_player {
    position: absolute;
    right: 0px;
    top: 68px;
}
#playback {
    width: 290px;
    background-color: #000;
    border-radius: 0px;
}

/* engine managment page */
#engine_list {
    width: 600px;
    border-collapse: separate;
}
#engine_list th, #engine_list td {
    min-width: unset;
}
#engine_list th:first-child {
    border: none;
    padding-bottom: 5px;
    text-align: left;
    vertical-align: bottom;
}
#engine_list th {
    border: solid 1px var(--default-border-color);
    height: 140px;
}
#engine_list th.skew {
    position: relative;
    top: 0px;
    left: 70px;
    transform: skew(-45deg,0deg);
    -ms-transform: skew(-45deg,0deg);
    -moz-transform: skew(-45deg,0deg);
    -webkit-transform: skew(-45deg,0deg);
    -o-transform: skew(-45deg,0deg);
    overflow: hidden;
    border-bottom: 0px;
}
#engine_list th.skew span {
    transform: skew(45deg,0deg) rotate(315deg);
    -ms-transform: skew(45deg,0deg) rotate(315deg);
    -moz-transform: skew(45deg,0deg) rotate(315deg);
    -webkit-transform: skew(45deg,0deg) rotate(315deg);
    -o-transform: skew(45deg,0deg) rotate(315deg);
    position: absolute;
    bottom: 25px;
    left: 1px;
    display: inline-block;
    width: 100%;
    text-align: left;
    font-weight: 700;
}

/* call quality feeback form */
.form_data .feedback_data {
    display: flex;
    margin-bottom: 8px;
    width: 100%;
}
.form_data .feedback_data input {
    margin-top: 3px;
    margin-right: 10px;
}
.form_data .feedback_data label {
    margin-bottom: 6px;
    font-weight: 600;
    display: inline-block;
}
.form_data .feedback_data p {
    line-height: 20px;
}
.form_data .feedback_comments {
    width: 100%;
    margin-top: 5px;
}
.form_data .feedback_comments h3 {
    font-size: 14px;
    margin-bottom: 8px;
}
.form_data .feedback_comments textarea {
    width: 100%;
    height: 90px;
    resize: none;
}

/* call breakdown from the call details section */
.ui-dialog[aria-describedby=dialog_breakdown] .ui-dialog-titlebar {
    display: none;
}
#dialog_breakdown {
    min-height: 360px !important;
}
.breakdown {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.breakdown h3 {
    margin-top: 0px;
    margin-bottom: 8px;
    border-bottom: solid 1px var(--default-border-color);
    padding-bottom: 6px;
    width: 100%;
}
.breakdown .breakdown_section {
    width: 50%;
    margin-bottom: 0px;
}
.breakdown div {
    margin-bottom: 0.75rem;
    width: 50%;
}
.breakdown div dt {
    line-height: 1.3rem;
    font-size: 0.92rem;
    font-weight: 500;
    margin: 0px;
    text-align: left;
    color: var(--header-icon);
}
.breakdown div dd {
    line-height: 1rem;
    font-size: 0.92rem;
    text-align: left;
    margin: 0px;
    padding: 0px;
    word-wrap: break-word;
}

/* sip trunk peer breakdown */
.peer_stats {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.peer_stats .peer {
    font-size: 0.8rem;
    cursor: pointer;
}

/* did search */
.did_search_section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: solid 1px var(--default-border-color);
    padding-bottom: 9px;
}
.did_search_section input, .did_search_section select {
    width: 190px;
}
.did_search_results {
    height: 400px;
    overflow: auto;
    padding: 20px 10px 0px 0px;
}
.did_search_rules {
    margin-top: 50px;
}
.did_search_rules p {
    text-align: center;
    display: block;
}
.did_search_features {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-evenly;
}
.did_search_features i {
    font-size: 16px;
    color: #ccc;
}
.did_search_feature_enabled {
    color: var(--success-s0) !important;
    font-weight: 400;
}

/* error conditions page */
.json_list_row {
    height: auto;
    padding: 10px;
    line-height: 1.2em;
    font-family: var(--font-mono);
    font-size: 0.85em;
    margin-bottom: 15px;
}
.error_condition_section {
    margin-left: 10px;
    margin-bottom: 30px;
}
.error_condition_subtitle {
    margin-top: 15px;
    margin-bottom: 5px;
}
.error_condition_details {
    font-size: 0.85em;
    margin-left: 8px;
}

/* main page */
.main_graphs {
    margin-top: 20px;
    width: 100%;
}
.main_graphs_left {
    width: 60%;
    height: 100%;
}
.main_graphs_right {
    width: 40%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.main_graphs_right .main_graphs_section {
    width: 100%;
    margin-bottom: 20px;
}
.main_graphs_right .main_pies {
    display: flex;
    justify-content: flex-end;
}
.main_graphs_right .main_pies .main_pie {
    width: 200px;
    height: 200px;
    position: relative;
    margin-left: 10px;
}
.pie_stats {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.pie_stats .pie_count {
    width: 100%;
    text-align: center;
}
.pie_stats .pie_count_label {
    width: 100%;
    text-align: center;
    font-size: 1.1em;
    color: #bdbdbd;
    margin-top: 10px;
    text-transform: uppercase;
    font-weight: 600;
}

/* appliance and api graphs */
.appliance_graph_data, .trunk_graph_data {
    width: 100%;
    height: 450px;
}
.stats_layout_api {
    height: 450px;
    display: flex;
    flex-direction: column;
}
#stats_layout_api_failed {
    width: 100%;
    height: 30%;
    margin-bottom: 1em;
}
#stats_layout_api_total {
    width: 100%;
    height: calc(70% - 1em);
}

/* monitoring graphs */
#monitor_history {
    display: flex;
    flex-direction: column;
}
#monitor_history .monitor_history_top {
    height: 200px;
}

/* jquery multi-select element */
.ms-parent {
    display: inline-block;
    position: relative;
    vertical-align: top;
    height: 36px;
    border: solid 1px var(--default-border-color);
    color: #555;
    margin: 0px;
}
.ms-choice {
    outline: none;
    font-size: 15px;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: default;
    text-align: left;
    white-space: nowrap;
    line-height: 26px;
    color: #444;
    text-decoration: none;
    background-color: #fff;
    border: none;
}
.ms-choice.disabled {
    background-color: #f4f4f4;
    background-image: none;
    border: 1px solid #ddd;
    cursor: default;
}
.ms-choice > span {
    outline: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    padding: 4px 4px 4px 8px;
    font-weight: 400;
}
.ms-choice > span.placeholder {
    color: #999;
}
.ms-choice > div {
    position: absolute;
    top: 3px;
    right: -3px;
    width: 20px;
    height: 30px;
    background: url(../images/multiple-select.png) left top no-repeat;
}
.ms-choice > div.open {
    background: url(../images/multiple-select.png) left top no-repeat;
}
.ms-drop {
    min-width: 348px;
    display: none;
    margin-top: 1px;
    padding: 0;
    position: absolute;
    z-index: 1000;
    background: #fff;
    color: #000;
    border: 1px solid var(--default-border-color);
    right: 0px;
}
.ms-drop.bottom {
    top: 100%;
}
.ms-drop.top {
    bottom: 100%;
}
.ms-search {
    display: inline-block;
    margin: 0;
    min-height: 26px;
    padding: 4px;
    position: relative;
    white-space: nowrap;
    width: 100%;
    z-index: 10000;
}
.ms-search input {
    width: 100%;
    height: auto !important;
    min-height: 24px;
    padding: 0 20px 0 5px;
    margin: 0;
    outline: 0;
    font-size: 15px;
    border: 1px solid #aaa;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    background: #fff url(../images/multiple-select.png) no-repeat 100% -22px;
    background: url(../images/multiple-select.png) no-repeat 100% -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
    background: url(../images/multiple-select.png) no-repeat 100% -22px, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%);
    background: url(../images/multiple-select.png) no-repeat 100% -22px, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
    background: url(../images/multiple-select.png) no-repeat 100% -22px, -o-linear-gradient(bottom, white 85%, #eeeeee 99%);
    background: url(../images/multiple-select.png) no-repeat 100% -22px, -ms-linear-gradient(top, #ffffff 85%, #eeeeee 99%);
    background: url(../images/multiple-select.png) no-repeat 100% -22px, linear-gradient(top, #ffffff 85%, #eeeeee 99%);
}
.ms-search, .ms-search input {
    -webkit-box-sizing: border-box;
    -khtml-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
.ms-drop ul {
    overflow: auto;
    margin: 0;
    padding: 0px;
}
.ms-drop ul > li {
    list-style: none;
    display: list-item;
    background-image: none;
    position: static;
}
.ms-drop ul > li:hover {
    background-color: #1e90ff;
    color: #fff;
}
.ms-drop ul > li .disabled {
    opacity: .35;
    filter: Alpha(Opacity=35);
}
.ms-drop ul > li.multiple {
    display: block;
    float: left;
}
.ms-drop ul > li.group {
    clear: both;
}
.ms-drop ul > li.multiple label {
    width: 100%;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ms-drop ul > li label {
    font-weight: 400;
    display: block;
    white-space: nowrap;
    line-height: 22px;
    padding-right: 10px;
    padding-left: 10px;
}
.ms-drop ul > li label.optgroup {
    font-weight: 700;
}
.ms-drop input[type="checkbox"] {
    vertical-align: middle;
    margin-right: 8px;
    margin-bottom: 2px;
}
.ms-drop .ms-no-results {
    display: none;
}

/* jquery date picker object */
div.datepicker {
	position: relative;
	font-size: 12px;
	width: 196px;
	height: 147px;
	position: absolute;
	cursor: default;
	top: 0;
	left: 0;
	display: none;
}
.datepickerContainer {
	background: #121212;
	position: absolute;
	top: 10px;
	left: 10px;
}
.datepickerHidden {
	display: none;
}
div.datepicker table {
	border-collapse:collapse;
}
div.datepicker a {
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	outline: none;
}
div.datepicker table td {
	text-align: right;
	padding: 0;
	margin: 0;
    border: solid 1px #666;
}
div.datepicker th {
	text-align: center;
	color: #999;
	font-weight: 400;
}
div.datepicker tbody th {
	text-align: left;
}
div.datepicker tbody a {
	display: block;
}
.datepickerDays a {
	width: 20px;
	line-height: 16px;
	height: 16px;
	padding-right: 2px;
}
.datepickerYears a,
.datepickerMonths a{
	width: 36px;
	line-height: 36px;
	height: 38px;
	text-align: center;
}
td.datepickerNotInMonth a {
	color: #555;
    cursor: default;
}
tbody.datepickerDays td.datepickerSelected{
	background: var(--text-link);
}
tbody.datepickerDays td.datepickerNotInMonth.datepickerSelected {
	background: transparent;
}
tbody.datepickerYears td.datepickerSelected,
tbody.datepickerMonths td.datepickerSelected{
	background: #17384d;
}
div.datepicker a:hover,
div.datepicker a:hover {
	color: #88c5eb;
}
div.datepicker td.datepickerNotInMonth a:hover {
	color: #555;
}
div.datepicker tbody th {
	text-align: left;
}
.datepickerSpace div {
	width: 20px;
}
.datepickerGoNext a,
.datepickerGoPrev a,
.datepickerMonth a {
	text-align: center;
	height: 20px;
	line-height: 20px;
}
.datepickerGoNext a {
	float: right;
	width: 20px;
}
.datepickerGoPrev a {
	float: left;
	width: 20px;
}
table.datepickerViewDays tbody.datepickerMonths,
table.datepickerViewDays tbody.datepickerYears {
	display: none;
}
table.datepickerViewMonths tbody.datepickerDays,
table.datepickerViewMonths tbody.datepickerYears,
table.datepickerViewMonths tr.datepickerDoW {
	display: none;
}
table.datepickerViewYears tbody.datepickerDays,
table.datepickerViewYears tbody.datepickerMonths,
table.datepickerViewYears tr.datepickerDoW {
	display: none;
}
td.datepickerDisabled a,
td.datepickerDisabled.datepickerNotInMonth a{
	color: #333;
}
td.datepickerDisabled a:hover {
	color: #333;
}
td.datepickerSpecial a {
	background: #700;
}
td.datepickerSpecial.datepickerSelected a {
	background: #a00;
}
#datepickerCalendar0 .datepickerGoNext a, #datepickerCalendar1 .datepickerGoPrev a {
    display: none;
}

/* call summary page */
.main_counter {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.main_counter .counter_section {
    width: 33%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0px;
}
.main_counter .counter_section h2 {
    font-family: var(--font-s1);
    font-size: 6em;
    letter-spacing: -4px;
}
.main_counter .counter_section h2 span {
    font-size: 0.4em;
    margin-left: 4px;
}
.main_counter .counter_section h3 {
    font-size: 1.5em;
    color: #5f6e82;
    text-align: right;
    margin-left: 10px;
}

/* vpn diagram */
.vpn_breakdown {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.vpn_breakdown h3 {
    margin-top: 0px;
    margin-bottom: 4px;
    border-bottom: solid 1px var(--default-border-color);
    padding-bottom: 2px;
}
.vpn_breakdown .vpn_breakdown_section {
    width: 50%;
    padding-left: 8px;
    padding-right: 8px;
    margin-bottom: 0px;
}
.vpn_breakdown dl {
    margin: 0px;
}
.vpn_breakdown dl div {
    display: flex;
}
.vpn_breakdown dl dt {
    display: inline-block;
    line-height: 22px;
    width: 35%;
    font-size: 13px;
    font-weight: 500;
    margin: 0px;
    text-align: right;
    padding-right: 10px;
    color: var(--header-icon);
}
.vpn_breakdown dl dd {
    display: inline-block;
    line-height: 22px;
    width: 65%;
    font-size: 13px;
    text-align: left;
    margin: 0px;
    padding: 0px;
    word-wrap: break-word;
}

.vpn_diagram {
    width: 100%;
    margin-bottom: 40px;
    display: flex;
    align-items: center;
}
.vpn_diagram_block {
    width: 20%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    color: var(--text-s0);
}
.vpn_diagram_block_server {
}
.vpn_diagram_block_server i {
    margin-top: 50px;
    font-size: 4em;
}
.vpn_diagram_block_server span {
    font-family: var(--font-mono);
    font-size: 0.95em;
    margin-top: 15px;
    text-align: center;
}
.vpn_diagram_block_vpn {
}
.vpn_diagram_block_vpn i {
    margin-top: 30px;
    font-size: 3.5em;
}
.vpn_diagram_block_vpn span {
    font-family: var(--font-mono);
    font-size: 0.95em;
    margin-top: 10px;
    text-align: center;
    line-height: 1.4em;
}
.vpn_diagram_block_cloud {
}
.vpn_diagram_block_cloud i {
    font-size: 7em;
}
.vpn_diagram_rule_vpn {
    width: 65px;
    border-top: dashed 2px var(--text-s0);
    height: 2px;
    position: absolute;
}
.vpn_diagram_rule_vpn_left {
    right: -15px;
    top: 60px;
}
.vpn_diagram_rule_vpn_right {
    left: -15px;
    top: 60px;
}
.vpn_diagram_rule_server {
    width: 100px;
    border-top: dashed 2px var(--text-s0);
    height: 2px;
    position: absolute;
}
.vpn_diagram_rule_server_left {
    right: -55px;
    top: 70px;
    transform: rotate(-10deg);
}
.vpn_diagram_rule_server_right {
    left: -55px;
    top: 70px;
    transform: rotate(10deg);
}

/* vpn status */
.vpn_status_connected {
    color: var(--success-s0);
}
.vpn_status_unknown {
    color: var(--warn-s0);
}
.vpn_status_not_connected {
    color: var(--danger-s0);
}

/* admin appliance list */
.appliance_status_icon {
    display: inline-block;
    margin-right: 6px;
    font-size: 8px;
}
.appliance_status_good {
    color: var(--success-s0);
}
.appliance_status_bad {
    color: var(--danger-s0);
}

/* sso form */
.certificate_form {
    width: 100%;
}
.certificate_upload, .certificate_complete {
    width: 100%;
    display: none;
}
.certificate_details {
    font-family: var(--font-mono);
    font-size: 13px;
    max-width: 500px;
    line-height: 36px;
}
.certificate_progress {
    width: 300px;
}
.certificate_remove {
    margin-left: 5px;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--danger-s0);
}
.certificate_remove i {
    margin-right: 2px;
}

/* saml settings view */
.saml_settings {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}
.saml_settings_block {
    display: flex;
    flex-direction: column;
    width: 49%;
    height: 100%;
}
.saml_settings .saml_setting {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}
.saml_settings .saml_setting .saml_title {
    font-size: 15px;
    margin-bottom: 8px;
}
.saml_settings .saml_setting .saml_split {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.saml_settings .saml_setting .saml_meta {
    font-size: 13px;
}
.saml_settings .saml_setting .saml_title i {
    margin-right: 4px;
}
.saml_settings .saml_setting .saml_desc {
    font-size: 13px;
    margin-bottom: 8px;
}
.saml_settings .saml_setting .saml_value {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    padding-left: 10px;
    border: 1px solid var(--default-border-color);;
    display: flex;
    align-items: center;
    min-height: 50px;
    justify-content: space-between;
}
.saml_settings .saml_setting .saml_cert {
    font-size: 0.8rem;
    padding-top: 16px;
    padding-bottom: 16px;
}
.saml_settings .saml_setting .saml_value_logo {
    background-image: url(https://cdn.fonolo.com/portal.fonolo.com/4.0/images/sso_icons/sso_logo_200x200.png);
    background-size: 35px;
    background-repeat: no-repeat;
    width: 35px;
    height: 35px;
    margin-right: 10px;
}
.saml_settings .saml_setting .saml_value_logos {
    display: flex;
    min-width: 180px;
    align-items: center;
    justify-content: space-between;
}
.saml_settings .saml_setting .saml_value .saml_copy_value {
}
.saml_settings .saml_setting .saml_value .saml_copy_icon {
    display: inline-block;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    text-decoration: none;
    color: var(--text-link);
}

/* appliance verification report */
.appliance_report_list_row {
    height: auto;
    padding: 10px 0px;
}
.appliance_report_row {
    display: flex;
    align-items: center;
    font-size: 13px;
}
.appliance_report_title {
    width: 200px;
}
.appliance_report_status {
    font-size: 20px;
    padding: 0px 5px;
}
.appliance_report_status_failed {
    color: var(--danger-s0);
}
.appliance_report_status_success {
    color: var(--success-s0);
}
.appliance_report_details {
    width: 675px;
    line-height: 15px;
}

/* empty content box */
.empty-content {
    padding: 2em 0px 2em 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.empty-content .empty-content-body {
    width: 80%;
    -webkit-box-shadow: 0 0 35px 0 rgba(154, 161, 171, 0.15);
    box-shadow: 0 0 35px 0 rgba(154, 161, 171, 0.15);
    height: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.empty-content h3 {
    color: var(--text-s0);
    font-size: 1.6rem;
    font-weight: 500;
    margin-bottom: 1.6rem !important;
    text-align: center;
}
.empty-content p {
    color: var(--text-s0);
    font-size: 1.1rem;
    margin-bottom: 1.6rem;
    width: 80%;
    line-height: 1.6rem;
    text-align: center;
    display: inline;
}
.empty-content span {
    font-size: 4rem;
    opacity: 0.2;
}

/* empty graph box */
.empty-graph {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}
.empty-graph .empty-graph-body {
    width: 80%;
    height: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.empty-graph h3 {
    color: var(--text-s0);
    font-size: 1.6rem;
    font-weight: 500;
    margin-bottom: 1.6rem !important;
    text-align: center;
}
.empty-graph p {
    color: var(--text-s0);
    font-size: 1.1rem;
    margin-bottom: 1.6rem;
    width: 80%;
    line-height: 1.6rem;
    text-align: center;
    display: inline;
}
.empty-graph span {
    font-size: 4rem;
    opacity: 0.2;
}


/* DataTables CSS */
.dataTables_wrapper {
    height: calc(100% - 45px - 1em);
    margin-top: 1em;
}
.data-table-wrapper {
    border-bottom: solid 1px var(--default-border-color);
    overflow: auto;
    height: calc(100% - 40px);
    padding-top: 1em;
    padding-bottom: 0.5em;
}
body#monitors_events .data-table-wrapper {
    border: none;
}
table.data-table {
    border: 1px solid var(--default-border-color);
    width: 100% !important;
}
table.data-table thead tr th {
    text-align: left;
    border: 1px solid var(--default-border-color);
    font-size: 1rem;
    font-weight: 600;
    padding: 8px 4px 8px 4px;
    white-space: nowrap;
}
table.data-table tbody tr:hover {
    background-color: #e8f2fe;
}
table.data-table tbody tr td {
    text-align: left;
    border-bottom: solid 1px var(--default-border-color);
    font-size: 0.92rem;
    padding: 8px 4px 8px 4px;
    white-space: nowrap;
}
table.data-table-mono tbody tr td {
    font-size: 0.85rem;
    font-family: var(--font-mono);
}
table.data-table-view thead tr th {
    border: solid 1px var(--default-border-color);
    text-align: center;
    padding: 6px 10px 6px 10px;
    vertical-align: middle;
    white-space: normal;
}
table.data-table-view tbody tr td {
    border: solid 1px var(--default-border-color);
    text-align: center;
    padding: 6px 10px 6px 10px;
}
table.data-table thead tr th.sorting {
    cursor: pointer;
}
table.data-table thead tr th.sorting.sorting_asc,
table.data-table thead tr th.sorting.sorting_desc,
table.data-table thead tr th.sorting,
table.data-table thead tr th.sorting:hover {
    background-color: #E6E6EC;
}
table.data-table thead tr th.sorting.sorting_asc:after,
table.data-table thead tr th.sorting.sorting_desc:after {
    font-family: var(--font-icon);
    font-size: 14px;
    font-weight: 500;
}
table.data-table thead tr th.sorting.sorting_asc:after {
    content: ' \f0d7';
}
table.data-table thead tr th.sorting.sorting_desc:after {
    content: ' \f0d8';
}
table.data-table-view tfoot tr td {
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
    border: solid 1px var(--default-border-color);
    text-align: center;
    padding: 6px 4px 6px 4px;
}
table.data-table-calls tfoot tr td {
    padding: 6px 10px 6px 10px;
}
.data-table-footer {
    height: 50px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.data-table-footer .data-table-paging,
.data-table-footer .data-table-search {
    display: flex;
    align-items: center;
}
.data-table-footer .data-table-search input[type=search] {
    margin-right: 1em;
    width: 250px;
}
.data-table-footer select.form-control {
    border: none;
    color: var(--text-link);
    outline: 1px solid var(--info-s1);
    cursor: pointer;
    margin-right: 1em;
    width: 120px;
}
.data-table-footer .dataTables_paginate {
    display: flex;
    align-items: center;
}
.data-table-footer .dataTables_paginate span {
    display: flex;
    align-items: center;
}
.data-table-footer .paginate_button {
    color: var(--text-link);
    cursor: pointer;
    font-weight: 500;
    padding: 6px;
}
.data-table-footer .ellipsis {
    padding: 6px;
}
.data-table-footer .paginate_button.current {
    font-weight: 700;
}
.data-table-audio {
    padding: 0px 4px 0px 4px !important;
    vertical-align: middle;
}
.data-table-audio .icon_items_font {
    height: 16px;
    vertical-align: unset;
    top: 0px;
}
.data-table-horizontal tr th {
    border: solid 1px var(--default-border-color);
    font-size: 0.95rem;
    text-align: left;
    padding: 6px !important;
    min-width: 140px;
    width: 20%;
}
.data-table-horizontal tr td {
    border-bottom: solid 1px var(--default-border-color) !important;
    border: solid 1px var(--default-border-color);
    font-family: var(--font-mono);
    padding: 6px !important;
    text-overflow: ellipsis;
    white-space: break-spaces !important;
}
.data-table-horizontal tr td pre.data {
    display: flex;
    font-size: 0.85rem;
    line-height: 1.2em;
    max-height: 150px;
    overflow: auto;
    width: 755px;
}
.data-table-status-failed {
    color: var(--danger-s0);
}
.data-table-status-canceled {
    color: var(--warn-s0);
}
.data-table-status-deleted {
    text-decoration: line-through;
}
.data-table-row-success {
    background-color: var(--success-s2);
}
.data-table-row-success:hover {
    background-color: var(--success-s1) !important;
}
.data-table-row-warn {
    background-color: var(--warn-s2);
}
.data-table-row-warn:hover {
    background-color: var(--warn-s1) !important;
}
.data-table-row-danger {
    background-color: var(--danger-s2);
}
.data-table-row-danger:hover {
    background-color: var(--danger-s1) !important;
}
.data-table-lookup {
    width: 800px !important;
}
.data-table-lookup tr th {
    border: solid 1px var(--default-border-color);
    text-align: left;
    padding: 6px !important;
    width: 175px;
}
.data-table-lookup tr td {
    border-bottom: solid 1px var(--default-border-color) !important;
    border: solid 1px var(--default-border-color);
    font-family: var(--font-mono);
    padding: 6px !important;
    text-overflow: ellipsis;
    white-space: break-spaces !important;
}
.dataTables_scrollBody thead {
  visibility: collapse;
}
.dataTables_scrollBody thead th div.dataTables_sizing {
  height: 0 !important;
  overflow: hidden !important;
  font-size: 0 !important;
  line-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}
.dataTables_scrollHeadInner {
    width: 100% !important;
}
/* empty data table shimmer */
@keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}
.data-table-loading-mask {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--default-bg), transparent);
    z-index: 1;
    height: 196px;
}
.data-table-loading th {
    height: 55px;
}
.data-table-loading td {
}
.data-table-loading th span, .data-table-loading td span {
    border-radius: 6px;
    height: 1em;
    width: 80%;
    position: relative;
    display: inline-block;
    overflow: hidden;
    background-color: #DDDBDD;
}
.data-table-loading th span:after, .data-table-loading td span:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));
    -webkit-animation: shimmer 2s infinite;
    animation: shimmer 2s infinite;
    content: "";
}

/* custom data tables for the sip trunks view */
body#vpns_view .dataTables_wrapper,
body#engines_view .dataTables_wrapper,
body#gateways_view .dataTables_wrapper,
body#calls_view .dataTables_wrapper,
body#callstats_view .dataTables_wrapper,
body#trunkview_view .dataTables_wrapper,
body#sessions_view .dataTables_wrapper {
    margin: 0;
}
body#vpns_view .data-table-wrapper,
body#engines_view .data-table-wrapper,
body#gateways_view .data-table-wrapper,
body#calls_view .data-table-wrapper,
body#callstats_view .data-table-wrapper,
body#trunkview_view .data-table-wrapper,
body#sessions_view .data-table-wrapper {
    padding-top: 0;
}

/* full width for admin call stats */
body#applianceview_view #main,
body#callstats_view #main {
    max-width: 100%;
}

/* right-hand dialog */
.dialog {
    position: fixed;
    z-index: 80;
    top: 0;
    bottom: 0;
    height: 100vh;
    width: 500px;
    display: flex;
    flex-direction: column;
    -webkit-box-shadow: 0 0 24px 0 rgba(50, 58, 70, 0.1), 0 1px 0 0 rgba(50, 58, 70, 0.08);
    box-shadow: 0 0 24px 0 rgba(50, 58, 70, 0.1), 0 1px 0 0 rgba(50, 58, 70, 0.08);
    -webkit-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
}
.dialog-right {
    right: -500px;
    visibility: hidden;
}
.dialog-right-enabled {
    right: 0px !important;
    visibility: visible;
}
#dialog_call_breakdown {
    width: 650px;
}
#dialog_call_breakdown {
    right: -650px;
}
.dialog-overlay {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: none;
    z-index: 79;
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
    background: #aaa;
    opacity: .3;
    filter: Alpha(Opacity=30);
}
.dialog > .header {
    background-color: var(--header-bg0);
    padding: 0px 1.2em;
    height: 65px;
    width: 100%;
}
.dialog > .header h3 {
    font-size: 1.4rem;
    color: var(--header-text);
    display: flex;
    align-items: center;
    height: 100%;
}
.dialog > .section {
    background-color: var(--default-bg);
    display: flex;
    flex-direction: column;
    height: calc(100vh - 60px - 70px);
    padding: 1.4em;
    overflow-y: auto;
    width: 100%;
}
.dialog > .section .form_data p {
    line-height: 1.4em;
}
.dialog > .footer {
    background-color: var(--header-bg0);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 1.2em;
    height: 70px;
    width: 100%;
}
.dialog .footer .close_button,
.dialog .footer .next_button,
.dialog .footer .prev_button {
    background-color: transparent;
    border: solid 1px;
}
.dialog .footer .next_button:disabled,
.dialog .footer .prev_button:disabled,
.dialog .footer .next_button[disabled],
.dialog .footer .prev_button[disabled] {
    border-color: #999;
    color: #999;
    cursor: auto;
}

/* reporting fields - right side dialog */
.dialog ul.report_fields_list {
    display: flex;
    flex-flow: wrap;
}
.dialog ul.report_fields_list li.report_field {
    width: 50%;
    padding: 0px;
    float: none;
    height: 26px;
    line-height: unset;
    display: flex;
    align-items: center;
}
.dialog ul.report_fields_list li.report_fields_list_placeholder {
    width: 50%;
}

/* firefox specific changes */
@-moz-document url-prefix() {

    .file_input_hidden {
        top: -45px;
    }
    .file_input_button {
        top: -50px;
    }
    .save_changes_loader {
        min-width: 145px;
    }
    .cancel_button {
        margin-right: 6px;
    }
    .stats_small_modal {
        width: 310px;
        height: 50px;
    }
    .stats_small_modal button {
        top: -3px;
    }
}

/**
 * ----------------------------------------
 * animation clipboard_copy
 * ----------------------------------------
 */
.clipboard_copy {
    -webkit-animation: clipboard_copy 0.9s both;
            animation: clipboard_copy 0.9s both;
}
@-webkit-keyframes clipboard_copy {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
@keyframes clipboard_copy {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

/* country flags */
.country_code_list_flag {
    width: 20px;
    height: 15px;
    display: inline-block;
    -moz-box-shadow: 0 0 1px 0 #888;
    -webkit-box-shadow: 0 0 1px 0 #888;
    box-shadow: 0 0 1px 0 #888;
    background-image: url("../images/flags.png");
    background-repeat: no-repeat;
    background-color: #dbdbdb;
    background-position: 20px 0;
}
.country_code_list_flag_be,
.country_code_list_flag_ne {
    width: 18px;
}
.country_code_list_flag_ch {
    width: 15px;
}
.country_code_list_flag_mc {
    width: 19px;
}
.country_code_list_flag_np {
    width: 13px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
    .country_code_list_flag {
        background-image: url("../images/flags2x.png");
        background-size: 5630px 15px;
    }
}
.country_code_list_flag_ac {
    height: 10px;
    background-position: 0 0;
}
.country_code_list_flag_ad {
    height: 14px;
    background-position: -22px 0;
}
.country_code_list_flag_ae {
    height: 10px;
    background-position: -44px 0;
}
.country_code_list_flag_af {
    height: 14px;
    background-position: -66px 0;
}
.country_code_list_flag_ag {
    height: 14px;
    background-position: -88px 0;
}
.country_code_list_flag_ai {
    height: 10px;
    background-position: -110px 0;
}
.country_code_list_flag_al {
    height: 15px;
    background-position: -132px 0;
}
.country_code_list_flag_am {
    height: 10px;
    background-position: -154px 0;
}
.country_code_list_flag_ao {
    height: 14px;
    background-position: -176px 0;
}
.country_code_list_flag_aq {
    height: 14px;
    background-position: -198px 0;
}
.country_code_list_flag_ar {
    height: 13px;
    background-position: -220px 0;
}
.country_code_list_flag_as {
    height: 10px;
    background-position: -242px 0;
}
.country_code_list_flag_at {
    height: 14px;
    background-position: -264px 0;
}
.country_code_list_flag_au {
    height: 10px;
    background-position: -286px 0;
}
.country_code_list_flag_aw {
    height: 14px;
    background-position: -308px 0;
}
.country_code_list_flag_ax {
    height: 13px;
    background-position: -330px 0;
}
.country_code_list_flag_az {
    height: 10px;
    background-position: -352px 0;
}
.country_code_list_flag_ba {
    height: 10px;
    background-position: -374px 0;
}
.country_code_list_flag_bb {
    height: 14px;
    background-position: -396px 0;
}
.country_code_list_flag_bd {
    height: 12px;
    background-position: -418px 0;
}
.country_code_list_flag_be {
    height: 15px;
    background-position: -440px 0;
}
.country_code_list_flag_bf {
    height: 14px;
    background-position: -460px 0;
}
.country_code_list_flag_bg {
    height: 12px;
    background-position: -482px 0;
}
.country_code_list_flag_bh {
    height: 12px;
    background-position: -504px 0;
}
.country_code_list_flag_bi {
    height: 12px;
    background-position: -526px 0;
}
.country_code_list_flag_bj {
    height: 14px;
    background-position: -548px 0;
}
.country_code_list_flag_bl {
    height: 14px;
    background-position: -570px 0;
}
.country_code_list_flag_bm {
    height: 10px;
    background-position: -592px 0;
}
.country_code_list_flag_bn {
    height: 10px;
    background-position: -614px 0;
}
.country_code_list_flag_bo {
    height: 14px;
    background-position: -636px 0;
}
.country_code_list_flag_bq {
    height: 14px;
    background-position: -658px 0;
}
.country_code_list_flag_br {
    height: 14px;
    background-position: -680px 0;
}
.country_code_list_flag_bs {
    height: 10px;
    background-position: -702px 0;
}
.country_code_list_flag_bt {
    height: 14px;
    background-position: -724px 0;
}
.country_code_list_flag_bv {
    height: 15px;
    background-position: -746px 0;
}
.country_code_list_flag_bw {
    height: 14px;
    background-position: -768px 0;
}
.country_code_list_flag_by {
    height: 10px;
    background-position: -790px 0;
}
.country_code_list_flag_bz {
    height: 14px;
    background-position: -812px 0;
}
.country_code_list_flag_ca {
    height: 10px;
    background-position: -834px 0;
}
.country_code_list_flag_cc {
    height: 10px;
    background-position: -856px 0;
}
.country_code_list_flag_cd {
    height: 15px;
    background-position: -878px 0;
}
.country_code_list_flag_cf {
    height: 14px;
    background-position: -900px 0;
}
.country_code_list_flag_cg {
    height: 14px;
    background-position: -922px 0;
}
.country_code_list_flag_ch {
    height: 15px;
    background-position: -944px 0;
}
.country_code_list_flag_ci {
    height: 14px;
    background-position: -961px 0;
}
.country_code_list_flag_ck {
    height: 10px;
    background-position: -983px 0;
}
.country_code_list_flag_cl {
    height: 14px;
    background-position: -1005px 0;
}
.country_code_list_flag_cm {
    height: 14px;
    background-position: -1027px 0;
}
.country_code_list_flag_cn {
    height: 14px;
    background-position: -1049px 0;
}
.country_code_list_flag_co {
    height: 14px;
    background-position: -1071px 0;
}
.country_code_list_flag_cp {
    height: 14px;
    background-position: -1093px 0;
}
.country_code_list_flag_cr {
    height: 12px;
    background-position: -1115px 0;
}
.country_code_list_flag_cu {
    height: 10px;
    background-position: -1137px 0;
}
.country_code_list_flag_cv {
    height: 12px;
    background-position: -1159px 0;
}
.country_code_list_flag_cw {
    height: 14px;
    background-position: -1181px 0;
}
.country_code_list_flag_cx {
    height: 10px;
    background-position: -1203px 0;
}
.country_code_list_flag_cy {
    height: 13px;
    background-position: -1225px 0;
}
.country_code_list_flag_cz {
    height: 14px;
    background-position: -1247px 0;
}
.country_code_list_flag_de {
    height: 12px;
    background-position: -1269px 0;
}
.country_code_list_flag_dg {
    height: 10px;
    background-position: -1291px 0;
}
.country_code_list_flag_dj {
    height: 14px;
    background-position: -1313px 0;
}
.country_code_list_flag_dk {
    height: 15px;
    background-position: -1335px 0;
}
.country_code_list_flag_dm {
    height: 10px;
    background-position: -1357px 0;
}
.country_code_list_flag_do {
    height: 13px;
    background-position: -1379px 0;
}
.country_code_list_flag_dz {
    height: 14px;
    background-position: -1401px 0;
}
.country_code_list_flag_ea {
    height: 14px;
    background-position: -1423px 0;
}
.country_code_list_flag_ec {
    height: 14px;
    background-position: -1445px 0;
}
.country_code_list_flag_ee {
    height: 13px;
    background-position: -1467px 0;
}
.country_code_list_flag_eg {
    height: 14px;
    background-position: -1489px 0;
}
.country_code_list_flag_eh {
    height: 10px;
    background-position: -1511px 0;
}
.country_code_list_flag_er {
    height: 10px;
    background-position: -1533px 0;
}
.country_code_list_flag_es {
    height: 14px;
    background-position: -1555px 0;
}
.country_code_list_flag_et {
    height: 10px;
    background-position: -1577px 0;
}
.country_code_list_flag_eu {
    height: 14px;
    background-position: -1599px 0;
}
.country_code_list_flag_fi {
    height: 12px;
    background-position: -1621px 0;
}
.country_code_list_flag_fj {
    height: 10px;
    background-position: -1643px 0;
}
.country_code_list_flag_fk {
    height: 10px;
    background-position: -1665px 0;
}
.country_code_list_flag_fm {
    height: 11px;
    background-position: -1687px 0;
}
.country_code_list_flag_fo {
    height: 15px;
    background-position: -1709px 0;
}
.country_code_list_flag_fr {
    height: 14px;
    background-position: -1731px 0;
}
.country_code_list_flag_ga {
    height: 15px;
    background-position: -1753px 0;
}
.country_code_list_flag_gb {
    height: 10px;
    background-position: -1775px 0;
}
.country_code_list_flag_gd {
    height: 12px;
    background-position: -1797px 0;
}
.country_code_list_flag_ge {
    height: 14px;
    background-position: -1819px 0;
}
.country_code_list_flag_gf {
    height: 14px;
    background-position: -1841px 0;
}
.country_code_list_flag_gg {
    height: 14px;
    background-position: -1863px 0;
}
.country_code_list_flag_gh {
    height: 14px;
    background-position: -1885px 0;
}
.country_code_list_flag_gi {
    height: 10px;
    background-position: -1907px 0;
}
.country_code_list_flag_gl {
    height: 14px;
    background-position: -1929px 0;
}
.country_code_list_flag_gm {
    height: 14px;
    background-position: -1951px 0;
}
.country_code_list_flag_gn {
    height: 14px;
    background-position: -1973px 0;
}
.country_code_list_flag_gp {
    height: 14px;
    background-position: -1995px 0;
}
.country_code_list_flag_gq {
    height: 14px;
    background-position: -2017px 0;
}
.country_code_list_flag_gr {
    height: 14px;
    background-position: -2039px 0;
}
.country_code_list_flag_gs {
    height: 10px;
    background-position: -2061px 0;
}
.country_code_list_flag_gt {
    height: 13px;
    background-position: -2083px 0;
}
.country_code_list_flag_gu {
    height: 11px;
    background-position: -2105px 0;
}
.country_code_list_flag_gw {
    height: 10px;
    background-position: -2127px 0;
}
.country_code_list_flag_gy {
    height: 12px;
    background-position: -2149px 0;
}
.country_code_list_flag_hk {
    height: 14px;
    background-position: -2171px 0;
}
.country_code_list_flag_hm {
    height: 10px;
    background-position: -2193px 0;
}
.country_code_list_flag_hn {
    height: 10px;
    background-position: -2215px 0;
}
.country_code_list_flag_hr {
    height: 10px;
    background-position: -2237px 0;
}
.country_code_list_flag_ht {
    height: 12px;
    background-position: -2259px 0;
}
.country_code_list_flag_hu {
    height: 10px;
    background-position: -2281px 0;
}
.country_code_list_flag_ic {
    height: 14px;
    background-position: -2303px 0;
}
.country_code_list_flag_id {
    height: 14px;
    background-position: -2325px 0;
}
.country_code_list_flag_ie {
    height: 10px;
    background-position: -2347px 0;
}
.country_code_list_flag_il {
    height: 15px;
    background-position: -2369px 0;
}
.country_code_list_flag_im {
    height: 10px;
    background-position: -2391px 0;
}
.country_code_list_flag_in {
    height: 14px;
    background-position: -2413px 0;
}
.country_code_list_flag_io {
    height: 10px;
    background-position: -2435px 0;
}
.country_code_list_flag_iq {
    height: 14px;
    background-position: -2457px 0;
}
.country_code_list_flag_ir {
    height: 12px;
    background-position: -2479px 0;
}
.country_code_list_flag_is {
    height: 15px;
    background-position: -2501px 0;
}
.country_code_list_flag_it {
    height: 14px;
    background-position: -2523px 0;
}
.country_code_list_flag_je {
    height: 12px;
    background-position: -2545px 0;
}
.country_code_list_flag_jm {
    height: 10px;
    background-position: -2567px 0;
}
.country_code_list_flag_jo {
    height: 10px;
    background-position: -2589px 0;
}
.country_code_list_flag_jp {
    height: 14px;
    background-position: -2611px 0;
}
.country_code_list_flag_ke {
    height: 14px;
    background-position: -2633px 0;
}
.country_code_list_flag_kg {
    height: 12px;
    background-position: -2655px 0;
}
.country_code_list_flag_kh {
    height: 13px;
    background-position: -2677px 0;
}
.country_code_list_flag_ki {
    height: 10px;
    background-position: -2699px 0;
}
.country_code_list_flag_km {
    height: 12px;
    background-position: -2721px 0;
}
.country_code_list_flag_kn {
    height: 14px;
    background-position: -2743px 0;
}
.country_code_list_flag_kp {
    height: 10px;
    background-position: -2765px 0;
}
.country_code_list_flag_kr {
    height: 14px;
    background-position: -2787px 0;
}
.country_code_list_flag_kw {
    height: 10px;
    background-position: -2809px 0;
}
.country_code_list_flag_ky {
    height: 10px;
    background-position: -2831px 0;
}
.country_code_list_flag_kz {
    height: 10px;
    background-position: -2853px 0;
}
.country_code_list_flag_la {
    height: 14px;
    background-position: -2875px 0;
}
.country_code_list_flag_lb {
    height: 14px;
    background-position: -2897px 0;
}
.country_code_list_flag_lc {
    height: 10px;
    background-position: -2919px 0;
}
.country_code_list_flag_li {
    height: 12px;
    background-position: -2941px 0;
}
.country_code_list_flag_lk {
    height: 10px;
    background-position: -2963px 0;
}
.country_code_list_flag_lr {
    height: 11px;
    background-position: -2985px 0;
}
.country_code_list_flag_ls {
    height: 14px;
    background-position: -3007px 0;
}
.country_code_list_flag_lt {
    height: 12px;
    background-position: -3029px 0;
}
.country_code_list_flag_lu {
    height: 12px;
    background-position: -3051px 0;
}
.country_code_list_flag_lv {
    height: 10px;
    background-position: -3073px 0;
}
.country_code_list_flag_ly {
    height: 10px;
    background-position: -3095px 0;
}
.country_code_list_flag_ma {
    height: 14px;
    background-position: -3117px 0;
}
.country_code_list_flag_mc {
    height: 15px;
    background-position: -3139px 0;
}
.country_code_list_flag_md {
    height: 10px;
    background-position: -3160px 0;
}
.country_code_list_flag_me {
    height: 10px;
    background-position: -3182px 0;
}
.country_code_list_flag_mf {
    height: 14px;
    background-position: -3204px 0;
}
.country_code_list_flag_mg {
    height: 14px;
    background-position: -3226px 0;
}
.country_code_list_flag_mh {
    height: 11px;
    background-position: -3248px 0;
}
.country_code_list_flag_mk {
    height: 10px;
    background-position: -3270px 0;
}
.country_code_list_flag_ml {
    height: 14px;
    background-position: -3292px 0;
}
.country_code_list_flag_mm {
    height: 14px;
    background-position: -3314px 0;
}
.country_code_list_flag_mn {
    height: 10px;
    background-position: -3336px 0;
}
.country_code_list_flag_mo {
    height: 14px;
    background-position: -3358px 0;
}
.country_code_list_flag_mp {
    height: 10px;
    background-position: -3380px 0;
}
.country_code_list_flag_mq {
    height: 14px;
    background-position: -3402px 0;
}
.country_code_list_flag_mr {
    height: 14px;
    background-position: -3424px 0;
}
.country_code_list_flag_ms {
    height: 10px;
    background-position: -3446px 0;
}
.country_code_list_flag_mt {
    height: 14px;
    background-position: -3468px 0;
}
.country_code_list_flag_mu {
    height: 14px;
    background-position: -3490px 0;
}
.country_code_list_flag_mv {
    height: 14px;
    background-position: -3512px 0;
}
.country_code_list_flag_mw {
    height: 14px;
    background-position: -3534px 0;
}
.country_code_list_flag_mx {
    height: 12px;
    background-position: -3556px 0;
}
.country_code_list_flag_my {
    height: 10px;
    background-position: -3578px 0;
}
.country_code_list_flag_mz {
    height: 14px;
    background-position: -3600px 0;
}
.country_code_list_flag_na {
    height: 14px;
    background-position: -3622px 0;
}
.country_code_list_flag_nc {
    height: 10px;
    background-position: -3644px 0;
}
.country_code_list_flag_ne {
    height: 15px;
    background-position: -3666px 0;
}
.country_code_list_flag_nf {
    height: 10px;
    background-position: -3686px 0;
}
.country_code_list_flag_ng {
    height: 10px;
    background-position: -3708px 0;
}
.country_code_list_flag_ni {
    height: 12px;
    background-position: -3730px 0;
}
.country_code_list_flag_nl {
    height: 14px;
    background-position: -3752px 0;
}
.country_code_list_flag_no {
    height: 15px;
    background-position: -3774px 0;
}
.country_code_list_flag_np {
    height: 15px;
    background-position: -3796px 0;
    background-color: transparent;
}
.country_code_list_flag_nr {
    height: 10px;
    background-position: -3811px 0;
}
.country_code_list_flag_nu {
    height: 10px;
    background-position: -3833px 0;
}
.country_code_list_flag_nz {
    height: 10px;
    background-position: -3855px 0;
}
.country_code_list_flag_om {
    height: 10px;
    background-position: -3877px 0;
}
.country_code_list_flag_pa {
    height: 14px;
    background-position: -3899px 0;
}
.country_code_list_flag_pe {
    height: 14px;
    background-position: -3921px 0;
}
.country_code_list_flag_pf {
    height: 14px;
    background-position: -3943px 0;
}
.country_code_list_flag_pg {
    height: 15px;
    background-position: -3965px 0;
}
.country_code_list_flag_ph {
    height: 10px;
    background-position: -3987px 0;
}
.country_code_list_flag_pk {
    height: 14px;
    background-position: -4009px 0;
}
.country_code_list_flag_pl {
    height: 13px;
    background-position: -4031px 0;
}
.country_code_list_flag_pm {
    height: 14px;
    background-position: -4053px 0;
}
.country_code_list_flag_pn {
    height: 10px;
    background-position: -4075px 0;
}
.country_code_list_flag_pr {
    height: 14px;
    background-position: -4097px 0;
}
.country_code_list_flag_ps {
    height: 10px;
    background-position: -4119px 0;
}
.country_code_list_flag_pt {
    height: 14px;
    background-position: -4141px 0;
}
.country_code_list_flag_pw {
    height: 13px;
    background-position: -4163px 0;
}
.country_code_list_flag_py {
    height: 11px;
    background-position: -4185px 0;
}
.country_code_list_flag_qa {
    height: 8px;
    background-position: -4207px 0;
}
.country_code_list_flag_re {
    height: 14px;
    background-position: -4229px 0;
}
.country_code_list_flag_ro {
    height: 14px;
    background-position: -4251px 0;
}
.country_code_list_flag_rs {
    height: 14px;
    background-position: -4273px 0;
}
.country_code_list_flag_ru {
    height: 14px;
    background-position: -4295px 0;
}
.country_code_list_flag_rw {
    height: 14px;
    background-position: -4317px 0;
}
.country_code_list_flag_sa {
    height: 14px;
    background-position: -4339px 0;
}
.country_code_list_flag_sb {
    height: 10px;
    background-position: -4361px 0;
}
.country_code_list_flag_sc {
    height: 10px;
    background-position: -4383px 0;
}
.country_code_list_flag_sd {
    height: 10px;
    background-position: -4405px 0;
}
.country_code_list_flag_se {
    height: 13px;
    background-position: -4427px 0;
}
.country_code_list_flag_sg {
    height: 14px;
    background-position: -4449px 0;
}
.country_code_list_flag_sh {
    height: 10px;
    background-position: -4471px 0;
}
.country_code_list_flag_si {
    height: 10px;
    background-position: -4493px 0;
}
.country_code_list_flag_sj {
    height: 15px;
    background-position: -4515px 0;
}
.country_code_list_flag_sk {
    height: 14px;
    background-position: -4537px 0;
}
.country_code_list_flag_sl {
    height: 14px;
    background-position: -4559px 0;
}
.country_code_list_flag_sm {
    height: 15px;
    background-position: -4581px 0;
}
.country_code_list_flag_sn {
    height: 14px;
    background-position: -4603px 0;
}
.country_code_list_flag_so {
    height: 14px;
    background-position: -4625px 0;
}
.country_code_list_flag_sr {
    height: 14px;
    background-position: -4647px 0;
}
.country_code_list_flag_ss {
    height: 10px;
    background-position: -4669px 0;
}
.country_code_list_flag_st {
    height: 10px;
    background-position: -4691px 0;
}
.country_code_list_flag_sv {
    height: 12px;
    background-position: -4713px 0;
}
.country_code_list_flag_sx {
    height: 14px;
    background-position: -4735px 0;
}
.country_code_list_flag_sy {
    height: 14px;
    background-position: -4757px 0;
}
.country_code_list_flag_sz {
    height: 14px;
    background-position: -4779px 0;
}
.country_code_list_flag_ta {
    height: 10px;
    background-position: -4801px 0;
}
.country_code_list_flag_tc {
    height: 10px;
    background-position: -4823px 0;
}
.country_code_list_flag_td {
    height: 14px;
    background-position: -4845px 0;
}
.country_code_list_flag_tf {
    height: 14px;
    background-position: -4867px 0;
}
.country_code_list_flag_tg {
    height: 13px;
    background-position: -4889px 0;
}
.country_code_list_flag_th {
    height: 14px;
    background-position: -4911px 0;
}
.country_code_list_flag_tj {
    height: 10px;
    background-position: -4933px 0;
}
.country_code_list_flag_tk {
    height: 10px;
    background-position: -4955px 0;
}
.country_code_list_flag_tl {
    height: 10px;
    background-position: -4977px 0;
}
.country_code_list_flag_tm {
    height: 14px;
    background-position: -4999px 0;
}
.country_code_list_flag_tn {
    height: 14px;
    background-position: -5021px 0;
}
.country_code_list_flag_to {
    height: 10px;
    background-position: -5043px 0;
}
.country_code_list_flag_tr {
    height: 14px;
    background-position: -5065px 0;
}
.country_code_list_flag_tt {
    height: 12px;
    background-position: -5087px 0;
}
.country_code_list_flag_tv {
    height: 10px;
    background-position: -5109px 0;
}
.country_code_list_flag_tw {
    height: 14px;
    background-position: -5131px 0;
}
.country_code_list_flag_tz {
    height: 14px;
    background-position: -5153px 0;
}
.country_code_list_flag_ua {
    height: 14px;
    background-position: -5175px 0;
}
.country_code_list_flag_ug {
    height: 14px;
    background-position: -5197px 0;
}
.country_code_list_flag_um {
    height: 11px;
    background-position: -5219px 0;
}
.country_code_list_flag_us {
    height: 11px;
    background-position: -5241px 0;
}
.country_code_list_flag_uy {
    height: 14px;
    background-position: -5263px 0;
}
.country_code_list_flag_uz {
    height: 10px;
    background-position: -5285px 0;
}
.country_code_list_flag_va {
    width: 15px;
    height: 15px;
    background-position: -5307px 0;
}
.country_code_list_flag_vc {
    height: 14px;
    background-position: -5324px 0;
}
.country_code_list_flag_ve {
    height: 14px;
    background-position: -5346px 0;
}
.country_code_list_flag_vg {
    height: 10px;
    background-position: -5368px 0;
}
.country_code_list_flag_vi {
    height: 14px;
    background-position: -5390px 0;
}
.country_code_list_flag_vn {
    height: 14px;
    background-position: -5412px 0;
}
.country_code_list_flag_vu {
    height: 12px;
    background-position: -5434px 0;
}
.country_code_list_flag_wf {
    height: 14px;
    background-position: -5456px 0;
}
.country_code_list_flag_ws {
    height: 10px;
    background-position: -5478px 0;
}
.country_code_list_flag_xk {
    height: 15px;
    background-position: -5500px 0;
}
.country_code_list_flag_ye {
    height: 14px;
    background-position: -5522px 0;
}
.country_code_list_flag_yt {
    height: 14px;
    background-position: -5544px 0;
}
.country_code_list_flag_za {
    height: 14px;
    background-position: -5566px 0;
}
.country_code_list_flag_zm {
    height: 14px;
    background-position: -5588px 0;
}
.country_code_list_flag_zw {
    height: 10px;
    background-position: -5610px 0;
}