/*region fonts*/
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: local('Material Icons'),
        local('MaterialIcons-Regular'),
        url(fonts/MaterialIcons-Regular.ttf) format('truetype');
}

@font-face {
    font-family: Aller Display;
    src: url(fonts/aller/AllerDisplay.ttf) format('truetype');
    font-weight: normal;
}

@font-face {
    font-family: Malgun Gothic;
    src: url(fonts/malgun/malgun.ttf) format('truetype');
    font-weight: normal;
}

@font-face {
    font-family: GT_Eesti_PRO_display_medium;
    src: url("fonts/GT_Eesti_Pro_Display_Medium.woff2") format("opentype");
}

:root {
    --color-black: #000000;
    --color-orange05: #FDF2E7;
    --color-orange50: #EB7A11;
    --color-gray05: #F2F2F2;
    --color-gray1: #FAFAFB;
    --color-gray6: #282828;
    --color-gray7: #ced4da;
    --color-gray10: #E6E6E6;
    --color-gray20: #CCCCCC;
    --color-gray80: #333333;
    --color-gray40: #999999;
    --color-red: #F24749;
    --color-white: #ffffff;
}

.material-icons {
    font-family: Material Icons;
    font-weight: normal;
    font-style: normal;
    font-size: 20px;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;    /* Support for all WebKit browsers. */
    text-rendering: optimizeLegibility;     /* Support for Safari and Chrome. */
    -moz-osx-font-smoothing: grayscale;     /* Support for Firefox. */
    font-feature-settings: 'liga';          /* Support for IE. */
}
/*endregion*/

.chat-input {
    display: block;
    width: 100%;
    overflow: hidden;
    resize: both;
    min-height: 40px;
    line-height: 20px;
}


/*region colors*/
.sivy       {
    color: #aaa;
}
.sedy       {
    color: #888;
}
.sedy h4    {
    color: #888 !important;
}
.blue-dark  {
    color: #093c71;
}
.blue-light {
    color: #35B4E5 !important;
}
.ora        {
    color: #F26419;
}
.yel        {
    color: #F6AE2D;
}
.alba       {
    color: white !important;
}
.text-dark  {
    color: #666 !important;
}
.text-black {
    color: black !important;
}
.bg-blue-dark {
    background: #093c71;
}
.bg-silver  {
    background: #eee !important;
}
.bg-dark    {
    background: #444;
}
.bg-rem     {
    background: #b34 !important;
}
.bg-white   {
    background: white;
}
.bg-mccloud {
    background: #f2f2f2;
}
.bg-light   {
    background: #fefcfb !important;
}
.bg-cyanide {
    background: #36b4e5 !important;
}
.bg-orange  {
    background: #F26419 !important;
}
.bg-yellow  {
    background: #F6AE2D !important;
}
.bg-sedy       {
    background: #888;
}
.bg-gray {
    background: #ddd;
}
/*endregion*/


/*region txt transforms*/
.boldec             {
    font-weight: bold !important;
}
.semi-boldec        {
    font-weight: 600;
}
.font-micro         {
    font-size: 9px !important;
}
.font-mini          {
    font-size: 11px !important;
}
.font-normal        {
    font-size: 13px !important;
}
.font-19            {
    font-size: 15px !important;
}
.font-midi          {
    font-size: 17px !important;
}
.font-big           {
    font-size: 20px !important;
}
.font-company       {
    font-size: 16px !important;
}
.font-icon          {
    font-size: 48px !important;
}
.font-icon-mid      {
    font-size: 24px !important;
}
.font-icon-normal   {
    font-size: 18px !important;
}
.font-icon-mic      {
    font-size: 8px !important;
}
/*endregion*/

.mw-25 {
    max-width: 25%;
}
.mw-50 {
    max-width: 50%;
}
.mw-75 {
    max-width: 75%;
}

.w-70p {
    width: 70px !important;
}


/*region page elements */
html, body {
    font-family: Open Sans, sans serif;
}
body {
    background: #f2f2f2;
    color: #2B3641;
    font-size: 13px;
    font-weight: normal;
}
h1      {
    text-transform: unset;
    font-size: 24px;
    font-weight: bold;
    margin: 100px 0 40px;
}
h2      {
    font-size: 20px;
    font-weight: bold;
    margin: 60px 0 30px;
}
h4      {
    color: #333;
    font-size: 16px;
    font-weight: bold;
    margin: 40px 0 18px;
}
h5      {
    color: #444444;
    font-size: 13px;
    font-weight: 600;
    margin: 20px 0 10px !important;
}
h3.page-header {
    color: #093c71;
    font-size: 34px;
    font-weight: 700;
    margin: 40px 0 40px;
}
a {
    text-decoration: none !important;
    -o-transition:.2s;
    -ms-transition:.2s;
    -moz-transition:.2s;
    -webkit-transition:.2s;
    transition:.2s;
    color: #093c71;
}
a:hover     {
    color: #36b4e5;
}
.full-height {
    min-height: calc(100vh);
}
.cursor-link {
    cursor: pointer;
}
.hide-me {
    display: none;
}
/*endregion*/


/*region home page full screen panel */
.billboard
{
    padding: 90px 0;
    margin-top: -90px;
    min-height: calc(100vh + 15px);
    background: #3E6E9D url("../images/billboard.png") center center no-repeat;
    background-size: 100% auto;
    color: #fefcfb;
}
.billboard h1 {
    color: #fefcfb;
    font-size: 36px;
}
/*endregion*/


/*region Navbar*/
.navbar     {
    box-shadow: none !important;
    border: none !important;
    transition: 0.4s;
    height: 130px;
}

.normal-user{
    font-size: 14px;
    font-weight: 600;
    color: #fefcfb;
    text-transform: uppercase;
}
.normal-user:hover {
    color: #35B4E5;
}
.user-icon  {
    font-size: 54px;
    position: absolute;
    color: white;
    top: -5px;
    left: -5px;
}
.user-icon-holder {
    position: absolute;
    width:50px;
    height: 50px;
    top:7px;
    right: 10px;
    border-radius: 50%;
}

#hamburger-menu{
    display: none;
    width: 100%;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1070;
    background-color: rgb(89, 89, 89);
    padding: 10px;
    flex-direction: column;
    margin: 0px;
}

#hamburger-menu a {
    margin-bottom: 5px; /* Adjust the percentage value as needed */
}

#nav-container {
    padding: 0 16px;
    max-width: 1650px;
    width: 80%;
    transition: 0.4s;
}

.nav-logo img   {
    max-width: 120px;
    max-height: 50px;
    transition: 0.4s;
}

#nav-account .img-profile {
    display: none;
}

#nav-dashboard,
#nav-messages {
    display: none;
}

#hamburger-menu .nav-mobile-hide{
    display: none;
    min-height: 60px;
    margin: 0;
    margin-left: 20px;
    margin-right: 20px;
    justify-content: center;
}

div-bars-icon{
    display: flex;
}
#nav-container .fa-envelope{
    font-size: 3rem;
}

#nav-container .fa-bars{
    font-size: 4rem;
}

#nav-messages .fa-exclamation-circle{
    font-size: 2rem;
}

@media only screen and (min-device-width: 300px) {
    #hamburger-menu{
        width: auto;
    }
}

@media only screen and (min-device-width: 500px) {
    .nav-logo img   {
        max-width: 150px;
    }
}

@media only screen and (min-device-width: 700px) {
    .nav-logo img {
        max-width: 90px;
    }
    #nav-account .img-profile {
        display: block;
    }
    #nav-container {
        padding: 0 25px;
        width: 100%;
    }
    .navbar {
        height: 100px;
    }
    #nav-messages {
        display: flex;
    }
    #nav-container .fa-bars {
        font-size: 3rem;
    }
    #nav-messages .fa-exclamation-circle{
        font-size: 1.5rem;
    }
    #hamburger-menu {
        position: static;
        top: auto;
        left: 0;
        z-index: auto;
        background-color: transparent;
        padding: 0;
        flex-direction: row;
    }
    #hamburger-menu .nav-mobile-hide{
        width: auto;
        margin-left: 0;
        margin-right: 0;
        min-height: auto;
    }
}

@media only screen and (min-device-width: 1200px){
    #hamburger-menu .nav-mobile-hide,
    #hamburger-menu,
    #nav-dashboard {
        display: flex;
    }
    .nav-logo img {
        max-width: 180px;
    }
    #nav-messages .fa-envelope{
        font-size: 1.3rem;
    }
    .div-bars-icon{
        font-size: 1.3rem;
        display: none;
    }
    #nav-messages .fa-exclamation-circle{
        font-size: .9rem;
    }
}

.nav-dummy {
    padding-top: 32px;
    visibility: hidden;
}
/*endregion*/


.tabsMenuHide {
    top: -999px;
    transition: 0.4s;
}
.tabsMenuBlock {
    top: 0px;
    transition: 0.4s;
}
/*region buttons*/
.btn-expert  {
    font-size: 8px;
    font-weight: bold;
    color: white;
    padding: 1px 4px;
    width: 62px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.btn-expert:hover  {
    opacity: 0.9;
}

.btn-action  {
    font-size: 8px;
    font-weight: bold;
    color: white;
    display: inline-flex;
    padding: 1px 4px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.btn-hide    {
    background: #fff;
    color: #a45;
    border: 1px #ddd solid;
}
.btn-hide:hover {
    background: #b22;
    color: #fff;
    border: 1px #800 solid;
}

.btn-outlook {
    background: #093c71;
    color: white;
    font-weight: bold;
    display: block;
}
.btn-outlook:hover {
    background: #36b4e5;
    color: white;
}

.btn-outline {
    background: none;
    color: #093c71;
    border: 2px solid #093c71;
    border-radius: 0;
    text-transform: uppercase;
    font-weight: 600;
    padding: 7px 12px 6px 12px;
}
.btn-outline:hover {
    background: white;
    color: #36b4e5;
    border-color: #36b4e5;
}

.bt-nova {
    color: white;
    background: #587A9D;
    padding: 7px 0;
    font-size: 9px;
}
.bt-nova:hover {
    background: #36b4e5;
}

.btn_circle80 {
    width: 80px;
    height: 80px;
    border-radius: 40px;
    text-align: center;
    margin-bottom: 15px;
    border: 2px solid #36b4e5;
}


.submit-contact {
    background: #093c71 !important;
    color: #fefcfb !important;
    text-transform: uppercase;
    padding: 5px 30px !important;
    font-weight: bold;
    font-size: 14px;
    border: none !important;
}
.submit-contact:hover {
    background: #36b4e5 !important;
    border: none !important;
    padding: 5px 30px !important;
}
.submit-contact:focus {
    border: none !important;
    padding: 5px 30px !important;
}

.submit {
    background: #093c71;
    border-radius: 5px;
    color: white;
    padding: 12px 32px;
    margin: 10px 0;
    border: none;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 2px;
}
.submit:hover {
    background: #36b4e5;
    color: #fff;
}

.submit-mini {
    padding: 6px 12px;
}
.submit-midi {
    padding: 8px 12px;
}

.submit-nova {
    background: #e4572e;
    color: #fefcfb;
    font-size: 14px;
    padding: 10px 20px;
    border-radius: 0;
}
.submit-nova:hover {
    background: #9E3526;
    color: white;
}

.submit-trans {
    background: none;
    color: #fefcfb;
    font-size: 16px;
    border: 2px #fefcfb solid;
    padding: 8px 18px;
    border-radius: 0;
}
.submit-trans:hover {
    background: #36b4e5;
    border-color: #36b4e5;
}

.submit-clear {
    background: none;
    color: #fefcfb;
    font-size: 14px;
    border: none;
    padding: 9px 19px;
    letter-spacing: unset;
}
.submit-clear:hover {
    background: none;
    color: #36b4e5;
}
/*endregion*/

.btn-text-gray {
    color:#616d65 !important;
}
/*region Forms*/
.parsley-errors-list {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.ex-form textarea {
    margin-top: 0;
}

.invalid-feedback {
    display: block;
}

.form-control.is-invalid {
    background-image: none;
}

.ex-form label {
    font-weight: bold;
}

.nova-form input, .nova-form textarea
{
    display: inline-block;
    border: none;
    border-bottom: 1px grey solid;
    width: 45%;
    padding: 10px 0;
    margin: 10px 20px 0 0;
    background: none;
    outline: none;
}
.nova-form input:focus, textarea:focus
{
    border-bottom: 2px #093c71 solid;
    padding: 9px 0;
}
.nova-form input[type=submit] {
    width: unset;
}

.login-form {
    text-align: center;
    margin-bottom: 20px;
}
.login-form input:not([type=submit]), .login-form textarea
{
    font-size: 16px;
    display: inline-block;
    border-radius: 0;
    border: 0;
    border-bottom: 2px #aaa solid;
    padding: 10px;
    margin: 0 0 20px;
    width: 320px;
    background: none;
    outline: none;
}
.login-form input:not([type=submit]):focus, .login-form textarea:focus
{
    box-shadow: none;
}

.search-field {
    padding: 0 12px;
    height: 26px !important;
    margin: 4px 0 !important;
    border: 0 !important;
    background: #eee !important;
}
.search-icon {
    position: absolute;
    right: 8px;
    top: 10px;
    color: #777;
    font-size: 14px !important;
}


/*endregion*/


/*region Language drop-down */
/*.nova-drop button { font-size: 16px; font-weight: 600; letter-spacing: 0.05em; background: none; border: none; padding: 10px; margin-top:-3px; margin-right: 30px; color: #fefcfb; }
.nova-drop button:hover, .nova-drop button:focus { background: none !important; border: none; }
.nova-drop div { background: #fefcfb; border-radius: 0; border: none; }
.nova-drop div a { color: #666; font-size: 14px; font-weight: 600; letter-spacing: 0.05em; }
.nova-drop div a:hover { color: #093c71; }*/
/*endregion*/


/*region footer*/
.footer
{
    /*background: url("../images/footer.png") top center no-repeat; background-size: 100% auto;*/
    background-color: linear-gradient(to right, #4BA6D6, #325375);
    color: #fefcfb;
    margin: 40px 0 0;
    padding: 20px 0 20px;
    font-size: 12px;
    font-weight: 600;
    line-height: 150%;
    letter-spacing: 0.05em;
}
.footer img.scrollup {
    max-width: 108px;
}
.footer p {
    margin-bottom: 8px;
}
.soci           {
}
.soci div       {
    margin: 8px;
}
.soci div img   {
    width: 38px;
    height: 32px;
}
/*endregion*/


/*region blocks*/
.nova-block {
    cursor: pointer;
    display: inline-block;
    padding: 0;
    width: 47%;
    font-size: 10px;
    text-align: center;
}
.nova-block:first-child {
    float:left;
}
.nova-block:last-child {
    float:right;
}
.nova-block i {
    vertical-align: -6px;
    padding-right: 8px;
    font-size: 17px;
}

.pr-stat {
    display: flex;
    font-size: 9px !important;
    color: #222;
    font-weight: bold;
}
.pr-stat i {
    font-size: 15px;
    display: block;
    margin: 6px 0 4px;
    color: #36b4e5;
}
.pr-stat > div {
    flex-grow: 1;
    text-align: center;
    border: 1px solid #ccc;
    margin: 10px 5px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #444;
}

.pr-stat div a {
    display:inline-block;
    width:100%;
    height:100%;
}

.nova-table {
    background: none;
}
.nova-table td {
    background: #fefcfb;
    padding: 12px;
    border-bottom: 20px #F2F2F2 solid;
    border-top: none;
    font-size: 13px;
    color: #666;
}
.nova-table td.proj-info h5
{
    margin: 0 0 10px 0 !important;
    padding: 0;
    color: #36b4e5;
    font-size: 15px;
    font-weight: 600;
    text-transform: capitalize;
    white-space: nowrap;
}
.nova-table td i {
    font-size: 22px;
    color: white;
    vertical-align: -4px;
    padding-right: 15px;
}
.nova-table td i.calendar-icon {
    font-size: 18px;
    color: #093c71; /*blue-dark*/
    margin-left: 200px;
}
.nova-table .numbers {
    font-size: 18px;
    color: #555;
    font-weight: bold;
    vertical-align: 15px;
}
.nova-table .icon-blue {
    color: white;
    background: #36b4e5;
    font-size: 20px;
    padding: 6px;
}
.nova-table .indicator {
    height: 16px;
    width:4px;
    display: inline-block;
    margin-right: 20px;
}

.panel-project {
    margin: 0 0 20px;
    font-size: 16px;
    display: block;
    z-index: 200;
}

/* EN project info graph - 2-columns table */
.table-graph td             {
    border: none;
}
.table-graph td:first-child {
    width: 50%;
    border-right: 20px solid #f2f2f2;
}
.table-graph td div:last-child {
    vertical-align: -8px;
}


/* for expert info list */
ul.li-yellow {
    list-style: none;
    padding: 0;
    margin: 0;
}
li.li-yellow {
    padding-left: 1em;
    text-indent: -.7em;
}
li.li-yellow::before {
    content: "• ";
    color: #36b4e5;
}

.panel-pro
{
    border-top: 6px #36b4e5 solid;
    margin: 12px 0;
    padding: 15px 25px;
    background: #fff;
    font-size: 13px;
    /*transition: transform .2s;*/
}

.panel-side {
    border-left: 6px #36b4e5 solid;
    margin: 12px 0;
    padding: 15px 25px;
    background: #fff;
    font-size: 13px;
    /*transition: transform .2s;*/
}

.panel-pro:hover {
    box-shadow: rgba(0,0,0,0.1) 10px 20px 40px;
}
.panel-pro h4 {
    margin: 40px 0 6px;
    color: #36b4e5;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 18px;
}
.panel-pro div.info {
    height: 32px;
    max-height: 42px;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 8px 0;
}
.panel-pro button
{
    margin: 0;
    padding: 10px 0;
    font-size: 12px;
    font-weight: bold;
    color: #268;
    background: #e8e8e8;
    width: 49%;
}

.panel-pro.silver * {
    color: silver!important;
}

.panel-pro-details {
    height: 210px;
}
.panel-pro-mini    {
    height: 130px !important;
}
.panel-pro-expert {
    height: 100px;
}
.panel-pro-expert-details {
    height: 180px;
}
.panel-pro-expert, .panel-pro-expert-details {
    border-top: 6px #36b4e5 solid;
    margin: 2px 0 20px 0;
}

.panel-pro-expert-first_login {
    height: 70px !important;
    /*border-top: 6px #36b4e5 solid;*/
    margin: 2px 0 20px 0;
}
.panel-pro-expert-tac_accepted {
    height: 70px !important;
    /*border-top: 6px #4ADD4A solid;*/
    margin: 2px 0 20px 0;
}
.panel-pro-expert-tac_rejected {
    height: 70px !important;
    /*border-top: 6px #dd4a4a solid;*/
    margin: 2px 0 20px 0;
}
.panel-pro-expert-payment {
    height: 70px !important;
    border-top: 6px #228B22 solid;
    margin: 2px 0 20px 0;
}

.finished, .finished h4, .finished div, .finished i, .finished a {
    color: silver !important;
}
.finished .bt-nova, .finished .bt-nova i {
    color: white !important;
    background: #ddd;
}

.add-item {
    background: #666;
    color:white;
    cursor:pointer;
    font-size: 12px;
    padding: 4px 12px;
    margin: 0 0 22px;
    display: inline-block;
}

.add-expert-block   {
    background: #fefcfb;
    color: #666;
    font-size: 12px;
    padding: 10px 15px;
    min-height: 173px;
    position: relative;
}

.add-expert-block h3   {
    color: #093c71;
    font-size: 15px;
    text-transform: uppercase;
    margin: 10px 0 10px;
    height: 42px;
}
.add-expert-block h3 i {
    font-size: 24px;
    padding-right: 10px;
    vertical-align: -6px;
}
.expert-block-text     {
    height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.expert-block-footer   {
    height: 42px;
}

.sub-add-expert {
    background: white;
    border: 3px solid #093c71;
    color: #093c71;
    cursor:pointer;
    font-weight: 400;
    font-size: 14px;
    padding: 7px 14px;
    display: inline-block;
    float: left;
    text-transform: uppercase;
}
.add-expert {
    background: #093c71;
    color:white;
    border: none;
    cursor:pointer;
    font-weight: 400;
    font-size: 14px;
    padding: 10px 20px;
    display: inline-block;
    float: right;
    text-transform: uppercase;
}

.x-close {
    position: absolute;
    top: 12px;
    right: 12px;
    color: #b00;
    font-weight: bold;
    text-decoration: none !important;
    background: white;
    padding: 6px;
    border-radius: 6px;
    height: 20px;
    line-height: 2px;
}
.odstup {
    width:120px;
    display: inline-block;
}

.angle-input
{
    display: inline-block;
    width: 90%;
    margin: 10px 0 !important;
    padding: 16px !important;
    border-radius: 0;
    border: 0 !important;
    font-size: 14px !important;
}
.angle-select   {
    display: inline-block;
    width: 90px;
    margin-top: 2px;
    font-size: 14px;
}

.modal-content, .modal-header, .modal-footer {
    border: 0;
    border-radius: 0;
}
.modal-footer .btn-outlook {
    border: 0;
    border-radius: 0;
    padding: 10px 20px;
    font-weight: normal;
    text-transform: uppercase;
    font-size: 12px;
}
.modal-footer .btn-secondary {
    border: 0;
    border-radius: 0;
    background: none;
    padding: 10px 20px;
    font-weight: 600;
    color: #093c71;
    font-size: 12px;
}

#E_modal .body_E_modal {
    max-height: 500px;
    overflow-y: auto;
}

.nova-nav {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-left: 0;
    list-style: none;
    border-bottom: 1px solid #ccc;
}

.tab-link
{
    display: block;
    color: #666;
    padding: 8px 0 4px;
    margin: 0 20px 0 0;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
}

.tab-link:hover, .tab-link.active  {
    color: #36b4e5;
    border-bottom: 3px solid #36b4e5;
}

.project-form {
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #555;
}
.project-form div.block {
    background: #fefcfb;
    margin: 6px 0;
    padding: 20px 30px;
}
.project-form input:not([type=file]), .project-form select, .project-form textarea {
    width: 100%;
    font-size: 13px;
    margin: 4px 0 15px 0;
    border-radius: 0;
    border: none;
    border-bottom: 2px solid #888;
    box-shadow: none !important;
    background: #f2f2f2;
    color: #555;
    padding: 8px;
}

.project-input {
    width: 100%;
    font-size: 13px;
    border-radius: 0;
    border: none;
    border-bottom: 2px solid #888;
    box-shadow: none !important;
    background: #f2f2f2;
    color: #555;
    padding: 8px;
}

.project-form span.border-blue input, .project-form span.border-blue textarea {
    border-color: #093c71 !important;
} /* exception for required * fields */
.project-form input {
    height: 40px;
}
.project-form textarea {
    height: 131px;
}
.project-form select   {
    height: 50px;
}
.star {
    color: #a71d2a;
    vertical-align: 5px;
    margin-left: 5px;
}

.project-form .select2-container {
    border-bottom: 2px solid #888;
    padding: 8px;
}

.project-form .select2-container--default .select2-selection--single {
    background: none;
    border: none;
}

.project-form .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 10px;
}

.remove_red_eye:hover {
    color: #36b4e5;
}

div.member-panel
{
    margin: 0;
    padding: 0 8px 0 0;
    width: 100%;
    max-height: 218px;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #777 #eee;
    font-weight: normal;
}
div.member-panel::-webkit-scrollbar {
    width: 6px;
}
div.member-panel::-webkit-scrollbar-track {
    background: #eee;
}
div.member-panel::-webkit-scrollbar-thumb {
    background: #777;
}
div.member
{
    background: #f2f2f2;
    margin: 12px 0;
    padding: 6px 12px;
}
div.member-eg {
    border-left: 5px #36b4e5 solid;
}
div.member-cus{
    border-left: 5px #093c71 solid;
}
div.member-proj{
    border-left: 5px #F26419 solid;
}
.phantom   {
    visibility: hidden;
    display: none;
}


/* Project Experts table */
.expert-table {
    background: #FEFCFB;
    font-size: 13px;
    color: #666;
    table-layout: fixed;
    margin: 0;
}
.expert-table tr:not(:last-child) {
    border-bottom: 1px solid #bbb !important;
}
.expert-table th {
    background: #36b4e5;
    font-weight: 600;
    font-size: 13px;
    color: white;
    border: none !important;
    padding-top: 18px;
    padding-bottom: 18px;
}
.expert-table.-small th {
    padding-top: 5px;
    padding-bottom: 5px;
}
.expert-table td {
    border: none;
    height: 70px;
    padding: 6px 12px;
    vertical-align: middle;
}
.expert-table.-small td {
    height: auto;
}
.expert-table td.empty_column, .expert-table th.empty_column {
    width: 5%;
}
.expert-table td.order_column, .expert-table th.order_column {
    width: 5%;
}
.expert-table th.order_column {
    font-size: 1.2rem;
}
.expert-table td.order_column.custom-index, .expert-table th.order_column.custom-index {
    width: 8%;
}
.expert-table td.order_column.custom-index .expert-project-order {
    overflow-wrap: anywhere;
}

.expert-table td.name_column, .expert-table th.name_column {
    width: 20%;
}
.expert-table td.previous_project_col, .expert-table th.previous_project_col {
    width: 20%;
}
.expert-table td.copy_expert_col, .expert-table th.copy_expert_col {
    width: 20%;
}
.expert-table td.employment_column, .expert-table th.employment_column {
    width: 25%;
}
.expert-table td.checkbox_column, .expert-table th.checkbox_column {
    width: 3%;
}
.expert-table td.experience_column, .expert-table th.experience_column {
    width: 20%;
}
.expert-table td.wildcard_column, .expert-table th.wildcard_column {
    width: 12%;
}
.expert-table td.expert_rate, .expert-table th.expert_rate {
    width: 12%;
}
.expert-table td.new_column_class, .expert-table th.new_column_class {
    width: 5%;
}
.expert-table td.action_column, .expert-table th.action_column  {
    width: 12%;
}
.expert-table th.project_status_column, .expert-table th.project_status_column {
    width: 15%;
}
.expert-table th.expert_email {
    width: 25%;
}

.expert-table th.expert_phone {
    width: 15%;
}

.expert-table th.expert_rate {
    width: 12%;
}

.expert-table th.expert_cost {
    width: 12%;
}

.expert-table td.note_rsrch_column, .expert-table th.note_rsrch_column {
    /*width: 10%;*/
    width: 160px;
}
.expert-table td div.employment_column {
    margin-left: -15px;
}
.expert-table td div ul {
    list-style: none;
    overflow: hidden;
    text-overflow: ellipsis;
}
.expert-table td div ul li {
    word-wrap: break-word;
}
.expert-table td div ul:not(.no-bullets) li ::before {
    content: "\25AA";
    color: #36b4e5;
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -15px;
}
.panel-heading .fa-chevron:after {
    content: "\f078";
}
.panel-heading.collapsed .fa-chevron:after {
    content: "\f054";
}
/* Experts Calls table */
.expert-call-table {
    margin-top: 10px;
    font-size: 12px;
}
.expert-call-table th {
    background: #36b4e5;
    font-weight: 600;
    font-size: 12px;
    color: white;
    border: none !important;
    padding: 14px 26px;
}
.expert-call-table td {
    vertical-align: middle;
    text-align: center;
    background: #fefcfb;
    color: #777;
}
.expert-call-table td.angle-cell {
    text-align: left;
    padding-left: 25px;
    font-weight: 600;
    color: #093c71;
}
.expert-call-table a {
    color: #36b4e5;
}
.expert-call-table a:hover {
    color: #093c71;
}
.expert-button {
    background: #093c71;
    color: white;
    border: none;
    border-radius: 9px;
    padding: 3px 5px !important;
    text-transform: uppercase;
    font-size: 10px;
}
.expert-button:hover {
    background: #36b4e5;
}
.en-button {
    background: #093c71;
    color: white;
    font-size: 12px;
    border: 0;
    padding: 4px 8px;
}

.expert-button span.alt {
    display: none;
}
.expert-button.selected span.alt {
    display: inline-block;
}
.expert-button.selected span.orig {
    display: none;
}

/* User list table */
.user-list-table {
    background: #FEFCFB;
    font-size: 13px;
    color: #666
}
.user-list-table tr:not(:last-child) {
    border-bottom: 1px solid #bbb !important;
}
.user-list-table tr:first-child {
    border-bottom: none !important;
}
.user-list-table th {
    background: #36b4e5;
    font-weight: 600;
    font-size: 13px;
    color: white;
    border: none !important;
    padding-top: 18px;
    padding-bottom: 18px;
}
.user-list-table td {
    border: none;
    height: 70px;
    padding: 6px 12px;
    vertical-align: middle;
}

/*endregion*/


/*region statistics*/
.stadiv
{
    position: absolute;
    left: 480px;
    top: 120px;
    z-index: 4;
    display: none;
    padding: 20px;
    border-radius: 8px;
    background: #f0f2f4;
    border: 2px solid #d0d4d8;
    box-shadow: rgba(0, 0, 0, 0.1) 0 10px 30px;
    height:auto;
    overflow:auto;
    /*-o-transition:.2s; -ms-transition:.2s; -moz-transition:.2s; -webkit-transition:.2s; transition:.2s;*/
}
.stat-div
{
    padding: 20px;
    background: #fefcfb;
    font-weight: 600;
    text-align: center;
}
.stat-div-en
{
    width: calc(33% - 20px);
    margin: 10px;
    padding: 20px 20px 0;
    background: #fefcfb;
    font-weight: 600;
    text-align: center;
    height: 400px;
}
.stat-div-en-high
{
    width: calc(33% - 20px);
    margin: 10px;
    padding: 20px 20px 0;
    background: #fefcfb;
    font-weight: 600;
    text-align: center;
    height: 800px;
}
.pro-stat
{
    padding: 10px;
}
.pro-stat div.stat-graph
{
    height: 700px;
    background: #fefcfb;
    text-align: center;
    font-weight: 600;
    padding: 20px;
}

/*.stat-div:not(:last-child) { margin: 20px; }*/
.stat-block {
    width:600px;
    min-height: 250px;
}
.stat-block-short {
    width:250px;
    min-height: 180px;
    display: inline-block;
    margin: 0;
}
.no-data {
    width: 100%;
    padding: 30px 0 20px;
    font-weight: normal;
    text-align: center;
    color: #bbb;
}
.stat-height {
    height: 200px;
}
.compound .stat-height {
    height: 460px;
}
.stat-height-plus {
    height: 250px;
}
/*endregion*/


/*region Tip*/
.tip
{
    cursor: pointer;
    position: relative;
    user-select: none;
    -moz-user-select: none;
    background: #bbb;
    color: white;
    padding: 0 6px;
    margin-left: 9px;
    vertical-align: top;
    line-height: 16px;
    font-size: 12px;
}
.tip::before
{
    position: absolute;
    top: -58px;
    left: -240px;
    background: #666;
    color: #fff;
    content: attr(data-tip);
    padding: 0 12px;
    text-transform: none;
    font-weight: normal;
    font-size: 12px !important;
    -webkit-transition: all 0.25s ease;
    transition: all 0.25s ease;
    width: 480px;
    height: 48px;
    max-height: 50px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}
.tip::after
{
    position: absolute;
    top: -8px;
    left: 9px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #567;
    content: " ";
    font-size: 0;
    line-height: 0;
    margin-left: -5px;
    width: 0;
}
.tip::before, .tip::after
{
    color: white;
    font-size: 14px;
    opacity: 0;
    pointer-events: none;
    text-align: center;
}
.tip:hover::before, .tip:hover::after {
    opacity: 1;
    -webkit-transition: all 0.25s ease;
    transition: all 0.25s ease;
}


.tip-top
{
    position: absolute;
    z-index: 234;
    background: white;
    width:300px;
    padding: 30px;
    box-shadow: rgba(0,0,0,0.3) 2px 2px 80px;
    font-size: 14px;
    line-height: 200%;
}
.tip-top:after
{
    content: '';
    display: block;
    position: absolute;
    left: 150px;
    bottom: 100%;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-bottom-color: white;
}


/*endregion Tip*/


/*region angles-info*/
.angles-info {
    border-collapse: collapse;
    overflow: hidden;
    margin-left: 30px;
}
.angles-info tr:last-child td {
    padding-bottom: 10px;
}
.angles-info td {
    border: none;
    padding: 1px 10px;
    font-size: 12px;
    /*vertical-align: middle;*/
}
.angles-info td:first-child {
    color:#999;
}
.angle-category {
    position:relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.angle-category .line {
    height: 1px;
    background: #c6c8cc;
    flex-grow: 1;
    z-index: 2;
    margin: 0 10px;
}

.angle-color-1 p {
    color: #e4572e
}
.angle-color-2 p {
    color: #36b4e5
}
.angle-color-3 p {
    color: #777
}
.angle-category button {
    padding: 4px 6px;
    margin: 0;
    border: 0;
    /* border-left: 8px #fefcfb solid; */
    font-size: 0.6rem;
    color: white;
    z-index: 2;
}
.angle-color-1 button {
    background: #e4572e
}
.angle-color-2 button {
    background: #36b4e5
}
.angle-color-3 button {
    background: #777
}
.angle-item {
    display: inline-block;
    width: 100%;
    margin: 0 0 5px;
    padding: 4px 8px;
    cursor: pointer;
    background: #eee;
    font-weight: normal;
    text-transform: capitalize;
    border-left: 5px solid;
}
.angle-edit:after {
    font-family: FontAwesome, sans-serif;
    font-size: 16px;
    content: "\f040";
    position: absolute;
    right: 60px;
    color: #666;
}
#ang-prio-1 div, .ang-prio-1  {
    border-color: #e4572e
}
#ang-prio-2 div, .ang-prio-2  {
    border-color: #36b4e5
}
#ang-prio-3 div, .ang-prio-3  {
    border-color: #777
}
/*endregion*/


/*region custom checkbox */
.conta
{
    display: block;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding-left: 35px;
    margin: 0;
}
.conta input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}  /* Hide the browser's default checkbox */
.checkmark  /* Create a custom checkbox */
{
    position: absolute;
    top: 0;
    left: 0;
    height: 18px;
    width: 18px;
    background: #eee;
    border: 1px solid #093c71;
    margin-right: 20px;
}
.conta input:checked ~ .checkmark, .checkmark.is-checked {
    background: #093c71;
}  /* When the checkbox is checked, add a blue background */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}    /* Create the checkmark/indicator (hidden when not checked) */
.conta:hover input ~ .checkmark, .conta:hover .checkmark {
    background-color: #36b4e5;
    border-color: #36b4e5;
}          /* On mouse-over, add a grey background color */
.conta input:checked ~ .checkmark:after, .checkmark.is-checked:after {
    display: block;
}             /* Show the checkmark when checked */
.conta .checkmark:after                 /* Style the checkmark */
{
    left: 4px;
    top: -1px;
    width: 9px;
    height: 13px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/*checkbox for expertstab*/
.check-experts {
    display: block;
    position: relative;
    margin-bottom: 15px;
    cursor: pointer;
}

.check-experts input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    margin-top:3px;
}


.exp-tab-checkmark {
    position: absolute;
    height: 16px;
    border-radius: 9px;
    top: 0;
    left: 0;
    width: 21px;
    background-color: #093c71;

}

.check-experts input:checked ~ .exp-tab-checkmark {
    background-color: #093c71;
}

.exp-tab-checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.check-experts input:checked ~ .exp-tab-checkmark:after {
    display: block;
}

.check-experts .exp-tab-checkmark:after {
    left: 8px;
    top: 2px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}


/*endregion*/


/*region TRANSFORMS */
.vertilinger {
    display: flex;
    align-items: center;
    justify-content: center;
}

.inliner {
    display: inline-block
}
.inliner-top    {
    display: inline-block;
    vertical-align: top;
}
.inliner-90     {
    display: inline-block;
    width: 90%;
}
.inliner-160    {
    display: inline-block;
    width: 160px;
}
.inliner-100px  {
    display: inline-block;
    width: 130px;
}
.inliner-200px  {
    display: inline-block;
    width: 220px;
}
.inliner-fit    {
    display: inline-block;
    width: 75%;
    max-width: 600px;
}

.height-20  {
    height: 20px;
}
.height-40  {
    height: 40px;
}

.padding-right-5 {
    padding-right: 5px
}
.padding-right-10 {
    padding-right: 10px
}
.padding-right-20 {
    padding-right: 20px
}
.padding-right-30 {
    padding-right: 30px
}
.padding-left-30 {
    padding-left: 30px
}

.padding-0 {
    padding: 0
}
.padding-5 {
    padding: 5px
}
.padding-10 {
    padding: 10px
}
.padding-15 {
    padding: 15px
}
.padding-20 {
    padding: 20px
}

.padding-wide-10 {
    padding: 0 10px
}
.padding-wide-20 {
    padding: 0 20px
}
.padding-top-10 {
    padding-top: 10px
}
.padding-top-20 {
    padding-top: 20px
}
.padding-top-30 {
    padding-top: 30px
}
.padding-top-40 {
    padding-top: 40px
}
.padding-10-20 {
    padding: 10px 20px
}

.padding-td {
    padding-top: 19px !important;
}

.padding-bottom-5  {
    padding-bottom: 5px
}
.padding-bottom-10 {
    padding-bottom: 10px
}
.padding-bottom-20 {
    padding-bottom: 20px
}

.padding-left-5  {
    padding-left: 5px
}
.padding-left-10 {
    padding-left: 10px
}
.padding-left-20 {
    padding-left: 20px
}
.padding-left-30 {
    padding-left: 30px
}
.padding-left-40 {
    padding-left: 40px
}
.padding-left-60 {
    padding-left: 60px !important;
}

.padding-right-40 {
    padding-right: 40px
}
.padding-right-60 {
    padding-right: 60px !important;
}

.margin-wide-10 {
    margin-left: 10px;
    margin-right: 10px;
}
.margin-wide-5  {
    margin-left:  5px;
    margin-right:  5px;
}
.margin-h-5     {
    margin-top: 5px;
    margin-bottom: 5px;
}
.margin-h-10    {
    margin-top: 10px;
    margin-bottom: 10px;
}

.margin-0 {
    margin: 0;
}
.margin-1 {
    margin: 1px
}
.margin-2 {
    margin: 2px
}
.margin-5 {
    margin: 5px
}
.margin-10 {
    margin: 10px
}
.margin-20 {
    margin: 20px
}
.margin-30 {
    margin: 30px
}
.margin-40 {
    margin: 40px
}
.margin-60 {
    margin: 60px
}
.margin-80 {
    margin: 80px
}

.margin-top-0 {
    margin-top: 0
}
.margin-top-5 {
    margin-top: 5px
}
.margin-top-10 {
    margin-top: 10px
}
.margin-top-20 {
    margin-top: 20px
}
.margin-top-30 {
    margin-top: 30px
}
.margin-top-40 {
    margin-top: 40px
}
.margin-top-60 {
    margin-top: 60px
}
.margin-top-70 {
    margin-top: 70px
}
.margin-top-80 {
    margin-top: 80px
}
.margin-top-100 {
    margin-top: 100px
}
.margin-top-150 {
    margin-top: 150px
}

.margin-left-50 {
    margin-left: 50px
}
.margin-left-60 {
    margin-left: 60px
}
.margin-left-70 {
    margin-left: 70px
}
.margin-left-20 {
    margin-left: 20px
}
.margin-left-10 {
    margin-left: 10px;
}
.margin-left-5 {
    margin-left: 5px;
}
.margin-right-5 {
    margin-right: 5px;
}
.margin-right-10 {
    margin-right: 10px;
}
.margin-right-20 {
    margin-right: 20px;
}
.margin-right-30 {
    margin-right: 30px;
}

.margin-bottom-5 {
    margin-bottom: 5px
}
.margin-bottom-10 {
    margin-bottom: 10px
}
.margin-bottom-20 {
    margin-bottom: 20px !important;
}
.margin-bottom-30 {
    margin-bottom: 30px
}
.margin-bottom-40 {
    margin-bottom: 40px
}
.margin-bottom-60 {
    margin-bottom: 60px
}
.margin-bottom-80 {
    margin-bottom: 80px
}
.margin-bottom-100 {
    margin-bottom: 100px
}
.margin-bottom-150 {
    margin-bottom: 150px
}
.align-center {
    text-align: center !important;
}
.align-left {
    text-align: left !important;
}
.align-right {
    text-align: right !important;
}

.line-height-150 {
    line-height: 150%
}
/*endregion*/


/*region pagination */
.pgn {
    display: inline-block;
    float: none;
    margin: 6px 3px;
}
.pgn a
{
    display: inline-block;
    padding: 5px 14px 16px 7px;
    margin: 2px;
    width: 12px;
    border: #093c71 2px solid;
    background: #093c71;
    color: white;
    cursor: pointer;
    user-select: none;
    -moz-user-select: none;
    font-weight: bold;
    font-size: 11px;
    vertical-align: middle;
    line-height: 12px;
    text-decoration: none;
    text-align: center;
}
.pgn a       {
    height: 20px;
}
.pgn a.active{
    cursor: default;
    background: white;
    color: #093c71;
    border: 2px solid #093c71;
}
.pgn a.bla   {
    border: none;
    background: none;
    color: grey;
    cursor: default;
    margin: 4px 2px 0 2px;
}
.pgn a:hover {
    background: #36b4e5;
    border-color: #36b4e5;
}
.pgn a.active:hover{
    background: white;
    border-color: #093c71;
}
.pgn-select  {
    border-radius: 0;
    height: 28px;
    width: 60px;
    border: 2px #093c71 solid;
    text-indent: 4px;
    font-size: 11px;
    font-weight: bold;
}
.pgn div a {
}
/*endregion*/


/*region chat*/
.messages-box {
    height: 450px;
    overflow-y: scroll;
}

.person-icon {
    font-size: 30px;
    background: #36b4e5;
    color: #fff;
}

.srch-icon {
    font-size: 30px;
    color: #fff;
}

.tab-chatroom.active{
    border-left: 5px solid #36b4e5;
}
.tab-chatroom {
    border-bottom: 2px solid #eee;
    padding: 20px;
    border-radius: 0 !important;
    color: #666;
    border-left: 5px solid white;
}
.underline {
    border-bottom: 1px solid #ddd !important;
}
.chat-block-left::before {
    font-family: "Material Icons";
    content: "person";
    font-size: 20px;
    width: 32px;
    height: 32px;
    border-radius: 30px;
    color: white;
    background: #36b4e5;
    text-align: center;
}
.chat-block-right::after {
    font-family: "Material Icons";
    content: "person";
    font-size: 20px;
    width: 32px;
    height: 32px;
    margin-left: 15px;
    border-radius: 30px;
    color: white;
    background: #36b4e5;
    text-align: center;
}

.chat-cloud {
    padding: 10px;
    font-size: 13px;
}

.badge-chat {
    position: absolute;
    right:4px;
    top:4px;
    z-index: 40;
    width: 23px;
    height:23px;
    border-radius: 20px;
    line-height: 16px;
    font-size: 13px;
    background: #093c71;
    color: white;
    margin:0;
}

.badge_msg_num_company {
    position: absolute;
    right: 0px;
    bottom: 10px;
    z-index: 40;
    width: 30px;
    height: 30px;
    line-height: 16px;
    font-size: 16px;
    background: none;
    color: #C00000;
    margin: 0;
    border: none;
    text-align: center;
}

.badge_msg_num {
    background: none;
    color: #C00000;
    margin: 0;
    border: none;
    text-align: center;
}
.conversation-block input {
    font-size: 13px;
}
.conversation-block input::placeholder {
    color: #999;
}



.list-group .wrapper{
    width: 100%;
    /* Firefox */
    display: -moz-box;
    -moz-box-pack: start;
    -moz-box-align: stretch;
    /* Safari and Chrome */
    display: -webkit-box;
    -webkit-box-pack: start;
    -webkit-box-align: stretch;
    /* W3C */
    display: box;
    box-pack: start;
    box-align: stretch;

}

.list-group button#group-chat {
    border:0;
    background:white;
    transition-duration: 0.4s;
}
.list-group button#group-chat:hover{
    background:#36b4e5;
}
.list-group button.active#group-chat p {
    color:white;
}
.list-group div p{
    margin-top: 10px;
    margin-bottom: 10px;
    padding-left: 20px ;
    padding-right: 20px ;
}
.list-group .w-100{
    margin-bottom: 10px;
}

::-webkit-scrollbar {
    width: 8px;
    background-color: #f5f5f5;
}


/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;

}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;

}

/*endregion*/


.img-profile {
    object-fit: cover;
    width: 50px;
    min-width: 50px;
    height: 50px;
    border-radius: 50%;
}

.img-profile-dashboard {
    object-fit: cover;
    width: 35px;
    min-width: 35px;
    height: 35px;
    border-radius: 50%;
}

.circle-icon {
    display: inline-block;
    border-radius: 50px;
    padding: 10px;
    vertical-align: middle
}

.send_msg_img {
    object-fit: cover;
    width: 45px;
    height: 45px;
    border-radius: 25px;
    text-align: center;
    border: 2px solid #ced4da;
}

.tb_pjt_en {
    width: 191px;
    height: 61px;
    border: 1px solid #eee;
    margin: 10px;
}

.tb_pjt_en_title {
    text-transform: capitalize;
    color: #36b4e5;
    font-weight: 600;
    font-size: 15px;
    margin-left: 23px;
}

.tb_pjt_en_name {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 45px;
}

.no-border {
    border: none !important;
}

.company {
    position: absolute;
    top: 20px;
    left: 18px;
    text-align: left;
    padding: 0 4px 0 12px;
    height: 18px !important;
    font-size: 13px;
    font-weight: bold;
    color: #36b4e5;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space:nowrap;
}


/* expandable table row - max N rows display with [...] */
tr.hid > td > div {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 58px;
    transition: 1s;
}
/*tr.vis > td > div { -webkit-line-clamp: none; }*/

/* provider name abbreviation */
div.abr {
    text-align: center;
    color: white;
    cursor: pointer;
    width: 21px;
    height: 21px;
    border-radius: 22px;
    font-size: 11px;
    padding:3px;
}

tr.search input, tr.search select {
    margin: 8px 0 ;
    text-indent: 4px;
    height: 30px;
    font-size: 13px;
}
tr.search input[type="submit"], tr.search button {
    background: #093c71;
    color: white;
    border: none;
    font-weight: bold;
    font-size: 14px;
}
tr.search input[type="submit"]:hover, tr.search button:hover {
    background: #36b4e5;
}
tr.search button {
    height: 30px;
    width: 34px;
    overflow: hidden;
    margin: 8px 4px;
    position: relative;
}
tr.search button i {
    font-size: 14px;
    font-weight: bold;
    margin: 3px 0 0;
}
tr.search .inverted {
    background: white !important;
    border: 3px solid #093c71;
}
tr.search .inverted i {
    color: #093c71 !important;
    margin: 3px 0 0;
}

.icon-surrounded {
    background: #093c71;
    color: white;
    border-radius: 8px;
    padding: 2px 4px;
    font-size: 12px !important;
    margin: 0;
}
.icon-ask {
    background: white;
    color: #093c71;
    border: 1px solid #093c71;
    border-radius: 16px;
    padding: 2px 5px !important;
    text-transform: uppercase;
    font-size: 11px;
    vertical-align: 2px;
}
.icon-ask:hover {
    background: #36b4e5;
    color: white;
    border: 1px solid #36b4e5;
}
.icon-tip-surrounded {
    background: #093c71;
    color: white;
    border-radius: 12px;
    padding: 4px 8px;
    font-size: 11px;
    margin: 0 0 0 6px;
}

.icon-header {
    color: #093c71;
    font-size: 32px;
    vertical-align: -5px;
}
.icon-header-mid {
    color: #093c71;
    font-size: 36px;
    vertical-align: -8px;
}


.pro-header {
    font-size: 22px;
    font-weight: 700;
    color: #093c71;
}
.pro-header hr {
    background-color: #093c71;
    height: 3px;
    margin: 14px 0;
}


.border-single  {
    border: silver 1px solid;
}
.radius-0  {
    border-radius: 0;
}
.radius-4  {
    border-radius: 4px;
}
.radius-6  {
    border-radius: 6px;
}
.radius-8  {
    border-radius: 8px;
}

/*region Calendar*/
/* calendar time (set hours) div */
div.times
{
    overflow-y: scroll;
    height:325px;
    width: 200px;
    padding: 0 20px;
    background-image: linear-gradient(white, #ddd, white);
}
div.times div
{
    background: #fff;
    margin: 4px;
    padding: 5px;
    font-size: 11px;
    cursor: pointer;
    border-radius: 4px;
    -o-transition:.2s;
    -ms-transition:.2s;
    -moz-transition:.2s;
    -webkit-transition:.2s;
    transition:.2s;
}
div.times div:hover {
    background: none;
}
div.times div.selected {
    background: #08c;
    font-weight: bold;
    color: white;
}
div.times div.busy     {
    background: none;
    font-weight: bold;
    color: #bbb;
    border: 1px solid #eee;
}
/*endregion*/

.divider {
    margin: 0;
    padding: 0;
    border: 1px solid white;
}

.Highlighted a
{
    background-color : Green !important;
    background-image :none !important;
    color: White !important;
    font-weight:bold !important;
    font-size: 12pt;
}

.w-15 {
    width: 15% !important;
}
.w-60 {
    width: 60% !important;
}

@media (max-width:1280px)
{
}
@media (max-width:1024px)
{
    .billboard {
        display: none;
    }
}

@media only screen and (max-width: 990px)
{
    .multimenu          {
        display: none;
    }
    .multimenu table    {
        width: 100%;
    }
    .multimenu td a     {
        padding: 45px !important;
    }
    .navbar tr          {
        background: #ddd;
    }
    .navbar td          {
        display: block;
        background: #241D49;
        margin-bottom: 1px;
    }
    .nav-link           {
        color: white;
    }
    .mobile-center      {
        text-align: center !important;
    }
}

@media only screen and (max-width: 768px)
{
    .nomobile {
        display: none;
    }
}


@media print
{
    .no-print, .no-print *
    {
        display: none !important;
    }
}

/*expert research note*/

.expert-table td.note_rsrch_column .txtarea{
    color: #666;
    padding: 3px;
    width: 100%;
    height: 100%;
    cursor: pointer;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    background-color: #cee6e6;
}

.expert-table td.note_rsrch_column .txtarea:hover, .expert-table td.note_rsrch_column .txtarea:focus{
    background-color: #ffffff;
}

.expert-table td.note_rsrch_column .disabled{
    overflow-y: hidden;
    border: none;
    background-color: #cee6e6;
    background-image: url('../images/ico/edit-icon.png');
    background-repeat: no-repeat;
    background-size: 15px 15px;
    background-position: right 5px top 5px;
}

.expert-table td.note_rsrch_column .enabled{
    background-image: none;
    overflow-y: auto;
    background-color: #cee6e6;
    border: none;
}

.expert-flag {
    background-position: left center;
    padding-left: 30px;
    background-repeat:no-repeat;
    background-image:none;
}

.expert-flag-empty{
    padding-left: 0px;
}


.proj-info .expandable.short {
    max-height: 50px;
    overflow: hidden;
}
.proj-info .expandable.full {
}

.expand_collapse_arrow {
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    padding: 3px;
    background-color: rgba(9,60,113,0);
    color: white;
    width: 100%;
    text-align:center;
}
.expand_collapse_arrow i{
    color:rgba(9,60,113,1) !important;
}

.last_updated_column {
    white-space: pre-line;
}

.last_emailed_column {
    white-space: pre-line;
}

.custom-file-label::after {
    display: none;
}


.add-expert-instance {
    padding: 15px;
    border-bottom: 1px #cecece solid;
}

/* Bootstrap toasts */

.toast-container {
    position: fixed;
    z-index: 99999;
    padding: 20px;
}

.toast-container.top-right {
    top: 0;
    right: 0;
}

.toast-container.top-left {
    top: 0;
    left: 0;
}

.toast-container.top-center {
    transform: translateX(-50%);
    top: 0;
    left: 50%;
}

.toast-container.bottom-right {
    right: 0;
    bottom: 0;
}

.toast-container.bottom-left {
    left: 0;
    bottom: 0;
}

.toast-container.bottom-center {
    transform: translateX(-50%);
    bottom: 0;
    left: 50%;
}

.toast-container > .toast {
    min-width: 150px;
    background: transparent;
    border: none;
}

.toast-container > .toast > .toast-header {
    border: none;
}

.toast-container > .toast > .toast-header strong {
    padding-right: 20px;
}

.toast-container > .toast > .toast-body {
    background: white;
}
.ws_pre-line {
    white-space: pre-line;
}

.check-label-1 {
    display: block;
    width: 100%;
    padding: 5px 10px;
    cursor: pointer;
}

.check-label-1:hover {
    background: #fbfbfe;
}

/* Resizable Quill editor */

.ql-editor {
    resize: vertical;
    overflow-y: scroll;
}

/*.ql-container {*/
/*    height:85% !important;*/
/*}*/

/* Trumbowyg editor */
.trumbowyg-editor table {
    table-layout: fixed !important;
}

.trumbowyg-editor td {
    border: 1px solid #c3c3c3 !important;
}

.user-generated-content table {
    table-layout: fixed;
}

.user-generated-content table td {
    border: none;
}

.user-generated-content img {
    max-width: 100%;
}

.dropdown.--hover:hover .dropdown-menu {
    display:block;
    margin-top: 0;
}


/* Twilio */

.window {
    display: flex;
    height: calc(100vh - 100px);
    overflow: hidden;
    margin-bottom: -40px;
}

#vue-twilio .sidebar {
    position: relative;
    padding: 15px;
    padding-right: 0;
    width: 450px;
    height: 100%;
}

#vue-twilio .sidebar .close {
    position: absolute;
    top: 30px;
    right: 15px;
    padding: 10px
}

#vue-twilio .sidebar .content {
    border-radius: 25px;
    padding: 25px;
    height: 100%;
    background: #dbe0e1;
}

#vue-twilio .main-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
    padding: 25px;
}

#vue-twilio .attendants-window {
    display: flex;
    width: 100%;
    height: calc(100% - 70px);
}

#vue-twilio .pinned-window {
    width: 60%;
    margin-right: 15px;
}

.twilio-attendants-holder {
    display: flex;
    flex-shrink: 1;
    flex-grow: 1;
    flex-wrap: wrap;
    justify-content: center;
}

.twilio-attendant-col {
    flex-grow: 0;
    width: 50%;
    max-width: calc((100vh - 208px) / 2);
    padding-right: 10px;
    padding-bottom: 10px;
}

.twilio-attendant {
    position: relative;
    background: #2d2f2f;
    border-radius: 15px;
    overflow: hidden;
}

.twilio-attendant .twilio-video.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: none;
    background: rgba(0,0,0,0.6);
    z-index: 999;
}

.twilio-video .fullscreen-toggle {
    display: none;
    position: absolute;
    top: 30px;
    right: 30px;
    font-size: 2rem;
    color: white;
    z-index: 998;
    padding: 0 10px;
    cursor: pointer;
}

.twilio-video.fullscreen .fullscreen-toggle {
    display: block;
}

.twilio-attendant .twilio-video video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
}

.twilio-attendant:after {
    display: block;
    content: '';
    padding-bottom: 66%;
}

.twilio-avatar {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 200px;
    max-height: 200px;
    border-radius: 50%;
    background: #0c5460;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    font-size: 1.3rem;
    color: white;
}

.twilio-avatar:after {

    display: block;
    content: '';
    padding-bottom: 100%;
}

.twilio-attendant-controls {
    display: none;
    background: rgba(0, 0, 0, .6);
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 100px;
    transform: translate(-50%, -50%);
    padding: 5px 10px;
    white-space: nowrap;
}

.twilio-attendant-identity {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    text-align: center;
    padding: 0 15px;
    font-size: .9rem;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 4px #000;
}

.twilio-attendant-controls i {
    color: white;
}

.twilio-attendant:hover .twilio-attendant-controls {
    display: block;
}

#twilio-botbar {
    position: absolute;
    bottom: 15px;
    height: 60px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
}

#twilio-botbar .twilio-controls {
    position: relative;
}

.btn.twilio-control {
    border-radius: 100px;
    width: 60px;
    height: 60px;
    background: rgba(0,0,0,.5);
}

.btn.twilio-control.-red {
    background: rgba(252, 46, 46, 0.6);
}

.btn.twilio-control:hover {
    background: rgba(0,0,0,.7);
}

.btn.twilio-control i {
    margin-top: 4px;
    font-size: 1.3rem;
    color: white;
}

#twilio-botbar .twilio-info {
    position: absolute;
    left: 30px;
}

#twilio-botbar .twilio-timer {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 30px;
    font-size: 1.3rem;
    font-weight: bold;
    color: #343434;
}

.icon-slash {
    position: absolute;
    top: 0;
    left: 50%;
    border-left: 2px solid #343434;
    border-right: 2px solid white;
    height: 20px;
    width: 0;
    transform: rotate(45deg) translate(-50%);
}

.spectrum-color-box {
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    margin-right: 15px;
    border: 2px #ABABAF solid;
    cursor: pointer;
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=23, Direction=0, Color=#000000)"; /*IE 8*/
    -moz-box-shadow: 0 0 23px -9px rgba(0, 0, 0, 0.3); /*FF 3.5+*/
    -webkit-box-shadow: 0 0 23px -9px rgba(0, 0, 0, 0.3); /*Saf3-4, Chrome, iOS 4.0.2-4.2, Android 2.3+*/
    box-shadow: 0 0 23px -9px rgba(0, 0, 0, 0.3); /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=23, Direction=135, Color=#000000); /*IE 5.5-7*/
}

.custom-switch .custom-control-label:before, .custom-switch .custom-control-label:after {
    cursor: pointer;
}

.my-pagination {
    display: flex;
    align-items: center;
}

.my-pagination-link {
    font-weight: 500;
    font-size: 1rem;
}

.my-pagination-link.-disabled {
    pointer-events: none;
}


/* Utility classes */

.abs-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.ratio-square::after {
    content: '';
    display: block;
    padding-bottom: 100%;
}

.hover-darken:hover {
    background: rgba(13,13,13,.05);
}
.countdowner {
    position:fixed;
    padding:15px;
    top:50%;
    left:50%;
    background-color:white;
    z-index:1002;
    overflow:auto;
    width:400px;
    text-align:center;
    height:400px;
    margin-left:-200px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top:-200px;
    border: solid #dee2e6;
}

.datepicker td, .datepicker th {
    width: 35px;
    height: 35px;
}

.opacity-50 {
    opacity: 50%;
}

/* Jodit */

.jodit-add-new-line {
    display: none !important;
}

.tab-pane {
    background-color: #ffffff;
    padding: 20px;
    word-break: break-word;
}

.tab a.active {
    background-color: #ffffff;
    display: inline-block;
    padding: 10px;
}

.tab a{
    background-color: transparent;
    display: inline-block;
    padding: 10px;
    border-bottom: none;
}

.nav-tabs {
    border-bottom: none;
}

.ql-font-serif {
    font-family: Georgia, Times New Roman, serif!important;
}
.ql-font-monospace {
    font-family: Monaco, Courier New, monospace!important;
}


/* Rating custom field */

.cf-rating {
    direction: rtl;
    border: none;
    color: #bbbfc4;
}

.cf-rating > input { display: none; }
.cf-rating > label:before {
    padding: 3px;
    font-size: 1.4rem;
    font-family: FontAwesome;
    display: inline-block;
    content: "\f005";
    cursor:pointer;
}

.cf-rating > input:checked ~ label, /* show gold star when clicked */
.cf-rating:not(:checked) > label:hover, /* hover current star */
.cf-rating:not(:checked) > label:hover ~ label { color: #36b4e5;  } /* hover previous stars in list */

.cf-rating > input:checked + label:hover, /* hover current star when changing rating */
.cf-rating > input:checked ~ label:hover,
.cf-rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.cf-rating > input:checked ~ label:hover ~ label { color: #093c71;  }

/* Vetting Question */
.btn-yellow {
    align-items: center;
    background: var(--color-orange50);
    border-radius: 3px;
    color: var(--color-white);
    display: flex;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.25px;
    flex-direction: row;
    justify-content: center;
    height: 32px;
    padding: 6px 12px;
}
.btn-yellow:focus,
.btn-yellow:hover,
.btn-yellow:active {
    box-shadow: none;
    color: var(--color-white);
    outline: none;
}
.btn-yellow-outline {
    align-items: center;
    background: var(--color-white);
    border-radius: 3px;
    border-color: var(--color-orange50);
    color: var(--color-orange50);
    display: flex;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.25px;
    flex-direction: row;
    justify-content: center;
    height: 32px;
    padding: 6px 12px;
}
.btn-yellow-outline:focus,
.btn-yellow-outline:hover,
.btn-yellow-outline:active {
    box-shadow: none;
    color: var(--color-orange50);
    outline: none;
}
.text-orange-50 {
    color: var(--color-orange50);
}

.btn-yellow:hover,
.btn-yellow:active {
    color: var(--color-white);
}
.form-check {
    align-items: center;
    display: flex;
}
.form-check .form-check-wrap {
    height: 18px;
    margin-right: 8px;
    position: relative;
    width: 18px;
}
.form-check .form-check-icon {
    color: var(--color-black);
    display: inline-flex;
    font-size: 24px;
    line-height: 1;
    height: 100%;
    position: relative;
    width: 100%;
    z-index: 8;
}
.form-check .form-check-icon svg {
    height: 20px;
    width: 20px;
}
.form-check .form-check-input:not(:checked) + .form-check-icon .check,
.form-check .form-check-input:checked + .form-check-icon .uncheck {
    display: none;
}
.interview-survey-form,
.expert-form-become,
.interview-survey-form {
    border-radius: 16px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
    padding: 24px;
}
.interview-survey-form .group-question label {
    color: var(--color-gray80);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.15px;
    line-height: 28px;
}
.interview-survey-form .group-question label:not(.form-check-label) {
    font-weight: 700;
}
.interview-survey-form .group-question label.form-check-label {
    font-size: 14px;
    font-weight: 400;
}
.interview-survey-form .group-question .form-check-input {
    position: static;
    margin-right: 8px;
    height: 16px;
    width: 16px;
}
.interview-survey-form .group-question textarea {
    border: 2px solid var(--color-gray10);
    border-radius: 4px;
    min-height: 140px;
    padding: 12px;
    width: 100%;
}
.interview-survey-form .form-person label {
    color: var(--color-gray80);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.75px;
    line-height: 27px;
}
.interview-survey-form .form-person .form-control {
    border: 2px solid var(--color-gray10);
    border-radius: 4px;
}
.interview-survey-form .form-group .form-control {
    padding: 10px 12px;
}
.interview-survey-form .form-group .form-control:-ms-input-placeholder,
.interview-survey-form .form-group .form-control::-ms-input-placeholder,
.interview-survey-form .form-group .form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: var(--color-gray40);
    font-family: 'Lato';
    font-size: 14px;
    font-weight: 400;
    opacity: 1; /* Firefox */
}
.interview-survey-form .interview-form {
    overflow: hidden;
}
.interview-survey-form .interview-form-steps {
    display: flex;
    gap: 0 20px;
    transition: all 0.6s ease-in-out;
    transform: translateX(0%);
}
.interview-survey-form .interview-form-steps.step-2 {
    transform: translateX(calc(-100% - 20px));
}
.interview-survey-form .interview-form-steps .step-1 {
    min-width: 100%;
    width: 100%;
}
.interview-survey-form .interview-form-steps .step-2 {
    min-width: 100%;
    width: 100%;
}
.interview-survey-form-title {
    color: var(--color-orange50);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.25px;
    line-height: 50px;
    margin: 0;
    text-transform: uppercase;
}
.interview-survey-form-question-answer {
    color: var(--color-gray80);
    font-weight: 700;
    font-size: 20px;
    line-height: 32px;
}
.interview-survey-form-question-answer button {
    background-color: var(--color-gray05);
    border: none;
    border-radius: 3px;
    color: var(--color-gray80);
    gap: 8px;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.25px;
    padding: 4px 8px;
}
.interview-survey-form .btn-next {
    font-size: 14px;
}
.interview-survey-form .step-info {
    height: 32px;
}
.interview-survey-form .step-info .step {
    gap: 0 4px;
}
.interview-survey-form .step-info .step-title,
.interview-survey-form .step-info .step {
    width: 100%;
}
.interview-survey-form .step-info .step-title {
    font-size: 12px;
}
.interview-survey-form .step-info .step span {
    background-color: var(--color-gray20);
    height: 2px;
    width: 50%;
}
.vue-vetting-question-page {
    font-family: 'Lato';
}
.interview-survey-form .step-info .step span.orange {
    background-color: var(--color-orange50);
}

.form-set-password .form-group label,
.expert-form-become .form-group label {
    color: var(--color-gray80);
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: 0.25px;
    margin-bottom: 4px;
}
.expert-form-become .form-group label.form-check-label {
    margin-bottom: 0;
}
.expert-form-become .form-group.form-check {
    padding-top: 10px;
}
.expert-form-become .form-group.form-check label {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}
.form-set-password .form-group label .required,
.expert-form-become .form-group label .required,
    .interview-survey-form .form-group label .required {
    color: var(--color-red);
    font-size: 12px;
    font-weight: 600;
}

.interview-survey-form .form-group .form-control,
.form-set-password .form-group .form-control,
.expert-form-become .form-group .form-control {
    color: var(--color-gray80);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.25px;
    line-height: 20px;
    min-height: 40px;
    padding: 10px 12px;
}

.form-set-password .form-group .form-control,
.expert-form-become .form-group .form-control.vue-tel-input {
    padding: 0;
}
.form-set-password .form-group .form-control.vue-tel-input input,
.expert-form-become .form-group .form-control.vue-tel-input input{
    height: auto;
}
.interview-survey-form .form-group .form-control:focus,
.form-set-password .form-group .form-control:focus,
.expert-form-become .form-group .form-control:focus {
    box-shadow: none;
}
.interview-survey-form .form-group .form-control:not(.is-invalid) {
    border-color: var(--color-gray10);
}
.interview-survey-form .form-group input {
    height: 40px;
}
.expert-form-become .form-group .form-control:not(.is-invalid) {
    border-color: var(--color-gray10);
}
.expert-form-become .form-group input {
    height: 40px;
}
.interview-survey-form .form-group .form-control::placeholder,
.expert-form-become .form-group .form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: var(--color-gray40);
    font-family: 'Lato';
    font-size: 14px;
    font-weight: 400;
    opacity: 1; /* Firefox */
}
.interview-survey-form .example-answer {
    color: var(--color-gray10);
}
.interview-survey-form .general-infor {
    color: var(--color-gray80);
    font-size: 20px;
    font-weight: 700;
    line-height: 36px;
    letter-spacing: 0.5px;
}
.interview-survey-form .private-policies {
    background-color: var(--color-gray05);
    border-radius: 4px;
    padding: 12px;
}
.interview-survey-form .private-policies ul {
    padding-left: 25px;
}
.interview-survey-form .private-policies h3 {
    color: var(--color-black);
    font-size: 20px;
    font-weight: 700;
    line-height: 36px;
}
.interview-survey-form .private-policies li {
    color: var(--color-gray80);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.75px;
    line-height: 25px;
}
.interview-survey-thank {
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
    border-radius: 16px;
    color: var(--color-black);
    max-width: 443px;
    text-align: center;
    padding: 64px 32px;
}
.interview-survey-thank-logo img {
    margin: 0 auto;
    max-width: 64px;
}
.interview-survey-thank .interview-survey-thank-title {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.25px;
    line-height: 28px;
}
.interview-survey-thank .interview-survey-thank-describe {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.5px;
}

.vue-vetting-question-page .page-vetting-question-title {
    margin: 32px 0 20px;
}
.vue-vetting-question-page .logo-question img {
    width: 64px;
}
.page-vetting-question-intro {
    color: var(--color-gray80);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.5px;
    line-height: 28px;
    width: 100%;
}
.vue-vetting-question-page .interview-introduce p {
    margin-bottom: 24px;
}
.vue-vetting-question-page .interview-follows {
    background-color: var(--color-orange05);
    border-radius: 8px;
    color: var(--color-black);
    letter-spacing: 0.5px;
    padding: 12px;
}
.vue-vetting-question-page .interview-follows p:last-child {
    margin-bottom: 0;
}
.vue-vetting-question-page .interview-follows ul {
    padding-left: 15px;
}
.page-vetting-question-form {
    width: 100%;
}

/* overide select2 */
.vue-expert-form {
    margin-bottom: -40px;
}
.expert-form-become .select2-container--default.select2 {
    max-width: 100%;
}
.expert-form-become .select2-container--default .select2-selection--multiple {
    border-color: var(--color-gray10);
    min-height: 40px;
}
.expert-form-become .is-invalid .select2-container--default .select2-selection--multiple {
    border-color: var(--color-red);
}
.expert-form-become .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--color-gray10);
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.expert-form-become .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: transparent;
    border-color: var(--color-gray10);
}
.expert-form-become .select2-container--default .select2-selection--multiple .select2-selection__choice__display,
.expert-form-become .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--color-gray80);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.25px;
}

.center-field-placeholder .select2-container .select2-selection--single .select2-selection__rendered{
    display: flex !important;
    align-items: center;
}

.s2-auto-height .select2-selection--multiple {
    overflow: hidden !important;
    height: auto !important;
}

#areas_of_expertise,
.areas_of_expertise-dropdown {
    display: none;
}
.current-working-here {
    background-color: var(--color-gray1);
    color: var(--color-gray40);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    height: 40px;
    padding: 10px 12px;
    width: 100%;
}
.become-policy-term {
    color: var(--color-gray40);
    font-style: italic;
    font-weight: 400;
    font-size: 15px;
    line-height: 27px;
    letter-spacing: 0.2px;
}
.btn-add-experience {
    align-items: center;
    background-color: var(--color-gray05);
    border-radius: 3px;
    display: flex;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    height: 32px;
    padding: 4px 8px;
}
.btn-add-experience svg {
    margin-right: 8px;
}
/* Internet Explorer 10-11 */
.expert-form-become .form-group .form-control:-ms-input-placeholder,
.expert-form-become .form-group .form-control::-ms-input-placeholder {
    color: var(--color-gray40);
    font-family: 'Lato';
    font-size: 14px;
    font-weight: 400;
}

.expert-form-become-title {
    color: var(--color-orange50);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 50px;
    margin: 0;
    text-transform: uppercase;
}
.related-working-experience {
    border-top: 2px solid var(--color-gray10);
}

/* Form set password */
.form-set-password {
    background: #FFFFFF;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
    border-radius: 16px;
    font-family: 'Lato';
    margin: auto;
    padding: 32px;
    width: 443px;
}
.form-set-password-logo {
    text-align: center;
}
.form-set-password-logo img {
    height: 40px;
}
.form-set-password .btn-yellow {
    width: 100%;
}
/* Expert Page: Become our experts */
.page-expert-become {
    font-family: 'Lato';
    justify-content: space-between;
    line-height: 180%;
}
.page-expert-become .logo-expert {
    padding-bottom: 36px;
}
.page-expert-become .logo-expert img {
    height: 40px;
}
.form-set-password-title {
    font-weight: 700;
    font-size: 24px;
    line-height: 43px;
    letter-spacing: 0.25px;
    text-align: center;
}
.page-expert-become-intro {
    color: var(--color-gray80);
    font-size: 15px;
    font-weight: 400;
    line-height: 27px;
    letter-spacing: 0.5px;
    width: 100%;
}
.page-expert-become-form {
    width: 100%;
}

/* Reponsive should be end of file */
@media (min-width: 1200px)
{
    /* Expert Page: Become our experts */
    .page-vetting-question-intro,
    .page-expert-become-intro {
        max-width: 400px;
    }

    .page-vetting-question-form,
    .page-expert-become-form {
        max-width: 600px;
    }
}

/* Fullcalendar */

.fc .fc-timegrid-slot {
    height: 40px
}

.lang_code{font-size:14px}

/* Intl tel input */

.js-intl-phone-item {
    position: relative;
}

.js-intl-phone-validation {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 15px;
    font-size: .8rem;
}

.js-sortable-call ~ .modal .sortable > li {
    width: 33.33333333%;
    padding: 0.75rem 1.25rem;
    position: relative;
    display: block;
    margin-bottom: 0;
    margin-top: -1px;
    margin-right: -1px;
    border: 1px solid rgba(0, 0, 0, 0.125);
    float: left;
    border-radius: 0;
    cursor: pointer;
}
.js-sortable-call ~ .modal .sortable > li.active {
    background-color: var(--bg-clr2)!important;
}
.js-sortable-call ~ .modal .sortable > .ui-sortable-placeholder:before {
    content: " ";
    visibility: hidden;
}


tr.collapsing {
    display: none;
    transition: unset;
}

tr.collapse-title {
    cursor: pointer;
}

tr.collapse-title.collapsed td.collapse-arrow .fa-chevron-down {
    display: none;
}

tr.collapse-title:not(.collapsed) td.collapse-arrow .fa-chevron-left {
    display: none;
}

.hover-line {
    position: relative;
}

.hover-line::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 0.1px; /* adjust the height here */
    background-color: gray;
    transform: translateY(-50%);
    display: none;
    opacity: 0.4;
}

.hover-line:hover::before {
    display: block;
}

.flex-center-content {
    display: flex;
    align-items: center;
    justify-content: center;
}

#accordionEmailSettings .card-header .btn .fa {
    display: none;
}

#accordionEmailSettings .card-header.active .fa {
    display: block;
}

#accordionEmailSettings .card-header .btn {
    box-shadow: none;
}

#accordionEmailSettings .card-header .btn.collapsed {
    color: #000000;
}

#accordionEmailSettings .card-header .btn:not(.collapsed) {
    color: #36b4e5;
}

#accordionEmailSettings .collapse > form{
    padding: 1.25rem!important;
}
#accordionEmailSettings .collapse {
    height: 100%;
}

#accordionEmailSettings .email-account-setting {
    text-align: center;
    margin-top: 20%;
}

#accordionEmailSettings  .collapsing {
    transition: none;
}
#accordionEmailSettings .col-3b {
    flex: 0 0 25%;
    max-width: 25%;
}

#accordionEmailSettings .col-6b {
    flex: 0 0 48%;
    max-width: 48%;
}

#accordionEmailSettings .jodit-workplace {
    background: white;
}

.card-kpi {
    border: 1px solid #000000;
    overflow: hidden;
    min-width: 170px;
}

.card-kpi .card-header {
    border-bottom: 1px solid #000000;
    background-color: #8E7CC3;
    color: #fff;
    font-size: 1.5rem;
    font-weight: bold;
}

.card-kpi .card-body {
    font-size: 4.5rem;
}

.kpi-color-red {
    background-color: #DC3545;
    color: #F4CCCC;
}

.kpi-color-yellow {
    background-color: #FFC107;
    color: #FDF2CC;
}

.kpi-color-blue {
    background-color: #007BFF;
    color: #9FC5E8;
}

.kpi-color-green-light {
    background-color: #8ed672;
    color: #28A745;
}

.kpi-color-green {
    background-color: #28A745;
    color: #edffe6;
}

canvas.chart-kpi {
    max-height: 300px;
}


.kpis[data-type="combinedUserKpisProjectOwnerKpis"] canvas.chart-kpi {
    max-height: 522px;
}

.textarea-container{
    max-width: 71%;
}
.textarea-container textarea {
    field-sizing: content;

}

.textarea-container textarea.form-control:focus {
    border-color: #ced4da!important;
    border-bottom: 1px solid #ced4da!important;
    padding: 0.25rem 0.5rem!important;
}

.js-table-resizer-drag {
    max-width: 50%;
    width: 50px;
    position: absolute;
    top: 0;
    height: 100%;
    cursor: col-resize;
    right: 0;
}

.js-table-resizer-drag:hover i {
    display: block;
}

.js-table-resizer-drag i {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.vs__selected + .vs__search:not(:focus) {
    height: 1px !important; /* Hide when an option is selected and not focused */
    padding: 0 !important;
    margin: 0 !important;
}

.mx-time-list:after {
    height: 0 !important;
}