html {
  scroll-behavior: smooth;
}
.bodyframe {
    margin-left: auto;
    margin-right: auto;
    max-width: 780px;
    width: calc(100% - 4px);
    /*
    background-image: none;
    background-image: url(../Images/bg3.jpg) !important;
    background-image: none;
    background-color: #011823 !important;
    background-image: url(../Images/bg3.jpg) !important;
    background-color: #0b3b4e;
    box-shadow: 2px 2px 4px lightgrey;
    border: 1px solid lightgray;
    border-radius: 6px 6px 6px 6px;
    */
}

.HeaderWeb {
    font-family: Arial, sans-serif;
    font-size: 14px;
    text-decoration: none;
    color: #024A84;
    font-weight: bold;
}

.lockScreenButtons {
    float: right !important;
    top: 12px !important;
    position: relative !important;
    margin-left: 6px !important;
}
.lockScreenButtonsDox {
    position: absolute;
    top: 10px;
    right: 4px;
}
.sign-in-btn {
    /* 
    position: absolute;
    top: 12px;
    right: 4px;
    right1: -102px;
    */
    color1: rgba(5, 127, 156, 0.9);
    color: #333333;
    color1: #black;
    font-size0: 22px;
    z-index: 1;
    font-size: 18px !important;
}

.information-btn {
    /* 
    right: 42px;
    position: absolute;
    top: 12px;
    */
    color: #333333;
    z-index: 1;
    font-size: 18px !important;
}

.dox-btn {
    /* 
        right: 72px;
        right: 120px;
    position: absolute;
    top: 12px;
    right: 114px;
    */
    color: #333333;
    z-index: 1;
    font-size: 18px !important;
}

.eng-btn {
    /* 
        font-weight: 900; 
        font-family: 'Font Awesome 5 Free';
        right: 88px;
        right: 120px;
        padding: 4px 4px 4px 4px;
    position: absolute;
    top: 12px;
    right: 83px;
    */
    padding: 4px 8px 4px 8px;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    font-family: 'Font Awesome 6 Free';
    font-size: 11px !important;
    background-color: #454545;
    color: white;
    border-radius: 50%;
    cursor: default;
    margin-right: 12px;
}

.small-icon {
    color: #333333;
    color1: #black;
    font-size: 12px;
}

.inputField {
	width: 150px;
	font-size: 14px;
}

.inputFieldReadOnly {
    background: transparent !important;
}

.sign-in-div {
    display0: none;
    transition: all .5s;
    position: absolute;
    top: 42px;
    right: 11px;
    background: #f8f8f8;
    margin: 0;
    padding0: 0.5rem 0.75rem;
    text-decoration: none;
    color: black;
    text-align: center;
    background0: lightgray;
    background0: rgba(5, 127, 156, 0.2);
    background: rgba(232, 174, 30, 0.8);
    border-radius: 6px 6px 6px 6px;
    border: 0px solid rgba(5, 127, 156, 1.0);
    border-top0: 0px;
    font-family: Arial, sans-serif;
    overflow0: auto;
    overflow: hidden;
    white-space: nowrap;
    min-width: 50%;
    padding: 8px 2px 8px 2px;
    text-wrap: nowrap !important;
    z-index: 11;
}
.el {
	padding:4px;
	margin-top:4px;
}

.teamSelected {
	background: lightgoldenrodyellow;
	text-decoration: none !important;
}

.chatTask {
    max-width: 100%;
    background: #EFEFEF;
    padding: 6px;
    border-radius: 6px 6px 6px 6px;
    /*
    margin-bottom: 4px;
    border-bottom: 1px;
    max-width: calc(100% - 4px);
    margin-left: auto;
    background: #EDEDED;
    margin-right: auto; EFEFEF;
    background: rgba(0, 0, 0, 0.1);
    */
}
.chatEvent {
    max-width: 100%;
    background: rgba(19, 104, 138, 0.2);
    padding: 6px;
    border-radius: 6px 6px 6px 6px;
    /*
    margin-bottom: 4px;
    background: #13688A;
    */
}

.chatTaskFirst {
    max-width: 100%;
    background: #DDDDDD;
    padding: 6px;
    border-radius: 6px 6px 6px 6px;
    /*
    margin-bottom: 4px;
    background: #EFEFEF;
    border-bottom: 1px solid grey !important;
    border-bottom: 1px solid lightgray;
    background: #EEEEEE;
    background: goldenrod;
    background: #EFEFEF;
    */
}

.chatIn {
max-width: 480px;
background0: rgba(28, 148, 196, 0.1);
background: aliceblue;
border-bottom: 0px;
border-radius: 6px 6px 6px 6px;
margin-left: 64px;
padding: 6px;
float: left;
margin-bottom: 4px;
box-shadow: 1px 1px 2px lightgray;
/*
margin-left: auto;
margin-right: auto;
*/
}
.dateIn {
    /*
    margin-left: 64px;
    */
    max-width: 480px;
    margin-left: 2px;
    padding: 6px;
    float: left;
    margin-bottom: 4px;
}
.chatOut {
max-width: 480px;
background: lightgoldenrodyellow;
border-bottom: 0px;
border-radius: 6px 6px 6px 6px;
margin-right: 64px;
padding: 6px;
float: right;
margin-bottom: 4px;
box-shadow: 1px 1px 2px lightgray;
/*
margin-left: auto;
margin-right: auto;
*/
}
.dateOut {
    /*
    margin-right: 64px;
    */
    max-width: 480px;
    margin-right: 2px;
    padding: 6px;
    float: right;
    margin-bottom: 4px;
}

.dateSeparator {
    /*
    margin-top: 2px;
    margin-right: 64px;
    float0: right;
    text-align1: center;
    color: lightskyblue;
    */
    max-width: 480px;
    background: transparent;
    margin-right: 2px;
    padding: 0px;
    padding-left: 4px;
    margin-bottom: 2px;
    font-family: Arial,sans-serif;
    font-size: 12px;
    color: darkolivegreen;
}
.chatListRowWrapperDiv {
    /*
    display: flex;
    justify-content: center;
    display: block;
    */
    width: 100%;
    display: inline-block;
    margin-right: 0px;
    margin-bottom: 1px;
    border-radius: 6px 6px 6px 6px;
    transition: all .5s;
}

.OCR {
    /*
    background: lightyellow;
    background: cornsilk;
    background: beige;
    background: khaki;
    */
    background: khaki;
    color: darkblue;
    padding: 2px 4px 2px 4px;
    border-radius: 3px 3px 3px 3px;
    margin-bottom: 4px;
    display: inline-block;
}

#ruleOCR_DelimitersRight {
    font-weight: bold;
}
#ruleOCR_DelimitersLeft {
    font-weight: bold;
}
#ruleOCR_ValueCanContainTheseSymbolsOnly {
    font-weight: bold;
}
#ruleOCR_ValueMustContainTheseSymbols {
    font-weight: bold;
}
#messages {
    /*
    display: none;
    */
    border: 1px solid maroon;
    color: maroon;
    cursor: default;
    background: yellow;
    padding: 10px 6px 10px 6px;
    border-radius: 4px;
    font-size: 16px;
    font-family: Arial, sans-serif;
    margin-top: 4px;
    margin-bottom: 124px;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: absolute;
    z-index: 212;
    transition: all .5s;
    left: 0;
    right: 0;
    margin: auto;
    display: none;
    bottom: 82px;
    min-width: min(50vw, 320px);
    max-width: min(calc(100% - 60px), 480px);
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
    /* 
    overflow-wrap: anywhere;
    white-space: nowrap;
    overflow: break-word;
    overflow-wrap: break-word;
    overflow: hidden;
    overflow-wrap: normal;
    bottom: 120px;
    opacity: 0;
	display1:inline-block;
	display1:block;
    display0: flex;
	margin-left: auto;
	margin-right: auto;
	white-space:break-spaces;
	left: 50%;
	max-width:0px;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
    align-items:center;
    visibility: hidden;
    position: fixed;
    bottom: 30px;
*/
}
    #messages.show {
        /*
        display: block;
        visibility: visible;
        -webkit-animation: fadein 0.5s, fadeout 0.5s 5.5s;
        animation: fadein 0.5s, fadeout 0.5s 5.5s;
        display: block;
        */
        -webkit-animation: fadein 0.5s;
        animation: fadein 0.5s;
        display: block;
    }
    #messages.hide {
        -webkit-animation: fadeout 0.5s;
        animation: fadeout 0.5s;
        display: block;
        /*
        display: block;
        */
    }

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 82px;
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 82px;
        opacity: 1;
    }
}

@-webkit-keyframes fadeout {
    from {
        bottom: 82px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}

@keyframes fadeout {
    from {
        bottom: 82px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}

.animationBGColor {
    animation: animationBGColorchange 1s; /* animation-name followed by duration in seconds*/
    -webkit-animation: animationBGColorchange 1s; /* Chrome and Safari */
}

@keyframes animationBGColorchange {
    /* aliceblue 
        background: transparent;
        background: #EFEFEF;
    */
    0% {
        opacity: 1;
    }
    25% {
        opacity:0.5;
    }
    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.5;
    }
}

@keyframes animationHighlightChange {
    0% {
        color: inherit !important;
    }

    50% {
        color: maroon !important;
        background: yellow;
    }

    100% {
        color: inherit !important;
    }
}

.animationHighlight {
    animation-name: animationHighlightChange;
    animation-duration: 3s;
    /*
    animation: animationHighlightChange 3s;
    -webkit-animation: animationHighlightChange 3s;
    */
}

@-webkit-keyframes animationBGColorchange /* Safari and Chrome - necessary duplicate */
{
    0% {
        opacity: 1;
    }

    25% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.5;
    }
}

.animationWidth {
    max-width1: 0px;
	transition: max-width 0.5s !important;  
	transition: min-width 0.5s !important;
	overflow1: auto;
}
.fadeOpacity {
   opacity: 1;
   transition: opacity .4s ease-in-out;
   -moz-transition: opacity .4s ease-in-out;
   -webkit-transition: opacity .4s ease-in-out;
   }

.logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color0: rgba(255, 255, 255, 0.3);
    color: rgba(28, 148, 196, 0.4);
    font-family: Impact, ArTarumianMHarvats, Arial, sans-serif;
    font-size: 6rem;
    text-transform1: uppercase;
    letter-spacing: 4px;
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    z-index: -1;
    cursor:default;
    text-align: center;
    border1: 1px solid red;
}
@font-face {
    font-family: 'ArTarumianMHarvats';
    src:url('ArTarumianMHarvats.ttf.woff') format('woff'),
        url('ArTarumianMHarvats.ttf.svg#ArTarumianMHarvats') format('svg'),
        url('ArTarumianMHarvats.ttf.eot'),
        url('ArTarumianMHarvats.ttf.eot?#iefix') format('embedded-opentype'); 
    font-weight: normal;
    font-style: normal;
}

.tabs {
    /* 
        max-width: 780px;
        height: calc(100% - 4px);
    height: 100%;
    */
    margin-left: auto;
    margin-right: auto;
    margin-top: 4px;
    padding0: 6px 6px 6px 6px;
    padding: 0px 0px 0px 0px;
    border0: 1px solid lightgray;
    position: relative;
    height: 100%;
}

.tabs__nav {
    display: flex;
    list-style-type: none;
    /* 
        flex-wrap: wrap;
        background: #f8f8f8; 
    */
    margin: 0;
    border-bottom0: 1px solid lightgray;
}

.tabs__link {
    /* 
    text-align: center;
    color: black;
    background0: #1aa8d0; 
    background0: rgba(5, 127, 156, 0.2);
    border-left0: 1px solid darkblue;
    border-right0: 1px solid darkblue;
    border-bottom0: 1px solid transparent;
    */
    text-align: center;
    padding: 0.5rem 0.5rem;
    margin-left: 1px;
    text-decoration: none;
    color: #ffffff;
    flex-shrink: 0;
    flex-grow: 1;
    background: rgba(28, 148, 196, 0.7);
    border-radius: 6px 6px 6px 6px;
    border: 1px solid rgba(5, 127, 156, 1.0);
    font-family: Arial, sans-serif;
    cursor: default;
}

@media only screen and (max-width : 360px) and (orientation : portrait) 
{
    .tabs__link {
        /*
        font-size: smaller;
        font-size: 14px;
        */
        font-size: 15px;
        padding: 6px;
    }
}

    .tabs__link_active {
        background0: lightgray;
        background: aliceblue;
        color: black;
        cursor: default;
        border-radius: 6px 6px 6px 6px;
        border: 1px solid rgba(5, 127, 156, 1.0);
        border-left0: 1px solid darkblue;
        border-right0: 1px solid darkblue;
        border-bottom0: 1px solid white;
        border-bottom0: 1px solid transparent;
        font-family: Arial, sans-serif;
        /* 
        background: white;
        background: #f8f8f8 !important; 
    */
    }

    .tabs__link:not(.tabs__link_active):hover,
    .tabs__link:not(.tabs__link_active):focus {
        background-color0: #efefef;
        background: rgba(28, 148, 196, 0.7);
    }

    .someLinks {
        color: darkblue;
    }

    .tabs__content {
        /* 
    height: 100%;
    padding0: 1rem;
    border0: 1px solid rgba(5, 127, 156, 1.0);
    border-top0: 1px solid transparent;
    height0: 100%;
    height0: calc(100vh - 4px);
    height0: calc(100% - 44px);
    height0: calc(100%);
    padding0: 4px;
    border1: 1px solid red;
    height: calc(100% - 86px);
    height: calc(100% - 28px);
    min-height: 740px;
    height: 100%;
    height: calc(100% - 48px);
    min-height: calc(100% - 48px);
    max-height: calc(100% - 44px);
    height: calc(100% - 4px);
    height: 100%;
    */
        height: calc(100% - 48px);
        border-radius: 0px 0px 6px 6px;
        padding-top: 2px;
        position: relative;
    }

    .printFrame {
        /* 
    width: 100%;
    width: calc(100% - 2px);
    maxHeight = null clone.style.overflowY = '' clone.style.borderRadius = '0px';
    clone .style.border = '0px';
    clone .style.boxShadow = '';
    min-height: 100%;
    margin-right: auto;
    margin-left: auto;
    width: calc(100% - 12px);
    width: 210mm;
    padding: 18px;
    */
        width: 192mm;
        background-color: #ffffff;
        padding: 28px;
    }

    ::-webkit-scrollbar {
        width: 4px;
        height: 4px;
        /* background-color: white; */
        display0: none;
        background0: #000;
    }

    ::-webkit-scrollbar-thumb {
        /* background: lightgray; */
    }

    .caseFrame {
        /* 
    width: calc(100% - 10px);
    box-shadow: 3px 4px 2px #806b2a;
    transition: max-height .5s;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    */
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        width: calc(100% - 2px);
        max-width: calc(100vw - 4px);
        box-shadow: 1px 2px 2px #806b2a;
        margin: 1px 1px 1px 1px;
        padding: 1px;
        border-radius: 6px;
        BORDER-COLLAPSE: collapse;
        border-top: 1px solid #ffcc00;
        border-left: 1px solid #ffcc00;
        border-right: 1px solid #ffcc00;
        border-bottom: 1px solid #ffcc00;
        scrollbar-width: thin;
        transition: all .5s;
    }

        .caseFrame::-webkit-scrollbar {
            width: 4px;
            height: 4px;
            background-color0: lightgray;
            display0: none;
            background0: #000;
        }

        .caseFrame::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.3);
        }

    .caseFrameHidden {
    }

    .tabs__pane {
        /*
    height: 100%;
    min-height: calc(100% - 4px);
    */
        height: 100%;
        display: none;
        background: white;
        overflow-y: auto;
    }

    .tabs__pane_show {
        display: block;
        position: relative;
        z-index: 1;
    }

    .MenuButtons {
        width1: 100%;
        display: inline-block;
        padding-top: 3px;
        padding-left: 5px;
        padding-right: 5px;
        padding-bottom: 3px;
        cursor: pointer;
        cursor: hand;
        background-color: #E0E0E0;
        white-space: nowrap;
        font-family: Arial,sans-serif;
        text-decoration: none;
        font-size: 15px;
        color: #000000;
        border: 1px outset;
        border-top: 1px solid #D8DAE0;
        border-left: 1px solid #D8DAE0;
        border-bottom: 1px solid #6F7588;
        border-right: 1px solid #6F7588;
        border-radius: 4px;
        background: -moz-linear-gradient(top, #FFFFFF, #AFB3BF);
        background: -ms-linear-gradient(top, #FFFFFF 0%,#AFB3BF 100%);
        background: linear-gradient(top, #FFFFFF, #AFB3BF);
        filter: progid:DXImageTransform.Microsoft.Gradient(startcolorStr='#FFFFFF', endcolorStr='#AFB3BF', gradientType='0');
        background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#AFB3BF));
        background: -webkit-linear-gradient(top, #FFFFFF, #AFB3BF);
        background: -o-linear-gradient(top, #FFFFFF, #AFB3BF);
    }

    .MenuButtonsHighlighted {
        display: inline-block;
        padding-top: 3px;
        padding-left: 5px;
        padding-right: 5px;
        padding-bottom: 3px;
        cursor: pointer;
        cursor: hand;
        background-color: #E0E0E0;
        white-space: nowrap;
        font-family: Arial,sans-serif;
        font-size: 13px;
        color: #000000;
        border: 1px outset;
        border-top: 1px solid #D8DAE0;
        border-left: 1px solid #D8DAE0;
        border-bottom: 1px solid #6F7588;
        border-right: 1px solid #6F7588;
        border-radius: 4px;
        background: -moz-linear-gradient(top, yellow, #F7C928);
        background: -ms-linear-gradient(top, yellow 0%,#F7C928 100%);
        background: linear-gradient(top, yellow, #F7C928);
        filter: progid:DXImageTransform.Microsoft.Gradient(startcolorStr='yellow', endcolorStr='#F7C928', gradientType='0');
        background: -webkit-gradient(linear, left top, left bottom, from(yellow), to(#F7C928));
        background: -webkit-linear-gradient(top, yellow, #F7C928);
        background: -o-linear-gradient(top, yellow, #F7C928);
    }

    .listParticipantDialog {
        max-height: 76vh !important;
        height: 76vh !important;
        overflow: auto;
    }

    .listParticipantDialogHeader {
        padding: 6px 12px 0px 12px;
        min-height: 84px;
        text-align: center;
    }

    .listTeamDialogRowDiv {
        border: 0;
        font-family0: Arial,sans-serif;
        font-size0: 13px;
        color0: maroon;
        border0: 1px outset;
        border-bottom: 1px outset #999;
        padding: 6px;
    }

        .listTeamDialogRowDiv:hover {
            /* text-decoration: underline !important; */
            background: rgba(28, 148, 196, 0.2) !important;
        }

    .teamSelected:hover {
        text-decoration: none !important;
    }

    .gridList {
        display: table;
        width: 100%;
    }

    .gridList-tr {
        display: table-row;
    }

        .gridList-tr:hover {
            background-color: goldenrod !important;
            color: #024a84 !important;
        }

    .gridList-td {
        /* width: 33.3%; */
        display: table-cell;
    }

    .gridList-name {
        /* 
    display: inline;
    */
        font-family: Arial,sans-serif;
        font-size: 14px;
        color: #13688A;
        padding-right: 6px;
    }

    .gridList-text {
        /* 
    display: inline;
    */
        font-family: Arial,sans-serif;
        font-size: 14px;
        color: #343434;
        padding-right: 4px;
        padding-top: 4px;
        max-width: 100%;
        overflow: auto;
        scrollbar-width: thin;
    }

        .gridList-text::-webkit-scrollbar {
            width: 3px;
            height: 3px;
        }

        .gridList-text::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.3);
        }

    .teamIdAccessible {
        /* 
    margin-left: 4px;
    margin-right: 2px;
    margin-top: 2px;
    border: 1px solid #3d9000;
    border: 1px solid darkblue;
    color: darkblue;
    */
        color: #3d9000;
        padding: 2px 4px 2px 4px;
        border-radius: 4px;
        background: rgba(255, 255, 255, 0.4);
        border: 1px solid #3d9000;
        margin-top: 4px;
        display: inline-block;
        /* max-width: 70%; */
    }

    .teamIdAccessibleName {
        /* 
    */
        color: #3d9000;
        padding: 0px 4px 0px 4px;
        vertical-align: middle;
        display: inline-block;
        font-size: smaller;
        max-width: 80%;
        overflow: auto;
    }

    .listParticipantDialogTeamIdSpan {
        display: block;
        float: right;
        padding: 0px 6px 0px 0px;
        text-align: right;
        vertical-align: middle;
    }

    .listParticipantDialogTeamId {
        display: inline-block;
        font-family: Arial,sans-serif;
        font-size: 14px;
        cursor: default;
        text-align: right;
        color: grey;
    }

    .listTeamDialogRowHeader {
        font-family: Arial,sans-serif;
        font-size: 18px;
        padding: 0px 0px 0px 0px;
        color1: #000000;
        border0: 1px outset;
        cursor: default;
        display: inline-block;
        width: 95%;
        text-align: center;
        margin-bottom: 4px;
        /* 
	background: gold; 
	width: calc(100% - 2px);
	color: darkblue !important;	
	max-width: calc(100vw - 4px);
	border-radius: 6px;
	*/
        width: calc(100% - 108px);
        overflow-x: auto;
        margin-right: auto;
        margin-left: auto;
        font-family: Arial,sans-serif;
        font-size: 18px;
        color: #13688A;
        vertical-align: middle;
    }

    .listTeamDialogRowSubHeader {
        padding: 6px;
        cursor: default;
        display: block;
        text-align: center;
        margin-bottom: 4px;
        /* 
    padding: 0px 0px 0px 0px;
    width: 95%;
 	background: gold; 
	width: calc(100% - 2px);
	color: darkblue !important;	
	max-width: calc(100vw - 4px);
	border-radius: 6px;
	*/
        margin-right: auto;
        margin-left: auto;
        font-family: Arial,sans-serif;
        font-size: 18px;
        color: #13688A;
        vertical-align: middle;
    }

    .listTeamDialogRowName {
        font-family: Arial,sans-serif;
        font-size: 18px;
        padding: 6px;
        color1: #000000;
        border0: 1px outset;
        cursor: default;
    }

    #formFieldValueDivs p {
        text-align: left;
    }

    #formFieldValueDivs {
        padding: 0px 0px 0px 0px;
        word-wrap: break-word;
        overflow: auto;
        max-height: 400px;
        min-height: 60px;
        /*
    padding: 4px 6px 2px 16px; /16px for unordered bullet /
    padding: 4px 10px 2px 14px;
    padding: 4px 0px 4px 16px;
    max-height: 600px;
    scrollbar-width: auto;
    display0: inline-block;
    text-align1: left;
    */
    }

    .es-list {
        min-height: 28px;
    }

    #formFieldValueDivs ul {
        padding: 0px 0px 0px 16px;
    }

    .formFieldValueCheckbox {
        max-width: 24px;
    }

    .ui-widget.ui-widget-content[aria-describedby="formFieldDialogCopy"] {
        border: 3px solid #e78f08;
    }

    .formFieldDialog .inputField {
        display: block;
        font-size: 14px;
    }

    .formFieldDialog .textareaData {
        margin-right: initial;
        margin-left: initial;
        height: 60px;
        overflow-y: auto;
        resize: vertical;
        font-family: Arial,sans-serif;
        font-size: 14px;
        background: white;
        /*
    padding: 4px 6px 2px 16px;
    min-height: 60px;
    max-height: 60px;
        resize: both;
        height: 90px;
        width: 95%;
        margin-right: auto;
        margin-left: auto;
    */
    }

    .outerScrollbar {
        /*
    cursor: default;
    */
    }

        .outerScrollbar::-webkit-scrollbar {
            /*
        width: 4px;
        height: 4px;
        background-color: white;
        display0: none;
        background0: #000;
        all: unset;
        */
            width: 8px;
            height: 8px;
            background-color: white;
        }

        .outerScrollbar::-webkit-scrollbar-thumb {
            /*
        background: lightgray;
        all: unset;
        background: lightgray;
    */
            background: #f6a828;
        }

    .ui-datepicker {
        /*
    background: #333;
    */
        border: 0px solid #555;
        color: #EEE;
    }

    .ui-datepicker-calendar {
        /*
        background: #333; gray
        border: 1px solid gray;
    */
        background: lightgray;
        border: 1px solid #e78f08;
    }

    .divDate {
        resize: horizontal !important;
        height: 24px !important;
    }

        .divDate:before {
            content: '\f073';
            font-family: 'FontAwesome';
            padding-right: 4px;
            color: #3c763d;
            /*
        content: '\f133';
        content: '\f073';
        float: left;
        margin-left: -1.5em;
        */
        }

    .ui-dialog .ui-dialog-content { /* #formFieldValueDivs */
        padding: 0.5em 0.2em !important;
    }

    #listContexDialogList {
        scrollbar-width: auto;
    }

    #listContexDialog .ui-dialog .ui-dialog-content {
        padding: 0.5em 0.1em;
    }

    .listContexDialogRowName {
        font-family: Arial,sans-serif;
        font-size: 14px;
        padding: 3px;
        color1: #000000;
        border0: 1px outset;
        cursor: default;
    }

.listContexDialogRowContext {
    padding: 2px 2px 2px 2px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px 4px 4px 4px;
    font-family: Arial,sans-serif;
    font-size: 12px;
}

    .listContexDialogRowContextMax {
        max-height: 120px;
        overflow-y: auto;
    }

.dialogTitleEditField {
    /*
    background: gold;
    float: right;
    width: 98px !important;
    text-align: center;
    */
    background: lightyellow;
    display: inline-block;
    width: 152px !important;
    font-family: Arial,sans-serif;
    font-size: 14px;
    cursor: default;
    padding: 4px 4px 4px 4px;
    border-radius: 4px;
    position: absolute;
    bottom: 16px;
    left: 10px;
    text-align: left;
}

    .listTeamDialog {
        max-height: 76vh !important;
        height: 76vh !important;
        overflow-x: auto;
        font-family0: Arial,sans-serif;
        font-size0: 13px;
        color0: maroon;
        border0: 1px outset;
        scroll-behavior: smooth;
    }

    .chatheadertable {
        border0: 1px solid yellow;
        display: table;
        vertical-align: top;
        max-height1: 40px;
        height1: 40px;
        min-height1: 60px;
        text-align: center;
        margin-bottom: 2px;
        background: gold;
        width0: calc(100% - 2px);
        width: 100%;
        width0: calc(100% + 4px);
        margin-right: auto;
        margin-left: auto;
        border-radius: 6px;
        padding: 6px;
    }

    .darker, .teamNameHeader:hover {
        background-color: goldenrod !important;
        color: #024a84 !important;
    }

    .chatdivTeam {
        display0: none;
        width: 100%;
        overflow: auto;
        max-height1: 999999px;
        max-height: 0;
        scrollbar-width: thin;
        transition: all .5s;
    }

        .chatdivTeam::-webkit-scrollbar {
            width: 4px;
            height: 4px;
            background-color0: lightgray;
            display0: none;
            background0: #000;
        }

        .chatdivTeam::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.3);
        }

    .teamNameHeader {
        /*
        overflow-y: hidden;
    */
        display0: table;
        text-align: center;
        margin-bottom: 1px;
        background: gold;
        width: calc(100% - 2px);
        max-width: calc(100vw - 4px);
        overflow-x: auto;
        margin-right: auto;
        margin-left: auto;
        margin-top: 2px;
        border-radius: 6px;
        padding0: 6px;
        padding: 12px 6px 6px 6px;
        font-family: Arial,sans-serif;
        font-size: 16px;
        color: #13688A;
        width: 100%;
        vertical-align: middle;
        scrollbar-width: thin;
        transition: all .5s;
        min-height: 48px;
        cursor: default;
    }

    .chatheaderrow {
        /* border: 1px solid red; */
        display: table-row;
        vertical-align: top;
        max-height1: 40px;
        height1: 30px;
        text-align0: right;
        text-align: center;
        font-family: Arial,sans-serif;
        font-size: 16px;
        color0: #343434;
        color: #13688A;
        /* border-bottom: 1px outset #343434; */
    }

    .chatheadercell {
        /* 
	    overflow-x: auto;
        overflow-x: hidden;
        border: 1px solid green; 
	*/
        top: 0px;
        left: 0px;
        width: 100%;
        max-width: calc(100vw - 4px);
        overflow-x: auto;
        display: table-cell;
        vertical-align: middle;
        max-height1: 40px;
        height1: 30px;
        text-align0: right;
        text-align: center;
        font-family: Arial,sans-serif;
        font-size: 16px;
        color0: #343434;
        color: #13688A;
        padding: 6px;
        min-width1: 400px;
    }

    .chatListRowDiv {
        padding: 6px 6px 8px 8px;
        display1: table-row;
        min-width: 400px;
        overflow: auto;
        margin-right: 1px;
        /*
    border-bottom: 1px solid lightgray;
    */
    }

.chatListRowStatuses {
    /*
	display: inline;
    display: flex;
    display: flex;
    */
    display: block;
    padding: 2px 0px 2px 0px;
    border1: 0px solid transparent;
}

.chatListRowList {
    /*
    display: block !important;
    */
    display: block;
    padding: 2px 0px 2px 0px;
}

    .chatListRowName {
        display: inline;
        font-family: Arial,sans-serif;
        font-size: 14px;
        color0: #343434;
        color: #13688A;
        padding-right: 2px;
    }

    .chatListRowText {
        /*
    min-width: 280px;
    display: inline;
    overflow-x: hidden;
    */
        display: inline-block;
        font-family: Arial,sans-serif;
        font-size: 15px;
        color: #343434;
        color0: #13688A;
        padding-right: 4px;
        padding-top: 4px;
        max-width: 100%;
        overflow: auto;
        scrollbar-width: thin;
    }

        .chatListRowText::-webkit-scrollbar {
            width: 3px;
            height: 3px;
            background-color0: lightgray;
            display0: none;
            background0: #000;
        }

        .chatListRowText::-webkit-scrollbar-thumb {
            background0: #393812;
            background: rgba(0, 0, 0, 0.3);
        }

    .chatListRowTime {
        display0: inline-block;
        font-family: Arial,sans-serif;
        font-size: 10px;
        color: #777;
        float: right;
        margin-top: 4px;
        padding-left: 4px;
    }

    .chatListRowDueDate {
        display0: inline-block;
        font-family: Arial,sans-serif;
        font-size: 10px;
        color0: #000;
        color: #13688A;
        float: right;
        padding: 2px;
        /* 
	margin-top: 4px;
	padding-left: 4px;
	border: 1px solid maroon; 
    margin-top: 1px;
	*/
        margin-left: 4px;
        margin-right: 2px;
        border-radius: 2px;
        background: rgba(255, 255, 255, 0.4);
    }

    .metaTitle {
        display: block;
        font-size: smaller;
    }

    .metaDescription {
        display: block;
        font-size: smaller;
    }

    .imgPreviewDiv {
        /* 
    border: 1px solid maroon;
	*/
        display: block;
        max-height: 90px;
        max-width: 90px;
        float: left;
        padding: 0px 0px 0px 0px;
        transition: all .5s;
    }

    .imgPreview {
        /* 
    border: 1px solid green;
	*/
        max-height: 90px;
        max-width: 90px;
        width: auto;
        height: auto;
        padding: 0px 2px 0px 0px;
        transition: all .5s;
    }

    .editAsHTMLDialog {
        background: rgb(236,240,241);
        transition: all .3s;
        z-index: 11;
        overflow: auto;
        text-wrap: nowrap !important;
        background: #fff !important;
    }

        .editAsHTMLDialog::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        .editAsHTMLDialog::-webkit-scrollbar-thumb {
            background: darkgoldenrod;
        }

    .editAsHTMLhidden {
        /* 
        max-width: 120px; 
        display: inline-block;
        overflow: hidden;
        margin-left: 40px;
    */
        color: #999;
        max-height: 36px;
        overflow: auto;
        display: block;
        background: rgba(0,0,0,0.2);
    }

.showDoxDiv {
    /*
    height: 100%;
    width: 100%;
    width: auto;
    height: auto;
    max-height: calc(100vh - 4px);
    */
    position: absolute;
    width: auto;
    height: auto;
    padding: 0px 0px 0px 0px;
    left: 0;
    top: 0;
    vertical-align: top;
    text-align: left;
    background0: lightyellow;
    background: rgb(236,240,241);
    transition: all .3s;
    z-index: 11;
    margin: 0 auto;
    font-weight: bold;
}

    .showDoxDivContent {
        border1: 1px solid red;
        border-bottom: 1px solid lightgray;
        height: 100%;
        min-height: 24px;
        width: 100%;
        vertical-align: top;
        text-align: left;
        display: block;
        background1: ivory;
        background1: snow;
        background1: lightyellow;
        height: auto;
        scroll-behavior: smooth;
        overflow-anchor: auto;
        transition: all .5s;
        cursor: default;
        overflow-y: auto;
        height: 297mm;
        width: 210mm;
        max-width: calc(100vw - 4px);
        max-height: calc(100vh - 60px);
        background: transparent;
        /*
        background: lightyellow;
        background: #FCF5E5;
        max-height0: 740px;
        width: 210mm;
        width: 100%;
    */
    }

    @page {
        size: A4 portrait;
        /*
    size: A4 portrait;
    size: A4 landscape;
    */
    }

    page[size="A4"] {
        width: 21cm;
        height: 29.7cm;
    }

        page[size="A4"][layout="landscape"] {
            width: 29.7cm;
            height: 21cm;
        }

    page[size="A3"] {
        width: 29.7cm;
        height: 42cm;
    }

        page[size="A3"][layout="landscape"] {
            width: 42cm;
            height: 29.7cm;
        }

    page[size="A5"] {
        width: 14.8cm;
        height: 21cm;
    }

        page[size="A5"][layout="landscape"] {
            width: 21cm;
            height: 14.8cm;
        }

    .trumbowyg-box {
        border: none !important;
    }

        .trumbowyg-box trumbowyg-editor-visible trumbowyg-ru trumbowyg {
            height: 100%;
        }

    .trumbowyg-save-button svg {
        display: none
    }

    .trumbowyg-save-button:after {
        font-family: 'Font Awesome 6 Free';
        content: "\f7c2";
    }

    .menu-edit {
        /* 
    min-height: 30px;
    text-align: center;
    font-size: 1.0rem !important;
    text-align: center !important;
	*/
        background-color: transparent !important;
        font-size: 16px !important;
        text-align: left !important;
        margin: 2px 4px !important;
        border: 1px solid transparent;
    }

        .menu-edit .fa, .fas, .fab, .far {
            font-size: 14px !important;
            color: #454545 !important;
            font-weight: 900 !important;
            /*
            min-width: 16px !important;
            */
        }

        .menu-edit .texto-cor .frmttxt-mn-drpdn .frmttxt-mn-mp {
            float: initial !important;
        }

            .menu-edit .texto-cor .frmttxt-mn-drpdn .frmttxt-mn-mp label {
                font-size: 12px !important;
                font-family: Arial,sans-serif !important;
            }

            .menu-edit .texto-cor .frmttxt-mn-drpdn .frmttxt-mn-mp input {
                margin: 4px !important;
            }

        .menu-edit .iconEditorMarked {
            color: maroon !important;
            float: right;
            margin: 3px 4px;
        }

        .menu-edit .CloseEditor {
            font-size: 20px !important;
            /* 
	    background-color: yellow;
	    color: teal;
        */
            margin-top: 1px;
            margin-right: 1px;
            color: darkgoldenrod !important;
        }

        .menu-edit .frmttxt-mn-it-0 {
            width: 25px;
            height: 24px;
            padding-top: 5px;
            border: 1px dotted #D6D6D6;
            border-top: none;
            border-left: none;
            float: left;
        }

    #nav .fas {
        min-width: 39px !important;
    }

    .tooltipster-light-shadow .tooltipster-content {
        white-space: nowrap;
    }

    .doxContainer {
        counter-reset: level1;
    }

    .paydoxContext {
        border1: 1px solid red;
        border-bottom: 1px solid lightgray;
        border-left: 4px solid transparent;
        height0: 100%;
        min-height: 24px;
        width: 100%;
        vertical-align: top;
        text-align: left;
        display: block;
        background: lightyellow;
        padding: 6px 10px 2px 16px;
        transition: all .5s;
        font-family: Arial,sans-serif;
        font-size: 12px;
        white-space: normal !important;
        text-indent: unset !important;
        max-width: 21cm;
        overflow-x: auto;
    }

.contextMarks {
    /* 
        top: 4px; 
        align-content: center;
        background: palegoldenrod;
        left: 8px;
        position: sticky;
        margin-bottom: 2px;
        background: yellow;
        border: 1px solid gold;
    */
    margin-top: -4px;
    margin-left: -14px;
    padding-bottom: 2px;
    width: 24px;
    text-align: center;
    border-radius: 4px;
    border-radius: 4px;
    display: inline-block;
    background: lightblue;
    float: left;
}
span {
    /* 
    display: inline-block;
    */
    white-space: normal !important;
}

    div {
        white-space: normal !important;
    }

    paydoxContext::before {
        /* content: "Section " counter(my-sec-counter) ". "; 
    counter-reset: level2;
    counter-increment: level1;
    */
    }

    .paydoxContext:focus0 {
        background-color: ivory;
        outline1: 1px solid lightgray;
        border-left: 2px solid lightgray;
    }

    .paydoxContext ol {
        display: inline-block;
        list-style-type: none;
        /* 
        counter-reset: item;
    */
    }

        .paydoxContext ol li {
            /* 
            display: table-row;
            margin-bottom: 0.6em;
            counter-increment: item;
	    */
            counter-increment: level2;
        }

    .olLevel {
        min-width: 16px;
        min-height: 12px;
        border: 1px solid gold;
        border-radius: 4px;
        display: inline-block;
        background: palegoldenrod;
        text-indent: 0px;
        /*
    padding: 1px 2px 1px 2px;
    border: 1px solid lightgreen;
    border: 1px solid lightskyblue;gold
    padding: 1px 4px 1px 12px;
    min-width: 20px;
    background: lightblue;
    color: maroon;
    */
    }

    .olLevel1st {
        /*
    border: 1px solid gold;
    min-width: 20px;
    background: lightblue;
    color: maroon;
    */
    }

    .olLevel2nd {
        /*
    border: 1px solid green;
    border: 1px solid lightskyblue;
    min-width: 20px;
    background: palegoldenrod;
    padding: 1px 4px 1px 12px;
    color: maroon;
    */
    }

    .olLeve3d {
    }

    .olLeve1st {
        /*
    color: maroon;
    */
        counter-reset: level2;
    }

        .olLeve1st:before {
            counter-increment: level1;
            content: counter(level1)". ";
        }

    .olLeve2nd {
        /*
    color: maroon;
    */
    }

        .olLeve2nd:before {
            content: counter(level1)". "counter(level2)". ";
        }

    .paydoxContext ol li:before {
        /* 
            display: table-cell;
            padding-right: 0.6em;
            content: counters(item, ".") ". ";
            content: "*" counter(level1) ". " counters(level2, ".") "*";
            content: "*" counter(level1) "*";
            content: "*" counter(level1) "*" counters(level2, ".") "*";
        content: counter(level1)". ";
	        */
    }

    .paydoxContext ol li:before {
        /* 
            display: table-cell;
            padding-right: 0.6em;
            content: counters(item, ".") ". ";
            content: "*" counter(level1) ". " counters(level2, ".") "*";
            content: "*" counter(level1) "*";
            content: "*" counter(level1) "*" counters(level2, ".") "*";
        content: counter(level1)". "counter(level2)". ";
	        */
    }

    .paydoxContext ol li li {
        /* 
                margin: 0;
	        */
    }

        .paydoxContext ol li li:before {
            /* 
                    content: counters(item, ".") ". ";
                content: counter(level1) ". " counter(level2) ". ";
    	        */
        }

    #showDoxDivContainersReadOnly .paydoxContext {
        border-bottom: 1px solid transparent;
        background-color: ivory;
    }

    .formField {
        display: inline-block;
        border: 1px solid lightskyblue;
        background-color: aliceblue;
        border-radius: 6px;
        min-width: 48px;
        min-height: 18px;
        margin-bottom: -3px;
        padding: 1px 3px 1px 3px;
        cursor: default;
        text-indent: 0px !important;
        text-align: left;
        transition: all 1.5s;
        /*
    text-align: center;
    text-align: left;
    margin-left: 4px;
    margin-right: 4px;
    */
        /* max-width: 200px; */
    }

    .formFieldIcons {
        /*
    background: #f6a828;
    */
        color: #13688A !important;
        padding: 4px 6px 4px 6px;
        font-size: 18px;
        border-radius: 6px;
        border: 1px solid #13688A;
    }

    #showDoxDivContainersReadOnly .formField {
        background-color: transparent;
        /*
    border: 1px solid transparent;
    border-radius: 0px;
    min-width: 8px;
    min-height1: 8px;
    padding: 1px 2px 1px 2px;
    */
        /* border: 1px solid blue; */
    }

    /*
.trumbowyg-openContextDic-button svg {
    display: none
}
    .trumbowyg-openContextDic-button:after {
        font-family: FontAwesome;
        content: "\f130";
    }
.trumbowyg-openContextDic-button svg {
    fill: #000000; 
    width: 800px;
    height: 800px;
    viewBox: 0 0 24 24;
    xmlns: http://www.w3.org/2000/svg;
}
    .trumbowyg-openContextDic-button svg path {
        d: path("M3,8H21a1,1,0,0,0,0-2H3A1,1,0,0,0,3,8Zm18,8H3a1,1,0,0,0,0,2H21a1,1,0,0,0,0-2Zm0-5H3a1,1,0,0,0,0,2H21a1,1,0,0,0,0-2Z");
    }
*/
    .trumbowyg-editor {
        outline1: 2px !important;
        padding: 2px !important;
    }

    .showDoxDivIcons {
        /* 
    float: right;
    width: 22px;
    border: 1px solid red;
    display0: table;
    text-align: center;
    margin-bottom: 1px;
    background: gold;
    max-width: calc(100vw - 4px);
    width: calc(100% - 2px);
    overflow-x: auto;
    border-radius: 6px;
    padding0: 6px;
    scrollbar-width: thin;
    transition: all .5s;
    color: #13688A;
    background: palegoldenrod; beige khaki 
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    */
        margin-top: 1px;
        margin-right: 2px;
        margin-left: 2px;
        margin-bottom0: 2px;
        padding: 6px 6px 6px 6px;
        font-family: Arial,sans-serif;
        font-size: 12px;
        vertical-align: middle;
        min-height: 32px;
        color: #13688A;
        cursor: default;
        background: palegoldenrod;
        border-radius: 6px;
        width: calc(100% - 2px);
    }

    .showDoxDivName {
        /* 
    padding: 0px 4px 0px 4px;
    vertical-align: middle;
    display: inline-block;
    overflow: auto;
    font-family: Arial,sans-serif;
    font-size: 18px;
    padding: 6px;
    cursor: default;
    text-align: center;
    margin-bottom: 1px;
    background: gold;
    width: calc(100% - 2px);
    max-width: calc(100vw - 4px);
    overflow-x: auto;
    margin-right: auto;
    margin-left: auto;
    margin-top: 2px;
    padding: 12px 6px 6px 6px;
    font-family: Arial,sans-serif;
    font-size: 16px;
    color: #13688A;
    vertical-align: middle;
    scrollbar-width: thin;
    min-height: 48px;
    cursor: default;
    border: 1px solid red;
    display: inline-block;
    width: calc(100% - 40px);
	*/
        width: 100%;
        vertical-align: middle;
        display: inline-block;
        overflow-x: auto;
        padding: 6px 6px 6px 6px;
        font-family: Arial,sans-serif;
        font-size: 16px;
    }

    .showImageDiv {
        /* 
    border: 1px solid green;
    border: 1px solid red;
    max-height: calc(100vh - 4px);
    height: calc(100vh - 4px);
	*/
        height: 100%;
        width: 100%;
        padding: 0px 0px 0px 0px;
        position: absolute;
        left: 0;
        top: 0;
        vertical-align: middle;
        text-align: center;
        background: rgba(0, 0, 0, 0.7);
        transition: all .3s;
        z-index: 103;
        justify-content: center;
    }

    .showImage {
        /* 
    border: 1px solid green;
    border: 1px solid green;
	*/
        max-height: 100%;
        max-width: 100%;
        padding: 0px 0px 0px 0px;
        margin: auto;
        transition: all .3s;
        z-index: 11;
    }

.HTMLForm {
    /* 
    border: 1px solid red;
    background: rgba(0, 0, 0, 0.7);
    background: white;
    height: calc(100% - 60px);
    max-height: calc(100% - 90px);
    overflow: auto;
    width: 100%;
    padding: 0px 0px 0px 0px;
    position: absolute;
    left: 0;
    top: 0;
    vertical-align: middle;
    text-align: center;
    transition: all .3s;
    overflow: auto;
    justify-content: center;
    border: 1px solid maroon;
    width: calc(100% - 2px);
    max-width: calc(100vw - 2px);
    border: 1px solid red;
    text-align: center;
    border: 1px solid lightgray;
    position: fixed;
    bottom: 62px;
    max-height: 76%;
    position: fixed;
    bottom: 62px;
    max-height: 76%;
    background: transparent;
    width: 100%;
	*/
    position: fixed;
    background: lightgrey;
    bottom: 140px;
    text-align: left;
    z-index: 11;
    justify-content: center;
    vertical-align: bottom;
    font-family: Arial, sans-serif;
    font-size: 14px;
    margin-left: auto;
    margin-right: auto;
    width: calc(100% - 12px);
    left: 0;
    right: 0;
    margin: auto;
    transition: all .5s;
    overflow: auto;
    max-width: 800px;
    min-height: 220px;
    max-height: 90%;
    border: 1px solid darkgoldenrod;
    box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.8);
    border-radius: 6px;
    z-index: 11;
}

        .HTMLForm header { /* h1 */
            position: initial;
            font-size: 22px;
            transform: none;
            letter-spacing: 2px;
            color: rgba(5, 127, 156, 0.5);
            padding-bottom: 6px;
            text-align: center;
        }

        .HTMLForm h1 {
            font-size: 26px;
        }

.HTMLFormRun {
    /*
    bottom: 90px;
    position: absolute;
    width: 100%;
    border: 1px solid red;
    width: 80%;
    z-index: 111;
    background: #EFEFEF;
    margin-bottom: 90px;
    */
    padding: 42px 6px 42px 6px;
    max-width: 580px;
    background: lightgrey;
    border-radius: 6px 6px 6px 6px;
    margin: auto;
    display: block;
    overflow: auto;
    /* max-height: 85%; */
    overflow: auto;
    z-index: 100;
    min-width: 320px;
}

.QRCodeSample {
    float: right;
    max-width: 180px;
    padding: 2px;
    margin-top: 12px;
}

    .HTMLFormOrderId {
        /* 
    font-size: 14px;
    color0: #13688A;
    padding-top: 4px
    */
        display: inline-block;
        font-family: Arial,sans-serif;
        font-size: 14px;
        color: #343434;
        padding: 2px;
    }

    .HTMLFormRun form {
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
    }

.HTMLFormRun .btn {
    /* padding: 6px 6px !important; */
    padding: 4px 10px 2px 10px;
    background: transparent;
}

.HTMLFormRun p {
    cursor: default;
}
    .HTMLFormRun p :hover {
        text-decoration: underline !important;
    }


    @media screen and (orientation:portrait) {
        .HTMLFormRun {
            /*
            max-width: calc(100% - 8px);
        */
            width: calc(100% - 12px);
        }
    }

    .HTMLFormRun .rendered-form {
        /*
        cursor: not-allowed;
        */
    }

    .rendered-form input:disabled {
        cursor: default;
        background-color: white;
        color: black;
        border-color: rgba(118, 118, 118, 0.3);
    }

    .HTMLForm .rendered-form select {
        background-color: white;
    }

    .HTMLForm .form-field {
        min-height: 32px;
    }

    .HTMLForm .fld-label {
        min-height: 32px;
    }

    .HTMLForm .form-control {
        min-height: 32px;
    }

    .HTMLForm .rendered-form select:disabled {
        /*
    background-color: white;
    */
        background: linear-gradient(to bottom, #e6e6e6 0px, #fff 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
        color: black;
        border-color: rgba(118, 118, 118, 0.3);
    }

    .HTMLForm input {
        background: #fefefe;
    }

        .HTMLForm input: read-only {
            /*
    background-color: yellow;
    background-color: white;
    cursor: pointer;
    */
            cursor: default;
            color: black;
            border-color: rgba(118, 118, 118, 1);
        }

        .HTMLForm input[type="checkbox"] {
            /*
            display: none;
            */
            display: none;
        }

    .fld-IsGeoPosition {
        display: block !important;
    }

    .fld-IsInactive {
        display: block !important;
    }

    .HTMLForm .fld-required {
        display: inline !important;
    }

    .HTMLForm *[tooltip] {
        /*
    position: relative;
    */
        vertical-align: text-bottom;
    }

        .HTMLForm *[tooltip]:hover::after {
            /*
        position: absolute;
        top: -100%;
        left: 0;
        border: 1px solid red;
        max-height: 60px;
        max-width: 120px;
        right: 6px;
        margin-left: -100px;
        margin-left: auto;
        margin-right: auto;
        margin-left: 50%;
        margin-right: 50%;
        margin-left: -50%;
        margin:auto;
        margin: auto;
        left: 50%;
        transform: translateX(-50%);
        left: -50%;
        color: #FFFFFF;

        content: attr(tooltip);
        transform: translateX(-50%);
    */
        }

    .HTMLForm .FormBuilderImages {
        max-height: 120px;
        max-width: 120px;
        float: left;
        padding-right: 2px;
        border-radius: 8px;
    }

    .HTMLForm .FormBuilderQuantity {
        /*
    border-color: #3d9000;
    */
        min-width: 40px;
        max-width: 46px;
        border: 1px solid #3d9000;
        color: #96be0a;
        font-size: 16px;
        line-height: 20px;
        text-align: center;
        font-weight: bold;
        padding: 2px 2px 2px 2px;
        text-align: center;
        display: inline-block;
        margin: 0px 2px 2px 2px;
        position: relative;
        bottom: 5px;
    }

    .HTMLForm .FormBuilderPrice {
        /*
    border-color: #3d9000;
    width: 156px;
    color: #96be0a;
    font-size: 18px;
    bottom: 4px;
    */
        max-width: 96px;
        min-width: 46px;
        text-align: right !important;
        border: 1px solid #3d9000;
        font-size: 14px;
        line-height: 20px;
        min-height: 24px;
        text-align: center;
        font-weight: bold;
        padding: 2px 2px 2px 2px;
        text-align: center;
        display: inline-block;
        margin: 2px 0px 2px 2px;
        position: relative;
        float: right;
        cursor: default;
    }

.HTMLForm .FormBuilderStatus {
    /*
    border-color: #3d9000;
    width: 156px;
    color: #96be0a;
    font-size: 18px;
    bottom: 4px;
    border: 1px solid #3d9000;
    text-align: right !important;
    background: yellow;
    background: rgba(0, 0, 0, 0.1);
    min-width: 46px;
    */
    background: rgba(255, 255, 255, 0.3);
    max-width: 96px;
    min-width: 28px;
    text-align: center !important;
    font-size: 14px;
    line-height: 20px;
    min-height: 24px;
    text-align: center;
    font-weight: bold;
    padding: 2px 2px 2px 2px;
    text-align: center;
    display: inline-block;
    margin: 2px 2px 2px 2px;
    position: relative;
    float: right;
    cursor: default;
    border-radius: 12px;
}

    /* .HTMLForm .rendered-form .form-group checkbox-group*/
    .HTMLForm .formbuilder-checkbox-group {
        /* 
    margin-left: 0px;
    margin-bottom: 15px;
        bottom
    border-bottom: 1px solid gray;
    padding-bottom: 4px;
    */
        margin-top: 15px;
        border-top: 1px solid gray;
        padding-top: 4px;
    }

    .HTMLForm .form-wrap.form-builder .frmb .field-actions .btn {
        width: 26px;
    }

    .HTMLForm label:before {
        /*
    border: 1px solid #035f8f;
    */
        background: linear-gradient(to bottom, #fff 0px, #e6e6e6 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
        border: 1px solid #3d9000;
        height: 20px;
        width: 20px;
        display: block;
        cursor: pointer;
    }

    .HTMLForm input[type="checkbox"] + label:before { /* + label */
        /*
    line-height: 20px;
    */
        content: ' ';
        white-space: pre;
        background: linear-gradient(to bottom, #e6e6e6 0px, #fff 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
        border-color: #3d9000;
        color: #96be0a;
        font-size: 24px;
        line-height: 24px;
        text-align: center;
        font-weight: bold;
        padding: 2px 2px 2px 2px;
        text-align: center;
        display: inline-block;
        margin: 2px 4px 2px 4px;
    }

    .HTMLForm input[type="checkbox"]:disabled + label:before {
        /*
    border-color: #eee;
    color: #ccc;
    background: linear-gradient(to top, #e6e6e6 0px, #fff 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);

    color: gray;
    */
    }

    .HTMLForm input[type="checkbox"]:checked + label:before {
        /*
        content: '✕';
    */
        content: '✓';
    }

    .HTMLForm input[type="checkbox"]:not(:disabled) + label:hover::before {
        border-color: #b3d7ff !important;
    }

    .HTMLForm input[type="radio"] {
        display: none;
    }

        /* создание в label псевдоэлемента  before со следующими стилями */
        .HTMLForm input[type="radio"] + label::before {
            content: ' ';
            white-space: pre;
            background: white;
            border-color: #3d9000;
            border-radius: 50%;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: 50% 50%;
            color: #96be0a;
            font-size: 24px;
            line-height: 24px;
            text-align: center;
            font-weight: bold;
            padding: 2px 2px 2px 2px;
            text-align: center;
            display: inline-block;
            margin: 2px 4px 2px 4px;
            background: linear-gradient(to bottom, #e6e6e6 0px, #fff 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
        }
        /* стили при наведении курсора на радио */
        .HTMLForm input[type="radio"]:not(:disabled):not(:checked) + label:hover::before {
            /*
        border-color: #b3d7ff;
        */
            border-color: #b3d7ff;
        }
        /* стили для активной радиокнопки (при нажатии на неё) */
        .HTMLForm input[type="radio"]:not(:disabled):active + label::before {
            /*
        background-color: #b3d7ff;
        border-color: #b3d7ff;
        */
            background-color: #3d9000;
            border-color: #3d9000;
        }
        /* стили для радиокнопки, находящейся в фокусе */
        .HTMLForm input[type="radio"]:focus + label::before {
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        }
        /* стили для радиокнопки, находящейся в фокусе и не находящейся в состоянии checked */
        .HTMLForm input[type="radio"]:focus:not(:checked) + label::before {
            border-color: #80bdff;
        }
        /* стили для радиокнопки, находящейся в состоянии checked */
        .HTMLForm input[type="radio"]:checked + label::before {
            /*
        border-color: #0b76ef;
        background-color: #0b76ef;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
        */
            border-color: #3d9000;
            background-color: #3d9000;
            background: #3d9000;
        }
        /* стили для радиокнопки, находящейся в состоянии disabled */
        .HTMLForm input[type="radio"]:disabled + label::before {
            /*
        background-color: #e9ecef;
        */
        }

    button {
        border-width: 0px;
        white-space: nowrap;
    }

    .form-wrap.form-builder {
        /*
    background: white;
    background: rgba(0, 0, 0, 0.1);
    */
        width: 100%;
        background: #EFEFEF;
        padding: 6px;
        border-radius: 6px 6px 6px 6px;
        margin: auto;
        margin-bottom: 0px;
    }

        .form-wrap.form-builder .btn {
            /*
            padding: 6px 6px !important;
        */
            padding: 6px 8px !important;
            min-width: 42px
        }

        .form-wrap.form-builder .form-actions {
            float: none;
        }

        .form-wrap.form-builder .frmb .form-elements .false-label:first-child, .form-wrap.form-builder .frmb .form-elements label:first-child {
            /* overflow: hidden; */
            min-width: 100px;
            text-transform: none !important;
            text-align: left !important;
            overflow: auto !important;
            text-overflow: inherit !important;
            width: max-content !important;
            display: block;
        }

    .rendered-form .form-control {
        min-height: 32px;
        max-height: 300px;
        overflow-y: auto;
    }

nav .menu-btn {
    /*
         border: 1px solid red;
       */
    height: calc(var(--icon-width) + 14px) !important;
    padding: 10px 6px 6px 12px;
    top: 0px !important;
}

    nav a {
    }

    @media screen and (orientation:landscape) {
        .sign-in-btn {
            /*
        right: 4px;
        */
            right: 8px;
        }
    }

    @media screen and (orientation:portrait) {
        .chatListRowTime {
            font-size: 13px;
            margin-top: 2px;
        }

        .chatListRowName {
            font-size: 15px;
        }

        .chatListRowText {
            font-size: 16px;
        }

        .chatIn {
            max-width: 90vw;
            margin-left: 2px;
        }

        .chatTask {
        }

        .chatOut {
            max-width: 90vw;
            margin-right: 2px;
        }

        .dateIn {
            max-width: 90vw;
            margin-left: 2px;
        }

        .dateOut {
            max-width: 90vw;
            margin-right: 2px;
        }

        .dateSeparator {
            max-width: 90vw;
            margin-right: 2px;
            padding-right: 6px;
        }

        .sign-in-div {
            right: 0px;
        }

        .inputField {
            /*
            width: 130px;
            */
            width: 120px;
        }

        .chatListRowDiv {
            min-width: 330px;
        }

        .chatListRowText {
            min-width: 200px;
        }
    }

    .messageURL {
        color: maroon;
    }

    .chatdiv {
        vertical-align: bottom;
        align-self1: flex-end;
        height: 100%;
        height0: 570px;
        max-height0: calc(100% - 114px);
        overflow-y: auto;
        display1: flex;
        display1: table-cell;
        display1: table-row-group;
        display0: table;
        /* 
    height: calc(100% - 156px);
    max-height: 500px;
	display: flex;
	flex-direction: column-reverse;
    max-width: 560px;
    scroll-behavior: smooth;
    transition: all .5s;
    overscroll-behavior: none;
    overscroll-behavior: contain;
    overscroll-behavior-y: contain;
    scroll-behavior: smooth;
    scroll-behavior: auto;
    overscroll-behavior: contain;
	*/
        scroll-behavior: smooth;
        overflow-anchor: auto;
        transition: all .5s;
        width: 100%;
        cursor: default;
        overflow-y: auto;
        scrollbar-width: thin;
        border0: 1px solid maroon;
    }

    .chatdivFrame {
        transition0: height .5s;
        height: auto;
    }

    .tabchattr1 {
        height0: 100%;
        height: 500px;
        max-height: 500px;
    }

    .tabchattr2 {
        height0: 1%;
        height0: 90px;
    }

    .menuOtherIcons {
        float: right;
    }

        .menuOtherIcons:hover {
            text-decoration: none !important;
        }

.chatsendtable {
    /* 
	border0: 1px solid yellow;
	display: table-footer-group;
	display: block; 
	vertical-align: bottom; 
	left:0px;
	width: 100%;
	position: fixed;
	position: sticky;
	padding: 6px 6px 12px 6px;
    display: table-footer-group;
    width: calc(100% - 18px);
    background0: rgba(5, 127, 156, 0.2);
    background: rgba(28, 148, 196, 0.7);
    background: skyblue;
    position: absolute;
    display1: none;
    max-height0: 120px;
    height1: 80px;
    height0: 120px !important;
    height0: 40px;
    background0: rgba(28, 148, 196, 0.5);
    background0: #1aa8d0;
    background: rgb(99, 178, 214); #14688a
    background: rgba(28, 148, 196, 0.7);
    */
    background: #14688a;
    vertical-align: middle;
    border-radius: 6px 6px 6px 6px;
    width0: 100%;
    max-width0: calc(100% - 2px);
    width0: calc(100% - 4px);
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    position: fixed;
    bottom: 1px;
    left: 0;
    right: 0;
    margin: auto;
    transition: all .5s;
    z-index: 111;
}

    .chatsend {
        bottom0: 0px;
        right: 0px;
        left: 0px;
        width0: 400px;
        width: 490px;
        max-width: calc(100vw - 4px);
        /**/
        border0: 1px solid red;
        display: block;
        vertical-align: bottom;
        text-align0: right;
        text-align: center;
        max-height0: 120px;
        height0: 120px;
        height0: 40px;
        margin-left: auto;
        margin-right: auto;
        margin-top: auto;
        margin-bottom: auto;
        padding: 6px 6px 6px 6px;
        font-size: 18px !important;
        transition: all .5s;
    }

    .chattextarea {
        height: 32px;
        min-height: 32px;
        max-height: 96px;
        overflow: hidden;
        width: 320px;
        padding: 6px;
        font-size: 16px !important;
        font-family: Arial, sans-serif;
        font-size: 14px;
        border-radius: 4px;
        transition: all .5s;
    }

    .textareaData {
        height: 90px;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
        /*
    width: 98%;
    */
    }

    .formFieldValueData {
        /*
    display: inline-block;
    display: inline;
    */
        padding: 4px 4px 4px 4px;
        text-align: left;
        display: inline-block;
    }

    .formFieldItems {
    }

    .formFieldItemType {
        width: unset !important;
        padding: 4px 4px 4px 4px;
        cursor: default;
        display: inline !important;
        /*
    border-bottom: 1px outset #999;
    display: inline;
    */
    }

    hr {
        /*
    padding: 4px 4px 4px 4px;
    */
        width: 97%;
    }

    .userlist {
        background: rgba(0, 0, 0, 0.1);
        padding: 2px 4px 2px 4px;
        margin-right: 2px;
        border-radius: 4px;
    }

.assigneeName {
    color: #777;
    font-family: Arial, sans-serif;
    font-size: 13px;
    padding: 0px 4px 0px 0px;
    margin-bottom: 2px;
    white-space: nowrap;
    white-space: nowrap;
    text-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: clip;
    display: inline;
    /* 
    min-width: 120px; 
    max-width: 360px; 
    width: calc(100% - 164px); 
    */
}

.respOnMessage {
    border: 0px solid black;
    background: rgba(255, 255, 255, 0.9);
    font-family: Arial, sans-serif;
    font-size: 12px;
    padding: 0px 2px 0px 2px;
    margin-bottom: 2px;
    white-space: nowrap;
    white-space: nowrap;
    text-wrap: nowrap !important;
    overflow-x: auto !important;
    min-width: 180px;
    max-width: 256px;
    height: 18px;
    display: block;
    /* 
    scrollbar-width: thin;
    width: 100%;
    min-width: 180px;
    display: inline-block;
    max-width: 256px;
    overflow-x: hidden !important;
    overflow-x: auto !important;
    display: block;
    margin-left: 2px;
    max-width: 100%;
    border-left-width0: 4px;
    border-radius0: 0px 6px 6px 0px;
    border-radius0: 0px;
    background0: rgba(0, 0, 0, 0.1);
    opacity: 0.8;
    background: aliceblue;
    overflow-x: auto; 
    display: block;
    */
}
    .respOnMessage::-webkit-scrollbar {
        width: 3px;
        height: 3px;
        /* 
        background-color0: lightgray;
        display0: none;
        background0: #000;
        */
    }

        .respOnMessage::-webkit-scrollbar-thumb {
            background0: #393812;
            background: rgba(0, 0, 0, 0.3);
        /* 
        -webkit-border-radius: 1ex;
        -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
        */
        }

.respOnMessageList {
    color: #777;
    font-family: Arial, sans-serif;
    font-size: 13px;
    padding: 0px 2px 0px 0px;
    margin-bottom: 2px;
    white-space: nowrap;
    white-space: nowrap;
    text-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: clip;
    min-width: 120px;
    max-width: 360px;
    width: calc(100% - 164px);
    display: inline-block;
    /* 
    height: 20px;
    margin-top: -4px;
    display: block;
    border: 0px solid black;
    max-width: 256px;
    background: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    scrollbar-width: thin;
    width: 100%;
    min-width: 180px;
    display: inline-block;
    max-width: 256px;
    overflow-x: hidden !important;
    overflow-x: auto !important;
    display: block;
    margin-left: 2px;
    max-width: 100%;
    border-left-width0: 4px;
    border-radius0: 0px 6px 6px 0px;
    border-radius0: 0px;
    background0: rgba(0, 0, 0, 0.1);
    opacity: 0.8;
    background: aliceblue;
    overflow-x: auto; 
    display: block;
    */
}

.respOnMessageList::-webkit-scrollbar {
    width: 3px;
    height: 3px;
    /* 
        background-color0: lightgray;
        display0: none;
        background0: #000;
        */
}

    .respOnMessageList::-webkit-scrollbar-thumb {
        background0: #393812;
        background: rgba(0, 0, 0, 0.3);
        /* 
        -webkit-border-radius: 1ex;
        -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
        */
    }
.send-btn {
    /* 
    font-size: 19px; 
    padding0: 10px 4px 10px 4px;
    border1: 1px solid gray;
    margin-left1: 6px;
    color: #333333;
    color: lightsteelblue !important;
    */
    padding: 0px 6px 0px 6px;
    border-radius: 4px;
    width: 36px;
}

    .send-cell-buttons {
        display0: table-row;
        text-align: center;
        vertical-align: middle;
        width: 100%;
        padding: 8px 4px 4px 4px;
        height: 32px;
        border1: 1px solid black;
    }

    .send-cell-left {
        /*
    display0: table-row;
    vertical-align: middle;
    height0: 120px !important;
    border: 1px solid black;
    padding-bottom: 8px;
    */
        display: table-cell;
        text-align: right;
        vertical-align: bottom;
        width: 50%;
        padding-right: 4px;
        padding-bottom: 4px;
    }

    .send-cell-center {
        /*
    white-space: nowrap;
    */
        display: table-cell;
        text-align: center;
        vertical-align: middle;
        width: 320px !important;
        height0: 120px !important;
    }

    .send-cell-right {
        /*
    vertical-align: middle;
    height0: 120px !important;
    padding-bottom: 8px;
    */
        display: table-cell;
        text-align: left;
        vertical-align: bottom;
        width: 50%;
        padding-left: 4px;
        padding-bottom: 4px;
    }

    .formHeader {
        color: gray;
        font-size: 18px;
        margin-left: auto;
        margin-right: auto;
        width: 90%;
        border1: 1px solid maroon;
        text-align: center;
        padding0: 4px;
        margin-top: 4px;
        overflow: visible;
    }

.information {
    text-align: left;
    margin-bottom: 6px;
    font-size: 14px;
    /*
    font-size: 16px;
    text-align0: center;
    text-align: justify;
    font-size: 18px;
    color1: #000000;
    border0: 1px outset;
    */
    font-family: Arial,sans-serif;
    cursor: default;
    display: inline-block;
    width: 99%;
    margin-bottom: 4px;
    padding: 6px;
    /* 
    padding: 0px 0px 0px 0px;
    text-align: center;
	background: gold; 
	width: calc(100% - 2px);
	color: darkblue !important;	
	max-width: calc(100vw - 4px);
	border-radius: 6px;
    overflow-x: auto;
    width: calc(100% - 24px);
    max-height: 76vh !important;
    height: 76vh !important;
    color: #13688A;
    font-size: 18px;
    transition: all .5s;
	*/
    margin-right: auto;
    margin-left: auto;
    font-family: Arial,sans-serif;
    vertical-align: middle;
    max-height: 80vh;
    overflow-y: auto;
    scrollbar-width: thin;
    line-height: 130%;
    scroll-behavior: smooth;
}

    .formComment {
        text-align: center;
        text-align0: justify;
        margin-bottom: 6px;
    }

    .formText {
        font-size: 14px;
    }

    .formTitle {
        font-size: 14px;
    }

    .cardUser {
        /*
        box-shadow0: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        max-width: 300px;
    */
        min-height: 90px;
        margin: auto;
        text-align: center;
        font-family: arial;
        transition: all .5s;
    }

    .headerCardUser {
        margin-left: auto;
        margin-right: auto;
        color: grey;
        color: rgba(5, 127, 156, 1.0);
        font-size: 22px;
        padding: 2px 2px 2px 2px;
        margin-top: 6px;
        transition: all .5s;
    }

    .nameCardUser {
        display: inline-block;
        transition: all .5s;
    }

    .loginCardUser {
        margin-left: auto;
        margin-right: auto;
        color: rgba(5, 127, 156, 1.0);
        font-size: 16px;
        padding: 2px 2px 2px 2px;
        margin-top: 6px;
    }

    .titleCardUser {
        margin-left: auto;
        margin-right: auto;
        color0: grey;
        color: rgba(5, 127, 156, 1.0);
        font-size0: 18px;
        padding: 2px 2px 2px 2px;
        margin-top: 6px;
        transition: all .5s;
    }

    .deptCardUser {
        margin-left: auto;
        margin-right: auto;
        color0: grey;
        color: rgba(5, 127, 156, 1.0);
        padding: 2px 2px 2px 2px;
        margin-top: 6px;
        transition: all .5s;
    }

    .editableDiv {
        margin-left: auto;
        margin-right: auto;
        max-height: 32px;
        max-width: 200px;
        overflow-x: auto;
        overflow-y: hidden;
        display: block;
        background-color: #FFF;
        border: 1px solid maroon;
        border-radius: 4px 4px 4px 4px;
    }

    .buttonCardUser {
        border: none;
        outline: 0;
        display: inline-block;
        padding: 8px;
        color: white;
        background-color: #000;
        text-align: center;
        cursor: pointer;
        width: 100%;
        font-size: 18px;
    }

    buttonCardUser:hover, a:hover {
        opacity: 0.7;
    }

    .aCardUser {
        text-decoration: none;
        font-size: 20px;
        color0: black;
        color: #333;
        padding: 8px 8px 8px 8px;
    }

    .cardUserAvatar {
        /* min-width:40px; */
        padding0: 4px;
        background-color0: #000;
        background-color: #ddd;
        max-height: 260px;
        max-width: 260px;
        overflow: auto;
        border-radius: 6px 6px 6px 6px;
        border-radius0: 50% 50% 50% 50%;
        box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.4);
    }

    .messageUserAvatar {
    }

    .avatarsmall {
        /* 
	max-height: 24px; 
	background: rgba(0, 0, 0, 0.1);
	*/
        padding: 1px 4px 1px 0px;
        margin-bottom: -7px;
        height: 30px;
        background: transparent;
        margin-right: 2px;
        border-radius: 25% 25% 25% 25%;
        /* 
	border-radius: 50% 50% 50% 50%;
	*/
    }

    .avatarsmallTeam {
        /* 
	max-height: 24px; 
	background: rgba(0, 0, 0, 0.1);
	*/
        padding: 1px 4px 1px 0px;
        height: 30px;
        background: transparent;
        margin-right: 2px;
        border-radius: 25% 25% 25% 25%;
        margin-top: -8px;
        float: left;
        /* 
	margin-bottom: -7px;
	border-radius: 50% 50% 50% 50%;
	*/
    }

    .avatarTeam {
        padding: 1px 4px 1px 0px;
        height: 90px;
        background: transparent;
        margin-right: 2px;
        border-radius: 25% 25% 25% 25%;
        margin-top: -8px;
        float: left;
        margin-left0: 26px;
    }

    .lastMessageForTeam {
        /* float: right; */
        /* right: 12px; */
        padding: 4px 8px 4px 16px;
        background: rgba(0, 0, 0, 0.1);
        border-radius: 4px 4px 4px 4px;
    }

    .cardUserButtons {
        padding: 2px 4px 4px 8px;
    }

    .cardAdminButtons {
        padding: 8px 8px 8px 8px;
    }

    .cardAdminButton {
        /*
        display: flex;
    */
        min-width: 300px;
        border-radius: 4px;
        padding: 8px 8px 8px 8px;
        background: -moz-linear-gradient(top, #FFFFFF, #AFB3BF) !important;
        background: -ms-linear-gradient(top, #FFFFFF 0%,#AFB3BF 100%) !important;
        background: linear-gradient(top, #FFFFFF, #AFB3BF) !important;
        filter: progid:DXImageTransform.Microsoft.Gradient(startcolorStr='#FFFFFF', endcolorStr='#AFB3BF', gradientType='0');
        background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#AFB3BF)) !important;
        background: -webkit-linear-gradient(top, #FFFFFF, #AFB3BF) !important;
        background: -o-linear-gradient(top, #FFFFFF, #AFB3BF) !important;
        font-weight: normal !important;
        font-size: 16px;
        margin-top: 2px;
        color0: #13688A !important;
        color: black;
        border: 1px solid #cccccc !important;
        align-items: center;
        white-space: nowrap;
    }

    .cardAdminButtonText {
        display: inline-block;
        margin-left: -52px;
    }

    .cardAdminButton:hover {
        background: -moz-linear-gradient(top, yellow, #F7C928) !important;
        background: -ms-linear-gradient(top, yellow 0%,#F7C928 100%) !important;
        background: linear-gradient(top, yellow, #F7C928) !important;
        filter: progid:DXImageTransform.Microsoft.Gradient(startcolorStr='yellow', endcolorStr='#F7C928', gradientType='0');
        background: -webkit-gradient(linear, left top, left bottom, from(yellow), to(#F7C928)) !important;
        background: -webkit-linear-gradient(top, yellow, #F7C928) !important;
        background: -o-linear-gradient(top, yellow, #F7C928) !important;
        font-weight: normal !important;
    }

    .iconCard {
        display: inline-block;
        float: left;
        padding-right: 6px;
    }

    .iconCardRight {
        display: inline-block;
        float: right;
        padding-left: 6px;
        z-index: 11;
    }

    .confirmDialogAlert {
        color: maroon;
        text-align: center;
        /* margin-left: auto; */
        /* margin-right: auto; */
        display: inline-block;
    }

    .noAskCheckbox {
        color: #13688A !important;
        text-align: center;
        /* 
    float: left;
    display: inline-block;
    margin-top: 1em;
    */
        display: block;
        /* text-wrap: nowrap; */
        /* text-wrap: nowrap; */
    }

    .inviteUsersDialogLink {
        color: darkblue;
        font-size: 14px;
        margin-left: auto;
        margin-right: auto;
        width: 90%;
        border0: 1px solid maroon;
        text-align: center;
        padding: 4px;
        margin-top: 8px;
        overflow: auto;
        cursor: copy;
    }

    .inviteUsersDialogText {
        color: darkblue;
        font-size: 16px;
        margin-left: auto;
        margin-right: auto;
        width: 90%;
        text-align: center;
        padding: 6px;
        margin-top0: 2px;
        overflow: auto;
        background: rgba(28, 148, 196, 0.2);
    }

    .inviteUsersDialogCode {
        color: darkblue;
        font-size: 22px;
        margin-left: auto;
        margin-right: auto;
        width: 90%;
        border0: 1px solid maroon;
        text-align: center;
        padding: 4px;
        margin-top: 4px;
        overflow: auto;
        min-height: 32px;
        cursor: copy;
    }

    .tabchat {
        height: 100%;
        width: 100%;
        vertical-align: bottom;
        display0: table;
        border-collapse: collapse;
        /* border: 1px solid yellow; */
        background: white;
        height0: calc(100% - 154px);
        max-height0: calc(100% - 114px);
        max-height0: 600px;
    }

    .wide-button {
        min-width: 164px;
    }

    .ui-widget-header {
        background: rgba(5, 127, 156, 0.2);
    }

    .ui-button {
        background: -moz-linear-gradient(top, #FFFFFF, #AFB3BF) !important;
        background: -ms-linear-gradient(top, #FFFFFF 0%,#AFB3BF 100%) !important;
        background: linear-gradient(top, #FFFFFF, #AFB3BF) !important;
        filter: progid:DXImageTransform.Microsoft.Gradient(startcolorStr='#FFFFFF', endcolorStr='#AFB3BF', gradientType='0');
        background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#AFB3BF)) !important;
        background: -webkit-linear-gradient(top, #FFFFFF, #AFB3BF) !important;
        background: -o-linear-gradient(top, #FFFFFF, #AFB3BF) !important;
        font-weight: normal !important;
        margin-top: 2px;
        color: #13688A !important;
        border: 1px solid #cccccc !important;
    }

    .ui-icon {
        -webkit-transform: scale(2); /* Chrome, Safari, Opera */
        transform: scale(1.5);
    }

    .ui-hover-custom {
        background: -moz-linear-gradient(top, yellow, #F7C928) !important;
        background: -ms-linear-gradient(top, yellow 0%,#F7C928 100%) !important;
        background: linear-gradient(top, yellow, #F7C928) !important;
        filter: progid:DXImageTransform.Microsoft.Gradient(startcolorStr='yellow', endcolorStr='#F7C928', gradientType='0');
        background: -webkit-gradient(linear, left top, left bottom, from(yellow), to(#F7C928)) !important;
        background: -webkit-linear-gradient(top, yellow, #F7C928) !important;
        background: -o-linear-gradient(top, yellow, #F7C928) !important;
        font-weight: normal !important;
    }

    .ui-widget-header {
        color: #ffffff !important;
        font-weight: normal !important;
    }

    .ui-widget {
        font-family0: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
        font-size: 1.0em !important;
    }

    .fieldset {
        border: 1px solid transparent !important;
        text-align: center;
    }

    .teamnameDiv {
        color: maroon;
        white-space: nowrap;
        padding: 6px;
        min-height: 32px;
    }

    .teamnameSpan {
        display: inline-block;
        scrollbar-width: thin;
        max-width0: 200px;
        max-width: calc(100% - 36px);
        overflow-x: auto;
    }

        .teamnameSpan::-webkit-scrollbar {
            width1: 3px;
            height: 3px;
            display0: none;
            background-color0: transparent;
            background-color0: rgba(0, 0, 0, 0.1) background-color0:white;
            background-color0: lightgray;
            background-color0: rgba(255, 255, 255, 0.7)
        }

        .teamnameSpan::-webkit-scrollbar-thumb {
            background0: #393812;
            background0: white;
            background-color: rgba(255, 255, 255, 0.3)
        }

    .ui-widget-header {
        border0: 1px solid #e78f08;
        background: #f6a828 !important;
    }

    .fa, .fas, .fab, .far {
        font-size: 20px !important;
        color: #000000 !important;
        font-weight: 900;
        min-width: 32px;
        padding-right: 4px;
        /*
    font-size: 20px !important;
    color: #454545 !important;
    padding: 0px 8px 4px 3px;
    color: #343434 !important; 
    font-size: 18px !important;
    */
    }

.HTMLFormButtons .fas {
    /*
    font-size: 24px !important;
    */
    font-size: 24px !important;
}

.ui-widget input {
    color: darkblue !important;
    display: inline-block;
    width: 100%;
    padding: 4px;
    background: white;
    margin: 4px;
    /*
    width: 98%;
    */
}

    .ui-widget textarea {
        color: darkblue;
        background: white;
        /*
    color: darkblue !important;
    */
    }

    .disabledInput {
        background: whitesmoke !important;
        color: gray !important;
    }

    .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
        text-align: center !important;
    }

    .clayfy-handler.clayfy-touch-device {
        background: transparent !important;
        border: 0px !important;
        border-radius: 0px !important;
    }

    .ui-dialog .ui-dialog-title {
        overflow: auto !important;
        width: 94% !important;
        /*
        text-overflow: clip !important;
        */
    }

    .ui-dialog .ui-dialog-titlebar {
        padding: 4px 4px 4px 4px !important;
    }

    div.emoji-drop-down {
        max-width: 300px !important;
        height: 260px !important;
    }

    .marked {
        /*
    color: maroon !important;
    */
        color: darkgoldenrod !important;
    }

    .markedBlue {
        /*
    color: maroon !important;
    */
        color: darkblue !important;
    }

    .markedRow {
        background-color: lightyellow;
    }

    .iconRow {
        background-color0: lightyellow;
        color: darkgreen;
    }

    .highlighted {
        background-color: yellow;
    }

    .alert {
        /*
    color: maroon !important;
    */
        color: #641109 !important;
    }

    .justInfoText {
        color: steelblue !important;
    }

    .alertIcon {
        /*
    color: maroon !important;
    */
        color: #641109 !important;
    }

    .inactiveOpacity {
        opacity: 0.5;
    }

    .expired {
        color: maroon !important;
        border: 1px solid maroon;
    }

    .inactive {
        color: darkgrey !important;
        border: 1px solid grey;
    }

    .suspended {
        color: grey;
        border: 1px solid grey;
    }

    .inprogress {
        /*
    border: 1px solid olive !important;
    */
        color: olive !important;
    }

    .incoming {
        /*
    color: saddlebrown; sandybrown
    */
        color: darkgoldenrod !important;
        border: 1px solid saddlebrown;
    }

    .completed {
        color: darkgreen !important;
        border: 1px solid darkgreen;
    }

    .canceled {
        color: mediumblue;
        border: 1px solid mediumblue;
    }

    .actual {
        color0: black;
        color: #13688A !important;
        border: 1px solid #13688A;
        border0: 1px solid darkgrey;
    }

    .noborder {
        border: 0px solid transparent;
    }

    .ui-datepicker {
        margin: auto;
        position: absolute;
        left: 0 !important;
        right: 0 !important;
        top0: 0;
        bottom1: 92px !important;
        bottom: 640px !important;
    }

    button.ui-datepicker-current {
        display: none;
    }

    .disabled {
        pointer-events: none;
    }

    .datePickerDiv {
        font-family: Arial, sans-serif;
        font-size: 14px;
        color: #333;
        border: 1px solid #ddd;
        background: #eee;
        margin-left: auto;
        margin-right: auto;
        width: 152px;
        height: 24px;
        padding: 2px;
        margin-bottom: 4px;
        border-radius: 4px;
    }

    .timePickerDiv {
        font-family: Arial, sans-serif;
        font-size: 14px;
        color: #333;
        border: 1px solid #ddd;
        background: #eee;
        margin-left: auto;
        margin-right: auto;
        width: 86px;
        height: 24px;
        padding: 2px;
        margin-bottom: 4px;
        border-radius: 4px;
    }

    /* 
@media screen and (orientation:portrait or max-width: 320px) 
@media screen and (max-width: 320px)
@media screen and (orientation:portrait) 
*/
    @media screen and (orientation:portrait) {
        .sign-in-btn {
            right: 2px;
        }

        .tabs {
            /*
            height0: calc(100% - 96px);
            height: calc(100% - 2px);
            */
        }

        .menu-btn {
            right: -46px !important;
        }

        nav.nav-open .menu-btn {
            right: 0px !important;
        }

        .logo {
            font-size: 5.5rem;
        }

        #messages {
            /*
        bottom: 88px;
        bottom: 120px;
        */
            bottom: 82px;
        }

        .chattextarea {
            width: 232px !important;
        }

        .send-cell-center {
            /* width: 240px !important; */
        }

        .ui-datepicker {
            bottom: 140px;
        }

        .sign-in-div {
            width0: calc(100% - 16px) !important;
            max-width0: calc(100% - 16px) !important;
            width: 100% !important;
            margin-left0: 8px;
            left: 0 !important;
            right: 0 !important;
        }

        .chatsendtable {
            max-width: calc(100vw - 2px);
            width: calc(100% - 2px);
        }

        .datePickerDiv {
            width: 142px;
        }
    }
    /**/
    /* portrait styles, when softkeyboard appears, goes here */
    @media only screen and (min-width : 300px) and (max-width : 768px) and (orientation : landscape) {
        .chattextarea {
            width: 240px !important;
        }

        .chatsendtable {
            max-width: calc(100vw - 2px);
            width: calc(100% - 2px);
        }
    }

    /* */
    .chatdiv::-webkit-scrollbar {
        width: 4px;
        height: 4px;
        background-color: white;
        display0: none;
        background0: #000;
    }

    .chatdiv::-webkit-scrollbar-thumb {
        background: lightgray;
    }

    .chatdiv {
        scrollbar-width: thin;
    }

    .chatsendplus {
        /*
    margin: auto;
    background: rgb(99, 178, 214);
    vertical-align: middle;
    width: 40px;
    border-radius: 6px 6px 6px 6px;
    float: right;
    position: absolute;
    position: fixed;
    position: relative;
    float: right;
    right: 6px;
    position: fixed;
    */
        color: rgba(99, 178, 214, 0.5);
        border-radius: 50%;
        padding: 6px;
        font-size: 32px !important;
        bottom: 50px;
        right: 14px;
        position: absolute;
        transition: all .5s;
        z-index: 11;
    }

    .chatmenuicon {
        float: right;
        padding: 4px 4px 4px 10px;
        display: block;
        font-size: 12px !important;
        color: #777 !important;
    }

.chatmenurow {
    font-family: Arial,sans-serif;
    font-size: 16px;
    padding: 5px;
    padding-bottom: 4px;
    color1: #000000;
    border0: 1px outset;
    cursor: default;
    white-space: nowrap !important;
    border-bottom: 1px outset #999;
    min-height: 28px;
}

    .iconExpand {
        font-size: 18px !important;
        display: inline-block !important;
        float: left;
        padding: 4px 6px 4px 4px;
        margin-top: -2px;
    }

    .iconRefresh {
        /*
    display: none !important;
    */
        display: inline-block !important;
        font-size: 18px !important;
        float: left;
        padding: 4px 6px 4px 4px;
        margin-top: -2px;
    }

@media only screen and (max-width : 360px) and (orientation : portrait) {
    .tabs__link .iconRefresh {
        /*
        font-size: smaller;
        */
        font-size: 14px !important;
        padding: 4px 2px 4px 2px;
        margin-top: 0px;
    }
}
    .iconRefreshTeamList {
        /*
    display: none !important;
    */
        display: inline-block !important;
        font-size: 18px !important;
        float: right;
        padding: 4px 6px 4px 4px;
        margin-top: -2px;
        cursor: default;
    }

    .iconInstall {
        /*
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: 144px;
    display: inline-block !important;
    */
        font-size: 18px !important;
        padding: 4px 6px 4px 4px;
        color: maroon !important;
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        display: none;
        bottom: 144px;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .iconTopCases {
        font-size: 16px !important;
        display: inline-block !important;
        float0: left;
        float: right;
        padding: 4px 6px 4px 4px;
        margin-left: 6px;
        /* 
    margin-top: -4px;
    */
    }

    .iconShowDox {
        color: darkslategray !important;
        font-size: 24px !important;
        display: inline-block !important;
        float0: left;
        float: right;
        padding: 2px 4px 2px 4px;
        margin-left: 2px;
        margin-top: -4px;
        /* 
    color: #454545;
    margin-top: -4px;
    */
    }

    .trumbowyg-html-button svg {
        width: 22px !important;
    }

    .iconExpandCase {
    }

    .loader {
        border: 6px solid #1C8ADB;
        border-radius: 50%;
        border-top: 6px solid goldenrod;
        border-bottom: 6px solid goldenrod;
        width: 30px;
        height: 30px;
        -webkit-animation: spin 2s linear infinite;
        animation: spin 2s linear infinite;
    }

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

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

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

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

    .switch {
        position: relative;
        display: inline-block;
        width: 48px;
        height: 24px;
    }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: .4s;
        transition: .4s;
    }

        .slider:before {
            position: absolute;
            content: "";
            height: 16px;
            width: 16px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;
        }

    input:checked + .slider {
        /*
    background-color: #2196F3;
    */
        background-color: #13688A;
    }

    input:focus + .slider {
        box-shadow: 0 0 1px #2196F3;
    }

    input:checked + .slider:before {
        -webkit-transform: translateX(26px);
        -ms-transform: translateX(26px);
        transform: translateX(26px);
    }

    /* Rounded sliders */
    .slider.round {
        border-radius: 24px;
    }

        .slider.round:before {
            border-radius: 50%;
        }


    /* @media only screen and (orientation : landscape) 
   @media (min-width: 1025px) 
*/
    @media (min-width: 980px) {
        .chatdiv::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
    }

    /* 
    -webkit-border-radius: 1ex;
    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
*/

    /* Dark mode */
    @media (prefers-color-scheme: dark) {
    }