body 
{
    background-color:#ffffff;
    position:absolute;
    height:100%;
    width:100%;
    font-family:'Roboto', Arial, Helvetica, sans-serif !important;
    font-size:12pt !important;
}

body.manage 
{
    background-color:rgba(0,0,0,.10);
}

a, a:visited 
{
    cursor:pointer;
    color:#990000;
}

a.underline 
{
    text-decoration:underline;
}

.form-control,
.input-group-addon {
    border-radius:0px !important;
}

.small 
{
    font-size:0.8em;
}

a.btn-primary:visited 
{
    color:#ffffff;
}

#divHeaderArea 
{
    opacity:0.90;
}

#divReminder 
{
    display:none;
}

#divManageBranding 
{
    padding:1em 1em;
}

#divManageMenuArea 
{
    background-color:rgba(0,0,0,1);
    color:#ffffff;
    position:absolute;
    left:0px;
    top:0px;
    bottom:0px;
    width:250px;
    overflow:auto;
}

#divManageMenuArea ul
{
    list-style:none;
    margin:0px;
    padding:0px;
}

#divManageMenuArea li h2 {
    font-family: 'Roboto', Arial, Helvetica, sans-serif  !important;
    font-size: 0.8em;
    /* background-color: rgba(255,255,255,.15); */
    padding: 1em 1em;
    margin-top: 1em;
    margin-bottom: 0;
    color: #666666;
    border-top: 1px solid #222222;
}

/*#divManageMenuArea li h2
{
    font-family:'Roboto', Arial, Helvetica, sans-serif  !important;
    font-size:0.9em;
    background-color:rgba(255,255,255,.15);
    padding:0.5em 1em;
    margin-top:2px;
    margin-bottom:2px;
    color:#ffffff;
}*/

#divManageMenuArea li a
{
    color:#ffffff;
    font-size:0.9em;
    padding:0.25em 0px 0.25em 1.5em;
    margin-bottom:1px;
    font-family:'Roboto', Arial, Helvetica, sans-serif  !important;
    opacity:0.50;
    display:block;
    background-color:rgba(255,255,255,.05);
}

#divManageMenuArea li a span
{
    margin-right:0.15em;
    width:1em;
    text-align:center;
}

#divManageMenuArea li a:hover
{
    opacity:1.00;
    text-decoration:none;
}

#divManageContentArea  
{
    position:absolute;
    left:250px;
    top:0px;
    bottom:0px;
    right:0px;
    overflow:auto;
}

#divManageToolBar 
{
    background-color:rgba(25,25,25,.9);
    padding:1.5em;
    color:#ffffff;
}

#divManageToolBar a
{
    color:#ffffff;
}

#divManageToolBar ul
{
    list-style:none;
    margin:0px;
    padding:0px;
}

#divManageToolBar ul li 
{
    display:inline-block;
}

#divManageToolBar ul li a.text
{
    display:inline-block;
    padding:0.5em 1.25em;
    background-color:rgba(255,255,255,.15);
    font-size:0.8em;
    color:rgba(255,255,255,.75);
    border-radius:15px;
}

#divManageToolBar ul li a.text:hover
{
    background-color:rgba(0,0,0,.50);
    color:rgba(255,255,255,1);
    text-decoration:none;
}


#divManageToolBar ul li a.text.help
{
    background-color:rgba(0,255,0,.25);
}

#divManageToolBar ul li a.text.help:hover
{
    background-color:rgba(0,255,0,.15);
}

#divManageToolBarIcons 
{
    text-align:right;
    white-space:nowrap;
}

#divManageTitleBar
{
    background-color:rgba(255,255,255,1);
    padding:1.5em;
    vertical-align:middle;
}

#divManageTitleBar h1 
{
    margin:0px;
    margin-bottom:5px;
    font-family:'Roboto', Arial, Helvetica, sans-serif  !important;
    font-size:2em;
    font-weight:900;
    color:rgba(0,0,0,.65);
}

#divManageTitleBar .account-name 
{
    margin:0px;
    font-family:'Roboto', Arial, Helvetica, sans-serif !important;
    font-size:1.2em;
    font-weight:bold;
    color:rgba(0,0,0,.5);
}

#divManageTitleBar .account-details 
{
   font-size:0.7em;
}


#divManageContent 
{
    padding:1.5em;
}

#divManageVideoArea 
{
    background-color:rgba(0,0,0,0.95);
    position:fixed;
    top:0px;
    bottom:0px;
    right:0px;
    left:0px;
    z-index:99999;
    display:none;
    padding:2em;
    overflow:auto !important;
}

#divManageVideoClose
{
    position:absolute;
    top:2em;
    right:2em;
    z-index:99999;
}

#divManageVideoMain
{
    position:absolute;
    z-index:999999;
    width:100%;
    height:auto;
    max-width:960px;
    max-height:540px;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
}

#divManageSlideArea 
{
    background-color:rgba(240,240,240,0.95);
    position:fixed;
    top:0px;
    bottom:0px;
    right:0px;
    left:0px;
    z-index:9999;
    display:none;
    padding:2em;
    overflow:auto !important;
}

#divManageSlideArea h2
{
    color:rgba(0,0,0,0.75);
    margin-top:0px;
    font-size:1.8em;
    font-weight:bold;
}

.form.section-box 
{
    background-color:rgba(0,0,0,.05);
    padding-top:1.5em;
    padding-bottom:1.5em;
}

.section-box 
{
    border:1px solid rgba(0,0,0,.15);
    padding:2em;
    margin-bottom:1em;
    /*box-shadow:1px 1px 1px rgba(0,0,0,.25);*/
}

.section-box h2, .section-box h3
{
    margin-top:0px;
    font-family:'Roboto', Arial, Helvetica, sans-serif !important;
    font-weight:bold;
    color:#1f517c;
}

.section-box h4 
{
    margin:1em 0px !important;
    color:#1f517c;
}

.section-box label, .fancybox-inner label
{
    font-size:0.8em;
    font-weight:normal;
    opacity:0.75;
    font-fmaily:Arial, Helvetica, sans-serif;
}

.section-box table th, .fancybox-inner table th
{
    color:rgba(0,0,0,.65);
    font-size:0.8em;
    font-weight:normal;
    white-space:nowrap;
}

.section-box table td, .fancybox-inner td 
{
    font-size:0.9em;
}

.app-box 
{
    text-align:center;
    background-color:rgba(0,0,0,.05);
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.app-box .icon 
{
    font-size:5em;
    color:#102643;
}

.app-box h4 
{
    font-size:1.2em !important;
    white-space:normal !important;
}

.app-box .app-description 
{
    font-size:0.8em;
}

.app-box .app-button {
    display:flex;
    flex-direction:column;
}

.app-box hr
{
    width:50%;
    margin:2em auto;
    opacity:0.5;
}

.form-response-area 
{
    display:none;
}

.boxed-icon 
{
    background-color:#ffffff;
    color:#000000;
}

.choice-box 
{
    background-color:rgba(255,255,255,1);
    padding:3em;
}

.choice-box h4
{
    font-family:'Roboto', Arial, Helvetica, sans-serif !important;
    font-size:1em;
    font-weight:bold;
    overflow:hidden;
    white-space:nowrap;
    margin-bottom:0px;
    
}

.choice-box h4.settings {
    background-color:#666666;
    color:#ffffff;
    padding:1em;
    font-weight:normal;
    font-size:0.8em;
}

.choice-box hr
{
    border-color:rgba(0,0,0,.15);
}

.choice-box-icon 
{
    font-size:4em;
    color:#275d8c;
}

a.btn-default 
{
    color:#666666;
}

#divLoader 
{
    position:fixed;
    bottom:0px;
    right:0px;
    z-index:999;   
    background-color:rgba(0,100,0,.75);
    color:#ffffff;
    padding:1em 2em;
    display:none;
}

.label 
{
    font-weight:normal;
}

.structure-container 
{
    margin:1em;
    border:1px solid rgba(0,0,0,.25);
}

.structure-container.level0
{
    margin:0px;
}

.structure-outer 
{
    margin-top:1em;
}

.platform-person-chooser 
{
    background-color:rgba(0,0,0,.15);
    font-size:0.8em;
    padding:0.25em .75em;
    display:inline-block;
    cursor:pointer;
}

.platform-person-chooser:hover 
{
    background-color:rgba(0,0,0,.10);
}

.no-data 
{
    padding:2em;
    text-align:center;
    opacity:0.5;
    background-color:rgba(0,0,0,.1);
    border:1px solid rgba(0,0,0,.3);
}

.flex-row {
    display: flex;
    flex-wrap: wrap;
}
.flex-row > [class*='col-'] {
    display: flex;
    flex-direction: column;
}
.flex-row.row:after, 
.flex-row.row:before {
    display: flex;
}

.fancybox-wrap, .fancybox-inner 
{
    width:100% !important;
    max-width:600px;
}

.nav-tabs 
{
    margin-bottom:1.5em;
}

.tab-pane p
{
    font-size:0.9em;
}

.tab-pane h4 
{
    opacity:0.75;
}

.nav-tabs > li.active > a, nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover 
{
    background-color:rgba(0,0,0,.75) !important;
    color:#ffffff !important;
}

.nav-tabs > li > a 
{
    color:rgba(0,0,0,.50);
    font-size:0.8em;
}

.nav-tabs > li > a:hover 
{
}

.division-block  
{
    display:inline-block;
    padding:0.5em 1em;
    border:1px solid;
    background-color:rgba(0,0,0,.05);
    margin:0.5em;
    width:5em;
    text-align:center;
    color:rgba(0,0,0,.75);
    font-size:0.8em;
    cursor:pointer;
}

.division-active
{
    border:1px solid rgba(50,200,50,1);
    background-color:rgba(0,200,0,.05);
}

.division-suspended
{
    border:1px solid rgba(200,50,50,1);
    background-color:rgba(200,0,0,.05);
}

.division-inactive
{
    border:1px solid rgba(50,50,50,1);
    background-color:rgba(0,0,0,.05);
}

.macro-settings td
{
    font-size:0.8em !important;
}

.macro-settings td:first-child 
{
    background-color:rgba(0,0,0,.05);
    color:rgba(0,0,0,1);
}

.text-free { 
    font-size:0.8em;
}

.text-instructions 
{
    background-color:rgba(0,0,0,.05);
    padding:1em;
    font-size:0.8em;
    color:rgba(0,0,0,.75);
}

fieldset 
{
    padding:1em 1em 0.5em;
    border:1px solid rgba(0,0,0,.15);
    margin-bottom:1em;
}

fieldset legend 
{
    border:0px;
    font-size:0.9em;
    padding:0px 1em;
    margin:0px;
    font-weight:bold;
    color:rgba(0,0,0,.50);
    width:auto;
}

fieldset .text-instructions 
{
    margin-bottom:1em;
    color:rgba(0,0,0,.50);
}

#divAlertArea 
{
    position:fixed;
    bottom:0px;
    left:0px;
    right:0px;
    padding:0.8em;
    text-align:center;
    background-color:rgba(0,100,0,.95);
    color:#ffffff;
    font-weight:bold;
    z-index:99992;
    display:block;
}

.btn 
{
    background-image:none !important;
    border-radius:0px;
    overflow:hidden;
    text-overflow: ellipsis;
}

a.btn-primary, a.btn-info, a.btn-success, a.btn-warning, a.btn-danger {
    color:#ffffff;
}

a.platform-upsell-item {
    display:block;
    padding:1.5em;
    border:1px solid rgba(0,0,0,.15);
    border-radius:0.5em;
    color:rgba(0,0,0,.75);
    font-size:0.9em;
    margin-bottom:1em;
    background-color:rgba(0,0,0,.02);
    text-align:left !important;
}

a.platform-upsell-item:hover {
    background-color:rgba(0,0,0,.05);
}

a.platform-upsell-item .platform-upsell-icon {
}

a.platform-upsell-item h4 {
    color:rgba(0,0,0,.75);
    margin-top:0px !important;
    font-size:1.25em;
    margin-bottom:0.25em !important;
    text-align:left !important;
}

#divServiceLevel .badge {
    padding:0.75em 1.5em;
}

#divServiceLevel .badge-MF0 {
    background-color:rgba(0,100,0,1);
}

#divServiceLevel .badge-MF1,
#divServiceLevel .badge-MF2,
#divServiceLevel .badge-MF3 {
    background-color:rgba(205,127,50,1);
}

#divServiceLevel .badge-MF4 {
    background-color:rgba(207,181,59,1);
}

#divServiceLevel .badge-MF5,
#divServiceLevel .badge-MF6 {
    background-color:rgba(207,181,59,1);
}

.center-popup-content {
    height: 100%;
    width: 100%;
    max-width: 600px;
    max-height: 600px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color:#ffffff;
    padding:2em;

}

.center-popup-wrapper {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 99999;
    background: rgba(44, 62, 81, 0.9);
    display: flex;
    overflow: auto;
    flex-direction: column;
    opacity: 1;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    visibility:hidden;
}

.growEffect {
    transition: all 0.25s ease;
}

.growEffect:hover {
    -webkit-transform:scale(1.05);
    transform:scale(1.05);
    transition: all 0.25s ease;
}

.riseEffect {
    transition: all 0.25s ease;
}

.riseEffect:hover {
    transform: translateX(0px) translateY(-25px) !important;
    transition: all 0.25s ease;
}

.toggle-container {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin-right: 10px;
}

.toggle-container input {
    display: none;
}

.toggle-switch-label {
    width: 50px;
    height: 25px;
    background-color: #ddd;
    border-radius: 50px;
    position: relative;
    transition: background-color 0.3s ease;
}

.toggle-switch-label:before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.toggle-container input:checked + .toggle-switch-label {
    background-color: #0d6efd;
}

.toggle-container input:checked + .toggle-switch-label:before {
    transform: translateX(25px);
}

@media print 
{

    #divManageMenuArea, #divManageToolBar, #divManageTitleBar, .btn, .no-print
    {
        display:none;
        
    }
    
    #divManageContentArea, .invoice-box 
    {
        position:relative;
        left:0px;
        top:0px;
        width:100%;
        border:0px;
        padding:0px;
    }
    
}

@media only screen and (max-width: 992px) {

    #divInterfaceContentLeft {
        padding-right:15px !important;
        border-right:0px !important;
    }
    #divInterfaceContentRight {
        padding-left:15px !important;
    }    

}

@media screen and (max-width: 750px){

    #divManageMenuArea 
    {
        /*display:none;*/
        position:relative;
        left:auto;
        top:auto;
        right:auto;
        bottom:auto;
        width:100% !important;
    }
    
    #divManageBranding img
    {
        width:100% !important;
    }
    
    #divManageToolBarIcons 
    {
        padding-right:1em;
    }
    
    #divManageTitleBar, #divManageTitleBarClientName 
    {
        text-align:center !important;
    }
    
    #divManageContentArea 
    {
        position:relative;
        left:auto;
        top:auto;
        right:auto;
        bottom:auto;
    }
    
    #divManageContent 
    {
        padding:0px;
    }
    
    .choice-box 
    {
        padding:1em;
    }
    
    .choice-box h3 
    {
        text-align:center;
    }
    
    .choice-box h4 
    {
        text-align:center;
    }
    
    .choice-box .text-right 
    {
        text-align:center !important;
        margin-bottom:1em;
    }
    
    .choice-box .interface-main.content, .choice-box .interface-side.content
    {
        padding:1em !important;
        border:0px !important;
    }

}

.app-teaser { border:1px dashed rgba(0,0,0,.10); padding:1em 0px; font-size:0.75em; background-color:rgba(0,0,0,.025);margin-bottom:1em; }
.app-teaser .app-icon { text-align:center; margin-right:0px;padding-right:0px;}
.app-teaser .app-icon img { display:inline;max-width:100px;margin-bottom:1em;  }
.app-teaser .app-info { display:inline-block;text-align:center;vertical-align:middle;   }
.app-teaser .app-name { font-weight:bold;font-size:1.1em;text-align:center; }
.app-teaser .app-description { color:rgba(0,0,0,.55);text-align:center;}

@media only screen and (max-width: 1000px) {
    .app-teaser .app-icon { width:100%; }
    .app-teaser .app-icon img {max-width:150px;}
    .app-teaser .app-info { width:100%; }
    .app-teaser .app-name { text-align:center; padding:1em 0px 0.5em; font-size:1.4em;}
    .app-teaser .app-description { text-align:center; }
}    

#divSidePanel 
{
    background-color:rgba(250,250,250,0.98);
    position:fixed;
    top:0;
    bottom:0;
    right:0;
    width:100%;
    max-width:500px;
    z-index:2;
    backdrop-filter: blur(10px);
    box-shadow:-3px -3px 3px rgba(0,0,0,.05);
    /*display:none;*/
    right:-520px;
    overflow-y:auto;
    padding:2em;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;  
    font-family: 'Roboto', Arial, Helvetica, sans-serif !important;
}

#divSidePanel h1,
#divSidePanel h2,
#divSidePanel h3,
#divSidePanel h4,
#divSidePanel h5,
#divSidePanel h5,
#divSidePanel h7 {
    font-family: 'Roboto', Arial, Helvetica, sans-serif !important;
}

#divSidePanel h1 {
    margin-top:0;
    font-size:1.6em;
}

#divSidePanel h3 
{
    font-weight:bold;
}

#divSidePanel .close 
{
    position:absolute;
    top:1.5em;
    right:2em;
}

#divSidePanel .close a 
{
    color:#000000;
    font-size:1em;
    opacity:0.75;
}

#divSidePanel .close a:hover 
{
    opacity:1.0;
}

#divSidePanel h3
{
    margin-bottom:0.5em;
}

#divSidePanel .instructions 
{
    font-size:0.8em;
}

/* Base styles for alignment */
.responsive-button,
.responsive-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  white-space: nowrap;
  gap:0.5em;
}

/* Keep icons visible */
.responsive-button i,
.responsive-link i {
  margin-right: 5px;
}

/* Media query to hide text */
@media (max-width: 1200px) {
    .responsive-button,
    .responsive-link {
        transition: all 0.50s ease;
        overflow: hidden; 
        width:2.75em; 
        white-space: nowrap;
        justify-content:left;
        gap:2em;
    }

    .responsive-button i,
    .responsive-link i {
        text-indent: 0;
        position: relative; 
    }

    .responsive-button:hover,
    .responsive-link:hover {
        transition: all 0.50s ease;
        width:auto;
        gap:0.5em;    
    }

    .responsive-button i:hover,
    .responsive-link:hover i {
        text-indent: initial;
        position: initial; 
    }


}