body {
    padding: 0px 0px 20px 0px;
}
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

.mq-devwarning
{
    position:fixed;
    left:50%;
    margin-left:-100px;
    top:0px;
    width:200px;
    height:30px;
    background:#f121c6;
    color:#fff;
    text-align:center;
    line-height:30px;
    z-index:9999;
}

.mq-devwarning.qa {
    background: #ed6e22;
}

.mq-devwarning.local {
    background: #32c33b;
}

.admin-only.btn {
    background: #eaeaea !important;
    color: #666 !important;
    border: 1px dashed #bbb !important;
}
.admin-only.admin-border {
    background: #eaeaea;
    border: 1px dashed #bbb;
    border-radius: 4px;
    padding:4px;
}
.admin-only.admin-button{
    background: #eaeaea;
    border: 1px dashed #bbb;
}
.admin-only .admin-url
{
    color:#999;
    background: #eaeaea;
    border: 1px dashed #bbb;
    padding:2px;
}
[hide_admin='true'] .admin-only { display:none; }

.mqstudio-bg { 
    background-color: #ddd;
    background-size:cover;
    width:100%;
    height:600px;
    margin-bottom:20px;
}
.studio-header-unsecure { display:none; }

[studioview='Editor'] .mqstudio-bg
{
    background:none;
    height:initial;
}
[studioview='DataCenter'] .mqstudio-bg {
    background: none;
    height: initial;
}

.studio-canvas {
    margin: 20px;
    width:96%;
    min-width: 995px;
    max-width: 1800px;
}

.studio-canvas-main {
    background: #fff;
    padding-left: 240px;
    padding-top: 30px;
    min-width: 1024px;
    min-height: 600px;
}

[hidenavigation='true'] .studio-canvas-main {
    padding-left: 60px;
}

[studioview='AllScreens'] .studio-canvas-main {
    padding-top: 0px;
    padding-left: 20px;
}

[studioview='Admin'] .studio-canvas-main {
    padding-left: 5%;
}

[studioview='Create'] .studio-canvas-main {
    height: 800px;
}

h2
{
    margin: 15px 0px 0px 10px;
    font-size: 23px;
    width: 98%;
    text-align: left;
    color: #000;
    border-radius: 4px;
    margin-top: 20px;
    border-bottom: solid 3px #ddd;
}


h3
{
    font-size: 22px;
    color: #2D7DBB;
}

/* -------------- EVENTING - ADMIN ONLY -------------- */
.admin-corner-button
{
    position:fixed;
    bottom:0px;
    left:0px;
    width:20px;
    background:#666;
    text-align:center;
    color:#fff;
}
.eventing-status
{
    position:fixed;
    bottom:0px;
    right:0px;
    background:#666;
    color:#fff;
    width:600px;
    height:60px;
    overflow-y:scroll;
    font-size:11px;
    padding:4px;
}
.demo-checkbox
{
    position:fixed;
    bottom:0px;
    left:0px;
    background:#666;
    color:#fff;
    height:30px;
    font-size:11px;
    padding:4px;
}
.eventing-item
{
    width:100%;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.api-login-error{
     width: 400px;
     height:200px;
    margin-left: -200px;
    left: 50%;
    position: absolute;
    padding: 30px;
    border-radius: 8px;
    box-shadow: rgba(0,0,0,0.5) 0px 0px 20px;
    background: #fff;
    text-align:center;
    top:50px;
    z-index:2;
}

.pop-modal-background {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    cursor: pointer;
    z-index: 8;
    top: 0px;
    left: 0px;
}

.pop-box-background {
    position: absolute;
    top: 40px;
    left: 50%;
    margin-left: -450px;
    width: 900px;
    min-height: 450px;
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    z-index: 9;
    box-shadow: rgba(0,0,0,0.5) 0px 0px 8px;
}
.pop-box-background.pop-box-small
{
    width:440px;
    margin-left:-220px;
    min-height:200px;
    top:80px;
}
.pop-box-name
{
    font-size: 15px;
    font-weight: bold;
    color: #308ed0;
}

/*#MQSTUDIO { display:block;}*/

/* Phase Icons Background */

.mq-phase-label__order {
    background: #32c33b;
}

.mq-phase-label__design {
    background: #ed6e22;
}

.mq-phase-label__build {
    background: #327faa;
}

.mq-phase-label__test {
    background: #9d2956;
}

.mq-phase-label__live {
    background: #3cb77a;
}

.mq-phase-label__analyze {
    background: #999;
}

.mq-phase-label__studio {
    color: #333;
    background: none;
}

.mq-phase-label__studio svg{
    fill: #333;
}



/* ----------------------------------------------- PRINT MODE ------------------------------------------------ */

@media print {
    .studio-page-break {page-break-after: always;}
}

[print_mode='true'] #MqStudioNavBar {
    display: none;
}

[print_mode='true'] .mq-studio-footer {
    display: none;
}

[print_mode='true'] .mqstudio-bg {
    background: none;
}


[print_mode='true'] .studio-canvas {
    margin: 0px;
    width: auto;
    left: auto;
    position: static;
}

[print_mode='true'] .studio-mainmenu {
    display: none;
}

[print_mode='true'] .studio-canvas-main {
    margin: 0px;
    box-shadow: none;
    width: auto;
    float: none;
    min-height: unset;
    background: none;
    border-radius: unset;
    padding-left: 60px;
}

/* ####### GLOBAL STYLES ###### */

.g-float-right {
    float: right;
}
.g-float-left {
    float: left;
}

.g-relative {
    position: relative;
}

.g-flex {
    display: flex;
}

.g-align-items-center {
    align-items: center;
}

.g-width-auto {
    width: auto;
}

.g-height-auto {
    height: auto;
}

.g-width-20p {
    width: 20px;
}

.g-width-0 {
    width: 0;
}

.g-width-25 {
    width: 25%;
}

.g-width-50 {
    width: 50%;
}

.g-width-65 {
    width: 65%;
}

.g-width-75 {
    width: 75%;
}

.g-width-80 {
    width: 80%;
}

.g-width-90 {
    width: 90%;
}

.g-full-width {
    width: 100%;
}
.g-text-align-center {
    text-align: center;
}

.g-text-align-left {
    text-align: left;
}

.g-text-align-right {
    text-align: right;
}

.g-inline-block {
    display:inline-block!important;
}

/* ######### FILTERS STYLES ######### */

.g-filters__header {
    height: 25px;
    width: 100%;
}
.g-filters__header-tab {
    width: 132px;
    line-height: 26px;
    text-align: center;
    padding-left: 6px;
    background: #ddd;
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
    float: left;
    margin: 0 1px;
    color: #666;
    text-shadow: #fff 0px 0px 1px;
    font-size:12px;
}
.g-filters__header-tab:first-child{
    margin: 0 1px 0 0;
}
.g-filters__header-tab:last-child{
    margin: 0 0 0 1px;
}
.g-filters__header-tab[is-selected='true'] {
    background: #38A6E1;
    color: #fff;
    text-shadow: #000 0px 0px 1px;
}
.g-filters__header-tab:hover {
    background: #38A6E180;
}
.g-filters__header-tab[is-selected='true']:hover {
    background: #38A6E1;
}
.g-filters__header-tab--right {
    float: right;
}
.g-filters__wrap {
    display: flex;
    position: relative;
    width: 100%;
    height: 0px;
    font-size: 12px;
    background: #38A6E1;
    overflow: hidden;
    transition: height ease-in-out 150ms;
}
.g-filters__dates {
    padding: 10px 0px 0px 5%;
}
.g-filters__wrap[is-selected='true'] {
    height: 50px;
    border-top: 1px solid #ddd;
}
.g-filters__wrap--small[is-selected='true'] {
    height: 40px;
}
.g-filters__wrap--tall[is-selected='true'] {
    height: 60px;
}
.g-filters__select-group {
    width: 25%;
    margin: auto;
    padding: 0 50px;
    color: #fff;
}

.g-filters__select-label {
    margin-bottom: 3px;
}

.g-filters input, .g-filters select {
    padding: 2px;
    width: 100%;
    border: 1px solid #666;
    border-radius: 3px;
    color: #000;
}
.g-filters-screen {
    padding: 4px;
    color: #fff;
    display: inline-block;
    width: 8%;
    vertical-align: top;
}
.g-filters-screen-name {
    font-size: 10px;
    line-height: 10px;
    text-align: center;
    display: block;
}
.g-filters-screen:hover {
    color: #000;
}
.g-filters-screen[is-selected='true'] .g-filters-screen-name,
.g-filters-screen[is-hovered='true'] .g-filters-screen-name {
    color: #000;
}
.g-filters-screen-icon {
    max-width: 24px;
    margin: 5px auto;
    width: 20px;
    height: 20px;
    background-size: 100%;
    opacity: 1;
}
[is-hovered='true'] .g-filters-screen-icon {
    opacity: 0.4;
}
.g-filters-screen[screen-type='INT'],
.g-filters-screen[screen-type='XIT'] {
    cursor: default;
}
.g-search-results-counter {
    width: 100%;
    position: relative;
    text-align: right;
}
.g-search-results-counter span {
    color: #aaa;
}

.g-spinner {
    position: absolute;
    top: 250px;
    left: 53%;
}
.g-filters-footer {
    width: 100%;
    font-size:12px;
    display: flex;
}
.g-filters-footer-search {
    width: 320px;
    background: #ddd;
    margin: auto auto auto 0;
    padding: 5px 24px;
    border-radius: 0 0 6px 6px;
}

.g-filters-search-count {
    margin: auto 48px;
}
.g-filters-search-count .fa-warning {
    color: #dd9100;
}
.g-filters-text-input {
    margin: auto;
}
.g-filters-text-input input {
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 4px 6px;
    width: 240px;
}
.g-filters__project select {
    width: 162px;
    padding: 2px;
    border-radius: 4px;
}
.g-filters__progress-line {
    width: 100%;
    height: 3px;
    margin:1px auto;
    background: linear-gradient(#ddd 30%, #ccc, #eee);
    border-radius: 2px;
    position: relative;
}
.g-filters-search__progress-line {
    position: absolute;
    left: 0;
    top: 0;
    width: 0px;
    height: 100%;
    background: #0d0;
    transition: all ease-in-out 200ms;
}
.g-filters-search__progress-line[is-searching='true'] {
    width: 100%;
    opacity: 100;
    left: 0;
}
.g-filters-search__progress-line[search-completed='true'] {
    width: 0;
    opacity: 100;
    right: 0;
    left: 100%;
}
.g-filters-search__progress-line[search-ready='true'] {
    width: 0;
    opacity: 0;
    left: 0;
}