/* TANGORA CSS */
.ts-panel { display:flex; }
.ts-panel > * { flex:var(--ts-panelbox-flex, 1 1 auto); margin:var(--ts-panelbox-margin, 0px); padding:var(--ts-panelbox-padding, 0px); border-top:var(--ts-panelbox-bordertop, none); border-right:var(--ts-panelbox-borderright, none); border-bottom:var(--ts-panelbox-borderbottom, none); border-left:var(--ts-panelbox-borderleft, none) }
/* RESOURCE #11 BEGIN */
:root
{
    --datetime_width: 165px;
    --date_width: 100px;
    --date_picker_width: 136px;
    --datetime_picker_width: 183px;
    --date_interval_width: 286px;
    --number_interval_width: 213px;
}
.form
{
    --color-form-text: var(--color-dark-blue);
    --color-form-bg: var(--color-white);
    --color-form-error: #b13b66;
    --color-form-border: var(--color-modular-blue);
    --color-form-border-focus: var(--color-teal);
    --dark_cornflower_blue: var(--color-form-text);
    --font-size-form: var(--font-size-base);
    --gap: var(--gap-l);
    --gap-inline: calc(.7 * var(--gap));
    --gap-block: calc(.85 * var(--gap));
    --gap-block-select: calc(.5 * var(--gap));
    --gap-data-list: calc(1.5 * var(--gap-l));
}
.form input[type="text"],
.form input[type="search"],
.form input[type="password"],
.form input[name="username"],
.form input[name*="filter"]:not([type="checkbox"]),
.form textarea,
.form select,
.form .uploadControl,
div[id^="linkSelectorDialog"] input[type="text"]
{
    font-family: var(--font-regular);
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding-inline: var(--gap-inline);
    padding-block: var(--gap-block);
    margin: 0;
    font-size: var(--font-size-form);
    line-height: 1.4;
    color: var(--color-form-text);
    background-color: var(--color-form-bg);
    border: 1px solid var(--color-form-border);
    border-width: 0 0 1px 0;
    /*border-radius: .5rem;*/
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    /*box-shadow: 0px 3px 8px #0000000D;*/
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.form select
{
    padding-block: var(--gap-block-select);
}
.form input[type="text"],
.form input[type="search"],
.form input[type="password"],
.form input[name="username"],
.form select:not([multiple]),
div[id^="linkSelectorDialog"] input[type="text"]
{
    max-height: calc(2.5 * var(--gap));
}
.form textarea
{
    min-height: calc(12.5 * var(--gap));
    resize: vertical;
}
.form select:not([multiple])
{
    background-image: url(/media/select.svg);
    background-size: 7px 4px;
    background-repeat: no-repeat;
    background-position: calc(100% - 0.85em) center;
    padding-right: calc(2.28 * var(--gap));
}
.form input[type="text"]:focus,
.form input[type="search"]:focus,
.form input[type="password"]:focus,
.form input[name="username"]:focus,
.form input[name*="filter"]:focus,
.form textarea:focus,
.form select:focus
{
    color: var(--color-form-text);
    border-color: var(--color-light-blue);
    outline: none;
}
.form input[name*="filterfrom"],
.form input[name*="filterto"]
{
    width: auto;
    max-width: calc(6.25 * var(--gap));
    display: inline-block;
}
.form input[type="checkbox"],
.form input[type="radio"]
{
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
    opacity: 0;
    float: left;
}
.form input[type="checkbox"]+label,
.form input[type="checkbox"]+span.section label,
.form input[type="radio"]+label,
.form input[type="radio"]+span.section label
{
    display: flex;
    gap: calc(.5 * var(--gap));
    align-items: baseline;
    line-height: 1.4
}
.form input[type="checkbox"].formreq+label,
.form input[type="checkbox"].formreq+span.section label,
.form input[type="radio"].formreq+label,
.form input[type="radio"].formreq+span.section label
{
    color: var(--color-form-error);
}
.form label
{
    user-select: none;
}
.form input[type="checkbox"]+label::before,
.form input[type="checkbox"]+span.section label::before
{
    display: inline-block;
    content: '\f0c8';
    box-sizing: border-box;
    font-family: 'Icon font regular';
    color: var(--color-form-border);
}
.form input[type="checkbox"]:checked+label::before,
.form input[type="checkbox"]:checked+span.section label::before
{
    content: '\f14a';
    color: var(--color-form-border-focus);
    font-family: 'Icon font solid';
}
.form input[type="checkbox"]:focus+label::before,
.form input[type="checkbox"]:focus+label
{
    color: var(--color-form-text);
}
.form input[type="radio"]+label::before,
.form input[type="radio"]+span.section label::before
{
    display: inline-block;
    content: '\f111';
    box-sizing: border-box;
    font-family: 'Icon font regular';
    color: var(--color-form-border);
}
.form input[type="radio"]:checked+label::before,
.form input[type="radio"]:checked+span.section label::before
{
    content: '\f192';
    color: var(--color-form-border-focus);
    font-family: 'Icon font solid';
}
.form input[type="radio"]:focus+label::before,
.form input[type="radio"]:focus+label
{
    color: var(--color-form-text);
}
div.form div.quicksearchselectorbox~span:not(.formreq)
{
    display: block;
}
div.form div.quicksearchselectorbox+span input[type="text"]
{
    padding-right: calc(2.867 * var(--gap));
}
div.form div.quicksearchselectorbox~span::after
{
    content: "\f002";
    line-height: 0;
    font-family: 'Icon font solid';
    position: absolute;
    top: 19px;
    right: 12px;
    color: var(--color-form-border);
    font-size: 16px;
}
div.form div.quicksearchselectorbox
{
    font-size: 12px;
    width: 100%;
    left: 0 !important;
    top: 100% !important;
    z-index: 1;
    border-bottom-left-radius: calc(.5 * var(--gap));
    border-bottom-right-radius: calc(.5 * var(--gap));
    background: var(--color-form-bg);
    margin-top: -3px;
    box-sizing: border-box;
    border: 1px solid var(--color-form-border);
    border-top-color: var(--color-form-border-focus);
}
div.form div.quicksearchselectorbox::-webkit-scrollbar
{
    width: calc(.75 * var(--gap));
}
div.form div.quicksearchselectorbox
{
    scrollbar-width: thin;
    scrollbar-color: var(--color-form-border) var(--color-form-border-focus);
}
div.form div.quicksearchselectorbox::-webkit-scrollbar-track
{
    background: var(--color-form-border);
}
div.form div.quicksearchselectorbox::-webkit-scrollbar-thumb
{
    background-color: var(--color-form-border-focus) ;
    border-radius: 6px;
    border: 3px solid var(--color-form-border-focus);
}
div.form div.quicksearchselectorbox ul
{
    margin: 0px;
    list-style-item: none;
    padding: 0px
}
div.form div.quicksearchselectorbox ul li
{
    clear: both;
    width: 100%;
    display: block;
    border-bottom: 1px solid var(--color-form-border);
}
div.form div.quicksearchselectorbox ul li:last-child
{
    border-bottom: none
}
div.form div.quicksearchselectorbox ul li a
{
    display: block;
    text-decoration: none;
    margin: 0;
    color: inherit;
    transition: background-color .15s ease-in-out,color .15s ease-in-out;
    padding-inline: var(--gap-inline);
    padding-block: var(--gap-block);
}
div.form div.quicksearchselectorbox ul li:hover a
{
    color: var(--color-form-border-focus);
    background-color: hsl(from var(--color-form-border-focus) h s l / .1);
}
div.form .dateTimeBlock
{
    color: #6C707E;
    font-size: 12px;
    line-height: 1.4em;
}
div.form .dateTimeBlock .dateInnerTimeBlock,
div.form .dateTimeBlock span
{
    color: inherit;
    line-height: inherit;
}
div.form .dateTimeBlock .calBtn
{
    background-size: contain !important;
    cursor: pointer;
    margin-right: -26px;
    background: none;
}
div.form .dateTimeBlock .calBtn::after
{
    content: "\f073";
    font-size: 18px;
    line-height: 0;
    font-family: 'Icon font regular';
    position: absolute;
    top: 7px;
    margin-left: 3px;
    color: #707070;
    transition: color 150ms ease 0ms;
}
div.form .dateTimeBlock .calBtn.active::after,
div.form .dateTimeBlock .calBtn:hover::after
{
    color: #5E94B6;
}
div.form .dateTimePicker .dateTimeBlockWrapper
{
    width: 136px;
}
div.form .dateTimePicker .dateTimeBlockWrapper .dateTimeBlock
{
    left: 8px;
    width: 93px;
    margin-right: 22px;
}
.dateTimePicker[data-datetimepickertype="datetime"] .dateTimeBlockWrapper
{
    width: 206px;
}
.dateTimePicker[data-datetimepickertype="datetime"] .dateTimeBlockWrapper .dateTimeBlock
{
    width: 153px;
}
.dateTimePicker .dateTimeBlockWrapper .dateTimeBlock img
{
    opacity: 0.7;
}
/*forms - toggle*/
.form .toggle input[type="checkbox"]
{
    display: none;
}
.form .toggle input[type="checkbox"]+label
{
    cursor: pointer;
    user-select: none;
    padding-left: 3.5em;
    position: relative;
    display: block;
    outline: 0;
    font-size: 1em;
    padding-top: 0.2em;
}
.form .toggle input[type="checkbox"]+label::before
{
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    display: block;
    z-index: 1;
    border: none;
    background: #f2f2f2;
    width: 3em;
    height: 1.4em;
    border-radius: 2.8em;
}
.form .toggle input[type="checkbox"]+label:hover::before
{
    background: #d9d9d9;
}
.form .toggle input[type="checkbox"]+label::after
{
    background: #fff linear-gradient(transparent,rgba(0,0,0,.05));
    position: absolute;
    content: '';
    opacity: 1;
    z-index: 2;
    border: none;
    box-shadow: 0 1px 2px 0 rgba(34,36,38,.15), 0 0 0 1px rgba(34,36,38,.15) inset;
    width: 1.4em;
    height: 1.4em;
    top: 0;
    border-radius: 2.8em;
    -webkit-transition: background .3s ease,left .3s ease;
    transition: background .3s ease,left .3s ease;
    left: -1px;
    box-shadow: 0 1px 2px 0 rgba(34,36,38,.15), 0 0 0 1px rgba(34,36,38,.15) inset;
}
.form .toggle input[type="checkbox"]:checked+label::after
{
    left: 1.6em;
    left: calc(1.6em + 1px);
}
.form .toggle input[type="checkbox"]:checked+label::before
{
    background-color: #1E3969;
}
/*form validation and mandatory fields*/
.form input[type="text"].formreq,
.form input[type="search"].formreq,
.form input[type="password"].formreq,
.form input[name="username"].formreq,
.form input[name*="filter"].formreq,
.form textarea.formreq,
.form select.formreq,
.form .uploadControl.formreq,
.form .formreq input[type="text"],
.form .formreq input[type="search"],
.form .formreq input[type="password"],
.form .formreq input[name="username"],
.form .formreq input[name*="filter"],
.form .formreq textarea,
.form .formreq select,
.form .formreq  input.dateTimePickerInputSkin,
.form .formreq .uploadControl
{
    border-color: #9a031e;
}
.form .choicegroup.formreq.formreq > div:first-of-type
{
    border: solid 1px var(--color-form-error);
    box-sizing: border-box;
    padding-inline: var(--gap);
    padding-block: var(--gap);
    margin: 0;
    border-radius: calc(.25 * var(--gap));
    width: 100% !important;
    margin-block-end: calc(2 * var(--gap));
}
.form .choicegroup > div:first-of-type
{
    display: grid;
    gap: calc(.5 * var(--gap));
    margin-block-end: var(--gap-data-list);
}
.form span.formreq
{
    display: none;
}
/*data lists*/
div .data-list 
{
    min-height: 0;
}
.data-list > div 
{
    min-height: 0;
    margin-block-end: var(--gap-data-list);
    clear: both;
}
.data-list > div[data-ts-transitionstate="state1"]
{
    margin-block-end: 0;
}
.data-list.one-line > div 
{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.form .data-list > div:not([data-ts-transitionstate="state1"][data-ts-transitiontype="pushtopdown"]),
.form.data-list > div:not([data-ts-transitionstate="state1"][data-ts-transitiontype="pushtopdown"]),
.data-list.form-alike > div:not([data-ts-transitionstate="state1"][data-ts-transitiontype="pushtopdown"]):not(:last-child) 
{
    margin-bottom: var(--gap-data-list);
}
.form *:not(.columns)>.data-list:not([data-ts-transitionstate="state1"]):not(.horizontal)+.data-list:not(.horizontal) > div:first-child,
.form *:not(.columns)>.data-list:not([data-ts-transitionstate="state1"]):not(.horizontal)+.data-list[data-ts-transitionstate="state1"]+.data-list:not(.horizontal) > div:first-child,
.form:not(.columns)>.data-list:not([data-ts-transitionstate="state1"]):not(.horizontal)+.data-list:not(.horizontal) > div:first-child,
.form:not(.columns)>.data-list:not([data-ts-transitionstate="state1"]):not(.horizontal)+.data-list[data-ts-transitionstate="state1"]+.data-list:not(.horizontal) > div:first-child,
.form.data-list:not([data-ts-transitionstate="state1"]):not(.horizontal)+.form.data-list:not(.horizontal) > div:first-child,
.form.data-list:not([data-ts-transitionstate="state1"]):not(.horizontal)+.form.data-list[data-ts-transitionstate="state1"]+.form.data-list:not(.horizontal) > div:first-child 
{
    margin-top: 1em;
}
.form .tag-like.radio,
.data-list.form-alike > div *.tag-like 
{
    margin-bottom: -1em;
}
.data-list.form-alike > div *.tag-like.selected-tag 
{
    margin-bottom: 0;
}
.data-list:not(.horizontal) > div:last-child,
.form .data-list:not(.horizontal) > div:last-child,
.form.data-list:not(.horizontal) > div:last-child,
.form .data-list:not(.horizontal) > div:last-child:not([data-ts-transitionstate="state1"][data-ts-transitiontype="pushtopdown"]),
.form.data-list:not(.horizontal) > div:last-child:not([data-ts-transitionstate="state1"][data-ts-transitiontype="pushtopdown"]) 
{
    margin-bottom: 0;
}
.data-list > div > *:first-child 
{
    color: var(--color-dark-200);
    font-family: var(--font-semibold);
    font-weight: 400;
}
.data-list.one-line > div > *:first-child 
{
    margin-right: 1em;
}
.data-list:not(.one-line) > div > *:first-child 
{
    margin-bottom: calc(.5 * var(--gap));
}
.data-list.one-line > div > *:last-child 
{
    text-align: right;
}
.data-list:not(.show-nocontent) .nocontent 
{
    display: none;
}
.data-list.horizontal 
{
    display: flex;
    justify-content: space-between;
    margin-left: -5px;
    margin-right: -5px;
}
.data-list.horizontal+.data-list.horizontal 
{
    /*margin-top: 1em;*/
}
.data-list.horizontal> div 
{
    width: 100%;
    margin-left: 5px;
    margin-right: 5px;
}
.data-list.horizontal.left > div 
{
    width: auto;
}
.data-list.horizontal .date-interval 
{
    max-width: var(--date_interval_width);
}
.data-list.horizontal .date-picker 
{
    max-width: var(--date_picker_width);
}
.data-list.horizontal .datetime-picker 
{
    max-width: var(--datetime_picker_width);
}
.data-list.horizontal.left 
{
    justify-content: start;
}
/* RESOURCE #11 END */