[studioview='Screens'] .studio-canvas-main {
    width:1010px;
    margin-left:-505px;
}


.screen-grid
{
    width:1010px;margin-left:-505px;position:relative;left:50%;padding:15px;
    background:#fff;
}
.screen-grid-narrow
{
width: 100%;
    position: static;
    margin:0px;
    padding:0px;
}
.screen-grid-header
{
     border-bottom:solid 1px #ccc;height:40px;width:100%;
}
.screen-grid-title
{
    font-size:24px;position:absolute;left:15px;
}
.grid-style-buttons
{
   position:absolute;right:15px;
}
.screen-grid-list thead
{
    font-size:11px;
    text-align:center;
}
.screen-grid-list thead .head-phase
{
    width:308px;
    border-bottom:solid 1px #ccc;
    padding-bottom:4px;
}
.screen-grid-list thead .head-ui
{
    width:308px;
    border-bottom:solid 1px #ccc;
    padding-bottom:4px;
}

.screen-grid-row
{
    /*padding:2px 0px;*/
    clear:both;

}
.screen-grid-row[is_selected='true'] .screen-grid-col 
{
    background:#ff9;
}
.screen-grid-row[is_selected='true'] .screen-grid-col.screentype-icon 
{
    background:#090;
}
.superhead .screen-grid-col 
{
    height:25px;
}
.screen-grid-list thead .screen-grid-col 
{
    padding-top:4px;
    height:40px;
}
.screen-grid-col 
{
    width:100px;
    display:inline-block;
    margin-right:4px;
    height:26px;
    float:left;

}
.screen-grid-col.bord-right
{
    border-right:solid 1px #eee;
}
.screen-grid-col.bord-left
{
    border-left:solid 1px #eee;
}
.screen-grid-list tbody .screen-grid-col 
{
    border-top:solid 1px #ccc;
    padding-top:2px;
}
.screentype-enable
{
    width:20px;
}
.screentype-sort
{
    width:20px;
}
.screentype-sort i
{
    color:#ddd;
}
.screen-grid-row:hover .screentype-sort i
{
    color:#666;
}
.screen-grid-row[is_selected='true'] .screentype-enable
{
    background:#fff;
}
.screen-grid-list tbody .screentype-enable
{
    border-top:none;
}
.screen-grid-list tbody .screentype-sort
{
    border:none;
}
.screen-grid-row[is_selected='true'] .screentype-sort
{
    background:#fff;
}
.screen-grid tbody .screentype-icon
{
    background:#060;
    border-radius:20px;
    border-top:none;
    margin-bottom:3px;
    padding:3px 4px;
}
.screen-grid .screentype-icon
{
    padding:4px;
    width:28px;
    height:28px;
    margin-left:8px;

}

.screen-grid .screentype-icon img
{
    width:20px;
}

.screen-grid .tab-content-name .screentype-icon
{
    background:#060;
    border-radius:20px;
    margin-right:8px;
    height:40px;
    width:40px;
    float:left;
}
.screen-grid .tab-content-name  img
{
    width:30px;
    margin-top:-14px;
    margin-left:1px;
}

.screen-grid .screentype-name
{
    width:195px;
    margin-left:5px;
    padding-left:5px;
    font-weight:bold;
    position:relative;
}

.screentype-phase
{
    /*width:77px;*/
    text-align:center;
}
.screen-grid-list tbody .screentype-phase
{
    font-size: 21px;
    padding-top: 0px;
    line-height: 30px;
}
.screentype-phase[level='2']
{
    color:#090;
}
.screentype-phase[level='1']
{
    color:#999;
    font-size:14px;
}

.screentype-ui
{
    /*width:77px;*/
    text-align:center;

}
.screen-grid-list tbody .screentype-ui
{
    line-height:20px;
}
tbody .screentype-ui[level='yes']{
    font-size:17px;    
    color:#090;

}
tbody .screentype-ui[level='sometimes']{
    color:#999;
    font-size:13px;
}
.screentype-data
{
    /*width:120px;*/
}
.screen-grid-list tbody .screentype-data
{
    /*text-align:center;*/
    
    color:#484;
}
.screentype-data .datatype-text { display:inline-block;font-size:11px; }
.screentype-data .datatype-icon { width:20px;display:inline-block;text-align:center;margin-left:10px;}
.screen-grid-list tbody .screentype-data .fa { font-size:15px;width:20px; }
.tab-content-name
{
    font-size:30px;
    margin-top:18px;
}
[no_dat='true']{
    color:#fff;
}

.screntype-thumbnail {
    width:300px;
    float:right;
    margin:0px 0px 20px 20px;
}
.simple-outline
{
    border:1px #83B183 solid;
    padding:0px;
    height:7px;
    width:35px;
    display:inline-block;
    background:#fff;
}
.simple-bar
{
    height:6px;
    width:20%;
    /*background:#B9B9B9;*/
    background:#83B183 !important;
}
[level='1'] .simple-bar { width:35%;background:#0c0; }
[level='2'] .simple-bar { width:50%;background:#0c0; }
[level='3'] .simple-bar { width:65%;background:#8b8; }
[level='4'] .simple-bar { width:80%;background:#aba; }
[level='5'] .simple-bar { width:95%;background:#ccc; }


.complex-outline
{
    /*border:1px #999 solid;*/
    padding:2px;
    height:10px;
    width:28px;
    display:inline-block;
    background:#6CA76C;
}
.complex-bar
{
    height:6px;
    width:20%;
    /*background:#B9B9B9;*/
    background:#fff !important;
}
[level='1'] .complex-bar { width:10%;background:#0c0; }
[level='2'] .complex-bar { width:25%;background:#0c0; }
[level='3'] .complex-bar { width:40%;background:#8b8; }
[level='4'] .complex-bar { width:65%;background:#aba; }
[level='5'] .complex-bar { width:80%;background:#ccc; }

/*.include_insouts img { width:100%; }*/

.guide-diagram { clear:both;margin-top:10px; }
.guide-diagram img { width:100%; }
.screentype-in { max-width:40%;margin-right:10px;float:left; }
.screentype-out { max-width:40%;float:left; }
.screentype-middle { width:50px;float:left; }
.screentype-middle .fa { font-size:48px; color:#999;margin-top:50px; }

[is_sorting='true'] .screen-preview
{
    display:none;
}

.screen-preview {
    position:absolute;
    width:194px;
    height:128px;
    left: 0px;
    z-index: 1;
    top: 33px;
    background:#fff;
    padding:0px;
    box-shadow:0px 0px 2px 2px rgba(0,0,0,0.4);
}
.screen-preview-arrow
{
    position:absolute;
    width:16px;
    height:16px;
    background:#fff;
    border:solid 1px #999;
    left: 10px;
    top: -8px;
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
    box-shadow:0px 0px 2px 2px rgba(0,0,0,0.4);
}
/*.screentype-thumbnail
{
    position:absolute;
    width:100%;
    height:100%;
    border:solid 1px #999;
    left: 0px;
    top: 0px;
}*/
.screen-preview .screentype-thumbnail
{
    position:absolute;
    width:100%;
    height:100%;
    border:solid 1px #999;
    left: 0px;
    top: 0px;
    padding:3px;
    background:#fff;
}
.screenshot-web
{
    float:left;
    width:66%;
    margin-right:10px;
    font-size:18px;
}
.screenshot-web img
{
    width:100%;
}
.screenshot-mobile
{
    float:left;
    width:25%;
    font-size:18px;
}
.screenshot-mobile img
{
    width:100%;
}
.screenshot-img
{
    float:left;
    width:50%;
}
.screenshot-img img {     
    width: 100%;
    border: solid 4px #000;
    border-radius: 13px; 
}
.screenshot-text
{
    float:left;
    width:48%;
    margin-left:2%;
}
.screenshot-text li { margin-bottom:20px; }
.disabled-screens
{
    margin: 14px 0px;
    border: solid #ccc 1px;
    font-size: 13px;
    padding: 4px;
    background: #eee;
}
.screenshot-link {
    margin: 10px 145px;
}

.disabled-screen input {
    float: left;
    margin-right: 3px;
}
.disabled-screen
{
    display:inline-block;
    background:#fff;
    padding:1px 4px;
    color:#777;
    border:solid #ccc 1px;
    margin-right:2px;
    line-height:20px;
}

.enabled-yes { color:#999; }
.enabled-no { display:none; }
.screentype-enable:hover .enabled-no { display:block;color:#900; }
.screentype-enable:hover .enabled-yes { display:none; }


td:focus {
    outline:none;
}

.build-summary {
    font-size:16px;
    margin:20px 0px;
}

.build-content{
    font-weight:bold;
    width:30%;
    float:left;
}
.build-content ul
{
    margin-top:10px;
}
.build-content li{
    font-weight:normal;
    font-size:13px;
}
.build-decisions{
    font-weight:bold;
        width:30%;
    float:left;
    margin-left:15px;
}
.build-decisions-file{
    clear:both;
    padding:20px 0px;
}
.build-decisions ul
{
    margin-top:10px;
}
.build-decisions li{
    font-weight:normal;
    font-size:13px;
}
.screentype-info {
    position:relative;
}
.screentype-info .build-content
{
    width:45%;
}
.screentype-info .build-decisions
{
    width:45%;
}
/*.screen-sortx
{
    position:absolute;
}*/
.as-sortable-dragging { background:#ddd;width:250px !important;opacity:0.9; }
.as-sortable-dragging .screen-grid-col {display:none;}
.as-sortable-dragging .screen-grid-col.screentype-sort {display:inline-block;}
.as-sortable-dragging .screen-grid-col.screentype-name {
    display:inline-block;
    width:200px;
    font-weight:bold;
}

/* ------------ GRID ------------ */


.screen-grid-itemx
{
float: left;
    height: 137px;
    width: 186px;
    margin: 10px 10px 0px 0px;
    border-radius: 8px;
    border: solid 1px #666;
    box-shadow: rgba(0,0,0,0.2) 0px 0px 2px 2px;
    padding: 2px 8px 8px 8px;
    overflow: hidden;
}
.screen-grid-item {
    float: left;
    height: 126px;
    width: 135px;
    margin: 5px 5px 0px 0px;
    border-radius: 8px;
    border: solid 1px #666;
    box-shadow: rgba(0,0,0,0.2) 0px 0px 1px 1px;
    padding: 2px 6px 6px 6px;
    overflow: hidden;
}
.screen-grid-item[is_selected='true']
{
    /*background:#ff9;*/
    box-shadow: rgba(0,0,0,0.6) 0px 0px 1px 1px;
    border: solid 1px #000;
}
.screen-grid-item .screentype-thumbnail
{
    width:100%;
}
.screen-grid-grid .screentype-namex
{
    font-weight:bold;
    float:left;
    width:140px;
    margin-left:0px;
    padding-left:0px;

}
.screen-grid-grid .screentype-name
{
    float: left;
    width: 103px;
    line-height: 20px;
    margin-left: 0px;
    padding-left: 0px;
    font-size: 12px;
    font-weight:bold;
}
.screen-grid-grid .screentype-enable {
    float:left;
    width:15px;
}
[grid_style='help'] { display:block !important; }
[grid_style='list'] { display:block !important; }
[grid_style='grid'] { display:block !important; }

[grid_style='list'] .list-button
{
    background:#cfc;
}
[grid_style='grid'] .grid-button
{
    background:#cfc;
}
[grid_style='help'] .help-button
{
    background:#cfc;
}
.when-keys
{
    padding: 2px 10px;
    border-bottom: #d2d2d2 1px solid;
    margin-bottom: 14px;
    margin-top: 20px;
    font-weight: bold;
    font-size:18px;
    color:#060;
}
.when-keys .fa-key
{
    /*color:#ff0;*/
}
.when-keys-hide
{
    display:none;
}
[role='tabpanel'] li
{
    margin-bottom:10px;
}
md-tab-content md-tab-content {
    padding-top:20px;
}

.grid-help {
    margin:25px 50px;
    padding:20px;
    border:solid 1px #aaa;
}
.grid-help .help-tab-list { border:solid 2px #ccc;padding:10px;margin:20px 42px;border-radius:8px; }
.grid-help li { margin:8px 5px; }

.grid-help-ss
{
    float:left;
    width:42%;
    text-align:center;
    margin-left:5%;
    border:solid 2px #ccc;
    border-radius:8px;
    padding:8px;
}
.grid-help-ss img
{
    margin:10px 0px;
    width:100%;

}
.grid-help-ss b
{
    font-size:16px;
}

/* FOR SCREEN SELECTION */

[this_form='Screens'] .screentype-info-head
{
    padding:0px 80px;
}

.screentype-favorite-btn{
    float: right;
    margin: -30px 100px;
    font-size: 16px;
}

.fa-star.yellow{
    color: gold;
}
.screentype-screenshot-web 
{
    width:35%;
    float:right;
    margin-left:20px;
}
.screentype-screenshot-mobile
{
    width:15%;
    float:right;
    margin-left:10px;
    border:solid 6px #bbb;
    border-radius:11px;
    margin-top:2px;
}
.screentype-examples-button
{
    position:absolute;
    top:75px;
    right:10px;
    z-index:1;
}

/* ------------------------------------------------------ PRINT MODE ---------------------------------------------------- */
[print_mode='true'][studioview='Screens'] .studio-canvas-main {
    width:700px;
    overflow: hidden;
    outline: 2px dashed #adadad;
    margin: 10px auto;
    background-color: #FFF;
}
[print_mode='true'][studioview='Screens'] .screen-grid {
    left:0px;
    width:auto;
    margin:auto;
    padding:0px;
}
[print_mode='true'][studioview='Screens'] .screentype-screenshot-web {
    width:43%;
    float:right;
    margin-left:20px;
}
[print_mode='true'][studioview='Screens'] .tab-content-name { line-height:30px; }

[print_mode='true'][studioview='Screens'] .playlist-slide-area { width:auto;height:275px; }
[print_mode='true'][studioview='Screens'] .playlist-title { font-size:18px;line-height:22px; }
[print_mode='true'][studioview='Screens'] .playlist-note { font-size:14px;margin:6px 0px; }

/* ------------------------ Media query for print styles ------------------------- */
@media print {
    [print_mode='true'][studioview='Screens'] .btn { display:none; }
    [print_mode='true'][studioview='Screens'] .studio-canvas-main { outline: none; }
    [print_mode='true'][studioview='Screens'] a { outline: none; }
}