/* 

*/

/* TODO: START remove! ...this is temporary - to mimic the old style  */
a {
    text-decoration: underline;
}

.nav a {
    text-decoration: none;
}
/* END remove! ...this isicon-calendar temporary - to mimic the old style  */

.my-pull-center
{
    margin: 0 auto;
}

.blue-hero-unit {
    color: white;
    /*    background-image: linear-gradient(to bottom, #0088CC, #0044CC);*/
    background-color: #0088CC;
}


.green-hero-unit {
    color: white;
    background-color: #99cc00;
}

.hero-header {
    font-family: Georgia,"Times New Roman",Times,serif;
    font-weight: normal;
    font-size: 32px;
}


.marketing {
    /*margin: 60px 0;*/
    margin: 40px 0;
}
.marketing p + h4 {
    margin-top: 28px;
}

[class^="icon-"],
[class*=" icon-"] {
    display: inline-block;
    width: 14px;
    height: 14px;
    *margin-right: .3em;
    line-height: 14px;
    vertical-align: text-top;
    background-image: url("../img/glyphicons-halflings.png");
    background-position: 14px 14px;
    background-repeat: no-repeat;
    margin-top: 1px;
}

.icon-white_opacity_40
{
    background-image: url("../img/glyphicons-halflings-white.png");
    opacity:0.4;
    filter:alpha(opacity=40); /* For IE8 and earlier */
}

.generic-navbar-icon {
    margin-top: 4px;
    opacity:0.9;
    filter:alpha(opacity=90); /* For IE8 and earlier */
}

.generic-navbar-icon:focus ,
.generic-navbar-icon:hover {
    opacity:1.0;
    filter:alpha(opacity=100); /* For IE8 and earlier */
}

.title-icon-75 {
    opacity:0.75;
    filter:alpha(opacity=75); /* For IE8 and earlier */
}

.icon-op65 {
    opacity:0.65;
}

/*
.icon-all-myhalfling.icon-stopwatch 
{
  background-image: url("../img/glyphicons-mylarge1.png");  
  width: 14px;  
  height: 14px; 
  / original dimensions 312 x 2046 /
  background-size: 156px 1023px;  
  / original position  0 -1841px; /
  background-position: 0 -920px;   
}
*/

/* TODO: remove unused icons */

.icon-myhalfling.icon-stopwatch
{
    background-image: url("../img/glyphicons_055_stopwatch_2.png");
    width: 12px;
    height: 14px;
    background-size: 12px 14px;
    background-position: 0 0px;
}

.icon-myhalfling.icon-charts
{
    background-image: url("../img/glyphicons_041_charts.png");
    width: 14px;
    height: 12px;
    background-size: 14px 12px;
    background-position: 0 0px;
}

.icon-myhalfling.icon-calendar
{
    background-image: url("../img/glyphicons_halflings_108_calendar.png");
    background-position: 0 0px;
}

.icon-myhalfling.icon-building
{
    background-image: url("../images/building.svg");
    width: 16px;
    height: 16px;
    background-size: 16px 16px;
    background-position: 0 0px;
}

.icon-myhalfling.icon-group
{
    background-image: url("../img/glyphicons_043_group.png");
    width: 18px;
    height: 11px;
    background-size: 18px 11px;
    background-position: 0 0px;
}

.dropdown-item .icon-myhalfling.myicon-person,
.dropdown-item:hover .icon-myhalfling.myicon-person
{
    background-image: url("../images/person.svg");
    width: 20px;
    height: 20px;
    background-size: 20px 20px;
    background-position: 0 0px;
}

.dropdown-item.active .icon-myhalfling.myicon-person,
.dropdown-item:active .icon-myhalfling.myicon-person
{
    background-image: url("../images/person-white.svg");
}

.dropdown-item .icon-myhalfling.myicon-people,
.dropdown-item:hover .icon-myhalfling.myicon-people
{
    background-image: url("../images/people.svg");
    width: 20px;
    height: 20px;
    background-size: 20px 20px;
    background-position: 0 0px;
}

.dropdown-item.active .icon-myhalfling.myicon-people,
.dropdown-item:active .icon-myhalfling.myicon-people
{
    background-image: url("../images/people-white.svg");
}

.dropdown-item .icon-myhalfling.myicon-clock-history,
.dropdown-item:hover .icon-myhalfling.myicon-clock-history
{
    background-image: url("../images/clock-history.svg");
    width: 18px;
    height: 18px;
    background-size: 18px 18px;
    background-position: 0 0px;
}

.dropdown-item.active .icon-myhalfling.myicon-clock-history,
.dropdown-item:active .icon-myhalfling.myicon-clock-history
{
    background-image: url("../images/clock-history-white.svg");
}

.dropdown-item .icon-myhalfling.myicon-easel,
.dropdown-item:hover .icon-myhalfling.myicon-easel
{
    background-image: url("../images/easel.svg");
    width: 20px;
    height: 20px;
    background-size: 20px 20px;
    background-position: 0 0px;
}

.dropdown-item.active .icon-myhalfling.myicon-easel,
.dropdown-item:active .icon-myhalfling.myicon-easel
{
    background-image: url("../images/easel-white.svg");
}

.dropdown-item .icon-myhalfling.calendar2-event,
.dropdown-item:hover .icon-myhalfling.calendar2-event
{
    background-image: url("../images/calendar2-event.svg");
    width: 16px;
    height: 16px;
    background-size: 16px 16px;
    background-position: 0 0px;
}

.dropdown-item.active .icon-myhalfling.calendar2-event,
.dropdown-item:active .icon-myhalfling.calendar2-event
{
    background-image: url("../images/calendar2-event-white.svg");
}

.dropdown-item .icon-myhalfling.clipboard-pulse,
.dropdown-item:hover .icon-myhalfling.clipboard-pulse
{
    background-image: url("../images/clipboard-pulse.svg");
    width: 16px;
    height: 16px;
    background-size: 16px 16px;
    background-position: 0 0px;
}

.dropdown-item.active .icon-myhalfling.clipboard-pulse,
.dropdown-item:active .icon-myhalfling.clipboard-pulse
{
    background-image: url("../images/clipboard-pulse-white.svg");
}

.icon-myhalfling.icon-settings
{
    background-image: url("../img/glyphicons_halflings_018_cog.png") !important;
    background-position: 0 0px;
}

.icon-white_opacity_40:focus ,
.icon-white_opacity_40:hover ,
.nav-pills > .active > a > [class^="icon-"],
.nav-pills > .active > a > [class*=" icon-"],
.nav-list > .active > a > [class^="icon-"],
.nav-list > .active > a > [class*=" icon-"],
.navbar-inverse .nav > .active > a > [class^="icon-"],
.navbar-inverse .nav > .active > a > [class*=" icon-"],
.dropdown-menu > li > a:hover > [class^="icon-"],
.dropdown-menu > li > a:focus > [class^="icon-"],
.dropdown-menu > li > a:hover > [class*=" icon-"],
.dropdown-menu > li > a:focus > [class*=" icon-"],
.dropdown-menu > .active > a > [class^="icon-"],
.dropdown-menu > .active > a > [class*=" icon-"],
.dropdown-submenu:hover > a > [class^="icon-"],
.dropdown-submenu:focus > a > [class^="icon-"],
.dropdown-submenu:hover > a > [class*=" icon-"],
.dropdown-submenu:focus > a > [class*=" icon-"] {
    background-image: url("../img/glyphicons-halflings-white.png");
    opacity:1.0;
    filter:alpha(opacity=100); /* For IE8 and earlier */
}

.mycreate-icon:hover,
.mycreate-icon:focus,
.mycreate-icon:active {
    opacity:0.75;
    filter:alpha(opacity=75); /* For IE8 and earlier */
}

/* remove border shadow at clicking on closing-X */
.btn-close {
    box-shadow: none !important;
}

/* Modal dialog
-------------------------------------------------- */

/* tweak shadows and corners of modal dialogs */
/* heads up! some of the dialogs overwrite position to 'fixed' */
.my-modal {
    position: absolute;
    top: 25%;
    left: 50%;
    z-index: 1050;
    width: initial;
    max-width: 560px;
    height: auto;
    margin-left: -280px;
    background-color: #ffffff;
    /* border: 1px solid #999;
    border: 1px solid rgba(0, 0, 0, 0.3); */
    border: none;
    /*box-shadow: 0 6.4px 14.4px 0 rgba(0,0,0,.132),0 1.2px 3.6px 0 rgba(0,0,0,.108); */
    box-shadow: 0 0 24px 12px var(--paper-dialog-shadow-color, rgba(0, 0, 0, 0.15));
    /*-webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;*/
    border-radius: 6px;
    outline: none;
    height: auto !important;
}

.my-fixed-width-modal {
    /* heads up! width must be set in html */
    position: absolute;
    display: block;
    top: 25%;
    left: 0;
    right: 0;
    z-index: 1055;
    height: auto;
    margin: auto;
    background-color: #ffffff;
    border: none;
    box-shadow: 0 0 24px 12px var(--paper-dialog-shadow-color, rgba(0, 0, 0, 0.15));
    border-radius: 6px;
    outline: none;
    height: auto !important;
    text-align: center;
}

.my-ts-permission-modal {
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
}

.pseudo-modal-inline-box {
    /* background-color: #ffffff;
    border: 1px solid #999;
    border: 1px solid rgba(0, 0, 0, 0.3); */
    border: none;
    background-color: rgb(250, 249, 248);
    box-shadow: 0 6.4px 14.4px 0 rgba(0,0,0,.132),0 1.2px 3.6px 0 rgba(0,0,0,.108);
    -webkit-border-radius: 0.25rem;
    -moz-border-radius: 0.25rem;
    border-radius: 0.25rem;
    outline: none;
}

.myconfirm-modal {
    position: fixed !important;
    width: 400px;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
}

.my-modal-footer {
    padding: 14px 15px 15px;
    margin-bottom: 0;
    text-align: right;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    box-shadow: 0 6.4px 14.4px 0 rgba(0,0,0,.132),0 1.2px 3.6px 0 rgba(0,0,0,.108);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    *zoom: 1;
}

/* adjust darkened background for modal dialog */
.modal-backdrop,
.modal-backdrop.fade.in {
    /* opacity: 0.8;
    filter: alpha(opacity=80);*/
    opacity: 0.3;
    filter: alpha(opacity=30);
}

.left-tabs > .nav-item > a.active,
.left-tabs > .nav-item > a:hover.active,
.left-tabs > .nav-item > a:focus.active {
    box-shadow: -3px 4px 10px rgba(0, 0, 0, 0.108);
}

.myuserselectheader {
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 10px;
    font-weight: bold;
}

.myuserselectheader a {
    color: rgb(33, 37, 41);
}

label {
    /* TODO: workaround */
    /* label for (e.g.) textfield get a pointer icon */
    cursor: default;
}

.opacity-50 {
    opacity:0.75;
    filter:alpha(opacity=75); /* For IE8 and earlier */
}

.tooltip {
    font-size: 13px;
    line-height: normal;
}

/* this is a dummy which worksaround some hardcoded(?) stuff in bootstraps 
application.js for the tool-tip ... or even wrong use of bootsrtap by me */
.tooltip-demo {
    /* this is a dummy */
}

/* dashed underlined text which has a tooltip */
.my-tooltip-base {
    border-bottom: 1px;
    border-bottom-style: dotted;
    cursor: help;
}

.mycounter {
    background: none repeat scroll 0 0 #E5E5E5;
    border-radius: 10px 10px 10px 10px;
    color: #666666;
    font-size: 11px;
    font-weight: bold;
    padding: 1px 6px 2px;
    position: relative;
    top: 0px;
}

a.active .mycounter {
    background-color: white;
}

.businessvalue  {
    color: #005d94;
}

.info-icon {
    width: 16px;
    height: auto;
}

.pale-red-striped-bg  {
    background-image: url(../images/warning_diagonal.png)
}

/* mylabel-keyword */
.mylabel-keyword {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: 0.813rem !important;
    font-weight: normal;
    line-height: 1;
    color: rgba(var(--bs-dark-rgb), 1.0) !important;
    background-color: rgba(var(--bs-secondary-rgb), 0.1) !important;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.375rem;
    font-family: var(--bs-font-monospace) !important;
}

/* Footer
-------------------------------------------------- */

.footer {
    text-align: center;
    padding: 25px 0;
    margin-top: 60px;
    border-top: 1px solid #e5e5e5;
    /*background-color: #f5f5f5;*/
}
.footer p {
    margin-bottom: 0;
    color: #777;
}
.footer-links {
    margin: 10px 0;
}
.footer-links li {
    display: inline;
    padding: 0 2px;
}
.footer-links li:first-child {
    padding-left: 0;
}

/* Unfloat the back to top link in footer */
.footer {
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
}
.footer p {
    margin-bottom: 9px;
}

/***********************************************
   my sidebar
************************************************/

body.mySidebarToggle #mysidebar {
    display: block;
}

#mySidebarToggleButton {
    display: none;
}

#mySidebarCloseButton {
    display: none;
}


/* Small devices (portrait phones, less than 768px) */
@media (max-width: 767.98px) and (orientation:portrait), (max-width: 1023.98px) and (orientation:landscape) {
    #mysidebar {
        /* display: none;*/
        margin-left: -500px;
    }

    #mySidebarCloseButton {
        display: block !important;
    }

    body.mySidebarToggle #mysidebar {
        margin-left: 0rem;
        /*display: block !important;*/
    }

    #mySidebarToggleButton {
        display: block !important;
        left: 0px;
    }

    body.mySidebarToggle  #mySidebarToggleButton {
        margin-left: 0rem;
        display: none !important;
        /*left: 210px;*/
    }
}

/***********************************************
   new spinner
************************************************/

@-webkit-keyframes spin{
    to{
        -webkit-transform:rotate(360deg);
        transform:rotate(360deg)
    }
}
@keyframes spin{
    to{
        -webkit-transform:rotate(360deg);
        transform:rotate(360deg)
    }
}
@-webkit-keyframes success-checkmark{
    0%,59%{
        stroke-dashoffset:49px;
        opacity:0
    }
    60%{
        stroke-dashoffset:49px;
        opacity:.6
    }
    to{
        stroke-dashoffset:1px;
        opacity:1
    }
}

.spinner{
    text-align:center;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    z-index:10
}
.spinner-element,.spinner::before{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%
}
.spinner-element{
    overflow:hidden
}
.spinner-global{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0
}

/*
.spinner::before{
    content:"";
    background-color:rgba(255,255,255,.85)
}
*/

.spinner.no-blur-support::before{
    background-color:#fff!important
}
.spinner-circle{
    position:absolute;
    top:48%;
    left:50%
}
.spinner-circle{
    background-color:transparent;
    border:5px solid #666666;
    border-left-color:#e5ebf5;
    border-radius:100%;
    width:50px;
    height:50px;
    margin-left:-25px;
    margin-top:-25px;
    -webkit-animation:spin 1.2s infinite linear;
    animation:spin 1.2s infinite linear
}
.spinner-elemental{
    margin:0;
    /* background-color:rgba(0,0,10,.05); */
    background-color: transparent;
    border:0 solid transparent;
    border-radius:3px;
    z-index:4
}
.spinner-elemental .spinner-circle{
    border:3px solid #666666;
    border-left-color:#e5ebf5;
    width:30px;
    height:30px;
    margin-left:-15px;
    margin-top:-15px
}
.spinner-elemental .spinner-circle-small{
    width:20px;
    height:20px;
    margin-top:-9px
}