/* 29.8.2013*/

/*
 * Design tokens (--default_*) are the built-in fallbacks.
 * Custom org styling sets the matching --custom_* var in css.tpl;
 * elements read with var(--custom_x, var(--default_x)) so a missing
 * custom value falls through to the default automatically.
 */
:root{
    --success-dim:#317a53;
    --success-dim-hover:#317a53;
    --success-gray:#57635b;
    --success-gray-hover:#57635b;
    --danger-dim:#872626;
    --danger-dim-hover:#872626;
    --danger-gray:#5e5353;
    --danger-gray-hover:#5e5353;

    --default_primary_color: #314a75;
    --default_primary_font_color: #ffffff;
    --default_primary_icon_color: #ffffff;
    --default_secondary_color: #ffffff;
    --default_secondary_font_color: #000000;
    --default_secondary_icon_color: #000000;
    --default_tetriary_color: #1b5186;
    --default_background_color: #f2f2f2;
    --default_background_font_color: #000000;
    --default_background_icon_color: #314a75;
}

* {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
	box-sizing: content-box;
}

body, td, textarea {
	font-size: 13px;
	color: var(--custom_background_font_color, var(--default_background_font_color));
    height: 100%;
}


/* these allow us to scroll within the body, but will not show anything overflowing the min-widht body */
html {
    overflow-x: auto;
}

body {
    overflow-x: hidden;
}

html:has(body.actionstep), body.actionstep,
html:has(body.app_login), body.app_login
{
    min-width: 300px;
    /*width: 300px;*/
}

html, body{
	font-family: 'Open Sans',verdana, arial, helvetica;
    margin:0;
    padding:0;
    text-align:left;
    height: 100%;
    min-width: 840px;
    background-color: var(--custom_background_color, var(--default_background_color));
	background-image: url('../../images/logo_2020_power_background_gray.svg');
	background-position: bottom left;
    background-repeat: no-repeat;
    background-size: 140px 45px;
    background-attachment: fixed;
    background-position-x: 0px;
}

/* Yleinen palikka, jolla keskitetään sisältö tietylle leveydelle */
div.center{
/*	max-width: 1800px;  Tämä määrittää kaikkien leveyden */
	min-width: 840px;
	margin: 0 0px;
	padding: 0 0px;
}

div.header div.center{
	padding: 0;
}

div.menubar div.center{
	padding: 0 20px;
}

div.index_center {
    width:100%;
    text-align:center;

}

i.spy_image {
    float:right;
	cursor: pointer; 
    margin-right:10px;
    display:none;
    color: #999999;
    border: 1px solid #999999;
    border-radius:4px;
    padding:4px;
}
i.spy_image:hover {
    color: #000000;
    border: 1px solid #000000;
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
}

.writer-buttons{
    width:100%;
    padding: auto;
	margin-top: 20px;
	height: 50px;
}


.float-left{
	float: left;
}

.clear{
	clear: both;
}

div.half{
	float: left;
	width: 48%;
	margin-right: 2%;
	padding-bottom: 15px;
}

.half.right{
	margin-right: 0;
	margin-left: 1.5%;
}

.one-third{
	/*width: 33%;*/
	width: 330px;
	margin-bottom: 15px;
	float: left;
}

.two-thirds{
	/*margin-left: 36%;*/
	margin-left: 370px;
	margin-bottom: 15px;
}

.content .two-thirds div.topic{
	clear: none;
}


/* Yläpalkki ja päävalikko */
.header{
    position: relative;
	width: 100%;
	height: 80px;
	background-color: var(--custom_primary_color, var(--default_primary_color));
	color: var(--custom_primary_font_color, var(--default_primary_font_color));
	color: contrast-color(var(--custom_primary_color, var(--default_primary_color)));

          -webkit-user-select: none;
            -webkit-app-region: drag;
}
.header a,
.header a:hover{
	color: var(--custom_primary_font_color, var(--default_primary_font_color));
	color: contrast-color(var(--custom_primary_color, var(--default_primary_color)));
}

.user-menu{
          -webkit-app-region: no-drag;
	float: right;
	text-align: right;
	margin: 28px 0 0 0;

}

.user-menu #faker {
    display: inline-block;
    padding: 0;
    border: 1px solid #ffffff;
    border-radius: 4px;
    font-size: 14px;
    margin-right: 15px;
    position: relative;
}

.user-menu #faker i {
    font-size: 18px;
    padding: 4px 8px;
}

.user-menu #faker label.free {
    width: auto;
}

.user-menu #faker .options {
    display: block;
    position: absolute;
    top:27px;
    background-color: #f9f9f9;
    width: 350px;
    /*   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);*/
    z-index: 1000;
    margin: 0px;
    padding: 0 10px;
    /*left:-10px;*/
    border: 2px #aaaaaa solid;
    text-align:left;
    border-radius: 5px;
    color: #000;
    right: 0;
    text-align: center;
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.user-menu .plugin{
	margin-right: 50px;
}
.user-menu div.dd_opt {
    position: relative;
    display: inline-block;
}

.user-menu div.dd_list {
    position: relative;
    display: inline-block;
}

.user-menu div.dd_list p{
    display: inline-block;
    padding:4px; 
    padding-left:8px; 
    padding-right:8px; 
    border: 1px solid #ffffff;
    border-radius: 4px;
}
.user-menu div.dd_list a{
    color: #000000;
    margin: 5px 0;
    width: 100%;
    display: inline-block;
}

.user-menu div.dd_content {
    display: none;
    position: absolute;
    top:31px;
    background-color: #f9f9f9;
    min-width: 250px;
 /*   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);*/
    z-index: 1000;
    margin: 0px;
    padding: 0 10px;
    /*left:-10px;*/
    border: 2px #aaaaaa solid;
    text-align:left;
    border-radius: 5px;
    -webkit-app-region: none;
}

.user-menu div.dd_list:hover div.dd_content {
    display: block;
}
.user-menu div.dd_list:hover p{
}

.user-menu div.dd_list a:hover{
    color: #000000;
}

/* notification history: click-toggled, not hover, so scrolling the list doesn't close it */
.user-menu div.dd_list#notification_history_list:hover div.dd_content {
    display: none;
}

.user-menu div.dd_list#notification_history_list.open div.dd_content {
    display: block;
}

.user-menu div.dd_list#notification_history_list {
    margin-right: 30px;
}

#notification_history_content {
    width: 300px;
    right: 0;
    left: auto;
}

#notification_history_items {
    max-height: 350px;
    overflow-y: auto;
}

.notification_history_item {
    display: block;
    padding: 4px 0;
    border-bottom: 1px solid #eee;
}

.notification_history_item.error_notification {
    color: #a00;
}

.notification_history_item.success_notification {
    color: #070;
}

.notification_history_item .time {
    color: #999;
    font-size: 0.85em;
    margin-right: 6px;
}

.notification_history_item .type {
    color: #555;
    font-size: 0.85em;
    font-weight: bold;
    margin-right: 6px;
}

.notification_history_empty {
    display: block;
    padding: 4px 0;
    color: #999;
}



.user-menu-plugins {
    float:right;
    text-align:right; 
    margin: 30px 24px 0 0;
}

.user-menu .switchx{
        background-color: #AAAAAA;
        padding: 10px;
	margin-right: 50px;
}
.user-menu .switchx:hover {
        background-color: #666666;
}

.user-menu .username{
	margin-right: 50px;
    font-size:14px;

}

.user-menu .help{
	margin-right: 30px;
}

.user-menu .help a{
	padding: 0 0 0 0px;
        font-size:14px;
}

.user-menu img {
    height:16px;
}
.user-menu .mail{
	margin-right: 30px;
}
.user-menu .settings{
	margin-right: 30px;
}

.user-menu .settings a{
	padding: 0 0 0 0px;
        font-size:14px;
}

.user-menu .logout {
    padding-right: 20px;
}

.user-menu .logout a{
	padding: 0 0 0 0px;
        font-size:14px;
}

/* Header-area icons driven by custom theme (primary_icon_color). */
.user-menu .mail i,
.user-menu .help i,
.user-menu .logout i,
.user-menu .settings i,
.user-menu .username .dd_list > p > i,
.user-menu .username .dd_opt > p > i,
i.el_min,
i.el_max,
i.el_exit {
    color: var(--custom_primary_icon_color, var(--default_primary_icon_color));
    color: contrast-color(var(--custom_primary_color, var(--default_primary_color)));
}

.el_exit {
    width:26px;
    height:26px;
    text-align:center;
    padding:8px;
    padding-left:10px;
    padding-right:10px;
    font-size:16px;
    display:none;
    transition: all 0.3s ease;
}

.el_exit:hover {
    background-color:#FF0000;
}
.el_exit:active {
    transition: all 0.0s ease;
    background: #D80000;
}
.el_min {
    width:26px;
    height:26px;
    text-align:center;
    padding:8px;
    padding-left:8px;
    padding-right:8px;
    font-size:16px;
    display:none;
    transition: all 0.3s ease;
}


.el_min:hover {
    background-color:#FFFFFF55;
}
.el_min:active {
    transition: all 0.0s ease;
    background-color:#FFFFFF40;
}

.el_max {
    width:26px;
    height:26px;
    text-align:center;
    padding:8px;
    padding-left:8px;
    padding-right:8px;
    font-size:16px;
    display:none;
    transition: all 0.3s ease;
}


.el_max:hover {
    background-color:#FFFFFF55;
}
.el_max:active {
    transition: all 0.0s ease;
    background-color:#FFFFFF40;
}



i.el_player_buttons-option {
    border: 1px solid #aaaaaa; 
    border-radius: 4px;
    width:12px;
    height:12px;
    text-align:center;
    vertical-align:middle;
    padding:4px;
    margin-left:5px;
    margin-right:5px;
    font-size:12px;
    transition: all 0.3s ease;
    background-color:#ffffff;
    color: #000000;
}
i.el_player_buttons-option:hover {
    background-color:#cccccc;
}

i.el_player_buttons-off {
    border: 1px solid #aaaaaa; 
    border-radius: 4px;
    width:26px;
    height:26px;
    text-align:center;
    vertical-align:middle;
    padding:4px;
    padding-left:8px;
    padding-right:8px;
    margin-left:5px;
    margin-right:5px;
    font-size:26px;
    transition: all 0.3s ease;
    background-color:#ffffff;
    color: #000000;
}




i.el_player_buttons-off:hover {
    background-color:#cccccc;
}

i.el_player_buttons-on {
    border: 1px solid #aaaaaa; 
    border-radius: 5px;
    width:26px;
    height:26px;
    text-align:center;
    vertical-align:middle;
    padding:4px;
    padding-left:8px;
    padding-right:8px;
    margin-left:5px;
    margin-right:5px;
    font-size:26px;
    transition: all 0.3s ease;
    color:#ffffff;
    background-color: #666666;
}


i.el_player_buttons-on:hover {
    background-color: #000000;
}

.electronplayer {
    width: 370px;
    border:1px solid #314a75;
    border-radius: 5px;
    background-color: #ffffff;
    padding:20px;
    padding-left:10px;
    padding-right:10px;
}

.loader_excuse {
    position: relative;
    margin-top:10px;

}

.loader_meter {
    height: 10px;  /* Can be anything */
    position: relative;
    margin-top:10px;
    background: #555;
    border-radius: 25px;
    padding: 2px;
    box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
}

.loader_meter > span {
    display: block;
    height: 100%;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    background-color: rgb(101,150,241);
    background-image: linear-gradient(
        center bottom,
        rgb(43,103,194) 37%,
        rgb(84,149,240) 69%
        );
    box-shadow: 
    inset 0 2px 9px  rgba(255,255,255,0.3),
    inset 0 -2px 6px rgba(0,0,0,0.4);
    position: relative;
    overflow: hidden;
}


.loader_meter > span:after {
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background-image: linear-gradient(
        -45deg, 
        rgba(255, 255, 255, .2) 25%, 
        transparent 25%, 
        transparent 50%, 
        rgba(255, 255, 255, .2) 50%, 
        rgba(255, 255, 255, .2) 75%, 
        transparent 75%, 
        transparent
        );
    z-index: 1;
    background-size: 50px 50px;
    animation: move 2s linear infinite;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    overflow: hidden;
}


@keyframes move {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 50px 50px;
    }
}

.meter > span:after, .animate > span > span {
      animation: move 2s linear infinite;
}


.slidecontainer {
    width: 100%;
    margin-top:10px;

}

.slider {
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    width: 100%; /* Full-width */
    height: 15px; /* Specified height */
    border-radius: 5px;
    background: #d3d3d3; /* Grey background */
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
    opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    border-radius: 50%;
    background: #4CAF50; /* Green background */
    cursor: pointer; /* Cursor on hover */
}

div.electron_numbers {
    width: 100%;
    text-align:middle;
}


div.electron_numbers div.electron_pos {
    display:inline-block;
}

div.electron_numbers div.electron_max {
    display:inline-block;
}


div.logo_container{
    display: inline-block;
    height:80px;
    margin-right:20px;
    line-height: 80px;
    vertical-align:middle;
    justify-content: center;
    align-items: center;
}

div.logo_container a{
    height:80px;
    line-height: 80px;
    display: block;
}

div.logo_container .main{
    border: 0;
    display:inline-block;
    margin-left:20px;
    object-fit: contain;
    max-height:70px;
}

div.logo_container .power{
    vertical-align:middle;
    border: 0;
    height:25px;
    margin-top:40px;
}

p.logo_instance {
    position:absolute;
    bottom:5px;
    left:270px;
}

p.broker_down {
    font-size:20px;
    color:red;
    padding-right: 20px;
    display: inline-block;
    position: relative;
    text-align: left;
}

p.broker_down:hover:after {
    content: attr(title);
    font-size: 15px;
    display: block;
    position: absolute;
    left: -125px;
    width: 250px;
    z-index: 1200;
    background: #314a75;
    color: white;
    border: 1px solid #ffffff;
    border-radius: 4px;
    font-family: 'Open Sans', verdana, arial, helvetica;
    margin: 15px auto 0 auto;
    padding: 5px;
    word-break: break-word;
}

p.broker_down.hidden {
    display: none;
}

.menubar{
	float: left;
	position: relative;
	width: 100%;
    background-color: var(--custom_secondary_color, var(--default_secondary_color));
    color: var(--custom_secondary_font_color, var(--default_secondary_font_color));
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
    z-index:4;

}

ul.main-menu{
	float: left;
	margin: 0;
	padding: 0;
	list-style: none;
    height:55px;
    white-space: nowrap;
    overflow: visible;
    
    /*
	border-right: 1px solid #14385d;
	border-left: 1px solid #235c93;
    */
}

.main-menu li{
	display: inline;
	float: left;
    border-bottom: 3px solid var(--custom_secondary_color, var(--default_secondary_color));
}

 .main-menu li a{
 	float: left;
	color: var(--custom_secondary_font_color, var(--default_secondary_font_color));
	color: contrast-color(var(--custom_secondary_color, var(--default_secondary_color)));
	font-size: 16px;
	text-transform: capitalize;
	letter-spacing: 0.5px;
	padding: 16px 12px 12px 12px;
	background-position: 12px center;
	background-repeat: no-repeat;
    height:24px;
    line-height:24px;
     text-decoration: none;


    /*
	text-shadow: 0 -1px 1px #14385d;
	border-right: 1px solid #235c93;
	border-left: 1px solid #14385d;
    */
}

 .main-menu li.selected{
    font-weight: bold;
    background-color: var(--custom_secondary_color, transparent);
    color: var(--custom_secondary_font_color, var(--default_secondary_font_color));
    color: contrast-color(var(--custom_secondary_color, var(--default_secondary_color)));
    border-bottom: 3px solid var(--custom_tetriary_color, var(--custom_primary_color, var(--default_tetriary_color)));

 }
.main-menu li.not-selected{
    font-weight: normal;
    border-bottom:3px solid var(--custom_secondary_color, var(--default_secondary_color));
}

 .main-menu li:hover{
    background-color: var(--custom_secondary_color, transparent);
    color: var(--custom_secondary_font_color, var(--default_secondary_font_color));
    color: contrast-color(var(--custom_secondary_color, var(--default_secondary_color)));
    border-bottom: 3px solid var(--custom_tetriary_color, var(--custom_primary_color, #2a7ac8));

 }

/* Menubar icons driven by custom theme (secondary_icon_color). */
.menubar ul.main-menu li a > i {
    color: var(--custom_secondary_icon_color, var(--default_secondary_icon_color));
    color: contrast-color(var(--custom_secondary_color, var(--default_secondary_color)));
}

.main-menu a img {
    height:16px;
}

.main-menu li.has-submenu {
    position: relative;
}
.main-menu-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 3px);
    left: 0;
    margin: 0;
    padding: 4px 0 0 0;
    list-style: none;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10;
    min-width: 180px;
}
.main-menu li.has-submenu:hover .main-menu-dropdown {
    display: block;
}
.main-menu-more .main-menu-dropdown {
    display: none !important;
}
.main-menu-dropdown li {
    display: block;
    float: none;
    border-bottom: 3px transparent solid;
}
.main-menu-dropdown li a {
    display: block;
    float: none;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: normal;
    color: #333;
    text-decoration: none;
    white-space: nowrap;
    height: auto;
    line-height: normal;
    text-transform: none;
}
.main-menu-dropdown li a:hover {
    background: #f0f4f8;
    color: #2a7ac8;
}
.main-menu-dropdown li.dropdown-group,
.main-menu-dropdown li.dropdown-group:hover {
    border-bottom: none;
}
.main-menu-dropdown .dropdown-group-label {
    display: block;
    padding: 6px 16px 2px;
    font-size: 12px;
    font-weight: bold;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.main-menu-dropdown .dropdown-group ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.main-menu-dropdown .dropdown-group ul li a {
    padding-left: 28px;
    font-size: 13px;
}

.main-menu-more {
    display: inline-block;
    position: absolute;
}
.main-menu-more a{
    display: block;
}
.main-menu-more ul {
    position: absolute;
    display: none;
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.5);
    padding-left:0px;
    margin-left:0px;
    top: 100%;
    right: 0;
    background: #FFFFFF;
    margin-right: 0;
}
.main-menu-more li {
    width: 100%;
}



/* Main content */
div.content {
	position: relative;
	clear: left;
   	padding: 20px 0 10px 0;
    min-height: calc(100% - 30px);
   /* transition: all 0.1s ease;*/
}


.has-left-menu .right-column{
        margin-left:270px;

        background: #ffffff;

        box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.102);

        padding: 20px;

        border-radius: 4px;
        margin-right: 20px;
        padding-top: 20px;
        padding-bottom: 20px;
        overflow:auto;
        z-index: 3;
        position: relative;
}

a{
   	color: #1f76c8;
}

a:hover{
	color: #144676;
}

div.left-column-dictation{
	width: 390px;
	position: relative;
    margin: 27px 30px 0 20px;
    float:left;
}

div.remove-left-padding{
	left: 0px;
    padding-left:0px;

}
div.add-left-padding{
	left: 200px;
    padding-left:20px;

}

div.dictation-columns{
	display: flex;
	flex-wrap: nowrap;
}
.dm_ac_results{
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 3px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.15);
	max-height: 150px;
	overflow-y: auto;
	z-index: 10000;
}
.dm_ac_results ul{
	list-style: none;
	margin: 0;
	padding: 0;
}
.dm_ac_results li{
	padding: 4px 8px;
	cursor: pointer;
	font-size: 12px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.dm_ac_results li.dm_ac_active,
.dm_ac_results li:hover{
	background: #369;
	color: #fff;
}
.dm_ac_text{
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.dm_ac_action{
	padding: 0 4px;
	opacity: 0.5;
	cursor: pointer;
	flex-shrink: 0;
}
.dm_ac_action:hover{
	opacity: 1;
}
.tft_checkbox_label{
	float: none;
	display: inline;
}
div#lomake{
	margin-top: 27px;
}
div.right-column-dictation{
    display: inline-block;
	float: left;
	list-style: none;
	margin: 0 0 0 20px;
	padding: 0;
	flex: 1;
	min-width: 300px;
	overflow: auto;
}
div.right-column-dictation .table_padding{
	width: 100%;
	table-layout: fixed;
}
div.right-column-dictation .table_padding textarea{
	width: 100%;
	box-sizing: border-box;
}
/* Transcript + template-result wrapper sits below the dictation info row and
   spans the full content width so both inner columns can breathe. */
div.right-column-dictation.full-width{
    display: block;
    float: none;
    clear: both;
    width: calc(100% - 40px);
    margin: 0 20px 20px 20px;
    box-sizing: border-box;
}

/* Left column navigation */
.has-left-menu .left-column{
	width: 230px;
	position: absolute;
	left: 0;
    padding-left:20px;
    height: calc(100% - 30px);
}

.has-left-menu.mini .left-column {
    width: 40px;
    padding-right: 20px;
}

.has-left-menu.mini .left-column ~ .right-column {
    margin-left: 80px;
}

.has-left-menu.mini .left-column:hover ~ .right-column,
.has-left-menu.mini .left-column:focus-within ~ .right-column {
    margin-left: 270px;
}

.has-left-menu.mini .left-column:hover,
.has-left-menu.mini .left-column:focus-within {
    width: 230px;
}

.left-menu{
	float: left;
	list-style: none;
	margin: 0 0 10px 0;
	width: 100%;
    padding: 0px;
    overflow-x: hidden;
    z-index: 2;
    position: relative;

    /*
    -webkit-box-shadow: 10px 10px 20px -16px rgba(0,0,0,0.5);
    -moz-box-shadow: 10px 10px 20px -16px rgba(0,0,0,0.5);
    box-shadow: 10px 10px 20px -16px rgba(0,0,0,0.5);

*/
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.102);


    border-radius: 4px;
    background: #ffffff;


}

.left-menu >li{
    padding:2px 7px;
	float: left;
	display: block;
	width: 216px;
    transition: .3s all;
}

.left-menu li.selected{
    background-color: rgba(242,242,242,0.5);
    border-right: 3px solid #3C3C3C;
	width: calc(100% - 17px);
}

.left-menu li i.menu-level1 {
    margin-right:.75em;
    font-size:18px;
    width:1em;
    text-align: center;
}

/*
 * Icon colors driven by custom theme. The matching --custom_* var is set
 * via css.tpl from session style settings; falls back to --default_* tokens.
 * .spy_image keeps its own grey via the existing i.spy_image rule.
 */
.left-menu li i:not(.spy_image),
.left-menu .group_list_label {
    color: var(--custom_background_icon_color, var(--default_background_icon_color));
}

.left-menu li:hover:not(.selected, .sub-title){
    background-color: rgba(242,242,242,0.4);
    font-weight: 600;
}

.left-menu ul.sublevel3 li:hover:not(.selected, .sub-title){
    width: 197px;
    left: -7px;
    padding-left: 30px;
    position: relative;
    padding-right: 3px;
}

.left-menu ul.sublevel4 li:hover:not(.selected, .sub-title){
    width: 172px;
    left: -31px;
    padding-left: 55px;
    position: relative;
    padding-right: 0px;
}

.left-column span.mini-toggle {
    background: #fff;
    display: block;
    width: 1em;
    height: 1em;
    line-height: 1em;
    text-align: center;
    padding: 1em;
    position: absolute;
    right: -30px;
    top: 3em;
    z-index: 1;
    cursor: pointer;
}

.has-left-menu.mini .left-column span.mini-toggle {
    right: -10px
}

.left-column span.mini-toggle i {
    transition: .3s all;
}

.has-left-menu.mini .left-column span.mini-toggle i {
    transform: rotate(180deg);
}

.left-menu span.details{
    font-size:10px;
    font-weight: normal;
    color: #3c3c3c;
}

.left-menu a, .left-menu span.parent{
	font-size: 14px;
	float: left;
	display: block;
	padding: 3px 4px 3px 4px;
	margin: 5px 0 5px 0;
	text-transform: capitalize;
	text-decoration: none;
	width: 216px;
    color: #3C3C3C;
}

.left-menu a img{
    height: 18px;
}

.left-menu span.group_list_header {
    font-size:14px;
    margin-left:4px;
    white-space: nowrap;
    display:inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    width:170px;
    position:absolute;
    z-index: 0;
}

.left-menu span.group_list_subitem {
    font-size:10px;
    font-weight: normal;
    margin-left:28px;
    color: #464646;
    margin-bottom:0;
    float: left;
    line-height: 2;
    width:calc(100% - 28px);
}
.left-menu span.group_list_subitem_date {
    font-size:10px;
    font-weight: bold;
    margin-left:60px;
    color: #464646;
    margin-bottom:4px;
    line-height: 2;
}

ul.tabs span.hilight{
    margin:6px;
    border-radius: 4px;
    font-size:12px;
    line-height:12px;
    padding:0px;
    padding-left:5px;
    padding-right:5px;
    font-weight:bold;
    background: #314a75;
    color:#ffffff;

}

ul.tabs span.hilight-zero{
    margin:6px;
    border-radius: 4px;
    font-size:12px;
    line-height:12px;
    padding:0px;
    padding-left:5px;
    padding-right:5px;
    font-weight:bold;
    background: #999999;
    color:#ffffff;

}

.left-menu span.hilight{
    margin:6px;
    margin-left:0px;
    border-radius: 4px;
    font-size:12px;
    padding:0px;
    padding-left:5px;
    padding-right:5px;
    font-weight:bold;
}

.left-menu span.hilight.red{
    background: #F05163;
    color:#ffffff;
}

.menubar ul.main-menu li span.hilight{
    margin:0;
    border-radius: 4px;
    font-size:12px;
    padding: 0 5px;
    font-weight:bold;
    color:#ffffff;
    background-color:#F05163;
    float: none;
}

.menubar ul.main-menu li span.hilight.warning, span.hilight.warning {
    background-color: orange;
    margin:0;
    border-radius: 4px;
    font-size:12px;
    padding: 0 5px;
    font-weight:bold;
    color:#ffffff;
    float: none;
}

.no-icons a{
	padding: 5px 4px 5px 12px;
	margin: 5px 0;
}

.no-caps a{
	text-transform: none;
}

.left-menu a:hover{
	text-decoration: none;
	color: #164270;
  /*  font-weight:bold;*/
}


ul.sublevel3 li.selected {
    background-color: rgba(242,242,242,0.5);
    border-right: 3px solid #3C3C3C;
    width: 197px;
    left: -7px;
    padding-left: 30px;
    position: relative;
}

ul.sublevel4 li.selected {
    background-color: rgba(242,242,242,0.5);
    border-right: 3px solid #3C3C3C;
    width: 172px;
    left: -31px;
    padding-left: 55px;
    position: relative;
}




.left-menu .selected a,
.left-menu li ul.sublevel3 li.selected a,
.left-menu li ul.sublevel3 li ul.sublevel4 li.selected a{
	font-weight: bold;
	color: #103051;
}

.left-menu li ul.sublevel3 li a,
.left-menu li ul.sublevel3 li ul.sublevel4 li a 
{
    width: 197px;
	font-weight: normal;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    
}

.left-menu .summary a{background: transparent url('../../images/icons/left-menu/home.png') no-repeat left top 8px;}
.left-menu .dictations a{background: transparent url('../../images/icons/left-menu/dictation.png') no-repeat left top 8px;}
.left-menu .transcriptions a{background: transparent url('../../images/icons/left-menu/transcription.png') no-repeat left top 8px;}
.left-menu .workmonitoring a{background: transparent url('../../images/icons/left-menu/gauge.png') no-repeat left top 8px;}
.left-menu .liverollers a{background: transparent url('../../images/icons/left-menu/live.png') no-repeat left top 8px;}
.left-menu .search a{background: transparent url('../../images/icons/left-menu/search.png') no-repeat left top 8px;}
.left-menu .user a{background: transparent url('../../images/icons/left-menu/user.png') no-repeat left top 8px;}
.left-menu .group a{background: transparent url('../../images/icons/left-menu/group.png') no-repeat left top 8px;}
.left-menu .roof_group a{background: transparent url('../../images/icons/left-menu/roof_group.png') no-repeat left top 8px;}
.left-menu .home a{background: transparent url('../../images/icons/left-menu/home.png') no-repeat left top 8px;}
.left-menu .bills a{background: transparent url('../../images/icons/left-menu/briefcase.png') no-repeat left top 8px;}
.left-menu .storer a{background: transparent url('../../images/icons/left-menu/archive.png') no-repeat left top 8px;}
.left-menu .deactive a{background: transparent url('../../images/icons/left-menu/x.png') no-repeat left 8px;}
.left-menu .settings a{background: transparent url('../../images/icons/left-menu/settings.png') no-repeat left top 8px;}
.left-menu .phone a{background: transparent url('../../images/icons/left-menu/phone.png') no-repeat left top 8px;}
.left-menu .archive a{background: transparent url('../../images/icons/left-menu/archive.png') no-repeat left top 8px;}
.left-menu .status a{background: transparent url('../../images/icons/left-menu/eye.png') no-repeat left top 8px;}
.left-menu .line a{background: transparent url('../../images/icons/left-menu/line.png') no-repeat left top 8px;}
.left-menu .bubbles a{background: transparent url('../../images/icons/left-menu/bubbles.png') no-repeat left top 8px;}


.no-icons .selected a{background: transparent url('../../images/icons/left-menu/arrow.png') no-repeat left top 8px;}

.left-column h2,
.left-column h3{
	margin: 0;
    color:#144676;
	font-weight: 400;
	font-size: 19px;
	padding: 0 0 10px 0;
	text-transform: uppercase;
	border-bottom: 1px solid #ddd;
}

span.left-menu-count{
	color: #999;
	padding-left: 5px;
	font-size: 12px;
}


/* Left submenu */

.left-menu li ul{
	list-style: none;
	margin: 0 0 10px 0;
	padding: 0;
	clear: left;
}

.left-menu li ul li{
	margin: 0;
	padding: 0 0 0 24px;
	display: block;
}

.left-menu li ul a{
	font-size: 13px;
	padding: 3px 0;
	display: block;
	float: none;
	text-transform: none;
	background: transparent !important;
}

.left-menu .selected ul a{
	font-weight: normal;
	color: #103051;
}




/* This fills the rest of the space */
.right-column{
        padding-right:20px;
        padding-left:20px;
        min-height: 450px;
        height: 90%;

        background: #ffffff;
        
        /*
        -webkit-box-shadow: 10px 10px 20px -16px rgba(0,0,0,0.5);
        -moz-box-shadow: 10px 10px 20px -16px rgba(0,0,0,0.5);
        box-shadow: 10px 10px 20px -16px rgba(0,0,0,0.5);
        */
        box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.102);

        padding: 20px;

        border-radius: 4px;
        margin-right: 20px;
        margin-left: 20px;
        padding-top: 20px;
        padding-bottom: 20px;
        transition: all 0.1s ease;
        position: relative;
        overflow: auto;
}

.right-column#wide {
    overflow:inherit;
}


/* Pyöristykset */
/*
div.center{
	padding: 0 30px;
}

.right-column{
	background: #fff;
	border-radius: 8px;
	border: 1px solid #e0e0e0;
	margin-top: 10px;
	float: left;
	width: 100%;
}

.left-column{
	background: #fff;
	border-radius: 8px;
	border: 1px solid #e0e0e0;
	padding: 20px 20px 10px 20px;
	margin-top: 10px;
}

.has-left-menu{
	background: transparent;
	min-height: auto; 
}

*/


/* Priorities */

.priority-normal{
	color: #693;
}

.priority-urgent{
  color: #b94a48;
}

.priority-very-urgent{
 	color: #b94a48;
   font-weight: bold;
}

/* Tags */

div.tags{
	float: left;
	width: 100%;
	margin: 10px 0 0 0;
}

.tag{
	float: left;
	color: #fff;
	margin: 0 12px 10px 0;
	font-size: 14px
}

.tag .tag-content{
	float: left;
	white-space: nowrap;
	height: 18px;
	line-height: 18px;
	background: #369;
	padding: 4px 8px;
	padding-right: 5px;
	-webkit-border-top-left-radius: 6px;
	-webkit-border-bottom-left-radius: 6px;
	-moz-border-radius-topleft: 6px;
	-moz-border-radius-bottomleft: 6px;
	border-top-left-radius: 6px;
	border-bottom-left-radius: 6px;
}

.tag .tag-close{
	background: #369 url('../../images/icons/close.png') no-repeat center center;
	float: left;
	width: 12px;
	height: 18px;
	padding: 4px 4px 4px 8px;
	line-height: 16px;
	-webkit-border-top-right-radius: 6px;
	-webkit-border-bottom-right-radius: 6px;
	-moz-border-radius-topright: 6px;
	-moz-border-radius-bottomright: 6px;
	border-top-right-radius: 6px;
	border-bottom-right-radius: 6px;
	cursor: pointer;
}

.tag .tag-close:hover{
	background-color: #da4f49;
}

.tag-transcriber .tag-content, 
.tag-transcriber .tag-close{
	background-color: #333;
}

/* Alert/Notification messages */

.alert {
  padding: 12px 35px 12px 20px;
  font-size: 15px;
  margin-bottom: 20px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  background-color: #fcf8e3;
  border: 1px solid #fbeed5;
  color: #8e703d;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}

.alert a{
	font-weight: 600;
}

.alert h2{
	margin: 10px 0;
}

.alert .close {
  position: relative;
  top: -2px;
  right: -21px;
  line-height: 20px;
}

.alert-success {
  color: #367637;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}

.content .alert-success a{
  color: #367637;
}

.alert-danger,
.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

.alert-danger a,
.alert-error a{
  color: #b94a48 !important;
}

.alert-info, 
.alert-help{
  color: #327495;
  background-color: #d9edf7;
  border-color: #bcdef1;
}

.alert-help{
	background-image: url('../../images/alerts/question-mark-blue.png');
	background-position: 20px center;
	background-position: 98% 25px;
	background-repeat: no-repeat;

}
.alert ul{
	padding: 0 30px 0 10px;
	list-style: none;
}

.alert ul li{
	line-height: 1.2;
	margin: 0 0 0.5em 0;
	background: url('../../images/alerts/dot.gif') left 4px no-repeat;
	padding: 0 0 0 16px;
}


textarea{
	border:1px solid black;	
}

a.valinta {
	text-align: right;
	color: #000; 
	text-decoration: underline; 
	
}

a.valinta:hover {
	text-align: right;
	color: #555; 
	text-decoration: underline; 
	
}

div.editable{
    display:inline-block;
    padding:0px;
    margin:0px;
    margin-right:20px;
    margin-bottom:1px;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
    height:18px;
    border: 0px solid #999;

}

div.editable:hover {
    border-bottom: 1px solid #999;
    margin: 0px;
    margin-right:20px;
    background: url('../../images/pencil.png') right 4px no-repeat;
}

span.column_order_span {
    padding:2px;
    min-width: 130px;
    display:inline-block;
    border: 1px solid #999;
    border-radius: 3px;
    background-color: #FFFFFF;
}
span.column_order_span:hover {
    cursor: pointer;
}


input[type=text].editable{
    margin:0px;
    display:inline-block;
    padding:0px;
    border-bottom: 1px solid #000;
    margin-right:-4000px;
    width: auto;
    height:18px;
    white-space: nowrap;
    text-overflow: ellipsis;
    outline: none;
}


table#list_target input[type=text].editable {
    width: 100%;
    margin-right: 20px;
}


div.drop_list_div{
    padding: 0px;
    margin:0px;
}
div.drop_list_div ul{
    margin-left: 0px;
    padding-left: 7px;
}

div.drop_list_div ul li{
    list-style-type: none;
    list-style-position: inside;
    list-style-image: url("../../img/bullet.png");
    padding:1px;

}

div.drop_list_div ul li:hover {
    border: solid 1px #999;
    padding:0px;
}

span.up{
	cursor: pointer; 
	cursor: hand;
	display: inline;
    overflow:hidden;
	width: 16px;
	height: 16px;
	border: 0px;
	padding: 0px;
	margin: 0px;
	margin-left:3px;
	color: #ffffff;
	background:url(../../images/icons/generic/black/chevrons-up.svg) no-repeat;
	background-position: center;
}

span.down{
	cursor: pointer; 
    overflow:hidden;
	cursor: hand;
	display: inline;
	width: 16px;
	height: 16px;
	border: 0px;
	padding: 0px;
	margin: 0px;
	margin-left:3px;
	color: #ffffff;
	background:url(../../images/icons/generic/black/chevrons-down.svg) no-repeat;
	background-position: center;
}

span.wait{
	cursor: pointer; 
	cursor: hand;
	display:inline-block;
    overflow:hidden;
	width: 16px;
	height: 16px;
	border: 0px;
	padding: 0px;
	margin: 0px;
	margin-left:3px;
	color: #ffffff;
	background:url(../../img/wait.gif) no-repeat;
}

div.close_delete{
	cursor: pointer; 
	cursor: hand;
	display:inline;
    overflow:hidden;
    line-height:20px;
	width: 16px;
	height: 20px;
	border: 0px;
	padding: 0px;
	margin: 0px;
	margin-left:4px; 
	color: #ffffff;
    background-repeat:no-repeat;
	background-image: url(../../img/close2.gif);
    background-position: 0px -1px; 
}

div.close_delete:hover {
	background-image:url(../../img/close.gif);
}



div.org_none{
	clear:none;
	padding:0px;
	margin:0px;
	padding-right:20px;
	border:0px;
	
	min-height:16px;
	background:url(../../img/none5.gif) no-repeat;
	background-position: center right;
}
div.org_none:hover{
	text-decoration: underline;
}


div.org_desc{
	padding:0px;
	margin:0px;
	padding-right:20px;
	border:0px;
	text-decoration: underline;
	height:16px;
	background: url(../../img/desc5.gif) no-repeat;
	background-position: center right;
}

div.org_asc{
	clear:none;
	padding:0px;
	margin:0px;
	padding-right:20px;
	border:0px;
	height:16px;
	text-decoration: underline;	
	background:url(../../img/asc5.gif) no-repeat;
	background-position: center right;
}



tr.odd td input.down, tr.odd td input.up{
        text-align: left;
        color:#FFE9BD;
}

td.wrap {
    overflow: hidden;
    max-width: 180px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

div.droppable {
    background:url(../../img/asc5.gif) no-repeat right center;
    padding-right:20px;
}

select {
	border:1px outset black;
 	min-width: 100px;
    padding-right:20px;
        height: 28px;
}

select.chosen {
/*	width: 400px; */
}


fieldset {
	background: #fff;
	padding: 0px 15px 15px 15px;
	margin-bottom: 25px;
}

legend {
	font-size: 14pt;
	color: #ecb700;
	margin-bottom: 15px;     
}

label {
	display: block;
	float: left;
	width: 120px;
	padding-right: 2px;
}

label.free {
    float: inherit;
    width: auto;
}

input[type=text], input[type=password] {
	border: 1px #999 solid;
	padding: 2px;
	width: 200px;
    outline: none;
}

input[type=color] {
    vertical-align: middle;
}

input#email,input#password {
	width: 200px;
}

input#start_date, input#stop_date {
	width: 80px;
	padding: 4px;
}

input[type=text]#search{
	font-size: 15px;
	border-radius: 3px;
	padding: 4px;
	float: left;
	margin-right: 5px;
}

textarea {
	width: 640px;
	height: 280px;
    outline: none;
}

input#email,input#password,
textarea{
	border: 1px #555 solid;
	padding: 2px;
	border-radius: 2px;
}

div.kirjoitus{
	visibility:hidden;
	position: absolute;
	top: 0px;
	left: 0px;
}

div.valikko {
	width: 120px;
	margin: 0px;
        height:100%;
	border-right: solid 1px #333;
        padding: 0px;
        background-color: #999;
}

div.valikko div.option{
	margin-left: 10px;
	margin-right: 10px;
	min-width: 30px;
	display: inline;
	color: #000; 
	text-decoration: none; 
	cursor: pointer; 
	cursor: hand;
	padding: 4px;
	border-top: 1px solid #000;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	margin: 2px;	
}

div.valikko div.option:hover {
	margin-left: 10px;
	margin-right: 10px;
	color: #555; 
	text-decoration: underline; 
	cursor: pointer; 
	cursor: hand;
	padding: 4px;
	border-top: 1px solid #000;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	margin: 2px;	
}


div.public_content {
        padding:0px;
        text-align:center;
 	width: 1000px;
 	height: 400px;
        overflow:auto;
}

td.form_left_column{
    text-align:right;
    width:200px;
    padding-right:20px;
    border-right: 1px solid #ddd;    
}

td.form_right_column{
    text-align:left;
    width:400px;
    padding-left:20px;
    margin-left:20px;
}

.list{
	float: left;
	width: 100%;
}


div.content div.list {
   text-align: none;
   text-align: left;
   margin-bottom: 5px;
   padding-top: 0px; 
}

div.content div.text {
   text-align: left;
   width: 100%;
   padding-top: 0px; 
   margin-bottom:0px;
}

div.public_content div.list {
   text-align: middle;
   /*width: 600px;*/
   margin: 0px auto;
   padding-top: 5px; 
}

div.public_content div.text {
   text-align: left;
   width: 700px;
   padding-top: 40px; 
   margin:0 auto;
}
div.public_content div.text_narrow {
   width: 400px;
   padding-top: 40px; 
   margin:0 auto;
}

div.topic {
	clear: left;
	text-align: left;
 	height:38px;
	color:#666;
    position:relative;
	border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
    overflow:hidden;
}

div.topic b{
	display: inline;
	float: left;
    color:#144676;
    margin-left:0px;
    margin-right: 20px;
    font-size: 24px;
    font-weight: 400;
    text-transform: uppercase;
}

.topic b a{
    text-decoration: none;
}

.topic b a:hover{
	text-decoration: underline;
}

.topic a.admin{
    text-decoration: none;
    font-size: 24px;
    margin-right:10px;
}

.topic a.admin:hover{
	text-decoration: underline;
}

div.content div.sub-topic{
	clear: left;
	padding-top: 20px;
}

div.content div.sub-topic .action_div{
	padding: 0;
}

div.content div.sub-topic .action_div input{
	height: 24px;
	border-radius: 3px;
	font-size: 12px;
}

div.content div.sub-topic .action_div input.button{
	padding: 0 6px;
}

div.content div.sub-topic b{
	font-size: 20px;
}

div.content div.topic .path{
    display: inline;
    margin:0px;
    margin-left:10px;
    color:#000;
    font-weight:bold;
    font-size: 12pt;
}

div.content div.topic .path a{
    color:#EE8B2D;
    font-weight:normal;
    text-decoration:none;
        padding-bottom: 4px;
}

div.content div.topic .path a:hover {
    color:#888;
    border-bottom: 3px solid #ee8b2d;
}

div.content div.topic a.not_selected:hover {
	color:#666; 
	border-bottom: 3px solid #ee8b2d;

}

div.content div.topic a.not_selected{
	color: #999;
	padding-left: 5px;
	padding-right: 5px;
	font-size: 10pt;
	text-decoration: none;
        padding-bottom: 2px;
        position:relative;
        top: 8px;
}

div.content div.topic a.selected{
	
	border-bottom: 3px solid #ee8b2d;
	padding-left: 5px;
	padding-right: 5px;
	text-decoration: none;
	font-size: 10pt;
	padding-bottom:2px;
	color: #000;
    position:relative;
    top: 8px;
}


h2.subheading{
	font-size: 18px;
	font-weight: 700;
	margin: 10px 0;
	text-transform: uppercase;
	color: #144676;
}

h2.float-left{
	margin: 0;
}

table.reg {
	width: 600px;
}

a.forgot
{
	font-size: 12px;
	color: #999; 
	text-decoration: underline; 
}
a.forgot:visited
{
	color: #999; 
	text-decoration: underline; 
}
a.forgot:hover
{
	color: #333; 
	text-decoration: underline; 
}

a.reg_link
{
	font-size: 14px;
	color: #000; 
	text-decoration: underline; 
}

a.reg_link:hover
{
	color: #333; 
	text-decoration: underline; 

}


div.loc_link {
    text-align: center;
    clear:both;
    width:100%;
    background: #fff;
    border: solid 0px #aaa; 
    color: #333;
    bottom: 50px;
    margin-bottom: 0px;
    position: absolute;
}

div.loc_link img
{
  border-style: none;
	margin-left: 20px;
	margin-right:20px;

}


div.loc_link img:hover
{
}


div.foot_link
{
    background-color: #343434;
    height: 30px;
    color: gray;
    width: 100%;
}

div.foot_link div {
    margin: 0 auto 0 auto;
    text-align: center;
    width: 790px;
}


div.foot_float
{
    float:left;
    clear:both;
}
div.foot_abso
{
	bottom:0px;
	position:absolute;
    /* z-index:99;*/
}

div.foot_fixed{
	bottom:0px;
	position:fixed;
}

div.foot_link a:link
{
	margin-left: 20px;
	margin-right:20px;
	color: #000; 
	text-decoration: underline; 
}

div.foot_link a:visited
{
	margin-left: 20px;
	margin-right:20px;
	color: #000; 
	text-decoration: underline; 
}

div.foot_link a:hover
{
	margin-left: 20px;
	margin-right:20px;
	color: #555; 
	text-decoration: underline; 
}


div.login_box {
  margin-left: auto ;
  margin-right: auto ;
  width: 359px;
}

div.login_body {
  padding-top: 20px;
  background:#ccc;
  height: 125px;
}
div.login_image {
  margin-bottom: 4px;
}


table.login_table{
margin-left:10px;
margin-right:10px;
  background:#ccc;
  width:335px;
}


table.login_table td{
  font-weight:bold;
      background:#ccc;
}
.login_header {
  height: 30px;
 }

div.box_set {
    width: 400px;
	margin-bottom: 5px;
}

div.box_actions {
	width: 200px;
}


table.characters{
	width: 100%;
}

.characters td.when{
	width: 50%;
}

.characters td.count{
	font-size: 20px;
}


#target_div{
	padding: 0px 0 0 0; /* Firefox fix */
}

table#list_target{
	clear: left;
}

table.queue {
	width: 100%;
    margin-top:20px;
    clear:both;
 /*   box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.1);
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1); */
}

table.dataTable{
	margin-bottom: 60px; /* clearly show end of page */
}

#table_wrap_div {
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
    /* min-height:200px;*/
    overflow-x: auto;
}

table.form{
	width: 700px;
	margin: 15px 0 0 0;
    box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.1);
}

table.form tr.odd td,
table.form tr.even td{
	border-left: 0;
	border-right: 0;
}

/* Small form without borders, used for forms with less than 4 fields */
table.mini-form{
	margin: 0 0 7px 0;
	width: 100%;
}
table.mini-form td{
	padding: 7px 0;
	border-bottom: 1px solid #dcdcdc;
	font-size: 13px;
}

table.mini-form.wide input{
	width: 100%;
	padding: 3px;
	border: 1px solid #ccc;
	border-radius: 2px;
	font-size: 13px;
}

table.mini-form td:first-child{
	font-weight: bold;
	padding-right: 15px;
}

table.search_form{
	margin: 0 0 20px 0;
}

table.search_form td{
	padding: 8px;
	border-bottom: 1px solid #e9e9e9;
	vertical-align: top;
}

table.search_form td:first-child{
	font-weight: bold;
	font-size: 14px;
}

table.search_form .action_div{
	padding: 0;
}

ul.checkbox_list{
	list-style: none;
	margin: 0; padding: 0;
}

p.shortcuts a{
	font-size: 12px;
	margin-right: 5px;
}


/* Place export links */
.table_header{
	position: relative;
}

.convert_link {
    padding-right:10px;
}

#list_target_wrapper{
	float: left;
	width: 100%;
	padding: 2px 0;
}


/* Small form for adding grous etc*/ 

.one_line_form{
	float: left;
	margin: 10px 0 10px 0;
	clear: both;
	border-radius: 3px;
	background: #fff;
	/* border: 1px solid #eee;*/
    width: calc(100% - 8px);

	padding: 4px;
/*	line-height: 28px;*/
}

.one_line_form.no-borders{
	border: 0;
	padding: 0;
	background: transparent;
}
.one_line_form b{
	font-size: 16px;
	float: left;
	margin: 4px 10px 0 0;
}
.one_line_form input,
.one_line_form select {
	padding: 2px;
	border-radius: 2px;
	font-size: 12px;
	margin-right: 6px;
    min-width: 120px;
	border: 1px solid #aaa;
	-webkit-appearance: none; /* Remove native styles for Safari/Chrome */
}

.one_line_form select{
	width: auto;
}

.one_line_form input.button[type="submit"]{
	margin-right: 0;
}

.one_line_form select{
    background: url('../../images/icons/left-menu/arrow_down.png') no-repeat right center;
}

.one_line_form input::-webkit-input-placeholder { /* WebKit browsers */
	font-style: italic;
    color: #777;
}
.one_line_form input::-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    font-style: italic;
    color: #777;
}
.one_line_form input::-moz-placeholder { /* Mozilla Firefox 19+ */
   	font-style: italic;
    color: #777;
}
.one_line_form input::-ms-input-placeholder { /* Internet Explorer 10+ */
    font-style: italic;
    color: #777;
}


/* Authors */

.jnlp_button{
        padding: 10px auto;
        width:100%;
}



span.sub_menu_item a {
    display:block;
	font-size: 8pt;
	text-decoration: none;
	color: #333;
    padding-bottom:5px;
    padding-top:5px;
    padding-left:25px;
}

span.sub_menu_item a:hover {
	color: #ddd;
        background: #7d7e7d; /* Old browsers */
        background: -moz-linear-gradient(top,  #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
        background: linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
}
span.sub_menu_item_selected a {
        display:block;
	font-weight: bold;
	font-size: 8pt;
	text-decoration: none;
	color: #ddd;
        padding-bottom:5px;
        padding-top:5px;
        padding-left:25px;
        background: #7d7e7d; /* Old browsers */
        background: -moz-linear-gradient(top,  #7d7e7d 0%, #515151 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#515151)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  #7d7e7d 0%,#515151 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  #7d7e7d 0%,#515151 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  #7d7e7d 0%,#515151 100%); /* IE10+ */
        background: linear-gradient(top,  #7d7e7d 0%,#515151 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#515151',GradientType=0 ); /* IE6-9 */
}

span.sub_menu_item_selected a:hover {
	color: #ddd;
        background: #7d7e7d; /* Old browsers */
        background: -moz-linear-gradient(top,  #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
        background: linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
}

.element_hidden{
	display:none;
}

.row_visible{
	display:table-row;
}

.element_visible{
	display:inline-block;
}

form{
	margin: 0;
	padding: 0;
}

.half form, 
.one-third form{
	display: block; 
}

span.search_count_text {
	font-size: 8pt;
        padding:0px;
        height:18px;
        padding-top:3px;
        padding-right:2px;
        color: #999;
        display:inline-block;
        position: relative;
        left:0px;
        width:26px;
        overflow:hidden;

}

div.take_all_link{
    float:right;
    text-decoration: underline;
    padding-right:4px;
    padding-left:4px;
		cursor: pointer;

        color: #999;
    
}

div.take_all_link:hover {
        color: #555;

}

div.content a.small_link {
	font-size: 6pt;
    color: #ddd;
}

div.content a.small_link:hover {
	font-size: 6pt;
    color: #555;
}
.small_text {
	font-size: 6pt;

        color: #ddd;
}

.small_text:hover {
	font-size: 6pt;
        color: #555;
}
.low_focus {
        color: #ddd;
}

.low_focus:hover {
    color: #555;
}

tr.assosiation_row:hover {
    background: #fcf8e3;
}

tr.assosiation_header td{
    color:#333;
    background-color:#ddd;
    border: 1px solid #bbb;
    font-weight: bold;
    padding: 5px;
}
tr.assosiation_row td{
    border: 1px solid #bbb;
    padding: 5px;
}

tr.assosiation_row td.assosiation_focus{
    background: #fcf8e3;
}
.rule{
	width: 100%;
}

.rule .inactive{
	color: #aaa;
}

a.show_link, 
a.hide_link{
	display: block;
	font-size: 16px;
	border-top: 1px solid #ccc;
	width: 100%;
	padding: 15px 0 0 0;
}

div.right_div{
    float:right;
    margin-right:20px;

}

div.action_div{
    padding: 6px;
   	font-size: 11px;
}
div.action_div a{
    margin-left:8px;    
}

div.action_div input.autocomplete_field {
    border: 1px solid #cccccc;    
    border-bottom: 1px solid #999;    
    height:22px;
    width:150px;
}

ul.ui-autocomplete {
    z-index:1000000;
}


div.action_div input.autocomplete_field:hover {
    border: 1px solid #333;    
}

div.low_focus_area{
    color: #999;
    width: 100%;
    text-align:center;    
}
div.table_header {
    /*width:960px;*/
    display:block;
    clear: left;
}

div.path_info{
    font-size:16px;
    font-style:normal;
    font-weight:bold;
    line-height:34px;
    color:#BBBBBB;
    display:inline-block;
    margin-right:10px;
}

div.path_info_leaf{
    color:#3c3c3c;
    font-size:24px;
    font-style:normal;
    font-weight:bold;
    line-height:34px;
    display:inline-block;
}
div.path_separator{
    display:block;
    margin-bottom:20px;
}

div#search_box_div{
    text-align: right;
    margin-bottom: 10px;
    display: inline-block;
        width: 100%;
}

.dataTables_info{
	float: left;
	padding: 0px 0;
}

div#search_box_div label {
	/* needed to override styles set for label */
	float: none;
	width: auto;
	padding: 0;
	text-align: none;
}

div#search_box_div label input{
	font-size: 12px;
    width: 150px;
    background: #fff url('../../images/icons/search-small.png') 4px center no-repeat;
	padding: 5px 5px 5px 20px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border: 1px solid #ddd;
}


input.search_button_hidden{
	border:1px solid #FFFFFF;	
        width:18px;
        height:18px;
        margin:1px;
        float:left;
        text-align: center;
        color: #FFFFFF;
        background-color: #fff;

} 

input.search_button{
	border:1px solid #ddd;	
        width:18px;
        height:18px;
        margin:1px;
        float:left;
        text-align: center;
        background: url(../../img/close.jpg) ;
        background-repeat:no-repeat;
        background-position:right top;
} 

input.search_button:hover {
	border:1px solid #333;
        background-color: #EFEFEF;
        background: url(../../img/close2.jpg) ;
        background-repeat:no-repeat;
        background-position:right top;
} 
html>body #footer_box {
padding-top: 4px;
}

span.search_help {
  margin-left: 3px;
  color: black;
}


span.frontbox {
    background: #343434;
    width: 360px;
    margin-top: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    display:block;
    text-decoration: none;
    color: white;
    font-weight: bold;
    padding-left: 7px;
    cursor:pointer;
}

a.frontlink
{
text-decoration: none;
}

.leightbox {
	color: #333;
	display: none;
	position: absolute;
	top: 100px;
	left: 31%;
	width: 435px;
	height: auto;
	padding: 20px 20px 20px 20px;
	border: 6px solid #ffffff;
	background-color: #ffb94a;
	text-align: left;
	z-index:1001;
	overflow: auto;	
	line-height: 1.3em;
	font-size: 0.8em;
}

div.yhteystiedot {
padding-left: 3px;
}

div.pagenavigation {
display: block;
clear: both;
width:1000px;
margin-top: 15px;
margin-bottom: 15px;
padding-bottom: 15px;
}

span.pagelink {
margin-left: 15px;
margin-top: 5px;
margin-right: 15px;
float:left;
width:20px;
text-align:center;
}

span.pagelink p{
    margin: 0px;

}

span.otherpage:hover {
text-decoration:underline;
cursor:pointer;
font-weight: bold;
}

span.selectedpage p{
color: #222222;
background-color: #EEEEEE;
font-weight: bold;
}


div.writer_java_player_div {
    /*position: absolute;*/
    position: fixed;
    left:0px;
    bottom: 0px;
    width: 140px;
    height:135px;
    background-color: #FEFEFE;
    border: solid 0px #333;
    z-index: 80;
    padding:0px;
    padding-top:0px;
    overflow:hidden;
}







div.billing_modifier_section {
position: absolute;
right: 3px;
top:143px;
width: 100px;
background-color: #FEFEFE;
border: solid 1px #333;
z-index: 99;
padding:10px;
padding-top:0px;
}

div.billing_modifier_section div.billing_modifier_hider {
    background-color:#666666;
    height:14px;
    color: #eeeeee;
    text-align:center;
    display:block;
    font-size: 8pt;
}

div.billing_modifier_section div.billing_modifier_box {
height: 30px;
width: 30px;
display:block; 
}

div.billing_modifier_section div.billing_modifier_body {
overflow:auto;
height: 300px;
display:none; 

}

div.comment_section {
position: absolute;
right: 3px;
top:43px;
width: 100px;
background-color: #FEFEFE;
border: solid 1px #333;
z-index: 99;
padding:10px;
padding-top:0px;
}

div.comment_section div.comment_hider {
    background-color:#666666;
    height:14px;
    color: #eeeeee;
    text-align:center;
    display:block;
    font-size: 8pt;
    
}

div.comment_box {
overflow:auto;
max-height: 400px;
border: solid 1px rgba(0,0,0,0.1);

}

div.comment_section div.comment_box {
overflow:auto;
max-height: 500px;
display:none; 

}


.fake_link {
    text-decoration:underline;
    color: #000;
}

.fake_link:hover {
	cursor: pointer; 
	cursor: hand;
        color: #666666;
}



.hidden {
	display:none;
}

/* Login, 2013 */
.loginbox{
	width: 800px;
	margin: 0 auto 40px auto;
	background: #fff;
	border-radius: 4px;
	margin-top: 20px;
	padding: 30px;

    -webkit-box-shadow: 10px 10px 20px -16px rgba(0,0,0,0.5);
    -moz-box-shadow: 10px 10px 20px -16px rgba(0,0,0,0.5);
    box-shadow: 10px 10px 20px -16px rgba(0,0,0,0.5);

}

.loginbox .logintopic{
    border: 0px solid #ffffff;
    margin: 20px auto;
    /*padding-left:50px;*/
	text-align: center;
    width: 100%;
    font-size: 24px;
    font-weight: 400;
}

.loginbox .logintopic b{
    float:none;
    font-weight: bold;
}

.loginbox p{
	color: #000000;
}

#sso_error {
    margin: 0 auto 40px auto;
    width: 840px;
    padding: 10px;
    background: red;
    color: white;
    border-radius: 10px;
    box-shadow: 10px 10px 20px -16px rgba(0,0,0,0.5);
}

#sso_error h4 {
    font-weight: bold;
    font-size: 1.5em;
}

#sso_error span {
    font-size: 1.1em;
}

#loginform{
    margin: 20px auto;
    width:480px;
	background: #fff;
    padding: 0px 20px;

}

#loginform p{
    margin: 0px auto;
}

#loginform p.buttons{
	text-align: left;
    outline: none; /* Remove outline */

    margin: auto;
	margin-top: 26px;
    padding-left:200px;
	padding-top: 3px;
}

#loginform input{
	padding: 3px;
	border: 0px solid #ddd;
	border-bottom: 1px solid #16426D;
	font-size: 16px;
    width: 300px;
    transition: all 0.3s ease;
}

#loginform input:focus{
    border-bottom: 1px solid #5fa8d3;
}

.ui-focus {
     -moz-box-shadow: none !important;
      -webkit-box-shadow: none !important;
       box-shadow: none !important;
}



#loginform label{
	font-size: 16px;
    padding: 3px;
    display: block;
    float: left;
    width: 160px;
    font-weight:600;
}

ul.actions{
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: left;
}
ul.actions li{
	padding: 3px 0;
}
ul.actions li a{
    color: #0a0a0a;
}
ul.actions li a:hover {
    color: #0a0a0a;
}


/* Buttons  */
div.action{
	padding: 0 0 20px 0;
}

button[disabled] {
    cursor: not-allowed;
}

.button{text-decoration: none !important;
    outline: none; /* Remove outline */
}
/*
.button-warning, 
.button-success{
	color: #ffffff !important;
}*/ 

.button_flat,
input[type="submit"].button_flat,
input[type="button"].button_flat {
  display: inline-block;
  padding: 4px 10px 4px 10px;
  margin: 0px;
  margin-right: 8px;
  margin-bottom: 1px;
  margin-top: 1px;
  font-size: 13px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #b1b1b1;
  border-radius: 4px;
  color: #4a5574;
  font-weight:bold;
  zoom: 1;
}

.button_flat:focus-visible {
    outline: 0px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.button_flat:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.button_flat:hover,
input[type="submit"].button_flat:hover, 
input[type="button"].button_flat:hover {
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
    text-decoration:none;
}

.paletint,
input[type="submit"].paletint,
input[type="button"].paletint {
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #4a5574;
    background-color: #fff;
}
.paletint_hover,
input[type="submit"].paletint:hover,
input[type="button"].paletint:hover {
    border: 1px solid #b1b1b1;
    color: #4a5574;
    background-color: #fff;
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
    text-decoration:none;
}


.bluetint,
input[type="submit"].bluetint,
input[type="button"].bluetint {
    background-color: #f3f2f3;
}

.redtint,
input[type="submit"].redtint,
input[type="button"].redtint {
    color: #ffffff;
    background-color: #e62c2c;
}
.redtint:hover,
input[type="submit"].redtint:hover,
input[type="button"].redtint:hover,
.redtint:focus-visible,
input[type="submit"].redtint:focus-visible,
input[type="button"].redtint:focus-visible {
    color: #ffffff;
    background-color: #e62c2c;
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
    text-decoration:none;
}

.greentint,
input[type="submit"].greentint,
input[type="button"].greentint {
    color: #ffffff;
    background-color:    #00A99D;
}
.greentint:hover,
input[type="submit"].greentint:hover,
input[type="button"].greentint:hover,
.greentint:focus-visible,
input[type="submit"].greentint:focus-visible,
input[type="button"].greentint:focus-visible {
    color: #ffffff;
    background-color:    #00A99D;
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
    text-decoration:none;
}

.disabled,
input[type="submit"].disabled,
input[type="button"].disabled {
    background-color: #f3f2f3;
    color: #aaaaaa;
}

.button,
input[type="submit"], 
input[type="button"] {
  display: inline-block;
  padding: 4px 10px 4px 10px;
  margin-right: 5px;
  margin-bottom: 1px;
  margin-top: 1px;
  font-size: 13px;
  color: #333333;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-color: #fff;
  background-repeat: repeat-x;
  border: 1px solid #b1b1b1;
  border-radius: 4px;
  color: #4a5574;
  line-height: 20px;
  font-weight:bold;
  zoom: 1;
}

/* :focus-visible (not :focus): keyboard focus keeps the indicator, but a mouse click
   no longer leaves the button stuck in the dark hover style after it's released. */
.button:hover,
.button:focus-visible-visible,
.button:active,
.button.active,
.button.disabled,
.button[disabled],
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="submit"]:focus-visible-visible,
input[type="button"]:focus-visible-visible,
input[type="submit"]:active,
input[type="button"]:active {
  color: #333333;
  background-color: #fcfcfc;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
}

.button:active,
.button.active {
  background-color: #cccccc ;
}

.button:first-child {
  *margin-left: 0;
}

.button:hover,
.button:focus-visible-visible {
  color: #333333;
  text-decoration: none;
  background-position: 0 -15px;
  -webkit-transition: background-position 0.1s linear;
     -moz-transition: background-position 0.1s linear;
       -o-transition: background-position 0.1s linear;
          transition: background-position 0.1s linear;
}

.button.active,
.button:active {
  background-image: none;
  outline: 0;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.button.disabled,
.button[disabled] {
  cursor: default;
  background-image: none;
  opacity: 0.65;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
     -moz-box-shadow: none;
          box-shadow: none;
}


.button-primary.active,
.button-warning.active,
.button-danger.active,
.button-success.active,
.button-info.active,
.button-inverse.active {
    background-color: #ffbcbc;
}


.button-warning,
input[type="submit"].button-warning, 
input[type="button"].button-warning 
{
    background-color: #ffbcbc;
}

.button-warning:hover,
input[type="submit"].button-warning:hover, 
input[type="button"].button-warning:hover, 
.button-warning:focus-visible,
.button-warning:active,
.button-warning.active,
.button-warning.disabled,
.button-warning[disabled] {
    background-color: #ebeeff;
}

.button-warning:active,
.button-warning.active {
  background-color: #c67605 ;
}

.button-danger, 
input[type="submit"].button-danger, 
input[type="button"].button-danger{
  display: inline-block;
  padding: 4px 10px 4px 10px;
  margin: 5px;
  margin-bottom: 1px;
  margin-top: 1px;
  font-size: 13px;
  line-height: 20px;
  color: #333333;
  text-align: center;
  /*text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);*/
  vertical-align: middle;
  cursor: pointer;
  background-repeat: repeat-x;
  border: 1px solid #b1b1b1;
  border-radius: 4px;
  font-weight:bold;
  zoom: 1;
  color: #ffffff;
  background-color: #e62c2c;
}
.button-danger:hover,
input[type="submit"].button-danger:hover, 
input[type="button"].button-danger:hover, 
.button-danger:focus-visible,
.button-danger:active,
.button-danger.active,
.button-danger.disabled,
.button-danger[disabled] {
    color: #ffffff;
    background-color: #e62c2c;
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
    text-decoration:none;
}

.button-danger-dim, 
input[type="submit"].button-danger-dim, 
input[type="button"].button-danger-dim{
  display: inline-block;
  padding: 4px 10px 4px 10px;
  margin: 5px;
  margin-bottom: 1px;
  margin-top: 1px;
  font-size: 13px;
  line-height: 20px;
  color: #333333;
  text-align: center;
  /*text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);*/
  vertical-align: middle;
  cursor: pointer;
  background-repeat: repeat-x;
  border: 1px solid #b1b1b1;
  border-radius: 4px;
  font-weight:bold;
  zoom: 1;
  color: #ffffff;
  background-color: #872626;
}
.button-danger-dim:hover,
input[type="submit"].button-danger-dim:hover, 
input[type="button"].button-danger-dim:hover, 
.button-danger-dim:focus-visible,
.button-danger-dim:active,
.button-danger-dim.active,
.button-danger-dim.disabled,
.button-danger-dim[disabled] {
    color: #ffffff;
    background-color: #872626;
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
    text-decoration:none;
}

.button-danger-gray, 
input[type="submit"].button-danger-gray, 
input[type="button"].button-danger-gray{
  display: inline-block;
  padding: 4px 10px 4px 10px;
  margin: 5px;
  margin-bottom: 1px;
  margin-top: 1px;
  font-size: 13px;
  line-height: 20px;
  color: #333333;
  text-align: center;
  /*text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);*/
  vertical-align: middle;
  cursor: pointer;
  background-repeat: repeat-x;
  border: 1px solid #b1b1b1;
  border-radius: 4px;
  font-weight:bold;
  zoom: 1;
  color: #ffffff;
  background-color: #5e5353;
}
.button-danger-gray:hover,
input[type="submit"].button-danger-gray:hover, 
input[type="button"].button-danger-gray:hover, 
.button-danger-gray:focus-visible,
.button-danger-gray:active,
.button-danger-gray.active,
.button-danger-gray.disabled,
.button-danger-gray[disabled] {
    color: #ffffff;
    background-color: #5e5353;
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
    text-decoration:none;
}

.button-success,
input[type="submit"].button-success, 
input[type="button"].button-success
{
  line-height: 20px;
  display: inline-block;
  padding: 4px 10px 4px 10px;
  margin: 5px;
  margin-bottom: 1px;
  margin-top: 1px;
  font-size: 13px;
  color: #333333;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid #b1b1b1;
  border-radius: 4px;
  font-weight:bold;
  zoom: 1;
  color: #ffffff;
  background-color:    #00A99D;
}

.button-success:hover,
input[type="submit"].button-success:hover, 
input[type="button"].button-success:hover,
.button-success:focus-visible,
.button-success:active,
.button-success.active,
.button-success.disabled,
.button-success[disabled] {
    background-color:    #00A99D;
    color:#ffffff;
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
}

.button-success:active,
.button-success.active {
  background-color: #408140 ;
}

.button-success-dim,
input[type="submit"].button-success-dim, 
input[type="button"].button-success-dim
{
  line-height: 20px;
  display: inline-block;
  padding: 4px 10px 4px 10px;
  margin: 5px;
  margin-bottom: 1px;
  margin-top: 1px;
  font-size: 13px;
  color: #333333;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid #b1b1b1;
  border-radius: 4px;
  font-weight:bold;
  zoom: 1;
  color: #ffffff;
  background-color:    #317a53;
}

.button-success-dim:hover,
input[type="submit"].button-success-dim:hover, 
input[type="button"].button-success-dim:hover,
.button-success-dim:focus-visible,
.button-success-dim:active,
.button-success-dim.active,
.button-success-dim.disabled,
.button-success-dim[disabled] {
    background-color:    #317a53;
    color:#ffffff;
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
}

.button-success-dim:active,
.button-success-dim.active {
  background-color: #255c3e ;
}


.button-success-gray,
input[type="submit"].button-success-gray, 
input[type="button"].button-success-gray
{
  line-height: 20px;
  display: inline-block;
  padding: 4px 10px 4px 10px;
  margin: 5px;
  margin-bottom: 1px;
  margin-top: 1px;
  font-size: 13px;
  color: #333333;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid #b1b1b1;
  border-radius: 4px;
  font-weight:bold;
  zoom: 1;
  color: #ffffff;
  background-color:    #828282;
  background-color:    #57635b;
}

.button-success-gray:hover,
input[type="submit"].button-success-gray:hover, 
input[type="button"].button-success-gray:hover,
.button-success-gray:focus-visible,
.button-success-gray:active,
.button-success-gray.active,
.button-success-gray.disabled,
.button-success-gray[disabled] {
    background-color:    #828282;
  background-color:    #57635b;
    color:#ffffff;
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
}

.button-success-gray:active,
.button-success-gray.active {
  background-color: #666666 ;
}

.button-info,
input[type="submit"].button-info,
input[type="button"].button-info {
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #49afcd;
  *background-color: #2f96b4;
  background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4));
  background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4);
  background-image: -o-linear-gradient(top, #5bc0de, #2f96b4);
  background-image: linear-gradient(to bottom, #5bc0de, #2f96b4);
  background-repeat: repeat-x;
  border-color: #2f96b4 #2f96b4 #1f6377;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2f96b4', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

.button-info:hover,
input[type="submit"].button-info:hover, 
input[type="button"].button-info:hover,
.button-info:focus-visible,
.button-info:active,
.button-info.active,
.button-info.disabled,
.button-info[disabled] {
  color: #ffffff;
  background-color: #2f96b4;
}

.button-info:active,
.button-info.active {
  background-color: #24748c ;
}

.button-inverse {
  color: #ffffff;
  /*text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);*/
  background-color: #363636;
  *background-color: #222222;
  background-image: -moz-linear-gradient(top, #444444, #222222);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#444444), to(#222222));
  background-image: -webkit-linear-gradient(top, #444444, #222222);
  background-image: -o-linear-gradient(top, #444444, #222222);
  background-image: linear-gradient(to bottom, #444444, #222222);
  background-repeat: repeat-x;
  border-color: #222222 #222222 #000000;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff444444', endColorstr='#ff222222', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

.button-inverse:hover,
.button-inverse:focus-visible,
.button-inverse:active,
.button-inverse.active,
.button-inverse.disabled,
.button-inverse[disabled] {
  color: #ffffff;
  background-color: #222222;
  *background-color: #151515;
}

.button-inverse:active,
.button-inverse.active {
  background-color: #080808 ;
}


button.button::-moz-focus-inner,
input[type="submit"].button::-moz-focus-inner {
  padding: 0;
  border: 0;
}


button.button.button-mini,
input[type="submit"].button.button-mini {
  *padding-top: 1px;
  *padding-bottom: 1px;
}

.button-link,
.button-link:active,
.button-link[disabled] {
  background-color: transparent;
  background-image: none;
  -webkit-box-shadow: none;
     -moz-box-shadow: none;
          box-shadow: none;
}

.button-link {
  color: #0088cc;
  cursor: pointer;
  border-color: transparent;
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}

.button-link:hover,
.button-link:focus-visible {
  color: #005580;
  text-decoration: underline;
  background-color: transparent;
}

.button-link[disabled]:hover,
.button-link[disabled]:focus-visible {
  color: #333333;
  text-decoration: none;
}

input.dynamic_add_buttons_for_select2 {
    padding-top: 0px;
    padding-bottom: 0px;
    margin-left: 10px;
}



.write_silk_tabs_container{
    user-select:none;
    margin-top:12px;
    margin-left:-20px;
    padding-right:20px;
    padding-left:20px;
    line-height:normal;
    
}

.write_silk_tab{
    margin:0px;
    margin-left:10px;
    margin-top:25px;
    border: 1px solid #ccc;
    background: #ffffff;
    padding:5px;
    padding-left:20px;
    padding-right:20px;
    display:inline;
    cursor: pointer;

     -webkit-border-radius: 4px 4px 0 0;
     -moz-border-radius: 4px 4px 0 0;
     border-radius: 4px 4px 0 0;

    -webkit-box-shadow: 10px 0px 20px -16px rgba(0,0,0,0.5);
    -moz-box-shadow: 10px 0px 20px -16px rgba(0,0,0,0.5);
    box-shadow: 10px 0px 20px -16px rgba(0,0,0,0.5);
    transition: all 0.1s ease;

}

.write_silk_tab_content{
    border-top: 1px solid #ccc;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    margin-top:5px;
    margin-left:-20px;
    margin-right:-20px;
    display:none;
    transition: all 0.1s ease;
}



/* TABS */
.tabs{
  list-style: none;
  margin-bottom: 20px;
  margin-left: -20px;
  padding-right: 20px;
  float: left;
  width: 100%;
  border-bottom: 1px solid #ddd;
  padding-left:20px;
  margin-top:10px;
    user-select:none;
}

.tabs li{
  float: left;
}

.tabs li a{
	float: left;
    margin-right: 10px;
    /* background: #efefef80; /* Old browsers */

    border: 1px solid #ddd;
    padding: 6px 14px;
     -webkit-border-radius: 4px 4px 0 0;
     -moz-border-radius: 4px 4px 0 0;
     border-radius: 4px 4px 0 0;

     font-style: normal;
     font-weight: 600;
     font-size: 14px;
     line-height: 20px;
     /* identical to box height, or 143% */


     /* DM-Navy-Blue */
     color: #314A75;
     
}

.tabs li a:hover{
    text-decoration:none;
}

.tabs li {
  margin-bottom: -1px;
}

.tabs .selected a,
.tabs .selected a:hover,
.tabs .selected a:focus {
  color: #3c3c3c;
  cursor: default;
  text-decoration: none;
  font-weight: bold;
  border: 1px solid #ccc;
  border-bottom-color: transparent;
  background: #ffffff; /*same as background, hides bottom border */
  font-style: normal;
  font-weight: bold;
  font-size: 14px;
  line-height: 20px;
}

.tabs li h2{
	float: left;
	margin: 0 20px 0 0;
	padding: 0 0 10px 0;
	font-size: 24px;
    font-weight: 400;
    text-transform: uppercase;
}

div.content div.no-border{
	border: 0;
	padding: 0;
	margin: 0;
}
form#xml_form_table {
    width:100%;
}

form#xml_form_table table {
    width:100%;
}

#read_page div.left-column {
    width:350px;
    box-sizing:content-box;
}

#read_page div.right-column {
    margin-left: 390px;
}

/* Content of info tab */
table.rec_info {
    width: 100%;
}

#read_page #tabs .rec_info td.rec_info_label 
{
	padding-right: 0;
        width:100px;
}

textarea#comment_message_field{
	height: 60px;
        width: 100%;
	padding: 3px;
	margin: 0px;
        margin-bottom:10px;
}

.comment_help{
	font-size: 11px;
	float: right;
}

.comment{
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    margin: 4px;
    margin-top:10px;
    margin-bottom:10px;
    background: #ffffff; /* For browsers that do not support gradients */
  /*  border: 1px solid #eeeeee;*/
}

.comment_meta{
	display: block;
	margin: 0 0 5px 0;
	font-size: 12px;
	color: #ababab;
}

.comment_time{
	color: #ababab;
}

.comment_by{
	font-weight: bold;
}

.comment_text{
	font-size: 12px;
	line-height: 1.4;
}

div.error_notification {
    display: none;

    width:350px;
    float:right;
    clear:both;

    margin:10px;

    -webkit-box-shadow: 10px 10px 20px -16px rgba(0,0,0,0.5);
    -moz-box-shadow: 10px 10px 20px -16px rgba(0,0,0,0.5);
    box-shadow: 10px 10px 20px -16px rgba(0,0,0,0.5);

    padding: 16px;

    border-left: 8px solid #e31c3d;

    background-image: url("../../images/icons/generic/black/x.svg"); 
    background-repeat: no-repeat;
    background-position:top right;
    background-size: 16px 16px;

    background-color: #ff0000;
    background-color: #f9dede;
}


div.success_notification {

    display: none;

    width:350px;
    float:right;
    clear:both;

    margin:10px;

    -webkit-box-shadow: 10px 10px 20px -16px rgba(0,0,0,0.5);
    -moz-box-shadow: 10px 10px 20px -16px rgba(0,0,0,0.5);
    box-shadow: 10px 10px 20px -16px rgba(0,0,0,0.5);

    padding: 16px;
    border-left: 8px solid #47a462;

    background-image: url("../../images/icons/generic/black/x.svg"); 
    background-repeat: no-repeat;
    background-position:top right;
    background-size: 16px 16px;
    background-color: #e7f4e4;

}


div#notification_bar {
    text-align:right;
    position:fixed;
    right: 0;
    text-align:center;
    z-index:99999;

}

p.fake_link {
    display:inline;
    margin:0px;
    padding:0px;
    color: #666666;
    text-decoration: undeline;
}

p.fake_link:hover {
    color: #333333;
}

div.size-control {
}

div.size-control a {
    text-decoration:none;
    font-weight:bold;
    font-size:20px;
    margin-left:5px;
}

span.autosave-status {
    display: inline-block;
    margin-right: 20px;
    font-size: 12px;
    color: #777777;
    visibility: hidden;
}

span.autosave-status.visible {
    visibility: visible;
}

span.external_queue_tool {
    font-size: 12px;
    margin-left:30px;
    margin-bottom:15px;
}

span.external_queue_tool input {
    height:23px;
    width:100px;
    margin-right:20px;
}


/* Autocorrect/dictionary */

.ac_results {
		border: 1px solid gray;
		background-color: white;
		padding: 0;
		margin: 10px;
		list-style: none;
		position: fixed;
		z-index: 50;	
	        right:40px;
		top:200px;
		display: none;
                overflow: hidden;
                width:400px;
	}
	
.ac_results ul {
    padding:10px;

}
.ac_results li {
		padding: 3px 10px;
		white-space: nowrap;
		color: #101010;
		text-align: left;
		list-style-type:none;
	}
	
.ac_results li span{
        display:none;
}
.ac_over {
		cursor: pointer;
		background-color: #F0F0FF;
	}
	
.ac_over span.explain {
        display:block;
	white-space: normal;
	font-size: 8pt;
        padding: 3px 10px;
        max-width: 400px;
        max-height:50px;
	color: #555555;
    }

.ac_match {
		text-decoration: underline;
		color: black;
	}


.dataTables_paginate {
    margin:0px;
    padding-left:20px;
}

.dataTables_paginate a{
    margin-left:10px;
}

.dataTables_paginate a.current{
	font-weight: bold;
        color: #000000;
}

.dataTables_paginate a:hover {
    text-decoration: underline;
                    cursor: pointer;
}

audio {
    width: 300px;
    height: 32px;
}

span.tag_plus {
    font-size:26px; 
    font-weight: bold; 
    cursor:pointer;
   -webkit-user-select: none; /* webkit (safari, chrome) browsers */
   -moz-user-select: none; /* mozilla browsers */
   -khtml-user-select: none; /* webkit (konqueror) browsers */
   -ms-user-select: none; /* IE10+ */
}

span.tag_minus {
    font-size:36px; 
    font-weight: bold; 
    cursor:pointer;
   -webkit-user-select: none; /* webkit (safari, chrome) browsers */
   -moz-user-select: none; /* mozilla browsers */
   -khtml-user-select: none; /* webkit (konqueror) browsers */
   -ms-user-select: none; /* IE10+ */
}

input.tag_counter {
        font-size: 18px; 
        appearance: none;
        box-shadow: none;
        border-radius: none; 
        border: 0px; 
        width:20px;
        text-align:center;

}

span.list_comment_none {
	cursor: pointer; 
        overflow:hidden;
	cursor: hand;
	display: inline-block;
	width: 30px;
	height: 16px;
	border: 0px;
	padding: 0px;
	margin: 0px;
	color: #000000;
        padding-left:25px;
	background:url(../../images/icons/left-menu/bubbles_light.png) no-repeat;
	background-position: bottom left;
}

span.list_comment_yes {
	cursor: pointer; 
        overflow:hidden;
	cursor: hand;
	display: inline-block;
	width: 30px;
	height: 16px;
	border: 0px;
	padding: 0px;
	margin: 0px;
	color: #000000;
        padding-left:25px;
	background:url(../../images/icons/left-menu/bubbles.png) no-repeat;
	background-position: bottom left;
}

span.list_action_gear {
	cursor: pointer; 
    overflow:hidden;
	cursor: hand;
	display: inline-block;
	height: 16px;
	border: 0px;
	padding: 0px;
	margin: 0px;
	color: #000000;
    padding-left:16px;
    margin-left:5px;
	background:url(../../images/icons/generic/black/settings.svg) no-repeat;
	background-position: bottom left;
    background-size: 16px 16px;
}

span.list_action_inbox {
	cursor: pointer; 
    overflow:hidden;
	cursor: hand;
	display: inline-block;
	height: 16px;
	border: 0px;
	padding: 0px;
	margin: 0px;
	color: #000000;
    padding-left:16px;
    margin-left:5px;
	background:url(../../images/icons/generic/black/inbox.svg) no-repeat;
	background-position: bottom left;
    background-size: 16px 16px;
}
span.list_action_close {
	cursor: pointer; 
    overflow:hidden;
	cursor: hand;
	display: inline-block;
	height: 16px;
	border: 0px;
	padding: 0px;
	margin: 0px;
	color: #000000;
    padding-left:16px;
    margin-left:5px;
	background:url(../../images/icons/generic/black/x.svg) no-repeat;
	background-position: bottom left;
    background-size: 16px 16px;
}

span.list_action_dropdown {
	cursor: pointer; 
    overflow:hidden;
	cursor: hand;
	display: inline-block;
	height: 16px;
	border: 0px;
	padding: 0px;
	margin: 0px;
	color: #000000;
    padding-right:20px;
    min-width: 90px;
}
span.disabled_row {
    color:#aaaaaa;
}
span.hidden_row {
    display:none;
}

span.user_set_target {
	display: inline-block;
	min-width: max-content;
	height: 16px;
	border: 0px;
	padding: 0px;
	margin: 0px;
    font-weight: bold;
}

td span.fallback_time {
    font-style: italic;
}


span.list_action_dropdown:hover {
	text-decoration: underline;
    border-bottom: 1px solid #999;
    margin: 0px;
    background: url('../../images/pencil.png') right 0px no-repeat;

}

input.tag_list_style {
      /* Double-sized Checkboxes */
    -ms-transform: scale(1.4); /* IE */
    -moz-transform: scale(1.4); /* FF */
    -webkit-transform: scale(1.4); /* Safari and Chrome */
    -o-transform: scale(1.4); /* Opera */
    transform: scale(1.4); /* default  */
    paddIng: 10px;
}

div.tag_list {
    margin-bottom:10px;
    font-size:large;
    display:inline-block;
}

div.tag_list form{
    display:inline;
}

/* Tooltip text */
.tooltiptext {
        width: 500px;
        background: #ffffff;
        color: #000000;
        /* padding: 5px; */
        padding-bottom:10px; 
        margin-left:-420px;
        display:none;
         /* Position the tooltip text - see examples below! */
        position: fixed;
        z-index: 99999;

	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;

     border: 0px solid rgba(0,0,0,0.1);
    -webkit-box-shadow: 10px 10px 20px -16px rgba(0,0,0,0.5);
    -moz-box-shadow: 10px 10px 20px -16px rgba(0,0,0,0.5);
    box-shadow: 10px 10px 20px -16px rgba(0,0,0,0.5);

}

.tooltip_topic {
	-webkit-border-top-left-radius: 4px;
	-webkit-border-top-right-radius: 4px;
	-moz-border-top-left-radius: 4px;
	-moz-border-top-right-radius: 4px;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;

    background-color: var(--custom_primary_color, #16426D);
    margin:0px;
    padding:8px;
    padding-left:20px;
    font-style:bold;
    color: var(--custom_primary_font_color, var(--default_primary_font_color));
    color: contrast-color(var(--custom_primary_color, #16426D));
}

div.overlay_white{
    background: rgba(255, 255, 255, 1); 
    z-index: 9999; 
    position:fixed; 
    top:0px; 
    left:0px; 
    height:100%; 
    width:100%; 
    content: " "; 
}
div.overlay_white .overlay-content{
    text-align: center;
    margin-top: 200px;
}

body.actionstep div.overlay_white .overlay-content {
    margin-top: 100px;
}

div.overlay{
    background: rgba(0, 0, 0, 0.3); 
    z-index: 9999; 
    position:fixed; 
    top:0px; 
    left:0px; 
    height:100%; 
    width:100%; 
    content: " "; 
    display:none;
}

div.overlay-padding{
    display:none;
    position:fixed; 
    top:170px;
    content: " "; 
    max-height:70%; 
    z-index: 10001;
}

div.overlay-padding-fullscreen{
    display:none;
    position:fixed; 
    top:30px;
    left:0px;
    content: " "; 
    z-index: 99990;

    -webkit-box-shadow: 10px 10px 20px -16px rgba(0,0,0,0.5);
    -moz-box-shadow: 10px 10px 20px -16px rgba(0,0,0,0.5);
    box-shadow: 10px 10px 20px -16px rgba(0,0,0,0.5);

}
div.overlay-padding-fullscreen div.overlay-topic{
	-webkit-border-top-left-radius: 4px;
	-webkit-border-top-right-radius: 4px;
	-moz-border-top-left-radius: 4px;
	-moz-border-top-right-radius: 4px;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;

    background-color: var(--custom_primary_color, #16426D);
    margin:0px;
    padding:8px;
    padding-left:20px;
    font-style:bold;
    color: var(--custom_primary_font_color, var(--default_primary_font_color));
    color: contrast-color(var(--custom_primary_color, #16426D));
}

div.overlay-padding-fullscreen div.overlay-content{

    background: rgba(255, 255, 255, 1); 
    margin:0px 0px;
    overflow: auto;
    padding:20px;
    overflow:auto;

	-webkit-border-bottom-left-radius: 4px;
	-moz-border-bottom-left-radius: 4px;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	-webkit-border-bottom-right-radius: 4px;
	-moz-border-bottom-right-radius: 4px;
	border-bottom-right-radius: 4px;

}

div.overlay-padding div.overlay-content{

    background: rgba(255, 255, 255, 0.95); 
    width:700px; 
    margin:0px 0px;
    overflow: auto;

    max-height:70%; 

	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;

    -webkit-box-shadow: 10px 10px 20px -16px rgba(0,0,0,0.5);
    -moz-box-shadow: 10px 10px 20px -16px rgba(0,0,0,0.5);
    box-shadow: 10px 10px 20px -16px rgba(0,0,0,0.5);
}

div.overlay-padding-fullscreen div.tab_list_item {
        padding: 5px;
	padding-left: 10px;
	padding-right: 10px;
        margin-top:10px;
        margin-bottom:10px;
        margin-left:20px;
        margin-right:20px;
	/*border-left: 2px solid #000000;*/
        background: #ffffff;
	width: 500px;
    text-align: left;
}

div.overlay-padding-fullscreen div.tab_list_tab {
	margin:10px;
/*	text-decoration: underline;*/
}

.tab_editor {
    margin: 4px 80px 0px;
    text-align: left;
}
div.overlay-padding-fullscreen div.tab_list_tab:hover {
        background: #ffffff;

	cursor: pointer; 
	cursor: hand;
}

table.assosiation {
	border-collapse: collapse;
	border-spacing: 0; 
    box-shadow:none;
}
table.assosiation td{
    vertical-align:top;
    padding:10px;
}
div.js_notifications {
    display:none;    
}

img.comment_delete {
    height:20px;
    float:right;
	cursor: pointer; 
	cursor: hand;
}

table.report {
	border-collapse: collapse;
	border-spacing: 0; 
	width: 100%;
    margin-top:20px;
    clear:both;
	border: 1px solid #dcdcdc;
    padding:20px;
    background-color: #ffffff;
}

table.report tr {
	border: 1px solid #dcdcdc;
	padding: 5px 6px;
	font-size: 14px;
}

table.report tr.topic_row {
    padding:2px;
	font-weight: bold;
	font-size: 16px;
}

table.report tr.info_row {
	font-weight: bold;

}
table.report tr.grand_total_row {
	font-weight: bold;
}

div.dashboard_element {
    background-color: #ffffff;
    width: 583px;
    margin: 6px;
    margin-top: 0px;
    border: 1px solid #dcdcdc;
    padding: 10px;
    padding-bottom: 0px;
    height:320px;
    overflow: hidden;
}

div.dashboard_toolbar {
    margin: 0px;
    margin-top: 10px;
    width:100%;
    text-align: right;
}

/* Admin dashboard block headers driven by custom theme (primary_color). */
ul.dashboard#admin_dashboard div.dashboard_toolbar {
    margin-top: 0;
    padding-top: 0;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 18px;
    cursor: move;
    background-color: var(--custom_primary_color, var(--default_primary_color));
    color: var(--custom_primary_font_color, var(--default_primary_font_color));
    color: contrast-color(var(--custom_primary_color, var(--default_primary_color)));
}

ul.dashboard#admin_dashboard div.dashboard_toolbar a,
ul.dashboard#admin_dashboard div.dashboard_toolbar i {
    color: inherit;
}

ul.dashboard{
	margin: 0;
	padding: 0;
	list-style: none;
}

ul.dashboard > li{
	display: inline-block;
}

ul.dashboard#admin_dashboard {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: stretch;
    row-gap: 15px;
    column-gap: 15px;
}

ul.dashboard#admin_dashboard > li.admin_dashboard_block {
    min-width: 300px;
    min-height: 320px;
    width: 0;
    height: 600px;
    display: inline-flex;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: calc(50% - 15px);
}

li.admin_dashboard_block div.dashboard_element {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    padding: 0;
}

ul#column_sortter li{
    list-style:none;
    list-style-type: none;
    margin:4px;

}

ul#column_sortter li:hover{
    cursor: grab;
    text-decoration:underline;
}


.ui-widget-header {
    background-color: var(--custom_secondary_color, #e9e9e9);
    color: var(--custom_secondary_font_color, #333333);
}

html .ui-tabs .ui-state-default {
    border: 1px solid #c5c5c5;
    border-bottom:1px solid #f6f6f6;
    font-weight: normal;
    color: #000;
    background: #ffffff;
    margin-left:4px;

}

html .ui-tabs .ui-tabs-panel {
    padding: 0px;
}

html .ui-tabs .ui-state-default a{
    color: #454545;

}

#tabs {
    border: 0px;
}

.ui-tabs .ui-tabs-nav {
    background-color: #ffffff;
    border: 0px;
    border-bottom: 1px solid #c5c5c5;
    border-radius: 0px;
}

html .ui-tabs .ui-state-default:hover { 
    border: 1px solid #c5c5c5;
    background: #ffffff;
    font-weight: normal;
    color: #454545;
    border-bottom:1px solid #f6f6f6;
}

html .ui-tabs .ui-state-default a:hover{
    color: #454545;
}

html .ui-tabs .ui-state-active {
    border: 1px solid #c5c5c5;
    background: #ffffff;
    font-weight: normal;
    color: #454545;
    border-bottom:1px solid #ffffff;
}

html .ui-tabs .ui-state-active a{
    color: #000000;
    font-weight: bold;
}                                                      


/*
* Table styles
*/
table.dataTable {
width: 100%;
margin: 0 auto;
clear: both;
border-collapse: separate;
border-spacing: 0;
/*
* Header and footer styles
*/
/*
* Body styles
*/ }
table.dataTable thead th,
table.dataTable tfoot th {
    font-weight: bold; }
    
table.dataTable thead th,
table.dataTable thead td {
    padding: 8px 4px;
    border-bottom: 1px solid rgba(1,1,1,0.1); 
    }
table.dataTable thead th:active,
table.dataTable thead td:active {
    outline: none; }
table.dataTable tfoot th,
table.dataTable tfoot td {
    padding: 10px 18px 6px 18px;
  /*  border-top: 1px solid rgba(1,1,1,0.1);*/ }
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
    cursor: pointer;
    *cursor: hand;
    background-repeat: no-repeat;
    background-position: center right; }

table.dataTable thead .sorting {
    background-image: url("../../images/icons/generic/black/chevron-both.svg"); }
table.dataTable thead .sorting_asc {
    background-image: url("../../images/icons/generic/black/chevron-up.svg");}
table.dataTable thead .sorting_desc {
   background-image: url("../../images/icons/generic/black/chevron-down.svg");}
/*
images missing
table.dataTable thead .sorting_asc_disabled {
background-image: url("../images/sort_asc_disabled.png"); }
table.dataTable thead .sorting_desc_disabled {
background-image: url("../images/sort_desc_disabled.png"); }
*/
table.dataTable tbody tr {
background-color: white; 
/*
border-left: 1px solid rgba(1,1,1,0.1); 
border-right: 1px solid rgba(1,1,1,0.1); 
*/
border-bottom:1px solid rgba(1,1,1,0.1);
box-shadow: 0px 1px 0px rgba(49, 74, 117, 0.12);
}
table.dataTable tbody tr.selected {
background-color: #b0bed9; }
table.dataTable tbody th,
table.dataTable tbody td {
padding: 2px 4px; }
table.dataTable.row-border tbody th, table.dataTable.row-border tbody td, table.dataTable.display tbody th, table.dataTable.display tbody td {
/* border-top: 1px solid #dddddd;*/ 
}
table.dataTable.row-border tbody tr:first-child th,
table.dataTable.row-border tbody tr:first-child td, table.dataTable.display tbody tr:first-child th,
table.dataTable.display tbody tr:first-child td {
border-top: none; }
table.dataTable.cell-border tbody th, table.dataTable.cell-border tbody td {
    /*
border-top: 1px solid #dddddd;
border-right: 1px solid #dddddd; 
*/
box-shadow: 0px 1px 0px rgba(49, 74, 117, 0.12);
}
table.dataTable.cell-border tbody tr th:first-child,
table.dataTable.cell-border tbody tr td:first-child {
/*border-left: 1px solid #dddddd; */}
table.dataTable.cell-border tbody tr:first-child th,
table.dataTable.cell-border tbody tr:first-child td {
border-top: none; }
table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd {
background-color: #f9f9f9; 
}
table.dataTable.stripe tbody tr.odd.selected, table.dataTable.display tbody tr.odd.selected {
background-color: #abb9d3; }
table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
background-color: whitesmoke; }
table.dataTable.hover tbody tr:hover.selected, table.dataTable.display tbody tr:hover.selected {
background-color: #a9b7d1; }
table.dataTable.order-column tbody tr > .sorting_1,
table.dataTable.order-column tbody tr > .sorting_2,
table.dataTable.order-column tbody tr > .sorting_3, table.dataTable.display tbody tr > .sorting_1,
table.dataTable.display tbody tr > .sorting_2,
table.dataTable.display tbody tr > .sorting_3 {
background-color: #f9f9f9; }
table.dataTable.order-column tbody tr.selected > .sorting_1,
table.dataTable.order-column tbody tr.selected > .sorting_2,
table.dataTable.order-column tbody tr.selected > .sorting_3, table.dataTable.display tbody tr.selected > .sorting_1,
table.dataTable.display tbody tr.selected > .sorting_2,
table.dataTable.display tbody tr.selected > .sorting_3 {
background-color: #acbad4; }
table.dataTable.display tbody tr.odd > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd > .sorting_1 {
background-color: #f1f1f1; }
table.dataTable.display tbody tr.odd > .sorting_2, table.dataTable.order-column.stripe tbody tr.odd > .sorting_2 {
background-color: #f3f3f3; }
table.dataTable.display tbody tr.odd > .sorting_3, table.dataTable.order-column.stripe tbody tr.odd > .sorting_3 {
background-color: whitesmoke; }
table.dataTable.display tbody tr.odd.selected > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_1 {
background-color: #a6b3cd; }
table.dataTable.display tbody tr.odd.selected > .sorting_2, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_2 {
background-color: #a7b5ce; }
table.dataTable.display tbody tr.odd.selected > .sorting_3, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_3 {
background-color: #a9b6d0; }
table.dataTable.display tbody tr.even > .sorting_1, table.dataTable.order-column.stripe tbody tr.even > .sorting_1 {
background-color: #f9f9f9; }
table.dataTable.display tbody tr.even > .sorting_2, table.dataTable.order-column.stripe tbody tr.even > .sorting_2 {
background-color: #fbfbfb; }
table.dataTable.display tbody tr.even > .sorting_3, table.dataTable.order-column.stripe tbody tr.even > .sorting_3 {
background-color: #fdfdfd; }
table.dataTable.display tbody tr.even.selected > .sorting_1, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_1 {
background-color: #acbad4; }
table.dataTable.display tbody tr.even.selected > .sorting_2, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_2 {
background-color: #adbbd6; }
table.dataTable.display tbody tr.even.selected > .sorting_3, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_3 {
background-color: #afbdd8; }
table.dataTable.display tbody tr:hover > .sorting_1, table.dataTable.order-column.hover tbody tr:hover > .sorting_1 {
background-color: #eaeaea; }
table.dataTable.display tbody tr:hover > .sorting_2, table.dataTable.order-column.hover tbody tr:hover > .sorting_2 {
background-color: #ebebeb; }
table.dataTable.display tbody tr:hover > .sorting_3, table.dataTable.order-column.hover tbody tr:hover > .sorting_3 {
background-color: #eeeeee; }
table.dataTable.display tbody tr:hover.selected > .sorting_1, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_1 {
background-color: #a1aec7; }
table.dataTable.display tbody tr:hover.selected > .sorting_2, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_2 {
background-color: #a2afc8; }
table.dataTable.display tbody tr:hover.selected > .sorting_3, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_3 {
background-color: #a4b2cb; }
table.dataTable.no-footer {
 /*   border-bottom: 1px solid rgba(1,1,1,0.1);*/ }
table.dataTable.nowrap th, table.dataTable.nowrap td {
white-space: nowrap; }
table.dataTable.compact thead th,
table.dataTable.compact thead td {
padding: 4px 26px 4px 4px;
min-width:60px;
/*
border-left:1px solid #D6DBE3;
border-bottom:1px solid #D6DBE3;*/
font-size: 14px;
line-height: 20px;
/* identical to box height, or 143% */


/* DM-Navy-Blue */

color: #314A75;
}
table.dataTable.password td{
    font-size: 12px;
}
table.dataTable.compact tfoot th,
table.dataTable.compact tfoot td {
padding: 4px; }
table.dataTable.compact tbody th,
table.dataTable.compact tbody td {
    word-break:break-word;
padding: 4px; }
table.dataTable th.dt-left,
table.dataTable td.dt-left {
text-align: left; }
table.dataTable th.dt-center,
table.dataTable td.dt-center,
table.dataTable td.dataTables_empty {
text-align: center; }
table.dataTable th.dt-right,
table.dataTable td.dt-right {
text-align: right; }
table.dataTable th.dt-justify,
table.dataTable td.dt-justify {
text-align: justify; }
table.dataTable th.dt-nowrap,
table.dataTable td.dt-nowrap {
white-space: nowrap; }
table.dataTable thead th.dt-head-left,
table.dataTable thead td.dt-head-left,
table.dataTable tfoot th.dt-head-left,
table.dataTable tfoot td.dt-head-left {
text-align: left; }
table.dataTable thead th.dt-head-center,
table.dataTable thead td.dt-head-center,
table.dataTable tfoot th.dt-head-center,
table.dataTable tfoot td.dt-head-center {
text-align: center; }
table.dataTable thead th.dt-head-right,
table.dataTable thead td.dt-head-right,
table.dataTable tfoot th.dt-head-right,
table.dataTable tfoot td.dt-head-right {
text-align: right; }
table.dataTable thead th.dt-head-justify,
table.dataTable thead td.dt-head-justify,
table.dataTable tfoot th.dt-head-justify,
table.dataTable tfoot td.dt-head-justify {
text-align: justify; }
table.dataTable thead th.dt-head-nowrap,
table.dataTable thead td.dt-head-nowrap,
table.dataTable tfoot th.dt-head-nowrap,
table.dataTable tfoot td.dt-head-nowrap {
white-space: nowrap; }
table.dataTable tbody th.dt-body-left,
table.dataTable tbody td.dt-body-left {
text-align: left; }
table.dataTable tbody th.dt-body-center,
table.dataTable tbody td.dt-body-center {
text-align: center; }
table.dataTable tbody th.dt-body-right,
table.dataTable tbody td.dt-body-right {
text-align: right; }
table.dataTable tbody th.dt-body-justify,
table.dataTable tbody td.dt-body-justify {
text-align: justify; }
table.dataTable tbody th.dt-body-nowrap,
table.dataTable tbody td.dt-body-nowrap {
white-space: nowrap; }

table.dataTable,
table.dataTable th,
table.dataTable td {
box-sizing: content-box; }

/*
* Control feature layout
*/
.dataTables_wrapper {
position: relative;
clear: both;
*zoom: 1;
zoom: 1; }
.dataTables_wrapper .dataTables_length {
float: left; }
.dataTables_wrapper .dataTables_filter {
float: right;
text-align: right; }
.dataTables_wrapper .dataTables_filter input {
margin-left: 0.5em; }
.dataTables_wrapper .dataTables_info {
clear: both;
float: left;
padding-top: 0.755em; }
.dataTables_wrapper .dataTables_paginate {
float: right;
text-align: right;
padding-top: 0.755em; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
box-sizing: border-box;
display: inline-block;
min-width: 1.5em;
padding: 4px 10px;
margin-left: 2px;
text-align: center;
text-decoration: none !important;
cursor: pointer;
*cursor: hand;
color: #333333 !important;
border: 1px solid transparent;
border-radius: 2px; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
color: #333333 !important;
border: 1px solid #979797;
background-color: white;
border: 1px solid #b1b1b1;
border-radius: 4px;
color: #4a5574;

/* W3C */ }
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
cursor: default;
color: #666 !important;
border: 1px solid transparent;
background: transparent;
box-shadow: none;

padding: 4px 10px 4px 10px;
border: 1px solid #b1b1b1;
border-radius: 4px;
color: #4a5574;

}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
color: white !important;
border: 1px solid #a3a3a3;
background-color: #eaeaea;
padding: 4px 10px 4px 10px;
border: 1px solid #b1b1b1;
border-radius: 4px;
color: #4a5574;
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);

/* W3C */ }
.dataTables_wrapper .dataTables_paginate .paginate_button:active {
outline: none;

padding: 4px 10px 4px 10px;
border: 1px solid #b1b1b1;
border-radius: 4px;
color: #4a5574;

box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
}
.dataTables_wrapper .dataTables_paginate .ellipsis {
padding: 0 1em; }
.dataTables_wrapper .dataTables_processing {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 40px;
margin-left: -50%;
margin-top: -25px;
padding-top: 20px;
text-align: center;
font-size: 1.2em;
background-color: white;
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(25%, rgba(255, 255, 255, 0.9)), color-stop(75%, rgba(255, 255, 255, 0.9)), color-stop(100%, rgba(255, 255, 255, 0)));
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%); }
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
color: #828282; 
}
.dataTables_wrapper .dataTables_scroll {
clear: both; }
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody {
*margin-top: -1px;
-webkit-overflow-scrolling: touch; }
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > th, .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > td, .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > th, .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td {
vertical-align: middle; }
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > th > div.dataTables_sizing,
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > td > div.dataTables_sizing, .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > th > div.dataTables_sizing,
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td > div.dataTables_sizing {
height: 0;
overflow: hidden;
margin: 0 !important;
padding: 0 !important; }
.dataTables_wrapper.no-footer .dataTables_scrollBody {
border-bottom: 1px solid #111111; }
.dataTables_wrapper.no-footer div.dataTables_scrollHead table.dataTable,
.dataTables_wrapper.no-footer div.dataTables_scrollBody > table {
border-bottom: none; }
.dataTables_wrapper:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0; }

@media screen and (max-width: 767px) {
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
float: none;
text-align: center; }
.dataTables_wrapper .dataTables_paginate {
margin-top: 0.5em; } }
@media screen and (max-width: 640px) {
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
float: none;
text-align: center; }
.dataTables_wrapper .dataTables_filter {
margin-top: 0.5em; } }


.button_slide {
  cursor: pointer;
  -webkit-transition: ease-out 0.4s;
  -moz-transition: ease-out 0.4s;
  transition: ease-out 0.4s;
}


.slide_down:hover {
  background: rgba(255,255,255,0.1);
}

.slide_right:hover {

  background: rgba(0,0,0,0.05);
}

div.add_comment {
    margin-bottom:20px; 
    box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.1);
    padding: 10px;
}
div.old_comment {
    margin-bottom:20px; 
    /*
    box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.1);
    padding: 10px;
    */

}

table.details_list {
    margin-bottom:20px; 
    box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.1);
    padding: 10px;

}
table.details_list tr td {
    padding:7px;
}
table.file_list{
    margin-bottom:20px; 
    box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.1);
    padding: 10px;

}
table.file_list tr td{
    padding:10px;
}

div.count_change{
    margin-bottom:20px; 
    box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.1);
    padding: 10px;

}

div.list_show_button{
    position: absolute; 
    left:0px; 
    top:30px;
    z-index:10; 
    display:none;

    background: #ffffff;
    box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.2);

    transition:0.3s;
    border-radius: 4px;
    padding:1px;
    text-align:center;
}
div.list_show_button:hover{
    background: #eee;
}

div.list_show_button i{
    width:20px;
    margin-top:2px;
    font-size:16px;
    color:#000000;
}

div.list_close_button{
    transition:0.3s;
    position: absolute; 
    left:240px; 
    z-index:10; 
    display:none;
    background: #ffffff;

    border: 1px solid #eee;
    top:-8px;
    box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.2);
    padding:1px;
    border-radius: 4px;
    text-align:center;
}
div.list_close_button i{
    width:20px;
    margin-top:2px;
    font-size:16px;
    color:#000000;
}

div.list_close_button:hover{
    background: #eee;
}

div.option_header{
    background-color: rgba(242,242,242,0.5);
    padding:20px;
    width:100%;
    margin-left:-20px;
    margin-right:-20px;
    margin-top:20px;
    margin-bottom:20px;

    font-style:normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 32px;
}

div.option_list_narrow{
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
    width:900px;
    margin-bottom:20px;
}
div.option_list_wide{
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
    margin-bottom:20px;
}


div.option_item_odd{
    padding:20px;
    padding-left:40px;
    background: #ffffff;
}
div.option_item_even{
    padding:20px;
    padding-left:40px;
    background: #FBFBFC;
    border-top:1px solid rgba(0, 0, 0, 0.08);
    border-bottom:1px solid rgba(0, 0, 0, 0.08);
}

div.option_spacer{
    clear:both;
}

div.option_item_topic{
    font-style: normal;
    font-weight: 600;
    width:380px;
    font-size: 16px;
    line-height: 28px;
    vertical-align:top;
    /* identical to box height, or 200% */

    display:inline-block;

    /* DK-Grey-1 */

    color: #3C3C3C;

}
div.option_item_option{
    display:inline-block;
    line-height: 28px;
    width:370px;
}

/* css for option inside options:*/
div.option_item_sub_option{
    display:inline-block;
    line-height: 28px;
    width:100%;
}

div.option_item_sub_option #search_box_div{
    text-align: right;
    margin-bottom: 10px;
    width: 100%;
    margin-top: -50px;
    float:left;
}
div.option_item_sub_option table tr td:first-child {
    width:350px;
}
div.option_item_desc{
    display:block;
    clear:both;

    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 32px;
    /* identical to box height, or 200% */


    /* DK-Grey-2 */

    color: #828282;
}

.fab{
    font-style: normal;
    font-weight: 400;
    font-size: 32px;
    line-height: 32px;
    /* identical to box height, or 100% */
    text-align: center;
    /* DK-Black */
    color: #000000;
}

dialog.generic-overlay-padding {
    /*display: table;*/ /* this makes it nice and overflow-y... */
    min-width: 250px;
    padding: 0;
    border: hidden;
    top: 0;
    z-index: -1;
    background: transparent;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    max-height: 90%;
    overflow: visible;
}


.generic-overlay-padding div.generic-overlay-topic{
    font-family: Open Sans;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    background-color: var(--custom_primary_color, var(--default_primary_color));
    color: var(--custom_primary_font_color, var(--default_primary_font_color));
    color: contrast-color(var(--custom_primary_color, var(--default_primary_color)));
    margin:auto auto;
    padding: 12px 0px 10px 20px;

    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.generic-overlay-padding div.generic-overlay-topic div.generic-overlay-title{
    -webkit-user-select: none;
    font-family: Open Sans;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    display:inline-block;
}
.generic-overlay-padding div.generic-overlay-topic div.generic-overlay-close{
    display:inline-block;
    height:24px;
    width:50px;
    float:right;
}
.generic-overlay-padding div.generic-overlay-topic div.generic-overlay-close:hover{
    color:#aaaaaa;
}


.generic-overlay-padding div.generic-overlay-topic div.generic-overlay-close i{
    float:right;
    width:24px;
    height:24px;
    text-align:center;
    padding:0px;
    padding-left:8px;
    padding-right:12px;
    font-size:24px;
    transition: all 0.3s ease;
    display:inline-block;
}

.generic-overlay-padding div.generic-overlay-content{
    -webkit-user-select: none;
    background: rgba(255, 255, 255, 1); 
    overflow: auto;
    text-align:center;
    margin:auto auto;
    max-height: calc(90vh - 46px - 10px - 10px);
    padding: 10px 20px 9px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 1);

    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    user-select: text;
    scrollbar-gutter: stable;
}

.generic-overlay-padding div.generic-overlay-content pre{
    padding-left:150px;
    
    font-size:11px;
    text-align:left;
}

.generic-overlay-padding div.generic-overlay-content div.generic-content_left{
    padding-left:50px;
    
    font-size:18px;
    text-align:left;
}
.generic-overlay-padding div.generic-overlay-content div.button_row{
    /*margin-top:30px;*/
    clear:both;
}

.generic-overlay-padding div.generic-overlay-content div.button_row button{
    background: #F2F2F2;
    /* DK-Grey-4 */

    border: 1px solid #DEDEDE;
    box-sizing: border-box;
    border-radius: 4px;
    color: #000000;
    margin-left:10px;
    margin-right:10px;
}
.generic-overlay-padding div.generic-overlay-content div.button_row button:hover{
    
    background: #E2E2E2;
}

.generic-overlay-padding div.generic-overlay-content div.button_row button:active{
    background: #F2F2F2;
}

div.overlay_form {
    margin-top:10px;
    text-align: left; 
    width:100%; 
    font-size:16px; 
    position:relative;
}

div.overlay_form .row{
    margin-bottom:10px;
    display: block;
}

div.overlay_form .row .form-label{
    display: inline;
    margin-left:20px;
    width:200px;
    padding-right: 20px;
}
    
div.overlay_form .row .form-field{
    display: inline;
    float:right;
}

#tooltip {
    background-color:#ffffff;
    padding:7px;
    border:1px solid #fdfdfd;
    border-radius: 4px;
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
    width:340px;
}

.tooltip_hover .tooltip_text {
    visibility: hidden;
    width: 100px;
    color: #327495;
    background-color: #d9edf7;
    border-color: #bcdef1;
    white-space: pre-wrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    padding:10px;
    border-radius: 4px;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    cursor: default;
}

.tooltip_text {
    z-index: 15;
    bottom: 50px;
}

.tooltip_hover {
    position: absolute;
    display: inline;
    color: #327495;
    z-index: 1;
    left: -5px;
    cursor: default;
}

.tooltip_hover:hover .tooltip_text {
    visibility: visible;
}

.task-tag {
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    position: relative;
    width: 100%;
    height: 20px;
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 10px;
    background: #d3d3d3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    outline: none;
    opacity: 0.7;
    float:left;
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
    border:none;
}
a .task-tag{
    color: #000;
    display:block;
    text-decoration: none;
}

tr.task-tag > td {
    vertical-align: middle;
}
tr.task-tag {
    margin-top:5px;
    line-height: 15px;
}

.task-tag .editable{
    display:inline-block;
    padding:0px;
    margin: 0px 0px 0px 0px;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
    height:15px;
    border: 0px solid #999;
}

#tag_list div{
    margin-bottom:5px;
}

.task-select {
    background: #516ca6;
}

.task-header {
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    position: relative;
    width: 100%;
    height: 20px;
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
    background: #9faace;
    outline: none;
    opacity: 1;
    cursor:default;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
}

.task-textarea {
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.task_item_select {
    float:left;
    width:100%;
    height:150px;
    max-height: 150px;
    overflow-y: auto;
    padding: 10px;
    box-sizing: border-box;
}
tr.header {
    background: #a6b3cd;
    text-align: left;
    height: 24px;
}

.table-column{
    float: left;
    width: 50%;
    padding: 10px;
    box-sizing: border-box;
    border-spacing: 0;
    border: 1px solid #b1b1b1;
    border-radius: 14px;
    box-shadow: 0px 3px 2px  rgba(0,0,0,0.6);
    -moz-box-shadow: 0px 3px 2px  rgba(0,0,0,0.6);
    -webkit-box-shadow: 0px 3px 2px  rgba(0,0,0,0.6);
    -o-box-shadow: 0px 3px 2px  rgba(0,0,0,0.6);
    min-width:320px;
}
.table-column > table {
    width: 100%;
}
.table-column table td {
}

.table-column-no-border{
    float: left;
    width: 50%;
    box-sizing: border-box;
    border-spacing: 0;
    min-width:320px;
}
.table-column-border{
    padding: 10px;
    margin: 10px;
    box-sizing: border-box;
    border-spacing: 0;
    border: 1px solid #b1b1b1;
    border-radius: 14px;
    min-width:320px;
    min-height: 150px;
}
/* Single-line task form inputs take half the row width. */
input.xml_form_field[type="text"],
input.xml_form_field[type="number"],
input.xml_form_field[type="email"],
input.xml_form_field[type="datetime-local"] {
    width: 50%;
}
/* Long task form fields track their content height between 3 and 8 lines. */
textarea.tft_field {
    field-sizing: content;
    /* Clears the global textarea height, which would otherwise pin the box. */
    height: auto;
    min-height: 3lh;
    max-height: 8lh;
    resize: none;
}
.table_padding{
    text-align: left;
    width:100%;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}
.table_padding > thead th {
    position: sticky; top: 0; z-index: 1;
    border-bottom: 1px #6d9ab0 solid;
    text-align: left;
    box-sizing: border-box;
    outline: none;
    opacity: 1;
    cursor:default;
    padding: 3px 0px 3px 0px;
}
.table_padding tr, .table_padding td {
    box-sizing: border-box;
    border:none;
    box-shadow: none;
    padding: 3px 0px 3px 0px;
    text-align: left;
}

.table_padding > thead, .table_padding > tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}
.table_padding > tbody {
    display: block;
    overflow-y: auto;
    table-layout: fixed;
}
.table-column-no-border td,.table-column-border th {
    vertical-align: top;
}
.task-tag:hover {
    opacity: 1;
}

.remove-task {
    float:right;
    cursor:pointer;
    width: 16px;
    height: 16px;
    border-radius: 5px;
    display: block;
    margin-left: 5px;
    text-align: center;
    opacity: 0.7;
}
.remove-task:hover{
    opacity: 1;
}

.task.action {
    cursor: pointer;
}

.task.action:hover {
    text-decoration: underline;
}

.task_group_column_drag {
    border: 2px #314a757d outset !important;
    border-radius: 5px;
    border-collapse: separate;
    padding-left: 5px !important;
    margin: 5px;
    width: calc(100% - 10px) !important;
}

.task-type-icon {
    height: 20px;
    width: 20px;
    line-height: 20px;
    padding:0;
    text-align: center;
    font-size: 15px;
    border-radius: 5px;
    margin: 5px;
}

.task-type-icon:before {
    mix-blend-mode: difference;
    color: white;
}

tr.settings-table > td {
    vertical-align: middle;
}

span.task-project {
    color: white;
    border-radius: 5px;
    padding: 0 5px;
}

div#task-project-search {
    display: block;
    border: 1px #000 solid;
    box-shadow: 2px 2px 2px 0px #333;
}

.calender_task_item{
    border: 1px #bcdef1 solid;
    border-spacing: 0;
    box-sizing: border-box;
    border-radius: 2px;
    padding-left: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    outline: none;
}


.tooltip_hover .tooltip_text {
    visibility: hidden;
    width: 100px;
    color: #327495;
    background-color: #d9edf7;
    border-color: #bcdef1;
    white-space: pre-wrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    padding:10px;
    border-radius: 4px;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    cursor: default;
}

.tooltip_text {
    z-index: 15;
    bottom: 50px;
}

.tooltip_hover {
    position: absolute;
    display: inline;
    color: #327495;
    z-index: 1;
    left: -5px;
    cursor: default;
}

.tooltip_hover_error {
    position: relative;
    display: inline;
    color: #f32924;
    z-index: 1;
    cursor: default;
}
.tooltip_hover:hover .tooltip_text {
    visibility: visible;
}

/*Element to show small information text inside:*/
div.border-blue {
    display: inline-block;
    padding: 4px 10px 4px 10px;
    margin-bottom: 1px;
    margin-top: 1px;
    font-size: 13px;
    line-height: 20px;
    color: #333333;
    text-align: center;
    vertical-align: middle;
    background-repeat: repeat-x;
    border: 1px solid #327495;
    border-radius: 4px;
    font-weight:bold;
    zoom: 1;
}

/*
    MARKDOWN SUB CLASSES
 */

span.markdown {
    white-space: pre-wrap;
}

span.markdown pre {
    counter-reset: line;
}

span.markdown pre code {
    counter-increment: line;
}

span.markdown pre code::before {
    content: counter(line);
    display: inline-block;
    min-width: 3.5em;
    border-right: solid 1px;
    padding: 0 .5em;
    margin-right: .5em;
}

span.markdown blockquote {
    padding: 0 10px 10px;
    margin: 0 0 10px;

}

/*

    FANCY EDITOR

 */

dialog div#fancy-editor {
    display: flex;
    min-width: 600px;
    min-height: 450px;
    max-height: 75vh;
    background: #fff;
    margin: 25px auto;
    border-radius: 1em;
    flex-direction: column;
}

dialog div#fancy-editor div#info {
    width: 100%;
    display: block;
    border-bottom: solid 1px #3333331f;
    text-align: center;
}

dialog div#fancy-editor div#info div#info-left,
dialog div#fancy-editor div#info div#info-right {
    width: calc(50% - 5px);
    display: inline-block;
    padding-bottom: 25px;
    vertical-align: top;
}
dialog div#fancy-editor div#edit-container {
    display: flex;
    flex-direction: row;
    flex: 1;
    height: 100%;
    min-height: 0;
}

dialog div#fancy-editor div#editor,
dialog div#fancy-editor div#right {
    padding: 50px 0 0;
}

dialog div#fancy-editor div#editor {
    width: 50%;
    display: inline-block;
    border-right: solid 1px #3333331f;
    text-align: center;
}

dialog div#fancy-editor div#right {
    width: calc(50% - 1px);
    display: inline-block;
}

dialog div#fancy-editor div#info div#editor_text,
dialog div#fancy-editor div#info div#preview-text {
    padding: 0 10%;
}

dialog div#fancy-editor div#editor textarea#translation,
dialog div#fancy-editor div#preview,
dialog div#fancy-editor div#guide {
    min-width: 80%;
    width: 80%;
    max-width: 80%;
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
    margin: 0 auto;
}

dialog div#fancy-editor div#editor textarea#translation {
    position: relative;
}

dialog div#fancy-editor div#preview,
dialog div#fancy-editor div#guide {
    border: solid 1px #3333331f;
    display: block;
}

.tooltip-parent .tooltip-text {
    position: absolute;
    background: #6c6c6c;
    color: #fff;
    padding: .5em;
    border-radius: 3px;
    margin-top: 5px;
    font-size: 1em;
    text-align: center;
    line-height: 1.5em;
    opacity: 0;
    transition: opacity, visibility;
    transition-delay: .5s;
    display: block;
    visibility: hidden;
    font-family: 'Open Sans',verdana, arial, helvetica;
}

.tooltip-parent:hover .tooltip-text {
    opacity: 1;
    visibility: visible;
    transition-delay: .1s;
}

.tooltip-parent .tooltip-text.long{
    transition-delay: 1s;
}


.main-menu a img {
    height:16px;
}

.main-menu-more {
    display: inline-block;
    position: absolute;
}
.main-menu-more > a{
    display: none;
}
.main-menu-more ul {
    position: absolute;
    display: none;
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.5);
    padding-left:0px;
    margin-left:0px;
    top: calc(100% + 3px);
    right: 0;
    background-color: var(--custom_secondary_color, var(--default_secondary_color));
    margin-right: 0;
}
.main-menu-more li {
    width: 100%;
    background-color: var(--custom_secondary_color, var(--default_secondary_color));
    border-bottom:3px solid var(--custom_tetriary_color, var(--default_tetriary_color));
}

translation {
    cursor: pointer;
}

translation:hover {
    text-decoration: underline red wavy;
}

*:focus > translation {
    text-decoration: underline darkred wavy;
}
.button[disabled]:hover{
    cursor: not-allowed;
}
.button-success[disabled]:hover{
    cursor: not-allowed;
}
.button-success[disabled] {
    cursor: default;
    background-image: none;
    opacity: 0.65;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.no-shadow {
    width:100%;
    margin-top:5px;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.week_select {
    padding: 0px;
}
.week_select > li {
    display: inline-block;
    width:25px;
    padding-left:8px;
    padding-right: 8px;
    margin: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    vertical-align: middle;
    text-align:center;
    cursor: pointer;
}
.week_select > li:hover {
    background: #e5e5e5;
}

tr.queue_header th {
    position: sticky;
    top: 0;
    background: white;
}

tr.log_highlight {
    filter: drop-shadow(2px 4px 6px rgba(33, 33, 33, 0.5));
}

a.share_link {
    text-decoration: none;
}

a.share_link i.share_icon {
    opacity: 0;
}

a.share_link:hover i.share_icon {
    opacity: 1;
}

mark.no_mark{
    background: transparent;
    padding:0px;
    margin:0px;
    font-weight: normal;
    border-bottom: 0px;
}

mark.bold{
    font-weight: bold;
    border-bottom:1px #2a7ac8 solid;
    background: transparent;
    padding:0px;
    margin:0px;
}

.json_edit {
    border: 1px solid #DEDEDE;
    box-sizing: border-box;
    border-radius: 4px;
    color: black;
    outline: none;
    text-align: left;
    display: inline-block;
    white-space: pre-wrap;
    resize: both;
    overflow-wrap: break-word;
    overflow-y: auto;
    overflow-x: hidden;
    font-size: 12px;
    tab-size:1;
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
}

/* DROPBOX START */


ul.dropbox_files {
    width: max-content;
}
li.file-remove i {
    margin-left: 10px;
    opacity: 0;
}
li.file-remove:hover i {
    opacity: 1;
}
li.file-remove:hover {
    color: red;
    cursor: pointer;
}

div.dropbox {
    width: calc(100% - 10px);
    height: 100px;
    border: 2px var(--custom_primary_color, var(--default_primary_color)) solid;
    border-radius: 10px;
    cursor: pointer;
}
div.dropbox span.dropbox_guide {
    font-size: 2em;
    font-weight: bold;
    width: 100%;
    height: 100%;
    text-align: center;
    color:var(--custom_primary_color, var(--default_primary_color));
    line-height: 2em;
    display: block;
}

div.dropbox:hover {
    border-color: var(--custom_tetriary_color, var(--default_tetriary_color));
}
div.dropbox:hover span.dropbox_guide {
    color: var(--custom_tetriary_color, var(--default_tetriary_color));
}

div.dropbox.dropping {
    border-color: var(--custom_tetriary_color, var(--default_tetriary_color));
    box-shadow: inset 0 0 8px 4px var(--custom_tetriary_color, var(--default_tetriary_color));
}

div.dropbox.dropping span.dropbox_guide {
    color: var(--custom_tetriary_color, var(--default_tetriary_color));
}

div.dropbox span.dropbox_guide span.not_dropping {
    display:inline;
}

div.dropbox span.dropbox_guide span.is_dropping {
    display:none;
}

div.dropbox.dropping span.dropbox_guide span.not_dropping {
    display:none;
}

div.dropbox.dropping span.dropbox_guide span.is_dropping {
    display:inline;
}



/* DROPBOX END */

/* ACTIONSTEP MAIN PAGE */

body.actionstep {
    max-height: 100vh;
    overflow-y: clip;
}

body.actionstep div#general_actions {
    display: inline-block;
    position: absolute;
    right: 5px;
    height: 35px;
}

body.actionstep.in-message div#general_actions {
    display: none;
}

body.actionstep div#actionstep_header {
    background-color: var(--custom_primary_color, var(--default_primary_color));
    color: var(--custom_primary_font_color, var(--default_primary_font_color));
    color: contrast-color(var(--custom_primary_color, var(--default_primary_color)));
    width: 100%;
    z-index: 999;
    height: 35px;
    line-height: 35px;
    padding-bottom: 4px;
}

body.actionstep div#actionstep_header div.logo_container {
    height: 35px;
    line-height: 35px;
    max-width: calc(100% - 90px);
    margin: 0;
    display: inline-block;
}

body.actionstep div#actionstep_header div.logo_container img.main {
    height: 35px;
    max-width: calc(100vw - 45px);
}

body.actionstep div#actionstep_header div.logo_container:has(img.power) {
    display: none;
}

body.actionstep i.button.button-selected {
    color: #fff;
    background-color: #314A75;
}

body.actionstep div#redirect-home {
    font-size: 2em;
    width: calc(100vw - 3em);
    margin-top: calc(40vh - 2em);
    margin-left: 1.5em;
    margin-right: 1.5em;
    padding: 0;
    line-height: 1.7em;
    position: relative;
}

body.actionstep div#redirect-home i.far {
    padding: 10px;
}

body.actionstep div#message_list {
    width: 95%;
    margin-left: 2.5%;
    position: relative;
    margin-top: 5px;
    margin-bottom: 10px;
    max-height: calc(100vh - 50px);
    overflow-y: auto;
}

body.actionstep.in-message a#record {
    display: none;
}

body.actionstep a#record {
    position: fixed;
    right: 5vw;
    bottom: 5vh;
    height: 2em;
    width: 2em;
    font-size: 2em;
    line-height: 2em;
    border-radius: 1em;
    padding: 0;
    margin: 0;
    transition: opacity .1s;
}

body.actionstep:has(#message_list tr:hover) a#record {
    opacity: .7;
}

body.actionstep div#message_list th i#refresh {
    padding-left: 15px;
}

body.actionstep div#message_list div.lds-roller {
    margin: 20vh 20vw;
}

body.actionstep div#message_list table {
    width: 100%;
}

body.actionstep div#message_list #top_bar {
    height: 30px;
    width: 100%;
    margin: 0 0 5px 0;
}

body.actionstep div#message_list #top_bar i:nth-child(1):not(span#message_actions i) {
    margin-right: 20px;
}

body.actionstep div#message_list #top_bar span#message_actions {
    float: right;
}

body.actionstep div#message_list audio {
    margin: 5px 0;
    width: 90%;
}
body.actionstep div#message_list textarea {
    width: 95%;
    height: min-content;
}

body.actionstep div#message_list pre {
    white-space: pre-wrap;
    word-break: break-word;
}

body.actionstep div#message_list > div {
    width: 100%;
    margin-top: 10px;
}

body.actionstep div#message_list span.comment_by.admin {
    color:#aa0000;
}

body.actionstep div#message_list span.comment_by.management {
    color:#ff5555;
}

body.actionstep div#message_list span.comment_by.customer {
    color:#00aaaa;
}
body.actionstep div#message_list span.comment_by.writer {
    color:#00aa00;
}

body.actionstep div#message_list span.comment_text pre {
    width: calc(100% - 50px);
    padding:0;
    margin:0;
    border:0;
    background:#ffffff;
}

/* ACTIONSTEP END */

table tr.large td {
    font-size: 1.1em;
}

/* TASKS EXTENSION */

task[task-id] {
    color: #636363;
    cursor: pointer;
}

task[task-id] i {
    text-decoration: none;
}

task[task-id]:hover {
    text-decoration: underline;
}

#path_info task[task-id] {
    color: inherit;
}

/* TASK EXTENSION END */



.simple_circle_icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: #d1e3ff;
    color: #1b5186;
    font-size: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.circle_recording {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(240, 81, 99, 0.4) 0%, rgba(240, 81, 99, 0.4) 60%, rgba(240, 81, 99, 0.4) 100%);
    animation: pulse 0.6s infinite ease-in-out;
}
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.7;
    }
}
.circle_recording_two {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(240,81,99,0.4) 0%, rgba(240, 81, 99, 0.4) 60%, rgba(240, 81, 99, 0.4) 100%);
    animation: pulse_two 0.6s infinite ease-in-out;
}
@keyframes pulse_two {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.7;
    }
}

.simple_circle_icon.red{
    color: white;
    background-color: #F05163;
}
.simple_circle_icon.green{
    color: white;
    background-color: #00A99D;
}
.simple_circle_icon.disabled {
    background-color: #aeaeae;
    cursor: not-allowed;
}
.simple_circle_icon_template {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: #ebf3ff;
    color: #4a94d6;
    font-size: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.simple_icon_template {
    width: 70px;
    height: 70px;
    color: #4a94d6;
    font-size: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.dictation_buttons {
    display: flex;
    gap: 100px;
    height:50px;
    justify-content: center;
    margin: 10px auto auto;
    text-align: center;
}
.center_topic {
    padding-top: 6px;
    font-size: 16px;
}
.dictation_buttons div{
    cursor: pointer;
    margin:auto;
}
.rounded_input {
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 6px;
    outline: none;
    border-color: #bcdef1;
    height:20px;
    font-weight: normal;
}
.rounded_input [type="text"]{
    width:100%;
    border-radius: 6px;
    outline: none;
    height:25px;
    border-color: #bcdef1;
}
.dictation_buttons_middle {
    display:flex;
    position:relative;
    justify-content: center;
    margin: 0px auto 20px;
    text-align: center;
    align-items: center;
    font-size: 16px;
    height:100px;
    width:100%;
}
.dictation_buttons_child {
    width:80px;
    height:80px;
    margin:50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}
.dictation_button_text {
    position: absolute;
    bottom:-10px;
}
.dictation_buttons div{
    cursor: pointer;
}
.bubble_left {
    float:left;
    width:100%;
    border-bottom:2px solid #ddd;
    text-align:right;
}
.bubble_right {
    float:right;
    width:100%;
    border-radius: 3px;
    border:1px solid #ddd;
    text-align:right;
}
.div_full_width {
    width: 100%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}
.div_vertical_line {
    width: calc(100% - 100px);
    border-bottom:2px solid #ddd;
}
.div_vertical_line_text {
    width:100px;
    padding:3px;
    border:2px solid #ddd;
}
.template_list {
    border-bottom:1px solid rgba(27, 81, 134, 0.4);
    width:calc(100% - 20px);
    float:left;
    text-align:left;
    font-size: 16px;
    cursor: pointer;
    padding:10px;
}
.template_list:hover {
    /*background-color: #f5f8ff;*/
}
.template_list table {

}
.template_select{
    margin-left:10px;
    font-size: 16px;
    line-height: 32px;
}
.template_select_bold{
    font-weight: bold;
}
.template_select_desc {
    font-style: normal;
    margin-left:10px;
    font-weight: normal;
    font-size: 16px;
    line-height: 32px;
    color: #828282;
    float:left;
}

.dictation_result {
    border:1px solid #ddd;
    width: calc(100% - 28px);
    border-radius: 5px;
    padding: 10px;
    margin: 10px auto auto;
    min-height:200px;
    height:350px;
    overflow-y: auto;
    vertical-align:middle;
    justify-content: center;
    align-items: center;
    outline: none;
}
.dictation_result:focus {
    border-color: #ccc;
}
#summary_info {
    font-size: 14px;
}
#snomedct_codes_wrapper {
    overflow-x: hidden;
}
.simple_view_codes .list {
    margin: 0;
    padding: 0;
}
.simple_view_codes .option_list_wide {
    margin: 0;
    padding: 0;
    box-shadow: none;
    border: none;
}
.simple_view_codes .option_list_wide > div {
    margin: 0;
    padding: 4px 6px;
}
.simple_view_codes .topic {
    font-size: 13px !important;
    padding: 2px 0;
}
.simple_view_codes table {
    table-layout: fixed;
    width: 100%;
    border-spacing: 0 4px;
}
.simple_view_codes .table_padding td {
    padding: 2px 2px;
    overflow: hidden;
}
.simple_view_codes .rounded_input {
    padding: 2px 0;
    margin: 0;
    height: auto;
    overflow: visible;
}
.simple_view_codes .rounded_input input {
    font-size: 12px;
    padding: 3px 6px;
    height: 22px;
    box-sizing: border-box;
}
.simple_view_codes .button {
    padding: 2px 6px;
    font-size: 12px;
}
.simple_view_codes:not(:empty) + #snomedct_codes_title {
    display: none;
}
/* Simple view layout */
.sv-buttons {
    flex-shrink: 0;
    height: auto;
    flex-wrap: wrap;
}
.sv-buttons .dictation_buttons_child {
    margin: 8px 10px;
    height: auto;
    width: auto;
    position: relative;
}
.sv-buttons .simple_circle_icon {
    width: 60px;
    height: 60px;
    font-size: 22px;
    position: relative !important;
}
.sv-buttons .dictation_button_text {
    position: static;
    margin-top: 4px;
    font-size: 12px;
    white-space: nowrap;
}
.sv-buttons #recording {
    width: 60px !important;
    height: 60px !important;
    position: absolute !important;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}
.sv-buttons .circle_recording,
.sv-buttons .circle_recording_two {
    width: 60px !important;
    height: 60px !important;
}
.sv-buttons .connecting-roller {
    transform: translate(-50%,-50%) scale(0.8);
}
.sv-panel-wrapper {
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 350px;
    width: 100%;
    overflow: hidden;
}
.sv-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    border-bottom: 1px solid #E5E7EB;
    background: #f8f9fa;
    flex-shrink: 0;
}
.topic.sv-panel-header {
    margin: 0;
    height: auto;
    overflow: visible;
}
.sv-panel-content {
    flex: 1;
    padding: 12px;
    overflow-y: auto;
    width: 100%;
    box-sizing: border-box;
    border-radius: 0 !important;
}
/* Facts card styling */
.sv-facts {
    padding: 12px;
    overflow-x: hidden;
}
.sv-facts .fact-section {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    margin-bottom: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    width: 100%;
    box-sizing: border-box;
}
.sv-facts .fact-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #f0f4f8, #e8ecf2);
    border-bottom: 1px solid #E5E7EB;
    padding: 6px 12px;
}
.sv-facts .fact-header strong {
    font-size: 12px;
    color: #444;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.sv-facts .fact-header .copy-btn {
    cursor: pointer;
    color: #999;
    flex-shrink: 0;
}
.sv-facts .fact-header .copy-btn:hover {
    color: #555;
}
.sv-facts .fact-content {
    padding: 6px 12px;
}
.sv-facts .fact-item {
    position: relative;
    padding: 4px 24px 4px 0;
    font-size: 13px;
    line-height: 1.5;
    border-bottom: 1px solid #f0f0f0;
}
.sv-facts .fact-item:last-child {
    border-bottom: none;
}
.sv-facts .fact-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    cursor: pointer;
    color: #ccc;
    font-size: 16px;
    line-height: 1;
    font-weight: bold;
    display: none;
}
.sv-facts .fact-item:hover .fact-remove {
    display: block;
    color: #e74c3c;
}
/* Shared card styling for codes/tasks/template (simple_view) */
.sv-card .list {
    margin: 0;
    padding: 0;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    margin-top: 20px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.sv-card .option_list_wide {
    margin: 0;
    padding: 0;
    box-shadow: none;
    border: none;
}
.sv-card .option_list_wide > div {
    margin: 0 !important;
    padding: 8px 12px !important;
}
.sv-card .sv-panel-header {
    margin: -8px -12px 8px -12px;
    border-radius: 0;
}
.sv-card .sv-panel-header input[hidden] {
    display: none;
}
.sv-card .sv-panel-header form[hidden] {
    display: none !important;
}
.sv-card .sv-panel-header .button {
    font-size: 14px !important;
    padding: 2px 5px;
}
.sv-card .fact-remove {
    cursor: pointer;
    color: #ccc;
    font-size: 18px;
    line-height: 1;
    font-weight: bold;
    transition: color 0.15s;
    position: static;
    display: inline-block;
    flex-shrink: 0;
}
.sv-card .fact-remove:hover {
    color: #e74c3c;
}
/* Codes specific */
.sv-codes .copy-btn {
    top: 60% !important;
}
.sv-codes {
    overflow: visible;
}
.sv-codes .list {
    overflow: visible;
}
.sv-codes .table_padding {
    width: 100%;
    border-spacing: 0 0 !important;
    border-collapse: collapse;
}
.sv-codes .table_padding tr {
    border-bottom: 1px solid #f0f0f0;
}
.sv-codes .table_padding tr:last-child {
    border-bottom: none;
}
.sv-codes .table_padding td {
    padding: 6px 0;
}
.sv-codes .table_padding .rounded_input {
    margin: 0;
    padding: 0;
    border: none;
    box-shadow: none;
}
.sv-codes .table_padding input[type="text"] {
    font-size: 13px;
    padding: 4px 8px;
    border: 1px solid #E5E7EB;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
}
.sv-codes .table_padding .button {
    font-size: 12px;
    padding: 2px 6px;
}
/* Tasks specific */
.sv-tasks .task_item {
    padding: 4px 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
}
.sv-tasks .task_item:last-child {
    border-bottom: none !important;
}
.sv-tasks .task_item .rounded_input {
    margin: 0;
    padding: 0;
    border: none;
    box-shadow: none;
}
.sv-tasks .task_item input[type="text"] {
    font-size: 13px;
    padding: 4px 8px;
    border: 1px solid #E5E7EB;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
}
.sv-tasks .task_item .button {
    font-size: 12px;
    padding: 2px 6px;
}
.sv-tasks .select2-container {
    font-size: 13px;
}
/* Template specific */
.sv-template div[id^="real"] {
    font-size: 13px;
    line-height: 1.6;
    color: #333;
}
.sv-template div[id^="real"] h4,
.sv-template div[id^="real"] h5,
.option_list_wide div[id^="real"] h5 {
    font-size: 13px;
    font-weight: bold;
    color: #444;
    margin: 8px 0 4px 0;
}
#system_send_dictation .rounded_input {
    padding-top: 6px;
    padding-bottom: 6px;
    margin-bottom: 6px;
    height: auto;
}
.dictation_main {
    width: 50%;
    padding: 10px;
    margin: 100px auto auto;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.102);
    border-radius: 4px;
    position: relative;
}
.main_topic {
    font-size:22px;
    text-align:center;
    padding-top:16px;
}

.connecting-roller {
    position: absolute;
    width: 64px;
    height: 64px;
    transform-origin: center;
}
.connecting-roller div {
    animation: connecting-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    transform-origin: 32px 32px;
}
.connecting-roller div:after {
    content: " ";
    display: block;
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #002b56;
    margin: -3px 0 0 -3px;
}
.connecting-roller div:nth-child(1) {
    animation-delay: -0.036s;
}
.connecting-roller div:nth-child(1):after {
    top: 50px;
    left: 50px;
}
.connecting-roller div:nth-child(2) {
    animation-delay: -0.072s;
}
.connecting-roller div:nth-child(2):after {
    top: 54px;
    left: 45px;
}
.connecting-roller div:nth-child(3) {
    animation-delay: -0.108s;
}
.connecting-roller div:nth-child(3):after {
    top: 57px;
    left: 39px;
}
.connecting-roller div:nth-child(4) {
    animation-delay: -0.144s;
}
.connecting-roller div:nth-child(4):after {
    top: 58px;
    left: 32px;
}
.connecting-roller div:nth-child(5) {
    animation-delay: -0.18s;
}
.connecting-roller div:nth-child(5):after {
    top: 57px;
    left: 25px;
}
.connecting-roller div:nth-child(6) {
    animation-delay: -0.216s;
}
.connecting-roller div:nth-child(6):after {
    top: 54px;
    left: 19px;
}
.connecting-roller div:nth-child(7) {
    animation-delay: -0.252s;
}
.connecting-roller div:nth-child(7):after {
    top: 50px;
    left: 14px;
}
.connecting-roller div:nth-child(8) {
    animation-delay: -0.288s;
}
.connecting-roller div:nth-child(8):after {
    top: 45px;
    left: 10px;
}
@keyframes connecting-roller {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


.lds-heart {
    display: inline-block;
    position: relative;
    width: 64px;
    height: 64px;
    transform: rotate(45deg);
    transform-origin: 32px 32px;
    margin-top: 50px;
}
.lds-heart div {
    top: 23px;
    left: 19px;
    position: absolute;
    width: 26px;
    height: 26px;
    background: #f22;
    animation: lds-heart 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}
.lds-heart div:after,
.lds-heart div:before {
    content: " ";
    position: absolute;
    display: block;
    width: 26px;
    height: 26px;
    background: #f22;
}

.lds-heart div:before {
    left: -17px;
    border-radius: 50% 0 0 50%;
}
.lds-heart div:after {
    top: -17px;
    border-radius: 50% 50% 0 0;
}
@keyframes lds-heart {
    0% {
        transform: scale(0.95);
    }
    5% {
        transform: scale(1.1);
    }
    39% {
        transform: scale(0.85);
    }
    45% {
        transform: scale(1);
    }
    60% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(0.9);
    }
}
.small_circle_info {
    border-radius: 6px;
    outline: none;
    height:20px;
    padding: 10px 20px;
    font-size: 16px;
    border:1px solid #bcdef1;
    text-align: left;
}

.template_odd {
    background-color: #ffffff;
}
.template_even {
    background-color: #f4f4f4;
}
/* APP LOGIN */

body.app_login {
    max-height: 100vh;
    overflow-y: clip;
    background-image: none;
}

body.app_login dialog {
    zoom: 3;
}

body.app_login div#app_login_container {
    width: 100vw;
    height: 100%;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 0;
    flex-wrap: nowrap;
}

body.app_login p.header {
    max-height: 20vh;
    flex: 0;
    flex-basis: 25%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    width: 80%;
    margin: 0 10%;
}

body.app_login p.header img {
    width: 90%;
    height: max-content;
    max-height: 100%;
    margin: 0;
    padding: 0;
}

body.app_login p.header p.logo_container {
    height: 100%;
    justify-content: center;
    align-items: center;
    width: fit-content;
    margin: 0;
    padding: 0;
}

body.app_login div#app_login_container form {
    min-width: 300px;
    width: auto;
    background: transparent;
}

body.app_login div#app_login_container p img.tip {
    zoom: 2.5;
}

body.app_login .button-success {
    background-color: #314a75;
}

body.app_login div#app_login_container p.flex {
    flex: 0;
    flex-basis: max-content;
    width: 90%;
    min-width: 50px;
    align-self: center;
    text-align: center;
}

body.app_login div#app_login_container p.flex b {
    font-size: 3em;
}

body.app_login div#app_login_container p.flex.cancel {
    margin-top: auto;
    margin-bottom: 6em;
}

body.app_login div#app_login_container p.flex a,
body.app_login div#app_login_container p.flex label {
    font-size: 3em;
    line-height: 3em;
    width: 100%;
    float: none;
    padding: 0;
    margin: 0;
    border-radius: 1em;
}

body.app_login div#app_login_container p.flex label {
    text-align: left;
    line-height: 2em;
}

body.app_login div#app_login_container p.flex button {
    font-size: 3em;
    line-height: 3em;
    width: 100%;
    border-radius: 1em;
    padding: 0;
    margin: 3vh 0;
}

body.app_login div#app_login_container p.flex button.half {
    width: 40%;
    margin-left: 4%;
    margin-right: 4%;
    display: inline-block;
}

body.app_login div#app_login_container p.flex input {
    width:100%;
    background: transparent;
    height: 3em;
    font-size: 3em;
    border: 0;
    border-bottom: 2px #314a75 solid;
    box-sizing: border-box;
    padding-left: 0.5em;
}

body.app_login div#app_login_container p.flex:has(a#qr_code) {
    flex-basis: 25%;
}

body.app_login div#app_login_container p.flex a#qr_code canvas {
    height: 100%;
}

body.app_login div#app_login_container table.password {
    zoom: 3;
    width: 90%;
    margin: 0 5%;
    padding: 5%;
    box-shadow: none;
}

body.app_login div#app_login_container table.password tr:last-child td {
    padding-top: .5em;
}

body.app_login div#app_login_container table.password td + td {
    padding-left: .5em;
}

body.app_login div#notification_bar {
    top: 2em;
}

body.app_login div.error_notification,
body.app_login div.success_notification {
    font-size: 3em;
    width: 90%;
}


.te-layout { display: flex; gap: 20px; }
.te-sidebar { width: 280px; flex-shrink: 0; }
.te-main { flex: 1; min-width: 0; }

.te-palette-group { border-bottom: 1px solid #f0f0f0; }
.te-palette-group:last-child { border-bottom: none; }
.te-palette-header { padding: 8px 12px; font-size: 12px; font-weight: 600; color: #666; text-transform: uppercase; background: #fafafa; }

.te-token-list { padding: 6px 10px 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.te-token { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 500; cursor: grab; user-select: none; border: 1px solid rgba(0, 0, 0, 0.1); }
.te-token:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); }
.te-token:active { cursor: grabbing; }

.te-toolbar { padding: 10px 16px; border-bottom: 1px solid #eee; display: flex; gap: 10px; align-items: center; }
.te-toolbar input { flex: 1; }

.te-content { min-height: 300px; padding: 16px; outline: none; font-size: 14px; line-height: 1.8; overflow-y: auto; max-height: 500px; }
.te-content:empty::before { content: attr(data-placeholder); color: #aaa; pointer-events: none; }
.te-content.drag-over { background: #f0f7ff; }
.te-content .te-chip { display: inline-flex; align-items: center; padding: 2px 6px 2px 10px; border-radius: 16px; font-size: 12px; font-weight: 500; margin: 0 2px; vertical-align: baseline; cursor: default; border: 1px solid rgba(0, 0, 0, 0.1); white-space: nowrap; }

.te-tabs { display: flex; border-bottom: 1px solid #e0e0e0; }
.te-tab { padding: 10px 20px; cursor: pointer; font-size: 13px; color: #666; border-bottom: 2px solid transparent; user-select: none; }
.te-tab:hover { color: #333; }
.te-tab.active { color: #4a90e2; border-bottom-color: #4a90e2; font-weight: 600; }
.te-actions-right { display: flex; justify-content: flex-end; margin-bottom: 10px; }

.docx-preview-host { background: #eef0f3; padding: 16px; max-height: 80vh; overflow: auto; border-top: 1px solid #e0e0e0; }
.docx-preview-host > [class$="-wrapper"] { background: transparent !important; padding: 0 !important; align-items: safe center !important; }
.docx-preview-host > [class$="-wrapper"] > section { background: #fff !important; margin: 0 0 16px !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15) !important; }
.docx-preview-host .stp-input { display: inline-block; vertical-align: middle; border: 1px solid #90b7e3; border-radius: 4px; padding: 3px 8px; margin: 2px 0; min-width: 60px; text-indent: 0; background: #e3f0fd; color: #1a4f8b; font: inherit; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; }
.docx-preview-host .stp-input:focus { border-color: #1976d2; background: #fff; color: inherit; outline: none; }
.docx-preview-host .stp-input:empty:before { content: attr(data-placeholder); color: #999; opacity: 0.6; }
.docx-preview-host .stp-check { width: 14px; height: 14px; vertical-align: middle; margin: 0 2px; cursor: pointer; }
.docx-preview-host .stp-select { display: inline-block; border: 1px solid #90b7e3; border-radius: 4px; padding: 0 22px 0 6px; min-width: 80px; max-width: 100%; font: inherit; line-height: inherit; background: #e3f0fd; color: #1a4f8b; vertical-align: baseline; box-sizing: border-box; cursor: pointer; }
.docx-preview-host .stp-select:focus { outline: none; border-color: #1976d2; background: #fff; }

.stp-acc {
    display: inline-grid;
    place-items: center;
    min-width: 30px;
    height: 20px;
    line-height: 1;
    font-size: 12px;
    font-weight: 700;
    padding: 0 6px;
    border-radius: 10px;
    background: #f0f4f8;
    border: 1px solid #d4dde6;
    color: #455a64;
    margin: 0 4px 0 6px;
    cursor: help;
    vertical-align: middle;
    white-space: nowrap;
    box-sizing: border-box;
    text-align: center;
    text-indent: 0;
}
.stp-acc.lo { color: #c33; }
.stp-acc.hi { color: #1b6b1b; }

.docx-preview-host .stp-acc { display: none; }
.docx-preview-host.show-accuracy .stp-acc { display: inline-grid; }

.docx-preview-host tr[data-row-group] td:first-child { position: relative; }
.docx-preview-host .stp-row-remove { float: right; margin-left: 8px; color: #c33; cursor: pointer; font-weight: bold; opacity: 0.35; padding: 0 4px; }
.docx-preview-host tr[data-row-group]:hover .stp-row-remove { opacity: 1; }
.docx-preview-host tr.stp-add-row td { background: #f7f9fc; border: 1px dashed #cfd8e3; padding: 4px; text-align: center; }
.docx-preview-host .stp-add-btn { background: none; border: none; color: #1976d2; font-size: 12px; cursor: pointer; padding: 2px 8px; }
.docx-preview-host .stp-add-btn:hover { text-decoration: underline; }

.show-accuracy-btn.active { background: #cfe2ff; }

/* Transcript-with-timestamps panel*/
mark.transcript-segment { background: transparent; color: inherit; padding: 0 2px; border-radius: 3px; cursor: pointer; transition: background-color 0.15s; }
mark.transcript-segment:hover { background: #fff8c4; }
mark.transcript-segment.transcript-active { background: #ffd54f; box-shadow: 0 0 0 1px #f9a825; }
mark.transcript-segment.transcript-evidence-hover { background: #bbdefb; box-shadow: 0 0 0 1px #1976d2; }
mark.transcript-segment.transcript-evidence-selected { background: #90caf9; box-shadow: 0 0 0 2px #1565c0; }
.stp-acc[data-ranges-ms] { cursor: pointer; }
.stp-acc.evidence-chip-active { box-shadow: 0 0 0 2px #1565c0; border-radius: 4px; }
.transcript-player audio { width: 100%; }

.transcript-edit-only { display: none; }
#realtranscript.is-editing .transcript-edit-only { display: inline-block; }
#realtranscript.is-editing .transcript-speaker-label {
    border-bottom: 1px dashed #bbb;
    padding: 0 2px;
    outline: none;
    cursor: text;
}
#realtranscript.is-editing mark.transcript-segment { cursor: text; }
#realtranscript.is-editing mark.transcript-segment:hover { background: transparent; }

.sv-panel-wrapper.transcript-editing-mode .transcript-view-only {
    display: none !important;
}

body.app_login div#app_login_container p.flex canvas {
    width: 50%;
}

/* Split button with dropdown */
.btn-split {
    display: inline-block;
    position: relative;
}

.btn-split > .button,
.btn-split > .button-success,
.btn-split > .button-danger {
    padding-right: 38px;
    anchor-name: --btn-split-anchor;
}

.btn-split-toggle {
    display: inline-block;
    margin-left: 8px;
    padding-left: 5px;
    border-left: 1px inset rgba(0,0,0,0.2);
    cursor: pointer;
    height: calc(100% - 8px);
    position: absolute;
    top: 1px;
    padding-top: 5px;
    padding-right: 5px;
    width: 20px;
}

.btn-split-toggle i {
    font-size: 1.1em;
    vertical-align: middle;
}

.btn-split-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    position: fixed;
    position-anchor: --btn-split-anchor;
    top: anchor(bottom);
    left: anchor(left);
    z-index: 100;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    min-width: 100%;
    min-width: anchor-size(width);
    margin-top: 2px;
}

.btn-split-dropdown-header {
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
    font-weight: bold;
    font-size: 0.9em;
    color: #666;
}

.btn-split-dropdown-item {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
    color: #333;
}

.btn-split-dropdown-item:hover {
    background: #f0f0f0;
}

.btn-split-dropdown-footer {
    border-top: 1px solid #eee;
}

.btn-split-dropdown-footer a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
    color: #666;
    font-size: 0.9em;
}

.btn-split-dropdown-footer a:hover {
    background: #f0f0f0;
}

.btn-split-dropdown-empty {
    padding: 6px 12px;
    color: #999;
    font-size: 0.9em;
}

.structured-form-panel .sf-sections { display: flex; flex-direction: column; gap: 12px; }
.structured-form-panel .sf-section-card {
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    padding: 10px 12px;
    background: #fff;
}
.structured-form-panel .sf-section-title {
    font-weight: 600;
    color: #1976d2;
    font-size: 13px;
    margin-bottom: 4px;
}
.structured-form-panel .sf-section-desc {
    font-size: 11px;
    color: #888;
    margin-bottom: 8px;
    font-style: italic;
}
.structured-form-panel .sf-field {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 6px 0;
    flex-wrap: wrap;
}
.structured-form-panel .sf-field-label {
    flex: 0 0 140px;
    font-size: 12px;
    color: #444;
    padding-top: 4px;
}
.structured-form-panel .sf-field-input {
    flex: 1 1 0;
    min-width: 200px;
}
.structured-form-panel .sf-field-input input[type="text"],
.structured-form-panel .sf-field-input input[type="date"],
.structured-form-panel .sf-field-input input[type="number"] {
    width: 100%;
    box-sizing: border-box;
    padding: 4px 6px;
    border: 1px solid #cfd8e3;
    border-radius: 4px;
    font-size: 12px;
}
.structured-form-panel .sf-option {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 12px;
    font-size: 12px;
    color: #333;
    cursor: pointer;
}
.structured-form-panel .sf-option input { cursor: pointer; margin: 0; }
.structured-form-panel .sf-confidence-chip {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 8px;
    background: #eef3f8;
    border: 1px solid #cfd8e3;
    color: #555;
    align-self: center;
}
.structured-form-panel .sf-confidence-chip.hi { color: #1b6b1b; background: #e8f5e9; border-color: #a5d6a7; }
.structured-form-panel .sf-confidence-chip.lo { color: #c33; background: #fdecea; border-color: #ef9a9a; }

/* Detected transcript corrections list in the actions panel: the misheard word
   and the corrected word as two distinct pills, save button at the right edge. */
.kt-change-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 12px;
    color: #324470;
}
.kt-change-row + .kt-change-row { border-top: 1px solid #EDF0F5; }
.kt-change-words {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.kt-pill {
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 12px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kt-pill--old {
    background: #F1F3F7;
    border: 1px solid #D6DCE6;
    color: #8A94A6;
    text-decoration: line-through;
}
.kt-pill--new {
    background: #324470;
    border: 1px solid #324470;
    color: #FFFFFF;
}
.kt-change-save,
.kt-change-saved {
    flex: 0 0 auto;
    font-size: 14px;
    padding: 2px 4px;
}
.kt-change-save {
    color: #324470;
    cursor: pointer;
}
.kt-change-save:hover { color: #156FBE; }
.kt-change-save.is-saving { opacity: 0.5; cursor: default; }
.kt-change-saved { color: #2e7d32; }

/* Writer view: template pills are display-only (selection state), never clickable. */
.dict-writer-view .dict-tpl-pill {
    pointer-events: none;
}

/* Writer corti canvas view (write_silk.tpl fragment in writer.php's #queue_div):
   the classic write layout is hidden but kept in the DOM for the writer JS. */
#queue_div:has(.dict-writer-view) .write_silk_tabs_container,
#queue_div:has(.dict-writer-view) #main .left-column-dictation,
#queue_div:has(.dict-writer-view) #main .right-column-dictation,
#queue_div:has(.dict-writer-view) #main > .topic {
    display: none !important;
}
/* The tab bar is hidden in this view, so #main's tab-divider border is noise; the
   ±20px margins/padding existed to counter the right column's padding, gone below. */
#queue_div:has(.dict-writer-view) #main.write_silk_tab_content {
    border-top: none;
    margin: 0;
    padding: 0;
}
/* No white frame around the canvas: the writer right column goes flush (its 270px
   left margin for the group menu stays untouched). */
.has-left-menu .right-column:has(.dict-writer-view) {
    background: #F4F6FA;
    padding: 0;
    box-shadow: none;
}
/* ...and the host page's breadcrumbs/submenu above #queue_div: the right column
   shows only the canvas. Live :has(), so they return when the list view is back. */
.right-column:has(.dict-writer-view) > .path_info,
.right-column:has(.dict-writer-view) > .path_info_leaf,
.right-column:has(.dict-writer-view) > .path_separator,
.right-column:has(.dict-writer-view) > br,
.right-column:has(.dict-writer-view) > .submenu {
    display: none !important;
}

/* Writer view: the classic right-buttons rendered as pills in the canvas actions
   panel (moved there by write_silk.tpl's corti block). */
.dict-writer-action-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.dict-writer-action-pills .button {
    background: transparent;
    color: #324470;
    border: 1px solid #324470;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    line-height: normal;
    cursor: pointer;
    float: none;
    margin: 0 !important;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.dict-writer-action-pills .button:hover { background: rgba(50,68,112,0.08); }
.dict-writer-action-pills .button-success { border-color: #2e7d32; color: #2e7d32; }
.dict-writer-action-pills .button-success:hover { background: rgba(46,125,50,0.08); }
.dict-writer-action-pills .button-danger { border-color: #C0392B; color: #C0392B; }
.dict-writer-action-pills .button-danger:hover { background: rgba(192,57,43,0.08); }

.dict-canvas {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 15px;
    box-sizing: border-box;
    width: 100%;
    background: #F4F6FA;
    overflow-x: hidden;
}

/* Page-flattening for the standalone canvas page (system_dictation.php / read.php).
   Scoped away from .has-left-menu layouts: on the writer page the canvas is embedded
   in the normal list layout, which must keep its own padding/margins/card look. */
body:has(.content:not(.has-left-menu) .dict-canvas) {
    background: #F4F6FA;
}
.content:not(.has-left-menu):has(.dict-canvas) {
    padding: 0 !important;
    min-height: 0 !important;
    background: #F4F6FA;
    box-sizing: border-box;
}
.content:not(.has-left-menu):has(.dict-canvas) > div,
#view_home:has(.dict-canvas) {
    min-height: 0 !important;
}
.content:not(.has-left-menu) .right-column:has(.dict-canvas) {
    background: #F4F6FA;
    box-shadow: none;
    border-radius: 0;
    margin: 0;
    padding: 0;
    min-height: 0;
    height: auto;
}
#view_record { background: #F4F6FA; }
#view_record #system_send_dictation { margin: 0; }

.dict-grid {
    display: flex;
    gap: 12px;
    align-items: stretch;
    width: 100%;
}
.dict-left-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.dict-grid > .dict-col-splitter {
    flex: 0 0 6px;
    align-self: stretch;
    width: 6px;
    background: #E5E7EB;
    border-radius: 3px;
    cursor: col-resize;
    transition: background 0.12s ease;
    margin: 0;
}
.dict-grid > .dict-col-splitter:hover,
.dict-grid > .dict-col-splitter.is-dragging {
    background: #2563eb;
}

.dict-main-content .sv-panel-wrapper {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
}
.dict-main-content .sv-panel-header {
    border-bottom: none;
    background: #FFFFFF;
}

.dict-top-row {
    display: flex;
    gap: 12px;
    align-items: stretch;
    flex-wrap: wrap;
}
/* One panel holding the record header + patient info, with the record/upload
   controls as a section on the right. */
.dict-info-col {
    flex: 1 1 100%;
    min-width: 320px;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 16px;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(16,24,40,0.05);
    padding: 12px 16px;
    box-sizing: border-box;
    min-height: 66px;
}
.dict-info-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.dict-info-col .dict-record-card {
    flex: 0 0 auto;
    min-width: 240px;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 7px 0 0 16px;
    align-items: flex-start;
}
/* Resume view: divider between the record header and the patient inputs. */
.dict-rec-header + .dict-rec-meta-patient {
    border-top: 1px solid #F0F1F3;
    padding-top: 8px;
    margin-top: 8px;
}

.dict-rec-input {
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    background: #fff;
    font-size: 13px;
    color: #374151;
    padding: 5px 8px;
    width: 160px;
    max-width: 100%;
    box-sizing: border-box;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.dict-rec-input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.dict-rec-input[readonly] {
    background: #F9FAFB;
    border-color: #F0F1F3;
    cursor: default;
}
.dict-rec-input[readonly]:focus { border-color: #F0F1F3; box-shadow: none; }
.dict-rec-input::placeholder { color: #C4C8CE; }
.dict-rec-header-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.dict-rec-id {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    letter-spacing: 0.01em;
}
.dict-rec-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
    align-items: flex-start;
}
.dict-rec-meta-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.dict-rec-meta-patient {
    flex-wrap: nowrap;
    gap: 12px;
}
.dict-rec-meta-patient .dict-rec-meta-col {
    flex: 1 1 0;
}
.dict-rec-meta-patient .dict-rec-input {
    width: 100%;
}
.dict-rec-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #9CA3AF;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dict-rec-value {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    white-space: nowrap;
}
.dict-rec-ic { color: #9CA3AF; margin-right: 2px; }
.dict-rec-pill {
    display: inline-block;
    align-self: flex-start;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
}
.dict-rec-pill.is-draft   { background: #DCFCE7; color: #166534; }
.dict-rec-pill.is-pending { background: #FEF3C7; color: #92400E; }
.dict-rec-pill.is-done    { background: #DBEAFE; color: #1E40AF; }
.dict-rec-pill.is-other   { background: #F3F4F6; color: #374151; }
.dict-record-card {
    flex: 1 1 0;
    min-width: 260px;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    padding: 6px 10px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 16px;
    min-height: 0;
    box-sizing: border-box;
}
.dict-record-controls {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
}
.dict-tab-pane .dictation_result {
    margin: 0;
    width: 100%;
    height: auto;
    padding: 4px 6px;
    border: none;
    min-height: 0;
}
.transcript-interim {
    color: #9CA3AF;
    font-style: italic;
}
.dict-tab-pane[data-tab="transcript"] .sv-panel-header,
.dict-tab-pane[data-tab="cleaned"] .sv-panel-header,
.dict-tab-pane[data-tab="history"] .sv-panel-header,
.dict-tab-pane[data-tab="facts"] .sv-panel-header {
    background: #FFFFFF;
    border-bottom: 1px solid #E5E7EB;
    padding: 6px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.dict-tab-pane[data-tab="templates"] .sv-panel-header {
    border-bottom: 1px solid #E5E7EB;
}
.sv-panel-title {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6B7280;
}
.dict-tab-pane[data-tab="transcript"] #websocket_message,
.dict-tab-pane[data-tab="facts"] #websocket_facts {
    background: #FAFBFC;
}
.dict-tab-pane[data-tab="codes"] .list {
    margin: 0;
    padding: 0;
    border: none;
    box-shadow: none;
    background: transparent;
}
.dict-tab-pane[data-tab="codes"] .list + .list { margin-top: 16px; }
.dict-tab-pane[data-tab="codes"] #snomedct_codes { overflow-x: hidden; }
.dict-tab-pane[data-tab="codes"] .fact-remove {
    position: static;
    flex-shrink: 0;
    margin-left: 8px;
}
.dict-tab-pane[data-tab="codes"] .topic.sv-panel-header {
    background: transparent;
    border-bottom: 1px solid #E5E7EB;
    padding: 0 0 6px 0;
    margin-bottom: 8px;
}
.dict-tab-pane[data-tab="codes"] .topic.sv-panel-header > span:first-child {
    font-weight: 600;
    color: #111827;
    font-size: 13px;
}

.dict-record-controls .dictation_buttons_child,
.dict-file-upload .dropbox {
    position: relative;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto !important;
    height: 40px !important;
    min-height: 40px;
    margin: 0 !important;
    padding: 0 22px !important;
    border-radius: 999px;
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.12s, color 0.12s, box-shadow 0.12s;
    line-height: 1;
    white-space: nowrap;
    font-size: 14px;
    vertical-align: middle;
}
.dict-record-controls .dictation_buttons_child {
    background: #F05163;
    border: 2px solid #F05163;
    color: #fff;
    order: 0;
}
.dict-record-controls .dictation_buttons_child:hover {
    background: #d8455a;
    border-color: #d8455a;
    box-shadow: 0 2px 6px rgba(240, 81, 99, 0.25);
}
.dict-record-controls .dictation_buttons_child .simple_circle_icon {
    position: relative !important;
    width: auto !important;
    height: auto !important;
    font-size: 14px !important;
    margin: 0 !important;
    flex: 0 0 auto;
    background: transparent !important;
    color: #fff !important;
    border-radius: 0 !important;
    order: 0;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center;
}
.dict-record-controls .dictation_button_text {
    position: static !important;
    bottom: auto !important;
    top: auto !important;
    font-size: 14px !important;
    font-weight: 600;
    color: #fff;
    line-height: 1 !important;
    order: 1;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center;
}
.dict-record-controls #recording {
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    transform: none;
    border-radius: 999px;
    pointer-events: none;
    overflow: visible;
}
.dict-record-controls .circle_recording,
.dict-record-controls .circle_recording_two {
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    border-radius: 999px !important;
    pointer-events: none;
}
.dict-record-controls .dictation_buttons_child .connecting-roller {
    display: none !important;
}
.dict-record-controls .dictation_buttons_child:has(.connecting-roller) {
    overflow: hidden;
}
.dict-record-controls .dictation_buttons_child:has(.connecting-roller)::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0) 35%,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(255, 255, 255, 0) 65%,
        transparent 100%);
    animation: pill-loading-sweep 1.2s linear infinite;
    pointer-events: none;
}
.is-loading {
    position: relative;
    overflow: hidden;
}
.is-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.15) 25%,
        rgba(255, 255, 255, 0.85) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        rgba(255, 255, 255, 0) 100%);
    animation: pill-loading-sweep 1s linear infinite;
    pointer-events: none;
    border-radius: inherit;
    mix-blend-mode: overlay;
}
@keyframes btn-spin {
    to { transform: rotate(360deg); }
}
@keyframes pill-loading-sweep {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.dict-file-upload {
    min-width: 0;
    max-width: 320px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.dict-file-upload > div[id^="file_dropper_"] { width: 100%; display: block; }
.dict-file-upload div.dropbox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
}
/* SINGLE-file dropper only: an attached file swaps the upload button for a
   filename chip OVERLAID on the button's slot. The button keeps its footprint
   (visibility, not display), so the card, and the patient inputs next to it,
   never change width or height in any state. Clicking the chip (or its ×)
   removes the file, which brings the button back. (Multi-file droppers keep
   the button so more can be added.) */
.dict-file-upload .single-file { position: relative; }
.dict-file-upload .single-file:has(.dropbox_files li) .dropbox { visibility: hidden; }
.dict-file-upload ul.dropbox_files {
    margin: 0;
    padding: 0;
    list-style: none;
}
.dict-file-upload .single-file ul.dropbox_files {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: block;
}
.dict-file-upload .single-file ul.dropbox_files li {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    width: 100%;
    padding: 0 14px;
    border: 2px solid #E5E7EB;
    border-radius: 999px;
    background: #F9FAFB;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    box-sizing: border-box;
    overflow: hidden;
}
.dict-file-upload .single-file ul.dropbox_files li .file-name {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dict-file-upload .single-file ul.dropbox_files li i {
    flex: 0 0 auto;
    margin-left: 0;
    opacity: 1;
    color: #C0392B;
}
.dict-file-upload .dropbox {
    background: transparent;
    border: 2px solid #2563eb;
    color: #2563eb;
    padding: 0 14px;
}
.dict-file-upload .dropbox:hover {
    background: rgba(37, 99, 235, 0.08);
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.18);
}
.dict-file-upload .dropbox.dropping {
    background: rgba(37, 99, 235, 0.12);
    border-color: #1d4fce;
}
.dict-file-upload .dropbox_guide,
.dict-file-upload div.dropbox span.dropbox_guide {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto !important;
    height: auto !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #2563eb !important;
    line-height: 1 !important;
    white-space: nowrap;
    text-align: left !important;
}
.dict-file-upload:hover .dropbox_guide { color: #2563eb !important; }
.dict-file-upload .dropbox_guide i { display: none; }
.dict-file-upload .is_dropping { display: none; }
.dict-file-upload .dropbox.dropping .not_dropping { display: none; }
.dict-file-upload .dropbox.dropping .is_dropping { display: inline; }
.dict-file-upload .dropbox_files:empty,
.dict-file-upload .dropbox_files:not(:has(li)) { display: none; }
.dict-file-upload [id^="file_dropper_"] {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}
.dict-file-upload [id^="file_dropper_"] > * { line-height: 1; }

.dict-tabs-row {
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    gap: 10px;
    padding: 0 4px;
}
.dict-tabs-wrap {
    display: flex;
    align-items: stretch;
    min-width: 0;
}
.dict-tabs {
    display: flex;
    flex: 1;
    align-items: stretch;
    gap: 0;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.dict-tabs::-webkit-scrollbar { display: none; }
/* Overflow indicators, shown by dict_tabs_scroll_update() only when tabs don't fit. */
.dict-tabs-scroll {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    color: #6B7280;
    font-size: 12px;
    padding: 0 8px;
    cursor: pointer;
}
.dict-tabs-scroll:hover { color: #111827; }
.dict-tab {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 0 16px;
    font-size: 13px;
    color: #6B7280;
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    transition: color 0.12s, border-color 0.12s;
}
.dict-tab:hover { color: #374151; }
.dict-tab.active {
    color: #111827;
    border-bottom-color: #156FBE;
    font-weight: 600;
}
.dict-tab[hidden] { display: none; }
.dict-tab-badge {
    display: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2563eb;
    margin-left: 6px;
    vertical-align: middle;
}
.dict-tab.has-badge .dict-tab-badge { display: inline-block; }
.dict-tab-count {
    display: inline-block;
    margin-left: 6px;
    min-width: 18px;
    padding: 0 6px;
    height: 18px;
    line-height: 18px;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    color: #FFFFFF;
    background: #2563eb;
    border-radius: 9px;
    vertical-align: middle;
}
/* Tab holding content that still needs Confirm (blocks sending). The count
   circle / badge dot goes red like the Confirm button; back to blue once
   confirmed. Tab text keeps its normal colors. */
.dict-tab.dict-tab--unconfirmed .dict-tab-count,
.dict-tab.dict-tab--unconfirmed .dict-tab-badge { background: #C0392B; }

.dict-send-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 200px;
    padding: 0;
    margin: 0 0 20px 0;
}
/* Action pill buttons: shared base; colors/sizes per action below.
   Done + Send: navy. Draft: teal (distinct secondary action). Confirm: red. */
.dict-btn-done,
.dict-btn-send,
.dict-btn-draft,
.dict-btn-confirm,
.dict-btn-edit {
    background: #324470;
    border: 2px solid #324470;
    color: #fff;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
    box-shadow: none;
}
.dict-btn-done:hover,
.dict-btn-send:hover { background: #28375c; border-color: #28375c; }
.dict-btn-send { font-weight: 700; padding: 11px 16px; }
.dict-btn-draft { background: #2F8F8C; border-color: #2F8F8C; }
.dict-btn-draft:hover { background: #267371; border-color: #267371; }
.dict-btn-confirm { background: #C0392B; border-color: #C0392B; padding: 5px 14px; font-size: 13px; }
.dict-btn-confirm:hover { background: #A93226; border-color: #A93226; }
/* Edit: neutral outline variant of the shared pill base (border stays navy). */
.dict-btn-edit { background: #fff; color: #324470; padding: 5px 14px; font-size: 13px; }
.dict-btn-edit:hover { background: #eef1f8; }
/* Inline evidence snippets (codes + tasks): small italic source quote under the row. */
.dict-evidence-text { font-size: 11px; color: #666; line-height: 1.4; font-style: italic; }
.dict-btn-done[disabled], .dict-btn-send[disabled], .dict-btn-draft[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* Dictation progress stepper: horizontal step tracker showing all six stages,
   full column width above .dict-top-row. */
.dict-stepper {
    display: block;
    /* Sits above .dict-top-row on the page background, no card look. Horizontal
       padding matches .dict-info-col's border + padding (1px + 16px) so the
       stepper content starts at the same x as the card content below it. */
    background: transparent;
    margin: 0 0 14px;
    padding: 0 17px;
    box-sizing: border-box;
}
.dict-stepper-eyebrow {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
    margin-bottom: 14px;
}
.dict-stepper-track {
    display: flex;
    /* Top-aligned: every step's title sits on the same line even when one hint
       wraps to two lines and its neighbours don't. */
    align-items: flex-start;
    gap: 6px;
    /* Tallest state (circle + working ring) so stage changes never move the layout. */
    min-height: 38px;
}
/* Side steps (previous / next) are smaller and dimmed; the active step is emphasized.
   Equal flex shares + ellipsized text keep the track the same size on every stage. */
.dict-stepper-step {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex: 1 1 0;
    min-width: 0;
    opacity: 0.5;
    transition: opacity 0.2s;
}
.dict-stepper-step.active {
    opacity: 1;
}
.dict-stepper-circle {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #cbd5e1;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s, width 0.2s, height 0.2s;
}
/* Active step keeps the same geometry as the others. Emphasis comes from
   opacity, the blue fill and the ring/roller, not from size. */
.dict-stepper-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
    /* Optically center the title line against the 24px circle. */
    margin-top: 4px;
}
.dict-stepper-title {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dict-stepper-step.active .dict-stepper-title {
    font-weight: 700;
}
.dict-stepper-sub {
    font-size: 12px;
    color: #94a3b8;
    /* Hints may run longer than a few words, so wrap up to two lines and clamp the rest. */
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}
/* Connector segments between steps removed by design: circles + labels only. */
.dict-stepper-line {
    display: none;
}
.dict-stepper-step.reached .dict-stepper-circle { background: #2563eb; color: #fff; }
.dict-stepper-step.active .dict-stepper-circle { box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15); }
.dict-stepper-step.working .dict-stepper-circle { box-shadow: none; }
.dict-stepper-step.working .dict-stepper-circle::after {
    content: "";
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    border-radius: 50%;
    border: 2px solid rgba(37, 99, 235, 0.25);
    border-top-color: #2563eb;
    animation: dict-stepper-spin 0.8s linear infinite;
}
@keyframes dict-stepper-spin { to { transform: rotate(360deg); } }
.dict-stepper-step.error .dict-stepper-circle { background: #c0392b; color: #fff; }
/* Steps outside the previous-current-next window are hidden by JS. */
.dict-stepper-step.dict-stepper-hidden { display: none; }
/* Send-in-UI toggle sits inline on the same row as the record/upload buttons, compact. */
.dict-record-controls .dict-toggle-row.dict-upload-toggle {
    flex: 0 0 auto;
    justify-content: center;
    gap: 6px;
    margin: 0;
}
.dict-record-controls .dict-upload-toggle .dict-toggle-label {
    font-size: 12px;
    white-space: nowrap;
}
.dict-record-controls .dict-upload-toggle .dict-switch {
    transform: scale(0.85);
    transform-origin: left center;
}
.transcript-player--pending {
    opacity: 0.5;
    pointer-events: none;
}
.dict-readonly .fact-remove,
.dict-readonly #corti_tasks .button {
    display: none !important;
}
.dict-ctrl-ghost {
    visibility: hidden !important;
    pointer-events: none;
}
.dict-processing-locked .dict-tabs,
.dict-processing-locked .dict-rec-input,
.dict-processing-locked .dict-tpl-pill,
.dict-processing-locked .dict-switch,
.dict-processing-locked .dict-file-upload,
.dict-processing-locked select,
.dict-processing-locked [contenteditable] {
    pointer-events: none;
    opacity: 0.7;
}

.dict-processing-locked [data-group="progress_bar"] .dict-switch {
    pointer-events: auto;
    opacity: 1;
}
/* Toggle rows: label left, switch right. */
.dict-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
}
.dict-toggle-label {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}
/* Split half of the record button: a caret badge on the edge of the 70px circle that
   opens the input-device list. The shared .btn-split-toggle is built for a rectangular
   .button, so the affordance is styled for the circle here, but it carries
   --btn-split-anchor, so .btn-split-dropdown positions off it with the same rules as
   every other split button. The chosen device is the caret's tooltip; the record
   button's own face stays the microphone icon. */
.dict-mic-toggle {
    position: absolute;
    right: -4px;
    bottom: 14px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #D1D5DB;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #374151;
    cursor: pointer;
    z-index: 2;
    anchor-name: --btn-split-anchor;
}
.dict-mic-toggle:hover {
    background: #F3F4F6;
}
.dict-mic-toggle.is-locked {
    opacity: 0.5;
    cursor: not-allowed;
}
/* Marks the active device. The record button shows an icon, not the device name. */
#dict_mic_dropdown .btn-split-dropdown-item.is-selected {
    font-weight: 600;
    background: #F3F4F6;
}
.dict-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex: 0 0 auto; }
.dict-switch input { opacity: 0; width: 0; height: 0; }
.dict-switch-slider {
    position: absolute;
    inset: 0;
    background: #D1D5DB;
    border-radius: 999px;
    transition: background 0.15s ease;
    cursor: pointer;
}
.dict-switch-slider::before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 2px;
    top: 2px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    transition: transform 0.15s ease;
}
.dict-switch input:checked + .dict-switch-slider { background: #22C55E; }
.dict-switch input:checked + .dict-switch-slider::before { transform: translateX(18px); }
.dict-switch input:disabled + .dict-switch-slider { opacity: 0.5; cursor: not-allowed; }
/* Modern ring spinner */
.dict-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: btn-spin 0.8s linear infinite;
    vertical-align: middle;
    margin-right: 8px;
}

.dict-main-content {
    display: flex;
    flex-direction: column;
    /* No flex grow: as a direct child of the .dict-left-col flex column this
       must size by content, like the old block wrapper did. */
    width: 100%;
    min-width: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
}
.dict-tab-pane {
    display: none;
    padding: 0;
    box-sizing: border-box;
}
.dict-tab-pane.active { display: block; }
.dict-main-content > .dict-tabs-wrap {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 8px 8px 0 0;
    padding: 0 4px;
    margin: 0;
}
.dict-tab-action-btn {
    background: transparent;
    border: 1px solid #E5E7EB;
    border-radius: 4px;
    color: #6B7280;
    font-size: 13px;
    padding: 4px 8px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.dict-tab-action-btn:hover {
    background: #F4F6FA;
    color: #111827;
    border-color: #D1D5DB;
}
.dict-main-content > .dict-tabs-wrap .dict-tab {
    position: relative;
    border-bottom: none;
    margin-bottom: 0;
}
.dict-main-content > .dict-tabs-wrap .dict-tab.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: #156FBE;
    border-radius: 4px 4px 0 0;
}
.dict-main-content > .dict-tab-pane {
    background: #FAFBFC;
    border: 1px solid #E5E7EB;
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 12px;
    box-sizing: border-box;
    min-height: 360px;
}
.tpl-section {
    margin-bottom: 14px;
}
.tpl-section:last-child { margin-bottom: 0; }
.tpl-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0 4px 4px;
    border-bottom: 1px solid #E5E7EB;
    margin-bottom: 6px;
}
.tpl-section-header strong {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
}
.tpl-section-copy {
    cursor: pointer;
    color: #888;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.12s, color 0.12s;
}
.tpl-section-copy:hover {
    background: #F4F6FA;
    color: #2563eb;
}
.tpl-section-body {
    padding: 4px 4px 4px 4px;
    white-space: pre-line;
    word-break: break-word;
    font-size: 13px;
    color: #1F2937;
    border-radius: 4px;
    outline: none;
}
.tpl-section-body[contenteditable="true"]:focus {
    background: #FFFFFF;
    box-shadow: 0 0 0 1px #2563eb inset;
}
.dict-main-content > .dict-tab-pane[data-tab="transcript"],
.dict-main-content > .dict-tab-pane[data-tab="facts"] {
    position: relative;
}
.dict-tab-actions-inline {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
    z-index: 2;
}
.dict-tab-actions-inline .dict-tab-action-btn {
    background: #FFFFFF;
}
.dict-main-content > .dict-tab-pane[data-tab="transcript"] #websocket_message,
.dict-main-content > .dict-tab-pane[data-tab="facts"] #websocket_facts {
    background: transparent;
    padding-right: 60px;
    border: none;
    outline: none;
}
.dict-main-content > .dict-tab-pane[data-tab="facts"] .sv-panel-wrapper,
.dict-main-content > .dict-tab-pane[data-tab="codes"] .sv-panel-wrapper,
.dict-main-content > .dict-tab-pane[data-tab="actions"] .sv-panel-wrapper {
    border: none;
    border-radius: 0;
    background: transparent;
    min-height: 0;
    overflow: visible;
}
.dict-main-content > .dict-tab-pane[data-tab="facts"] .sv-panel-content,
.dict-main-content > .dict-tab-pane[data-tab="codes"] .sv-panel-content,
.dict-main-content > .dict-tab-pane[data-tab="actions"] .sv-panel-content {
    background: transparent;
    padding: 0;
}
.dict-main-content > .dict-tab-pane[data-tab="facts"] .sv-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    border-bottom: 1px solid #E5E7EB;
    padding: 0 0 8px 0;
    margin-bottom: 10px;
}
.dict-main-content > .dict-tab-pane[data-tab="actions"] .sv-card {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}
.dict-main-content > .dict-tab-pane[data-tab="templates"] .sv-panel-wrapper,
.dict-main-content > .dict-tab-pane[data-tab="cleaned"] .sv-panel-wrapper,
.dict-main-content > .dict-tab-pane[data-tab="history"] .sv-panel-wrapper {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    min-height: 0;
}
.dict-templates-layout {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.dict-templates-layout > #templates_main { flex: 1 1 0; min-width: 0; order: 1; }
.dict-templates-layout > #templates_cleaned_ref { flex: 1 1 0; min-width: 0; order: 0; }
.dict-tab-pane-empty {
    color: #6B7280;
    font-style: italic;
    font-size: 13px;
    padding: 30px 14px;
    text-align: center;
}

.dict-actions-panel {
    flex: 0 0 275px;
    min-width: 0;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    padding: 10px 12px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
}
.dict-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dict-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-family: 'Roboto Slab', serif;
    font-size: 17px;
    font-weight: 600;
    color: #324470;
    border-bottom: 1px solid #E5E7EB;
    padding-bottom: 6px;
    cursor: pointer;
    user-select: none;
}
.dict-section-toggle {
    color: #9CA3AF;
    font-size: 14px;
    flex: 0 0 auto;
}
.dict-section-header:hover .dict-section-toggle { color: #324470; }
.dict-section-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
}
.dict-actions-panel > * { min-width: 0; max-width: 100%; }
.dict-actions-panel .select2-container { max-width: 100%; }
.dict-work-row.dict-file-mode .dict-tab {
    opacity: 0.45;
    pointer-events: none;
    cursor: not-allowed;
}
.dict-disabled {
    opacity: 0.4;
    pointer-events: none;
}
/* Template + medical-code pills share one look. */
.dict-code-pills,
.dict-tpl-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.dict-code-pill,
.dict-tpl-pill {
    background: transparent;
    color: #324470;
    border: 1px solid #324470;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.dict-code-pill.active,
.dict-tpl-pill.active {
    background: #324470;
    color: #FFFFFF;
    border-color: #324470;
}
.dict-code-pill:disabled,
.dict-tpl-pill:disabled { opacity: 0.45; cursor: not-allowed; }
.dict-code-pill:not(:disabled):not(.active):hover,
.dict-tpl-pill:not(:disabled):not(.active):hover { background: rgba(50,68,112,0.08); }
.dict-code-pill.active:not(:disabled):hover,
.dict-tpl-pill.active:not(:disabled):hover { background: #29375C; }
.dict-progress { margin-top: 4px; }



/*Template editor: structured-form mode*/
#te-mode-structured .te-sf-layout {
    display: flex; gap: 12px; align-items: flex-start;
    min-height: 360px;
}
#te-mode-structured .te-sf-section-pane {
    flex: 0 0 260px;
    border: 1px solid #cfd8e3; border-radius: 6px;
    background: #fff;
    display: flex; flex-direction: column;
}
#te-mode-structured .te-sf-detail-pane {
    flex: 1 1 0; min-width: 0;
    border: 1px solid #cfd8e3; border-radius: 6px;
    background: #fff;
    padding: 10px 12px;
}
#te-mode-structured .te-sf-pane-title {
    font-size: 11px; font-weight: 600; color: #555;
    padding: 8px 10px; border-bottom: 1px solid #e0e4e8;
    background: #f7fafc;
}
#te-mode-structured #te-sf-section-list {
    overflow-y: auto; max-height: 420px;
    padding: 4px;
}
#te-mode-structured .te-sf-section-row {
    padding: 6px 8px; margin: 2px 0;
    border-radius: 4px; cursor: pointer;
    display: flex; gap: 6px; align-items: center;
    border: 1px solid transparent;
}
#te-mode-structured .te-sf-section-row:hover {
    background: #f0f4f8;
}
#te-mode-structured .te-sf-section-row.selected {
    background: #e3f2fd; border-color: #90caf9;
}
#te-mode-structured .te-sf-section-row .order-badge {
    display: inline-block;
    width: 18px; height: 18px;
    line-height: 18px; text-align: center;
    background: #cfd8e3; color: #fff;
    font-size: 10px; font-weight: 600;
    border-radius: 50%;
    flex-shrink: 0;
}
#te-mode-structured .te-sf-section-row.selected .order-badge {
    background: #1976d2;
}
#te-mode-structured .te-sf-section-row .te-sf-section-row-text {
    flex: 1; min-width: 0;
    overflow: hidden;
}
#te-mode-structured .te-sf-section-row-title {
    font-weight: 600; color: #333;
    white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
}
#te-mode-structured .te-sf-section-row-id {
    font-size: 10px; color: #999;
    white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
}
#te-mode-structured .te-sf-section-row-actions {
    display: flex; gap: 2px; flex-shrink: 0;
}
#te-mode-structured .te-sf-section-row-actions button {
    font-size: 10px; padding: 1px 5px;
    background: #fff; border: 1px solid #cfd8e3; border-radius: 3px;
    cursor: pointer;
}
#te-mode-structured .te-sf-add-section {
    margin: 6px 8px 8px; padding: 6px 10px;
    background: #1976d2; color: #fff;
    border: none; border-radius: 4px; cursor: pointer;
    font-size: 12px;
}
#te-mode-structured .te-sf-add-section:hover { background: #1565c0; }
#te-mode-structured .te-sf-empty {
    padding: 12px; color: #888; font-size: 12px; text-align: center;
}
#te-mode-structured input[type="text"],
#te-mode-structured input[type="number"],
#te-mode-structured select {
    font-size: 12px; padding: 2px 6px;
    border: 1px solid #cfd8e3; border-radius: 4px;
    box-sizing: border-box;
}
#te-mode-structured .te-sf-row {
    display: flex; gap: 6px; align-items: center;
    margin: 4px 0; flex-wrap: wrap;
}
#te-mode-structured .te-sf-row label,
#te-mode-structured .te-sf-field-head label,
#te-mode-structured .te-sf-option label {
    font-size: 11px; color: #666;
}
#te-mode-structured .te-sf-row > input[type="text"] {
    flex: 1; min-width: 160px;
}
#te-mode-structured .te-sf-cb-label {
    display: inline-flex; gap: 4px; align-items: center;
    color: #666; font-size: 11px;
}
#te-mode-structured .te-sf-detail-header {
    display: flex; gap: 6px; align-items: center;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
#te-mode-structured .te-sf-detail-header input[type="text"] { width: 200px; }
#te-mode-structured .te-sf-fields {
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid #e0e4e8;
}
#te-mode-structured .te-sf-sec-label {
    font-size: 11px; font-weight: 600;
    color: #555; margin: 4px 0;
}
#te-mode-structured .te-sf-field {
    border: 1px solid #cfd8e3; border-radius: 4px;
    padding: 8px 10px; margin: 6px 0;
    background: #f9fafb;
}
#te-mode-structured .te-sf-field-head {
    display: flex; gap: 6px; align-items: center;
    margin-bottom: 6px; flex-wrap: wrap;
    padding-bottom: 6px;
    border-bottom: 1px dashed #e0e4e8;
}
#te-mode-structured .te-sf-id { width: 140px; }
#te-mode-structured .te-sf-options {
    margin: 6px 0 0;
    padding-left: 8px;
    border-left: 2px solid #e0e4e8;
}
#te-mode-structured .te-sf-option {
    display: flex; gap: 6px; align-items: center;
    flex-wrap: wrap;
    margin: 4px 0; padding: 4px 6px;
    background: #fff; border: 1px solid #e0e4e8; border-radius: 3px;
}
#te-mode-structured .te-sf-option > input[type="text"] { width: 140px; }
#te-mode-structured .te-sf-add-row {
    display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px;
}
#te-mode-structured .te-sf-add-row button,
#te-mode-structured .te-sf-field-head button,
#te-mode-structured .te-sf-option > button,
#te-mode-structured .te-sf-options > button {
    font-size: 11px; padding: 2px 8px;
    border: 1px solid #cfd8e3; border-radius: 4px;
    background: #fff; cursor: pointer;
}
#te-mode-structured .te-sf-add-row button:hover,
#te-mode-structured .te-sf-options > button:hover {
    background: #eef3f8;
}
#te-mode-structured button.te-sf-delete-btn {
    color: #c33;
    border-color: #ef9a9a;
    background: #fff;
    font-weight: 600;
}
#te-mode-structured button.te-sf-delete-btn:hover {
    background: #ffebee;
    color: #b71c1c;
    border-color: #c33;
}
#te-mode-structured button.te-sf-delete-btn i:not(:only-child) { margin-right: 4px; }
#te-mode-structured #te-sf-errors {
    font-size: 12px; line-height: 1.5;
}
#te-mode-structured #te-sf-errors.ok { color: #2e7d32; }
#te-mode-structured #te-sf-errors.bad { color: #c33; }
#te-mode-structured #te-sf-preview .pv-section {
    padding: 6px 8px; margin: 6px 0;
    border-left: 3px solid #1976d2;
    background: #fff;
}
#te-mode-structured #te-sf-preview .pv-section-title { font-weight: 600; font-size: 13px; color: #1976d2; }
#te-mode-structured #te-sf-preview .pv-section-desc { font-size: 11px; color: #888; margin-bottom: 4px; }
#te-mode-structured #te-sf-preview .pv-field { margin: 3px 0 3px 12px; font-size: 12px; }
#te-mode-structured #te-sf-preview .pv-option { margin-left: 18px; font-size: 12px; color: #555; }
#te-mode-structured #te-sf-preview .pv-meta { font-size: 11px; color: #888; margin-left: 4px; }

/* Task form field config sections and their (?) help dialog, used by the
   form builder and the shared field editor (script/task_form_help.js). */
.tfb_config_section {
    border: 1px solid #eee;
    margin-bottom: 8px;
    background: #fff;
}
.tfb_config_section_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px;
    background: #f7f7f7;
    border-bottom: 1px solid #eee;
    font-weight: bold;
}
.tfb_config_section_title .tfb_help {
    color: #888;
}
.tfb_config_section_body {
    padding: 8px 8px 0 8px;
}
.tfb_help_entry {
    margin-bottom: 10px;
}
.tfb_help_desc {
    color: #555;
}

/* Collapsible sections inside dialogs: a bordered box with a clickable header
   bar carrying the chevron and a summary of what the closed section holds.
   Used by the SharePoint integration dialog's per-output sections. */
.collapse_section {
    border: 1px solid #b9c4d4;
    margin-bottom: 12px;
    background: #fff;
}
.collapse_section_header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 10px 12px;
    border-left: 4px solid var(--tetriary_color);
    background: #e4eaf3;
    color: var(--header_color);
    font-size: 14px;
    cursor: pointer;
    user-select: none;
}
.collapse_section_header:hover {
    background: #d6dfee;
}
.collapse_section_header i {
    color: var(--tetriary_color);
}
.collapse_section.open > .collapse_section_header {
    background: #cfdaeb;
    border-bottom: 1px solid #b9c4d4;
}
.collapse_section_summary {
    margin-left: auto;
    color: #4a5464;
    font-size: 13px;
    font-weight: normal;
}
.collapse_section_body {
    padding: 12px;
}

/* Waveform player (script/waveplayer.js).
   The container is empty until the waveform lands, and the wait is not always
   short: the server's peaks.json has to arrive, or, for a BYOK-encrypted
   recording, the rich client's backend has to report a duration first -- that
   one is seconds over a remote channel. A blank 40px gap where the waveform
   belongs reads as a broken player, so waveplayer.js parks .waveplayer_pending
   over the container and drops it on the first redraw. */
.waveplayer_container {
    width: 100%;
    min-height: 40px;
    position: relative;   /* the placeholder positions against this */
}
.waveplayer_pending {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f1f3f6;
    border-radius: 2px;
    overflow: hidden;
    pointer-events: none;   /* never eats a click meant for the waveform */
}
/* Baseline, so the empty state still reads as an audio track rather than a box. */
.waveplayer_pending:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background-color: #c3cad6;
}
/* Indeterminate: no progress figure is available for either wait, so the
   highlight just travels. Width 35%, hence the 286% end position. */
.waveplayer_pending:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 35%;
    background-image: linear-gradient(
        90deg,
        rgba(49, 74, 117, 0) 0%,
        rgba(49, 74, 117, 0.18) 50%,
        rgba(49, 74, 117, 0) 100%
        );
    animation: waveplayer_sweep 1.4s ease-in-out infinite;
}
@keyframes waveplayer_sweep {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(286%); }
}
@media (prefers-reduced-motion: reduce) {
    .waveplayer_pending:after {
        animation: none;
        opacity: 0.45;
    }
}
/* BYOK recording in a plain browser: recording.php serves it still encrypted, so
   there is neither a waveform nor playback. A flat baseline says "nothing here"
   without impersonating the loading sweep above, and matches the flat waveform
   the rich client draws for the same recording. */
.waveplayer_container.waveplayer_unavailable:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background-color: #d7dce4;
}
/* Why a player is showing nothing playable. Used by both the waveform player and
   the native <audio> fallback, hence the neutral name. */
.audio_notice {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
}