/* FotoNote Portal CSS
----------------------------------*/

/* base styles
----------------------------------*/

html, body {
    height: 100%;    
}
body {
    position: relative;
    /*-webkit-font-smoothing: antialiased;*/
}
a:link {outline: 0;}/*remove dotted line in ff*/

select:-moz-focusring {
    color: transparent !important;
    text-shadow: 0 0 0 #000 !important;
}


a:link {
    color: #339AFF;
    text-decoration: none;
    cursor: pointer;
}
a:hover {
    color: #339AFF;
    text-decoration: none;
    cursor: pointer;
}
a:visited {
    color: #339AFF;
    text-decoration: none;
    cursor: pointer;
}
a, a:active {
    outline: medium none;
    cursor: pointer;
    color: #339AFF;
}

.btn:visited, .btn:link {
    color: #333;
}


/* IDs...
----------------------------------*/

#fn_wrap {
    top:0;
    bottom: 0;
    left:0;
    right:0;
}

.page_content {
    height: calc(100vh - 40px);
}
.navWrapper.siteCapture {}


#fn_sb {background: none repeat scroll 0 0 orange; height: 0;margin-left: 90px;position: relative; width: 330px;z-index: 5000;}
#fn_sb ul {}
#fn_sb ul li {} 
#fn_sb ul li a  {}
#fn_sb .fn_brand {padding: 6px 0 0 46px;font-size: 12px;}
#fn_sb .fn_brand a  {color: #339AFF;}
#fn_sb .fn_brand a:visited  {color: #339AFF;}
#fn_sb .fn_brand a:hover  {color: #339AFF;text-decoration: underline;}
    
/*  new logo wrapper  */ 
.navWrapper{float: left;width: 100%;position: fixed;z-index: 1000;background:#eee;min-width: 1140px;max-height: 30px;
display:flex;justify-content:space-between;}  
#portal_id {float: left;margin:5px 10px 0 16px;vertical-align: top;}
#portal_id .customerIcon {display:inline-block; height:18px;width:18px;margin:0px 6px 0 0;}
#portal_id .customerName {display: inline-block;font-weight: bold;padding: 0;vertical-align: top;color: #000;}


.newUI #typeNav .nav #portal_id {width: 26px;}
.newUI #typeNav .nav #portal_id a {
    padding:0;
    display: flex;
    align-items: center;
    justify-content:center;
    width: 100%;
}
.newUI #typeNav .nav #portal_id img {
    vertical-align: bottom;
    width:20px;
    margin:auto;
    display: inline-block;
    padding-left: 2px;
}


/*global overrides for dropdown menu*/

.dropdown-menu {
    border-radius: 0;
    border:none;
    width: 260px;
}
.dropdown-menu > li > a:hover,  
.dropdown-menu > li > a:focus,  
.dropdown-submenu:hover > a,  
.dropdown-submenu:focus > a, 
.scroll_container2 > li:hover {
    background-color: #f2f2f2;
    background-image: linear-gradient(to bottom, #f2f2f2, #f2f2f2);
    background-repeat: repeat-x;
    color: #000;
    text-decoration: none;
    } 





/*  utility nav   */    
#n_un {float:right;min-width: 220px;}

/*.newUI #n_un {position: absolute;right: 0;}*/

#n_un ul {}
#n_un ul li {float:right;font-size:12px;margin:0px 20px 0 0;white-space:nowrap;}  
#n_un ul li li {width: 100%;margin: 0;}
#n_un ul li img {margin: 0px 0 0 8px; height: 30px; width:30px;display: inline;}   
#n_un ul li img.profilePic {border-radius: 20px;height: 24px;margin:-1px 0 0 0;width: 24px;}
    .newUI #n_un ul li img.profilePic {border-radius: 20px;height: 24px;margin:4px 0 0 0;width: 24px;}

#n_un a {color:#666;display: inline-block;}
#n_un .adminMenu {margin-top: 4px;}
#n_un .dropdown-menu a {display: block;}
#n_un a:visited {color:#666;}
#n_un a:hover {color:#000;}
#n_un .hr {height: 1px;border-top:1px solid #ddd;margin:5px 0;}
#n_un ul li li.loggedInAs {
    font-size: w;
    font-weight: bold;
    margin: 10px 0;
    width: auto;
    float: left;
    padding-left: 20px;
}
.navWrapper.newUI {
    background: #2F3339;
    height: 40px;
    max-height: 40px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    float: none;
}

.navWrapper .alert-danger, 
.navWrapper .saveNotification.alert.alert-error {
    background-color: #ffea00;
    border: 0 none;
    color: #000;
}
.navWrapper .saveNotification.alert.alert-error {
    border-radius: 0;
    left: -31px;
    opacity: 0.96;
    position: fixed;
    text-align: center;
    top: -1px;
    width: 102%;
    z-index: 7000;
}

.saveNotification {
    left: 43%;
    position: fixed;
    text-align: center;
    top: 35px;
    z-index: 7000;
}

/*  TYPE nav  */    
#typeNav {font-size: 13px;float: left;}

.newUI #typeNav {
    font-size: 16px;
    width: auto;
    margin: 0;
    flex-grow: 1;
}
#typeNav .nav-tabs > li > a {
    color:#aaa; 
    color: #8a9095; 
    padding: 5px 12px;
    background: none repeat scroll 0 0 transparent;
    border-radius: 0;
    border:0;
}
    .newUI #typeNav .nav-tabs > li > a {
    color: #888;
    padding: 10px 12px;
    background: none repeat scroll 0 0 transparent;
    border-radius: 0;
    border: 0;
    text-transform: capitalize;
    font-size: 14px;
    letter-spacing: .5px;
}
#typeNav .nav {
    margin-bottom: 0;
}
#typeNav  .nav-tabs {
    padding-left: 8px;
    border:0;
}
.newUI #typeNav .nav-tabs {
    padding: 0;
    display: flex;
    align-items: center;
    height: 40px;
}
.newUI #typeNav .nav-tabs li {
    margin: 0 10px;
    height: 28px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    border: none;
    background: transparent;
    border-radius: 0;
    border-bottom: 2px solid #f000;
}
.newUI #typeNav .nav-tabs li a {
    /*padding: 0 20px;*/
}
#typeNav .nav .active {
    background: #d0d4d8 none repeat scroll 0 0;
    color: #47525d;
    height: 20px;
}
 .newUI #typeNav .nav .active {
    color: #000;
    background: #fff;
    font-weight: bold;
    background: transparent;
    border-bottom: 2px solid #ff9002;
    border-radius: 0;
}




.newUI #typeNav .nav-tabs .active a {
    color:#f6f6f6;
    letter-spacing: 0.5px;
    font-weight: 400;
}
.newUI #typeNav .nav-tabs > li > a:hover {
    border:0;
    color:#ccc;}
.newUI #typeNav .nav-tabs > li.active > a:hover {
    border:0;
    color: #fff;
}
.newUI #typeNav .nav-tabs .active a {
    color:#f6f6f6;
    letter-spacing: 0.5px;
    font-weight: 400;
}

.newUI #typeNav .favoritesDropdown {
    height: 26px;
    width: 26px;
    margin: 7px 0px 0 0;
    padding-bottom: 10px;
    position: absolute;
    right: -36px;
    background: url("../images/portal/icon-fav-dropdown.svg") no-repeat scroll 0px 0px /26px rgba(0, 0, 0, 0);
    display: none;
}
.newUI #typeNav .favoritesDropdown:hover {
    background: url("../images/portal/icon-fav-dropdown.svg") no-repeat scroll 0px 0px /26px #43484F;
}
.dropdown-favorites-menu  {
    border: none;
    box-shadow: 0px 6px 10px -2px rgba(0,0,0,0.75);
    background: #43484F !important;
    /*width: 450px;*/
    margin: 0px 0 0 -200px;
    border-radius: 4px;
    padding:10px 0px 20px 0px;
    display: none;
    position: absolute;
    top: 28px;
    z-index: 1000;
}
.dropdown-favorites-menu .inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.favoritesDropdown:hover .dropdown-favorites-menu {
    display: block;
}
.menu-dark h4 {
    /*color: #DE8E0A;*/
    color: #ddd;
    font-size: 14px;
    text-transform: capitalize;
    width: 200px;
    letter-spacing: .6px;
    margin-bottom: 0;
    padding: 0 0 0 20px;
    }
.siteCapture .menu-dark h4 {
    color: #26ade4;
}

.menu-dark ul {
    padding:0;
    margin:0;
    max-height: 210px;
    overflow: hidden;
}
#typeNav .menu-dark a,
#n_un .menu-dark a {
    color: #c3c3c3;
    font-size: 14px;
    letter-spacing: .9px;
    font-weight: 400;
    line-height: 1.2;
    padding: 5px 20px;
    display: block;
}
#typeNav .menu-dark a:hover,
#n_un .menu-dark a:hover {
    color:#fff;
    background: #333;
}

#n_un .global-search .dropdown-menu.menu-dark {
    left: auto;
    right: -10px;
    border: none;
    top: 34px;
    width: 580px;
    padding:20px;
}
.newUI .dropdown-menu.admin-search  form {
    display: flex;
    flex-direction: row;
    align-items:center;
    margin:0;
}
.newUI .menu-dark.admin-search  h4 {
    width: auto;
    padding: 0 10px 0 0;
    margin: 0;
}
.newUI .admin-search .search-query {
    flex-grow: 1;
    border-radius: 3px;
    margin: 0 10px;
    /*border: none;*/
}
.newUI .admin-search .search-query:focus {
    background: #fff;
}
.newUI .menu-dark.admin-search .styled-select {
    height: 28px;
    width: 200px;
    /*border: none;*/
}
.newUI .menu-dark.admin-search .styled-select select {
    font-size: 16px;
    height: 28px;
    width: 200px;
}


.newUI .dropdown-menu.admin-menu {
    margin: -4px -90px 0 0;
    border: none;
    box-shadow: 0px 6px 10px -2px rgba(0,0,0,0.75);
    background: #43484F !important;
    border-radius: 4px;
    padding: 10px 20px 40px 30px;
    width:660px;
    z-index: 1;   /*prevent from overlapping favorites menu*/
}
.newUI .dropdown-menu.admin-menu .inner {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
#n_un .dropdown-menu.menu-dark {
    background: #43484F !important;
    padding:10px 0;
    border-radius: 4px;
}
#n_un .zendeskLink .dropdown-menu.menu-dark {
    left: auto;
    right: -10px;
    border: none;
    top: 34px;
    width: 220px;
}
#n_un .dropdown-menu.menu-dark a {
    padding: 5px 20px;
}
#n_un .dropdown-menu.menu-dark a:hover {
    background: #333;
}
#n_un ul li ul.menu-dark li.loggedInAs {
    padding:0;
    margin:0;
}
#n_un ul li ul.menu-dark li.loggedInAs h4 {
    margin:0;
}

#sidebar {  /*display:   note: there may be a layout.gsp that has a sidebar    */}
#flash {color:red;} 
    
        
/* ... and classes
----------------------------------*/
.main-content {  margin: auto;float: none;}
.buttons {border-top: 1px dotted #ccc;   clear: left;  float: left;   margin-top: 20px;  width: 100%;  padding: 12px 0;  }
.buttons .button {   background: none repeat scroll 0 0 #FFFFFF;  float: left;  margin: 18px 0 0;  padding: 0; }


/*get rid of those dated background gradients on the default Bootstrap buttons*/
.btn {background-image: none;border:none;}
.btn-link {color: #6495DE;}




/* 
    FOOTER 
--------------------------------------------------- */
#footer {display: none;}

.signIn.footer {
    bottom: 0;
    font-size: 11px;
    left: 0;
    position: absolute;
    text-align: center;
    width: 100%;
    color: #ccc;
}
.signIn.footer:hover  {
    color: #000;
}
.more.open .ikon {
    background-color: #f1f1f1;
} 
    


  /* NEW PROJECT LIST DESIGN - index of all your projects by TYPE
----------------------------------------------------------------------------------------------------------------------------------------------*/ 
#fn_type_list.pl2 {
    display: grid;
    grid-template-columns: 300px 1fr;
    grid-template-rows: 40px calc(100vh - 80px);
    grid-column-gap: 20px;
    height: calc(100vh - 40px);
    overflow: hidden;
    margin-top: 40px;
}
#fn_type_list.pl2.viewsSidebarCollapsed {
    grid-template-columns: 40px 1fr;
}
#fn_type_list.pl2.viewsSidebarCollapsed .views-list {
    display: none;
}
.search_title {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    position: relative;
    overflow: visible;
    border-bottom: 1px solid #ddd;;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 0 20px 0 0;
}
 .isFaved,
 .notFaved {
    height: 20px;
    width: 20px;
    display: inline-block;
    vertical-align: text-bottom;
    margin: 0 0 0 .5em;
} 
 .isFaved:hover,
 .notFaved:hover {
    cursor: pointer;
}
.checkOn,
.checkOff,
.checkMixed {
    height: 20px;
    width: 20px;
    display: inline-block;
    vertical-align: text-bottom;
    margin: 0 0 0 .5em;
} 
.checkOn {
    background: rgba(0, 0, 0, 0) url("../images/portal/check_on.svg") no-repeat scroll 0 0 / 16px auto;
}
.checkOff {
    background: rgba(0, 0, 0, 0) url("../images/portal/check_off.svg") no-repeat scroll 0 0 / 16px auto;
}
.checkMixed {
    background: rgba(0, 0, 0, 0) url("../images/portal/check_mixed.svg") no-repeat scroll 0 0 / 16px auto;
}
 .checkOn:hover,
 .checkOff:hover,
 .checkMixed:hover {
    cursor: pointer;
}

/*
these are PURE css checkbox-types
    Used:
    - manage types modal
    - manage views modal
*/
.cssCheckbox input[type=checkbox] {
    display:none;
}
.cssCheckbox input[type=checkbox] + label {
    /*background: #999;*/
    background: rgba(0, 0, 0, 0) url("../images/portal/check_off.svg") no-repeat scroll 0 0 / 16px auto;
    height: 16px;
    width: 16px;
    display:inline-block;
    padding: 0 0 0 0px;
}
.cssCheckbox input[type=checkbox]:checked + label {
    /*background: #0080FF;*/
    background: rgba(0, 0, 0, 0) url("../images/portal/check_on.svg") no-repeat scroll 0 0 / 16px auto;
    height: 16px;
    width: 16px;
    display:inline-block;
    padding: 0 0 0 0px;
}

.leftSideBar {
    grid-column:1 / 2 ;
    grid-row: 1 / 3;
    background: #f8f8f8;
    position: relative;
}
.pl2.viewsSidebarCollapsed .leftSideBar .advancedSearch {
    width: 40px;
}
.minSidebar,
.maxSidebar {
    float: right;
}
.minSidebar {
    background: url("../images/portal/chevron_page_left.svg") no-repeat scroll 8px 6px/ 16px rgba(0, 0, 0, 0);
    margin:8px 10px 0 0;
    height: 30px;
    width: 30px;
}
.maxSidebar {
    background: url("../images/portal/chevron_page_right.svg") no-repeat scroll 11px 16px/ 16px rgba(0, 0, 0, 0);
    width: 40px;
    margin: 0;
    height: 100%;
}
.mainContent {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    overflow: hidden;
}

.search_title h1 {
    text-align: left;
    font-weight: 600;
    padding: 0;
    margin: 0;
    font-size: 20px;
    text-transform: capitalize;
    display: inline-block;
}
.search_title h1 span { 
    color: #425365;
}
.spanner {
    flex-grow:1;
}
.createNewProject {
    background: url("../images/portal/addSign.svg") no-repeat scroll 7px 9px/12px #43ba43;
    color: #fff;
    border-radius: 2px;
    display: inline-block;
    /*width: 90px !important;*/
    height: 30px;
    min-width: 70px;
    padding: 0 20px 0 25px;
    margin: 0;
    border: none;
    text-align: right;
    text-transform: capitalize;
}

#fn_type_list {
    width:100%;
    min-height: 120px;
    margin-top: 40px;
}
#fn_type_list_inner {
    margin:0;
}
.popover-content form {
    margin:0; /*this is the create new from pop up*/
    } 
#fn_type_list table {
    min-width: 968px;
    /*background-color: orange;*/
    overflow: auto;
}
#fn_type_list .table th {
    color: #7b8994;
    font-size: 11px;
    font-weight: 400;
    display: flex;
    padding: 2px 5px;
    letter-spacing: 0.65px;
}
#fn_type_list .table th.multiSelect {
    height: auto;
    padding: 0 0 0 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
#fn_type_list th {
    color:#666;
    font-size:12px;
}
#fn_type_list td {
    color: #666;
    font-size: 12px;
    border-top: 1px solid #dee6ec;
    line-height: 1.3;
}
#fn_type_list tbody tr:last-child {
    border-bottom:1px solid #dee6ec;
}

/*idea for bigger hotsphot on checkbox select on list view */

#fn_type_list tr .checkbox > label {
    width: 100%;
    height: 62px;
    padding-left: 12px;
}
#fn_type_list.pl2 td.checkbox input {
    margin:30px 0 0 0;
    display: block
}
#fn_type_list.pl2  .projectThumb {
    padding: 10px 0 0 2px;
}
#fn_type_list.pl2  .templateSource {
    overflow: hidden;
    text-overflow: ellipsis;
}
#fn_type_list.pl2  .templateSource .type {
    display: block;
    color:#999;
    font-style: italic;
}
#fn_type_list.pl2  .utility {
    position: relative; 
}


.utility ul {
    margin: 0px 0 0px 10px;
    font-size: 14px; /*don't inherit row font size*/
}
#fn_type_list .utility .more > a {
    display: block;
    margin: 10px 0 0 0;
    width: 35px;
    height: 30px;
    border-radius: 2px;
}
#fn_type_list .utility a:hover {
    background: #f1f1f1;
} 
.utility li .ikon {
    height: 26px;
    width: 35px;
    display: block; /*fix for flicker bs-tooltip*/
}
.utility li .ikon-open-comments-yes {
    background: transparent url("../images/portal/icon-toggle-comment-yes.svg") no-repeat scroll 6px 7px/20px auto;
    margin-bottom: -8px;
}
.utility li .ikon-open-comments-none {
    background: transparent url("../images/portal/icon-toggle-comment-none.svg") no-repeat scroll 6px 7px/20px auto;
    margin-bottom: -8px;
}
#fn_type_list .utility .more .dropdown-menu {
    min-width: 180px !important;   /*this should be smaller than the default dropdown menu*/
}


.commentPreview .fn-tp {
    display: none;
    background: #fff;
    border-radius: 4px;
    color: #000;
    padding: 15px;
    transition-duration: .5s;
    transition-delay: 1s;
    position: absolute;
    top: 0;
    right: 30px;
    box-shadow: 0 0 3px 2px #ccc;
    width: 260px;
    z-index: 1;
    height:auto;
}
.commentPreview .fn-tp p {
    max-height: 5em; 
    overflow: hidden;
}
.commentPreview:hover .fn-tp {
    display:block;
}
.commentPreview .fn-tp h3 {
    color: #999;
    font-size: 11px;
    margin:0;
    padding:0;
    line-height: 1;
}
.commentPreview .fn-tp p {
    font-size: 11px;
    margin:0;
    padding:0;
}
.commentPreview .fn-tp p.author {
    color: #999;
}
.commentPreview .fn-tp p.author strong {
    color:#000;
}
.commentPreview .fn-tp p.comment {
    font-size: 14px;
    background: #eaf9ff;
    padding: 5px 10px;
    border-radius: 4px;
}


.fn-table th,
.fn-table td {
    color:#666;
    font-size:12px;
}
.sortable  {
    cursor:pointer;
}
.ascending,
.descending {
    color: #444 !important;
    font-weight: 600 !important;
}
.descending {
    background: url(../images/portal/arrow_descending.svg) 2px 31% no-repeat #fff !important;
}
.ascending {
    background:url(../images/portal/arrow_ascending.svg) 2px 31% no-repeat #fff !important;
}
.ascending span,
.descending span {
    display: inline-block;
    margin-left: 10px;
}

#fn_type_list  .assigned.descending,
#fn_type_list  .assigned.ascending {padding-right: 24px;}
#fn_type_list  .assigned span.assignedManager,
#fn_type_list  .assigned span.assignedCustomer { color:#999;}
#fn_type_list  .assigned span strong {color:#999;font-weight: normal;display: inline-block;width: 1.2em;font-size: 10px;}

#fn_type_list  td.creator {border-right: 1px solid #ccc;}

#fn_type_list .typeThumb {
    background: none repeat scroll 0 0 #F7F7F7;
    border: 1px solid #fff;
    float: none;
    height: 50px;
    width: 50px;
    margin: 0;
}

#fn_type_list .typeDesc h4 {font-size: 12px;font-weight: 600;line-height: 1.2;margin: 3px 0 0;}
#fn_type_list .typeDesc h4 a {color: #000;}
#fn_type_list .typeDesc  h4 a:hover  {color: #339AFF !important;}

#fn_type_list  .typeDesc p {
    font-size: 12px;
    line-height: 1.3;
    margin: 0;
    color: #999;
    margin: 0 0 0 0;
    color: #47525d;
}
#fn_type_list.pl2 .typeDesc .containerIcon {
    background: url(../images/portal/icon-container.svg) 2px 2px no-repeat #fff;
    padding: 0 0 0 20px;
    color: #9B9B9B;
    cursor: default;
}

#fn_type_list .typeDesc p.managerCustomer {}
#fn_type_list .typeDesc p.managerCustomer span.mc_type {
    color: #999;
    display: inline-block;
    font-size: 10px;
    font-weight: 500;
    margin: 0 0 0 0.3em;
    text-transform: uppercase;
}
#fn_type_list .daysIn {color:#7b8994;}


.form-search button {background-image: none;border: 0 none;color: #888;font-size: 13px;margin: -.25em  0 0 10px;}


#fn_type_list .reports-filter {float: left;height: 26px;}
#fn_type_list .reports-filter label {color: #ccc;}
#fn_type_list .reports-filter select {width:150px;}
#fn_type_list .project-list-desc h4 {line-height:1.5;margin: 0 0 0;}
#fn_type_list .project-list-desc p {font-size: 14px;line-height: 1.5;margin: 0;}

.popover-title {display: none;}

.bulk-assign {width: 40%;float: left;}

.pl2 .bulk-assign {width: auto;flex-grow:1;}


.pl2  .managePaging {
    display: flex;
}


.managePaging .vendorSearch {float: right;margin-top: 3px;}
.managePaging .vendorSearch .userSearchform {position: relative;top:auto;}
.managePaging .vendorSearch .userSearchform input {float:left;margin-right: 1em;}

#fn_type_list .list-wrapper {
    margin: 0 20px 0 0;
    min-width: calc(100vw - 340px);
    overflow: scroll;
    max-width: 100%;
    width: calc(100vw - 340px);
}
#fn_type_list.viewsSidebarCollapsed .list-wrapper  {
    width: calc(100vw - 80px);
}

#fn_type_list.containedProjects .list-wrapper {
    margin: 0 20px 0 20px;
    /*min-width: calc(100vw - 340px);*/
    overflow: scroll;
    max-width: 100%;
    width: calc(100vw - 320px);
}





/* Start new dashboard */


.dashboard-new {
    display: grid;
    grid-template-columns: 300px auto;
    grid-template-rows: max-content max-content  max-content auto;
    grid-gap: 0px;
    margin: 40px 0 0 0;
    height: calc(100vh - 40px);
    grid-template-areas: 
    "banner banner"
    "sidebar searching"
    "sidebar favorites"
    "sidebar  activity";

}
.dashboard-new .hr {
    grid-area: favorites;
    border-bottom: 1px solid #ddd;
}
.banners {
    grid-column: 2 / -1;
    grid-row: 1 / 2;  
  }
.customer_branding { 
    margin:20px 0;
  }
.dash_search_bar {
    grid-column: 2 / 3;
    grid-row: 2 / 3;  

  }
 .dash_sidebar {
    grid-column: 1 / 2;
    grid-row: 1 / 5;
    border-right: 1px solid #cdcdcd;
    padding-left: 20px;
 }
.favorites_properties_workorders {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
    display: flex;
    flex-direction: row;
    align-content: flex-start;
}
.favorites_properties_workorders > div {
    /*min-width: 50%;*/
}
.customer_branding .customer_logo {
    max-width: 260px;
}
.portal_activity {
    grid-column: 2 / 3;
    grid-row: 4 / 5;
  }
.dash_load {
    display: none;
  }
.favorite_properties h4,
.favorite_workorders h4,
.portal_usage h4,
.portal_activity h4 {
    padding:4px 0 4px 26px;
    text-transform: capitalize;
}
.favorite_properties h4,
.favorite_workorders h4 {
    margin-bottom: 20px;
    /*this rule because we're hiding the table headers tempoarily*/
}
.favorite_properties h4 {
    /*background: url("../images/portal/dash_property_views_icon.svg") no-repeat scroll 0% 60% / 18px ;*/
    background: url("../images/portal/folder-container-orange.svg") no-repeat scroll 0% 60% / 18px ;
}
.favorite_workorders h4 {
    background: url("../images/portal/dash_workorder_views_blue.svg") no-repeat scroll 0% 60% / 18px ;
}
.portal_usage h4 {
    background: url("../images/portal/dash_usage_icon.svg") no-repeat scroll 0% 60% / 18px ;
    
}
.portal_activity h4 {
    background: url("../images/portal/dash_activity_icon.svg") no-repeat scroll 0% 6px / 13px;
}
.viewList th {
    font-size: 12px;
}

.favorite_properties h4 .seeAll,
.favorite_workorders h4 .seeAll {
    color:#339AFF;
    float: right;
    font-weight: normal;
    font-size: 16px;
}
.favorite_properties h4 a,
.favorite_workorders h4 a{
    color:#000;
}
.favorite_properties  h4 a:hover,
.favorite_workorders  h4 a:hover {
    color:#339AFF;
}
.dashboard-new .viewList th {
    color: #999;
    font-weight: 400;
    letter-spacing: .025rem;
}
.dashboard-new .viewList th.search_count {
    text-align: right; 
}
.dashboard-new .viewList .searchName {
    width: 80%;
}
.dashboard-new .viewList .searchName  a,
.dashboard-new .viewList .actProj a {
    display: block;
    font-weight: 400;
    letter-spacing: .05rem;
    line-height: 1.2;
}
.dashboard-new .viewList .searchName  a:hover,
.dashboard-new .viewList .actProj  a:hover {
    color: #339AFF;
}
.dashboard-new .viewList td.search_count {
    text-align: right;
}
/*set the widths of the activity table*/
.dashboard-new .viewList .actProj {
    width: 35%;
    /*background: rgba(0, 0, 0, .5);*/
}
.dashboard-new .viewList .actAct {
    width: 35%;   
    /*background: rgba(0, 0, 0, .4);*/
}
.dashboard-new .viewList .actUser {
    width: 15%;
    /*background: rgba(0, 0, 0, .3);*/
}
.dashboard-new .viewList .actDate {
    width: 15%;
    /*background: rgba(0, 0, 0, .2);*/
}
.dashboard-new .viewList .actProj,
.dashboard-new .viewList .actAct,
.dashboard-new .viewList .actUser,
.dashboard-new .viewList .actDate {
    font-size: 12px;
}
.dashboard-new .viewList .actDate {
    text-align: right;
    line-height: 1.2;
} 
.dashboard-new p.msgNoViews {
    color: #757575;
    font-size: 14px;
    margin: 18px 0;
    width:24em;
}

.dashboard-new  dd {margin:0;}

.dash_admin-stats {
    border-top: 1px solid #cdcdcd;
    clear: left;
}
.dash_admin-stats dl {
    padding: 0 0 0 0;
    margin: 0 20px 0px 0;
}
.dash_admin-stats dt {
   padding: 7px 0;
    border-top: 1px solid #ddd;
}
.dash_admin-stats dt a {
    color: #000;
    font-weight: 400;
    display: block;
}
.dash_admin-stats dd {
    /*border-top: 1px solid #ccc;*/
    padding: .5em 0;
    color: #888;
    margin: 0;
}
.dash_admin-stats .enabled {
    /*color:#15CF37;*/
    color: #000;
    float: right;
}
.dash_admin-stats .disabled {
    color:#888;
}
.dash_admin-stats dd:last-child {
    /*border-bottom: 1px solid #ccc;*/
}
.dash_admin-stats dd span {
    color: #000;
    float: right;
    font-weight: 600;
}

.dash_admin-stats a:hover {
    color: #339AFF;
}
.dash_search_bar {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #cdcdcd;
    padding: 1.5em 0em;
    margin-right: 0px;
  }
.dash_search_bar h4 {
    margin: 0px 1rem 0 20px;
    font-weight: bold;
}
.dash_search_bar form {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    margin: auto;
}
.dash_search_bar .styled-select {
    display: inline-block;
    width: 240px;
    height: 38px;
    margin-right: 1rem;
    border: 1px solid #bbb;
}
.dash_search_bar .styled-select select {
    font-size: 18px;
    width: 260px;
    height: 40px;
}
.dash_search_bar input[type=text]{
    width: 300px;
    border: 1px solid #aaa;
    border-radius: 4px;
    height: 30px;
    flex-grow:2;
}
.dash_search_bar input[type=submit]{
    margin: 0 20px 0 1rem;
    height: 40px;
    background: url("../images/portal/p_bttn_search_white.svg") no-repeat scroll 50% 50% / 22px #1a73e8;
    border: none;
    width: 130px;
    border-radius: 4px;
}
.dash_sidebar .dash-companyInfo {
    /*font-weight: 500;*/
}

.dash-companyInfo  .currentCompanyName {
    font-weight: 600;
    font-size: 16px;
}
.dash_sidebar dl h6 {
    margin-bottom: 0px;
}
.dash_sidebar .vendorUser {
    border-top: 1px solid #cdcdcd;
    padding-bottom: 20px;
}
.dash_sidebar .vendorUser .currentUserName {
    font-weight: 600;
    color: #000;
    margin-bottom: 0;
}
.dash_sidebar .profilePic,
.dash_sidebar .noProfilePic {
    border-radius: 50px;
    width: 50px;
    float: left;
    height: 50px;
    margin: 0 10px 20px 0;
}
.dash_sidebar .noProfilePic {
    background: rgba(0, 0, 0, 0) url("../images/portal/icon-admin-menu-user.svg") no-repeat scroll 0 0px / 50px auto;
}
.dash_sidebar .currentUserMeta {
    font-size: 11.9px;
    margin:0;
}
h6 .editLink {
    float: right;
    margin-right: 1.25em;
    opacity: .75;
    font-weight: 500;
}
.viewList {
    background: rgba(247, 247, 247, 0.4);
    margin: 20px;
    padding: 10px 20px;
    border-radius: 6px;
}
.viewList table ,.viewList tr td{
    
}
.viewList tbody {
    display:block;
    max-height:220px;
    overflow-y:scroll;
}
.favorites_properties_workorders .viewList tbody {
    height:186px;
    /*hide scrollbars on windows - we're limited to only 5 lines*/
    overflow: hidden;
}
.viewList.portal_activity tbody {
    max-height: calc(100vh - 620px);
    min-height: 220px;
}
.viewList thead, .viewList tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;
}
.favorite_properties .viewList {
    margin-right: 10px;
}
.favorite_workorders .viewList {
    margin-left: 10px;
}
.banners {
    margin: 0 0 0 0 ;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.banners p {
    font-size: 16px;
    text-align: left;
    margin: 0 50px;
    letter-spacing: .5px;
}
.banner_customer_admin,
.banner_fn {
    padding: 1rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border-bottom: 1px solid #cdcdcd;
}

.banner_customer_admin  {
    background: #D7E5F8;
    color: #000;
}
.banner_fn {
    background: #FFF;
color: #000;
}
.admin_banner p {
    font-weight: 500;
    font-size: 16px;
  }
.dismiss_banner.close {
    color: #fff;
    margin: 0 50px;
    opacity: 1;
    font-weight: 200;
  }

/*END DASH */


/* Advaned search ------------------------------------------------------------*/

#editSearchModal {
    width:1010px;
}

#editSearchModal .modal-body {
    padding-bottom: 20px;
    overflow: visible; /*make sure dropdown menus are not clipped*/
}

#editSearchModal .subgroup {
    display: flex;
    justify-content:space-between;
    border: none;
    padding: 6px 0 0 0;
}

#editSearchModal .subgroup .formControls {
    display: flex;
    /*outline: 1px dotted green;*/

}
.subgroup .formControls.prioritySearch .dropdown-menu,
.subgroup .formControls.manager .dropdown-menu,
.subgroup .formControls.customer .dropdown-menu {
    top: -110px !important;  /*raise up so it fits in modal*/
    left: 10px;
}
.pl2 .advancedFilters .dateRange > .dateRangeFrom {
    right: -298px;
    position: absolute;
    top: 0;
    width: auto;
}

.showMoreToggle {
    border-bottom: 1px solid #ddd;
    height: 20px;
    margin: 20px 0 40px;
}
.showMoreToggle h4 {
    background: #fff;
    padding: 0 10px 0 0;
    float: left;
}
.showMoreToggle h4 input {
    margin: 0px 4px 0 0; 
}
/*#editSearchModal .inner {padding: 5px 20px;}*/

/*#editSearchModal .modal-body {padding-bottom: 0;}*/

/*.advancedFilters .subgroup {
    border-top: 1px solid #eee;
    padding: 10px 0 12px;
}*/

.advancedFilters .formControls {
    height: 35px;
    position: relative;
    margin-bottom: 4px;
}
.advancedFilters .formControls.fauxLeftCol {
    float: left;
    margin-right: 40px;
    width: 458px;
}
.advancedFilters .formControls label {
    float: left;
    /*font-size: 13px;*/
    font-weight: 500;
    margin: 5px 10px 0 0;
    width: 130px;
    text-align: right;
}

.advancedFilters .formControls .styled-select {width: 300px;}
.advancedFilters .formControls .styled-select select {width: 340px;}
.advancedFilters .formControls .textSearch textarea {
    font-size: 13px;
    height: 20px;
    padding: 4px 9px;
    resize: none;
    width: 780px;
}
.pl2 .advancedFilters .formControls .textSearch input[type="text"] {width:288px;}

.advancedFilters .formControls .multiSelectWrap button {
    border: 1px solid #dddddd;
    border-radius: 0;
    width: 302px;
}
.advancedFilters .formControls .textSearch .matchText,
.pl2 .advancedFilters .formControls .textSearch .matchText  {
    position: absolute;
    top: 28px;
    left: 130px;
    font-size: 11px;
}
.advancedFilters .dateRange {}
.advancedFilters .dateRange > .dateRangeFrom {
    left: 440px;
    position: absolute;
    top: 0;
}
.advancedFilters .dateRange > .dateRangeFrom label {
    display: inline-block;
    margin: 5px 1em 0 0;
    width: auto;
}
.advancedFilters .dateRange > .dateRangeTo {/*outline: 1px dotted pink;*/}
.advancedFilters .dateRange > .dateRangeFrom input, .dateRange > .dateRangeTo input {
    font-size: 13px !important;
    width: 70px;
}

/*.advancedFilters .formControls .multiSelectWrap label {outline:1px solid red;}*/

.advancedSearch {
    width: 260px;
    margin-top: -15px;
    z-index: 1;
    position: fixed;
    overflow: scroll;
    bottom: 0;
    box-shadow: -3px 0 12px -3px rgba(25, 25, 35, 0.06), 1px 0 0 #e2e2e2 inset;
    height: auto;
    overflow: visible !important;
    padding: 0;
    position: fixed;
    left: 0px;
    top: 45px;
}
.leftSideBar .advancedSearch {
    position: relative;
    top: 0;
    left: 0;
    box-shadow:none;
    margin:0;
    overflow: scroll;
    height: calc(100vh - 50px);
    width: 300px;
}

.advancedSearch_bg-col {
    position: fixed;
    width: 260px; 
    /*background-color: #f7f7f7;*/
    border-right: 1px solid #ddd;
    height: 3000px;
    z-index: -1;
    }

   .pl2 .advancedSearch_i {
    display: grid;
    grid-template-rows: 46px calc(100vh - 100px);
    grid-template-columns: auto;    
    padding:0;
    z-index: 3;
    height: 100%;
    overflow: auto;
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;


   } 


/*this hover is for WinChrome*/
.advancedSearch_i:hover {overflow: auto;}
.advancedSearch_i hr {border-color: #dddddd -moz-use-text-color #ffffff;}

.viewsSidebarHeader {
    
}
.viewsSidebarHeader .inner {
    border-bottom: 1px solid #ddd;
    height: 40px;
    margin: 0 0 0 20px;
}
.viewsSidebarHeader h3 {
    font-size: 14px;
    text-transform: uppercase;
    float: left;
    margin:2px 0px 0 0;
}
.viewsSidebarBody {
    overflow-x: hidden;
    overflow-y: scroll;
}
.viewsSidebarCollapsed .viewsSidebarBody {
    overflow: hidden;
}
.viewsSidebarBody br {display: block;}

.searchControls {
    /*height: 100%;
    overflow-y: scroll;
    padding-right: 7px;*/
    -ms-overflow-style: -ms-autohiding-scrollbar;
}    
.advancedSearch h5 {
    color: #cd853f;
    font-size: 10px;
    font-weight: 400;
    margin: 10px 0 0;
    text-transform: uppercase;
}
.advancedSearch textarea {
    margin-bottom: 1em;
    font-size: 13px;
    width: 208px;
    resize: none;
    height: 1.8em;
}

.advancedSearch textarea:focus {
    margin-bottom: 1em;
    font-size: 13px;
    width: 208px;
    resize: both;
    height: 3.2em;
}
.advancedSearch label {
    clear: both;
    color: #666;
    display: block;
    font-size: 11px;
    /*margin: 8px 0 2px 3px;*/
}

.advancedSearch .editViews {
    font-size: 12px;
    margin: 0 1em 0 0;
    opacity: 0.5;
    position: absolute;
    right: 9px;
    top: 15px;
}

  .leftSideBar  .advancedSearch .editViews {
    font-size: 12px;
    margin: 0 1em 0 0;
    opacity: 0.25;
    position: absolute;
    right: 13px;
    top: 17px;
    background: url("../images/portal/icon-small-pencil.svg") no-repeat scroll 0px 0px /13px rgba(0, 0, 0, 0);
    display: block;
    height: 16px;
    width: 16px;
    z-index: 1;
}

.advancedSearch .editViews:hover {opacity: 1;}
.advancedSearch .views {position: relative;padding: 20px 0 0 0;}
.advancedSearch .views  a {display:inline-block; font-size: 11px;line-height: 1.2;padding: 0.5em 32px 0.5em 3px;} 
.advancedSearch .dateRange > .dateRangeFrom  {
    margin: 0;
    padding: 5px;
    width: 190px;
    }
.advancedSearch .dateRange > .dateRangeFrom   label {
    color: #333;
    padding: 0 0 0 2px;
    }

/*customize this dropdown - it's an oddball on the page*/
.advancedFilters .formControls .activityDate {
    left: 440px;
    
    position: absolute;
    top: 0;
    width: 290px;
}
.advancedFilters .formControls .activityDate label {
    display: inline-block;
    padding-right: 5px;
    width: auto;
}
 .advancedFilters .formControls .activityDate .styled-select {
    width: 195px;
}
.advancedFilters .formControls .activityDate .dateRangeFrom {
    left: 240px;
    
    position: absolute;
    top: 0;
    width: 264px;
}

.advancedFilters .formControls .activityDate .dateRangeFrom .startDate {  width: 130px;}
.advancedFilters .formControls .activityDate .dateRangeFrom .endDate {
   
    width: 110px;
}




.startDate, .endDate {
    float: left;
    /*padding-right: 6px;*/
    width: 140px;
    }
.dateRangeFrom input {
    font-size: 13px !important;
    width: 70px;
    }

.btn.btn-advancedSearch {
    width: 198px;
    }
.advancedSearch .views a.clearAllFields {
    float: left;
    margin: -8px 14px 10px 3px;
    padding: 0;
    text-decoration: none;
}
.advancedSearch .styled-select {border:0;width: 220px;} 
.advancedSearch .styled-select select {border:0;width: 260px;}   
.advancedSearch select:focus {outline: none;color:#47525d;text-shadow: none;}
.advancedSearch select:focus option {line-height: 2;padding:6px;color:#47525d;text-shadow: none;}
.advancedSearch .resetOptions { padding-left: 0;}
.multiselect-parent ul {width: 300px;overflow-y:scroll;border: none;}
.advancedSearch input#summaryOnly {margin: 0 4px 0 0;}
.vendorAdvancedSearchLink {}
.vendorAdvancedSearchLink  a {font-size:11px;display: inline-block;margin-left: 31px;}

.archiveAdvancedSearchLink {
    color: #888;
    display: block;
    font-size: 140%;
    font-weight: 300;
    margin-top: 120px;
    text-align: center;
}

/*this changes the label the dropdown*/
.assignment li.uncheckAll .defaultLabel {
  display: none;
}
.assignment li.uncheckAll span:after {
  content: 'Clear';
}

.searchHeader {margin-bottom: 1em;}
.pl2 .searchHeader {margin-bottom: 0;}
.searchHeader h3 {
    border-bottom: 1px solid #dddddd;
    font-size: 14.5px;
    line-height: 1;
    margin: 0 0 10px;
    padding: 0 0 10px;
}
#fn_type_list .searchHeader h2 {
    display: block;
    float: none !important;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 0.25em;
}
#fn_type_list .searchHeader h2 a {
    display: inline-block;
    font-size: 12px;
    font-weight: normal;
}
#fn_type_list .searchHeader h2 a.refresh {
    margin-left: 1.5em;
}
#fn_type_list .searchHeader h2 a.newSearch {
    background: #339AFF none repeat scroll 0 0;
    border-radius: 2px;
    color: #ffffff;
    display: inline-block;
    font-size: 13px;
    font-weight: 400;
    margin: 0 0 0 0.8em;
    padding: 6px 15px;
}
.searchHeader .utilityNav {float: right;text-align: right;}
.searchHeader .utilityNav a {font-style: 14px;display: inline-block;margin:0 2em 0 0;}
.searchHeader .utilityNav .saveSearchWrap {position: relative;display: inline;}



.exportSearchLink {
    display: block;
    margin: 0 0 80px 1px;
    text-align: center;
    width: 220px;
}

.advancedSearch select:focus, .advancedSearch textarea:focus, .advancedSearch input[type="text"]:focus, .advancedSearch input[type="password"]:focus, .advancedSearch input[type="datetime"]:focus, .advancedSearch input[type="datetime-local"]:focus, .advancedSearch input[type="date"]:focus, .advancedSearch input[type="month"]:focus, .advancedSearch input[type="time"]:focus, .advancedSearch input[type="week"]:focus, .advancedSearch input[type="number"]:focus, .advancedSearch input[type="email"]:focus, .advancedSearch input[type="url"]:focus, .advancedSearch input[type="search"]:focus, .advancedSearch input[type="tel"]:focus, .advancedSearch input[type="color"]:focus, .advancedSearch .uneditable-input:focus {
    border-color: rgba(82, 168, 236, 0.8);
    box-shadow: none;
    outline: 0 none;
    /*background: rgba(255, 255, 255, 0);*/
    background: transparent;
    color: #000;
}



 #projectCommentsReadOnly {
    position: fixed;
    top: 40px;
    height: calc(100vh - 40px);
    min-height: 600PX;
    right: 0;
    background: #fff;
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
    z-index: 1100;

    display: grid;
    grid-template-rows: 90px 1fr 220px;
}
#projectCommentsReadOnly #projectComments-header {
    background: transparent;
    border-bottom: 1px solid #ddd;
    height: 100%;
    grid-row: 1 /2 ;   
}
#projectCommentsReadOnly #projectComments-header img {
    float: left;
    width: 30px;
    margin: 18px 12px 10px 0;
}
#projectCommentsReadOnly #projectComments-header .displayFields {
    width: 280px;
    margin: 16px 0 10px 0;
    float: left;
}
#projectCommentsReadOnly #projectComments-header h3 {
    font-size: 100%;
    line-height: 1;
    margin: 0 0 4px 0;
    padding: 0;
    max-height: 2.1em;
    overflow: hidden;
}
#projectCommentsReadOnly #projectComments-header .displayFields p {
    font-size: 11px;
    line-height: 1.3;
    padding:0;
    margin:0;
}
#projectCommentsReadOnly #projectComments-header #hideComments {
    color: #000;
    font-size: 200%;
    position: absolute;
    right: 16px;
    top: 10px;
}
/*projectCommentsReadOnly #projectComments-header h4 {
    font-weight: normal;
    color: #999;
    text-transform: uppercase;
    font-size: 12px;
    clear: both;

}*/
#projectCommentsReadOnly #projectComments-header h4 {
    background-color: #ffffff;
    color: #999;
    font-size: 12px;
    font-weight: normal;
    padding: 8px 0px 0 20px;
    position: absolute;
    text-transform: uppercase;
    width: 360px;
    position: absolute`;
    bottom: 0;
    left: 0;
    border-top: 1px solid #ddd;
}
 #projectCommentsReadOnly #projectComments-inner {
    margin:0;
    height: auto;
    grid-row: 2 /3;
}


 #projectCommentsReadOnly .activityLogPanel {
    clear: left;
    float: left;
    height: 225px;
    width: 100%;
    background: #fff;
    bottom: 0;
    left: 0;
    position: absolute;
}
 #projectCommentsReadOnly .activityLogPanel-i {
    height: 160px;
    overflow-y: scroll;
    margin-top: 40px;
}


/*
#projectCommentsReadOnly .ps_comment_module_i {
    padding: 0 0 0 0;
}
#fn_type_list .activityLogPanel {
    bottom: 0;
}

*/



/*css3 styled select box*/
 .styled-select select {
   background: transparent;
   width: 268px;
   padding: 5px;
   font-size: 13px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 26px;
   -webkit-appearance: none;
   padding: 5px 20px 5px 5px;
    width: 196px;
   }

@media screen and (-webkit-min-device-pixel-ratio:0) {
    /*Chrome CSS here to set the padding on the inside of the select so that text does not overlap the custom arrow */
    .styled-select select {
        width:182px;
    }
}

 .styled-select {
    background: #fff url("../images/portal/styled-select.svg") no-repeat scroll 96% 50%;
    background-size: 7px;
    border: 1px solid #ddd;
    height: 26px;
    overflow: hidden;
    width: 180px;
   }
.styled-select select option {
    color:#333;
    padding:2px 6px;
    }
.styled-select.select-report {width: 260px;}
.styled-select.select-report select  {width: 280px;}





.saveSearch {
    background-color: #ffffff;
    box-shadow: 0 4px 6px #666666;
    left: -182px;
    padding: 15px 15px 20px;
    position: absolute;
    text-align: left;
    top: 21px;
    width: 190px;
    z-index: 1;
}
.saveSearch.deleteSearch {
    left: 19px;
    top: 31px;
    width: 350px;
}
.saveSearch h6 {font-size: 14px;margin-bottom: 0;}
.saveSearch label {padding-top: 2px}
.saveSearch input[type="text"] {width: 176px;font-size: 13px;}
.advancedSearch .saveSearch .styled-select {
    margin-bottom: 25px;
    width: 190px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    border: 1px solid #ddd;
}
.advancedSearch .saveSearch select {
    font-size: 13px;
    width: 216px;
}
.advancedSearch .saveSearch select option:first {
    color: #999;
}
.saveSearch .form-controls {
    padding-top: 20px;
    text-align: right;
}
.saveSearch .form-controls a {
    margin-right: 0;
}

.saveSearch.editSearch {
    left: 18px;
    max-height: 600px;
    overflow-y: scroll;
    top: 10px;
    width: 350px;
}


.saveSearch.editSearch h6 {
    background: #fff none repeat scroll 0 0;
    font-size: 14px;
    margin: -15px 0 0;
    padding: 10px 0;
    position: fixed;
    width: 350px;
    z-index: 1;
}

.saveSearch.editSearch .close,
#editSearchModal .modal-header .close {
    margin: -4px 1px 0 0;
}
.saveSearch.editSearch h6 .close,
#editSearchModal .modal-header h4 .close {
    font-size: 24px;
    font-weight: normal;
    margin: -4px 6px 0 0;
}
.saveSearch.editSearch table {
    margin-top: 35px;
}
.saveSearch.editSearch .myHandle {
    background: rgba(0, 0, 0, 0) url("../images/portal/my-handle-small.svg") no-repeat scroll left top;
    left: 0;
    top: 5px;
}
.saveSearch.editSearch .deleteSearchX {opacity: 0; color:red;}
.saveSearch.editSearch tr:hover .deleteSearchX {opacity: 1;}



.saveDeleteSearch {}
.saveDeleteSearch .save {}
.saveDeleteSearch .delete {color:red;}

.setStatus .styled-select {
    display: inline-block;
    }
.setStatus .styled-select {
    width: 135px;
    display: inline-block;
    }

.results-header {
    font-size: 14px;
    line-height: 1;
    margin: 0 0 12px;
    padding: 0;
    /*maybe we don't need to see this, just use the pager count*/
    display: none;
    }

.loadingListSpinner     {
    background: #ffffff url("../images/portal/spinner-material.gif") no-repeat scroll 50% 31%;
    color: #888;
    font-size: 18px;
    font-weight: normal;
    left: 50%;
    margin-left: -100px;
    padding: 60px 0 20px;
    position: absolute;
    text-align: center;
    width: 200px;
    top: 300px;


}

#editSearchModal  h4 .statusMsg {
    font-size: 14px;
    display: inline-block;
    margin-left: 2em;
    color: #888;
}

#editSearchModal  label .icon-refresh {
    display: inline-block;
    margin: 1px 0 0 40px;
}
#editSearchModal .disabled {opacity: 0.3;}
.glyphicon.spinning {
    animation: spin 1s infinite linear;
    -webkit-animation: spin2 1s infinite linear;
}

@keyframes spin {
    from { transform: scale(1) rotate(0deg); }
    to { transform: scale(1) rotate(360deg); }
}

@-webkit-keyframes spin2 {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}


/*TODO - group the styles below with the resto of the modal above*/
/*the following styles are for the multi-select searchboxes on the advanced Serach page, 
NOTE: they are created with JS, and are not the same as the bulk assign or on the show page */

.multiSelectWrap button {background: #fff;border-radius: 0;width: 220px;text-align: left;font-size: 13px !important;overflow: hidden;padding: 4px 12px 4px 8px;}
.multiSelectWrap button:hover {background: #fff;}
.multiSelectWrap button.btn .btnTxt {
    display: inline-block;
    max-width: 190px;
    overflow: hidden;
    vertical-align: top;
}
.multiSelectWrap button.btn .caret {position: absolute;right:11px;top:4px;}
#fn_type_list .advancedFilters .dropdown-multiselect li a {color:#333;font-size: 12px;}

/*#fn_type_list .advancedFilters */
.dropdown-multiselect .checkbox label {
    color: #333;
    /*font-size: 12px;*/
    text-align: left;
    line-height: 1.2;
    overflow-wrap: break-word;
    padding-left: 12px;
    position: relative;
    text-indent: 0;
    white-space: normal;
    width: 267px;
    width: 250px;
    font-weight: normal;
}
#fn_type_list .advancedFilters .dropdown-multiselect .checkbox input {
    left: -12px;
    margin: 3px 6px 0 0;
    position: absolute;
    top: -2px;
}
#fn_type_list .advancedFilters .dropdown-header.search-menu {
    margin: 0 10px;
    width: 166px;
    padding:0;
    border: none;
}
#fn_type_list .advancedFilters .dropdown-header.search-menu input {
    border-radius: 60px;
    font-size: 12px;
    padding: padding: 4px 12px 0 30px;
}

/*new advances search styles Jan 6, 2017*/
.search-options-info {
    color: #999;
    font-size: 12px;
}
.search-options-info p {line-height: 1.2; font-size: 12px;}
.search-options-info .searchOption {display: block;}
.search-options-info p label {display: inline;font-size: inherit;line-height: inherit; font-weight: bold;color: #666;}
.advancedSearchControls {margin:-.5em 0 0 0;}
.advancedSearchControls a {display: inline-block;margin:0 1em 0 0;}
.search-options-criteria {
    position: absolute;
    background: #fff;
    padding: 20px;
    box-shadow: 0px 0px 6px #999;
    top: 40px;
    right: 0;
    width: 500px;
    margin-left: -200px;
    z-index: 1;
}
.search-options-criteria dl {margin-bottom: 10px;}
.search-options-criteria dt {font-weight: bold;display: inline-block;}
.search-options-criteria dd {
    display: inline-block;
    margin:0;
    padding:0;
}
 .search-options-criteria dd::after {
    /*content: ", ";*/
    white-space: pre;
}
 .search-options-criteria dd:last-child:after {
  /*content: "."; */
}
.infoCriteria {
    background: url(../images/portal/icon-info-sidebar.svg) 0 0 / 16px no-repeat;
    height: 18px;
    width: 18px;
    display: inline-block;
    vertical-align: middle;
    margin: -2px 0 0 10px;
    opacity: .5;
}

.views-list h4 {
    color: #666;
    font-size: 13px;
    }

.noFavesYet {
    display: block;
    margin: 0 20px ;
    color: #999;
    font-size: 12px;
}    
.sidebarListToggle {
    color: #888;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    background:url(../images/portal/arrow_closed.svg)  100% 40% /12px  no-repeat;
    margin: 10px 0 0 20px;
    padding-right: 20px;
    display: inline-block;
}
.sidebarListToggle.collapsed {
    background:url(../images/portal/arrow_open.svg) 100% 40% /12px no-repeat;;
    
}


.leftSideBar .views-list {
    margin:0;
    padding:0;
}

.leftSideBar .views-list li {
    margin: 0;
    width: 260px;
    padding: 0 20px;
    position: relative;
}
.leftSideBar .views-list li .scrollTo {
    position: absolute;
    top:calc(-100vh + 200px);
    left:-1000px;
    height: 1px;
    width: 1px;
    visibility: 0;
}
.leftSideBar .views-list.otherViews {
    margin-bottom: 100px;
}
.leftSideBar .views-list.otherViews hr {
    display: none;
}

.leftSideBar  .views-list.otherViews h4 {
    margin-top: 3em;
} 

.leftSideBar  .views-list.favoriteViews h4,
.leftSideBar  .views-list.otherViews h4 {
    margin: 10px 0 0 0;
} 

/*#fn_type_list.pl2 .leftSideBar  h2 {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    float: none;
    margin-left: 20px;
}*/




.views-list li.search_name:hover  {
    background: #f1f1f1;
}
.views-list li.active,
.views-list li.active:hover  {
    /*background: #fff;*/
    background: #5281cc;
}
.views-list li.active a,
.views-list li.active a:hover {
    font-weight: 500;
    color: #fff;
    letter-spacing: .5px;
}

.views-list li a {
    color: #888;
    display: block;
    font-size: 13px;
    line-height: 1.3;
    position: relative;
    width: 220px;
    font-weight: 400;
    padding: 8px 20px 8px 0;
}

.views-list li a:hover {
    color:#339AFF;
}
.views-list li a .currentCount,
.views-list li a .viewType {
    color: #aaa;
    position: absolute;
    right: 0;
    top: 0;
}
.pl2 .views-list li a .currentCount {
    color: #aaa;
    position: absolute;
    right: 0;
    top: 8px;
}
.pl2 .views-list li.active a .currentCount {
    color: #fff;
    font-weight: normal
  
}
.views-list li a .viewType {
    right: -12px;
    top: 4px;
}
.pl2 .views-list li a .viewType {
    right: -14px;
    /*width: 16px;*/
    /*height: 16px;*/
    top: 11px;
    position: absolute;
    /*display: inline-block;*/
    /*margin: 0px 0 0px 7px;*/
    /*vertical-align: bottom;*/
    }
.views-list li a .viewType.viewVendor {
    background: url("../images/portal/view-vendor.svg") no-repeat scroll 0px 0px /16px rgba(0, 0, 0, 0);
}
.views-list li a .viewType.viewManager {
    background: url("../images/portal/view-manager.svg") no-repeat scroll 0px 0px /16px rgba(0, 0, 0, 0);
}
.views-list li a .viewType.viewAdmin {
    background: url("../images/portal/view-admin.svg") no-repeat scroll 0px 0px /16px rgba(0, 0, 0, 0);
}


.views-list li a .viewType.viewVendor {
    display: inline-block;
    height: 7px;
    width: 7px;
    border-radius: 10px;
    background: #e4859f;
    vertical-align: inherit;
}
.views-list li a .viewType.viewManager {
     display: inline-block;
    height: 7px;
    width: 7px;
    border-radius: 10px;
    background: #86b7a2;;
    vertical-align: inherit;
}

.views-list li a .viewType.viewAdmin {
    display: inline-block;
    height: 7px;
    width: 7px;
    border-radius: 10px;
    background: #9e86b7;
    vertical-align: inherit;
}

.views-list li a .viewType.viewPrivate {
    display: inline-block;
    height: 7px;
    width: 7px;
    border-radius: 10px;
    background: #8fc1f9;
    vertical-align: inherit;
}


.dropdown-multiselect .sub-header {
    font-size: 12px;
    font-weight: bold;
    padding: 14px 12px 8px 7px;
}



table.scroll {
    width: 100%;
}

table.scroll thead {
    display: table;
    width: 100%;
    table-layout: fixed;
}
table.scroll tbody {
    width: 100%;
    display: block;
    max-height: 150px;
    overflow-y: scroll;
} 
table.scroll tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

#manage-favorites-modal {}

#manage-views-modal {}

#manage-types-modal,
#manage-types-views-modal {
    padding-bottom: 20px;
    margin-left: -530px;
    top: 180px;
    height: 580px;
}
#manage-types-views-modal .modal-body {
    display: grid;
    grid-column-gap: 20px;
    -ms-grid-template-columns: 1fr 2fr;
    grid-template-columns: 1fr 2fr;
    -ms-grid-template-rows: 460px;
    grid-template-rows: 460px;
}
#manage-types-modal table.scroll tbody,
#manage-views-modal table.scroll tbody,
#manage-favorites-modal table.scroll tbody,
#manage-types-views-modal table.scroll tbody {
    min-height: 290px;
    max-height: 290px;
}

#manage-types-views-modal .selectAllControl.selectNone {
    background: url("../images/portal/checkbox-none.png") no-repeat scroll 5px 5px;
}
#manage-types-views-modal .selectAllControl {
    border: none;
    height: 16px;
    width: 16px;
    display: inline-block;
    /*border-radius: 2px;*/
    /*margin: 0 0 -9px 1px;*/
}
.manageTypesViews {

    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    text-align: right;
    width: auto;

}
#manage-types-views-modal th {border-bottom: 1px solid #ddd;}

#manage-types-views-modal .viewsList .name {width: 40%;}
#manage-types-views-modal .viewsList .category {width: 20%;}
#manage-types-views-modal .tableWrap {
    border:1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
}
#manage-types-views-modal .tableWrap .checkbox {
    width: 30px;
}
#manage-types-views-modal label input[type='radio'] {
    margin: -1px 6px 0 0;
}
#manage-types-views-modal  .typesList .cssCheckbox input[type="checkbox"] + label {
    margin: 0 0 0 6px;
}

#manage-views-modal thead .move,
#manage-favorites-modal thead .move {
    background: url(../images/portal/move-col.svg) 9px 12px / 8px no-repeat;
    opacity: .5;
    /*width: 3.3%;*/
    padding: 0;
}
.favCol {
    background: rgba(0, 0, 0, 0) url("../images/portal/icon-stars-1.svg") no-repeat scroll 0px 13px / 75px auto;
    height: 30px;
    width: 30px;
    display: inline-block;
}


#manage-views-modal .move,
#manage-favorites-modal .move {width: 5%;}
#manage-views-modal .name,
#manage-favorites-modal .name {width: 400px;}
#manage-views-modal .kind  {width: 40%;}
#manage-favorites-modal .kind {width: auto;}
#manage-views-modal .delete  {width: 5%;}

#manage-views-modal .delete a {
    color: red;
    font-size: 1rem;
    padding: 0 .9rem;}
#manage-favorites-modal .isFaved, 
#manage-favorites-modal .notFaved {
    height: 20px;
    width: 20px;
    display: inline-block;
    vertical-align: text-bottom;
    margin: 0 0 0 0;
}

#manage-views-modal .userList .myHandle {
    background: url(../images/portal/my-handle-small.svg) top left no-repeat;
    left: 8px;
    top: 10px;
}

/*stubb out the styles for the new UI */
/*filter dropdown and search input*/

.list_search_bar {
    display:flex;
    flex-direction:row;
    justify-content:space-between;
}

.list_search_bar h1 {
    font-size: 20px;
    margin: -10px 0 10px 0;
    padding: 0;
}
.saveSearchControls {
    margin: 6px 0 0 2em;
}

.search_filters {
    display:flex;
    flex-direction:row;
    justify-content:flex-start;
    min-width: 680px;
}
.search_filters .formControls {
    margin-right:.3em;
}
.search_filters .filter_types {
    order:1;
}
.search_filters .filter_status {
    order:2;
}
.search_filters .filter_text {
    order:3;
}




.create_new_view a {
    border: 1px solid #fff;
    height: 28px;
    display: inline-block;
    padding: 0px 12px 0;
    line-height: 2;
    border-radius: 2px;
    color: #666;
    font-weight: 400;
    font-size: 13px;
    margin-right: 2em;
}
.create_new_view a:hover {
    border: 1px solid #ccc;
    color: #000;
}




.search_filters  label {
    display: inline-block;
    font-size: 11px;
    color: #999;
    font-weight: 500;
    padding-right: .25em;
    letter-spacing: .5px;
}
.search_filters .multiSelectWrap {
    display: inline-block;
}
.search_filters .multiSelectWrap .multiselect-parent button {
    background: #FFF;
    border: 1px solid #dbd8d8;
    padding: 4px 9px;
    box-shadow: none;
    border-radius: .15rem;
    width: 160px;
}

.search_filters  .dropdown-multiselect .checkbox label {
    color: #333;
    font-size: 12px;
    line-height: 1.2;
    overflow-wrap: break-word;
    padding-left: 12px;
    position: relative;
    text-indent: 0;
    white-space: normal;
    width: 267px;
    width: 250px;
    font-weight: normal;
}
.search_filters  .dropdown-multiselect .divider     {
    display: none;
}
.search_filters  .dropdown-multiselect li a {
    font-size:12px;
}
.search_filters .searchPopUp {
    border-top: 1px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;
    padding: 6px 0 11px;
    margin-top: 4px;
}

#fn_type_list .search_filters  .checkbox .checkboxInput {
    left: -12px;
    margin: 3px 6px 0 0;
    position: absolute;
    top: -2px;
}

.search_filters .searchPopUp input[type="text"], .search_filters .searchPopUp input[type="text"]:focus {
    display: block;
    border: none;
    margin: auto;
    width: 80%;
    background: url("../images/portal/p_bttn_search.png") no-repeat scroll 5% center transparent;
    box-shadow: none;
    padding-left: 40px;
}

#fn_type_list .search_filters .form-search input.search-query {
    /*background: url("../images/portal/p_bttn_search.png") no-repeat scroll 5% center #FFF;*/
    background: #fff;
    border-radius: .35rem;
    box-shadow: none;
    margin: -1px 0 0 0;
    margin-right: 0;
    padding: 3px 9px 4px ;
    width: 8em;
    border: none;
    height: 21px;
    border: 1px solid #dbd8d8;
}
/*#fn_type_list .search_filters .form-search input.search-query:focus {
    width:12em;
    border: 1px solid #666;
    outline:2px dotted red;
}*/
#fn_type_list .search_filters .filter_text .button  input {
    background: url("../images/portal/p_bttn_search.png") no-repeat scroll 50% center #f8f8f8;
    border: 1px solid #dbd8d8;
    width: 80px;
    border-radius: 4px;
}
}
.search_filters a {
    font-size: 12px;
}
.moreSearchOptions {
background: url("../images/portal/icon_filter.svg") no-repeat scroll 10px 6px #fff;
border: 1px solid #fff;
width: 35px;
border-radius: 4px;
display: inline-block;
height: 28px;
margin: 0;
vertical-align: top;
opacity: .5;
position: relative;
padding: 0 ;
line-height: 2;
color: #000;
font-size: 13px;
}
.moreSearchOptions:hover {
color: #000;
border: 1px solid #ccc;
/*background: url("../images/portal/icon_filter.svg") no-repeat scroll 10px 6px #fff;*/
opacity: 1;
}


/*list refactor  - 













TODO:  integrate these into the code above. */

#fn_type_list .form-search {float: left;}
#fn_type_list .form-search input.search-query,
.userSearchform  input.search-query {
    background: url("../images/portal/p_bttn_search.png") no-repeat scroll 5% center rgba(256, 256, 256, 01);
    border-radius: 20px;
    box-shadow: none;
    margin-bottom: 0;
    /*margin-right: 4em;*/
    padding: 4px 8px 4px 30px;
    /*width: 14em;*/
}
#fn_type_list .toggle-view  {float: right;height: 16px;width:40px;}
#fn_type_list .toggle-view > span {float: right; height: 26px;width:38px;margin-right: 20px;}
#fn_type_list .toggle-view > span {background: url("../images/portal/toggle-photo-view.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);}      



.archiveHeader {}
.archiveHeader input {display:inline-block;margin-left: 20px;}
.archiveHeader input.btn-fn-danger {background: #fff;text-shadow:0;border: 0;box-shadow: none;color: #666;font-size: 12px;transition: background .5s ease 0s;}
.archiveHeader input.btn-fn-danger:hover {background:  pink;border: 0;color: red;font-size: 12px;}
#project-list_inner {margin:auto;}

    

.ikon-trash {background: url("../images/portal/p_icon_trash.svg") no-repeat scroll 8px 6px/ 16px rgba(0, 0, 0, 0);}
.ikon-restore {background: url("../images/portal/p_icon_restore.svg") no-repeat scroll 6px 8px/18px rgba(0, 0, 0, 0);}
.ikon-archive-small {background: url("../images/portal/p_icon_archive-s.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);}

.ikon-field-label {display: inline-block;height: 18px;width: 18px;margin:0 4px -3px 0;}
.ikon-info {background: rgba(0, 0, 0, 0) url("../images/portal/icon-info.svg") no-repeat scroll 0 0 /18px;opacity: .4;}
.ikon-display-field {background: rgba(0, 0, 0, 0) url("../images/portal/icon-display-field.svg") no-repeat scroll 0 0 /18px;}
.ikon-required-field {background: rgba(0, 0, 0, 0) url("../images/portal/icon-field-required-2.svg") no-repeat scroll 0 0 /16px;}
.ikon-help {background: rgba(0, 0, 0, 0) url("../images/portal/icon-help.svg") no-repeat scroll 0 0 / 14px auto;}
.ikon-field-description {background: rgba(0, 0, 0, 0) url("../images/portal/icon-field-description.svg") no-repeat scroll 0 0 / 16px auto;}
.ikon-field-adminOnly {background: rgba(0, 0, 0, 0) url("../images/portal/icon-field-adminOnly.svg") no-repeat scroll 3px 0px / 12px auto;}
.ikon-field-userHidden {background: rgba(0, 0, 0, 0) url("../images/portal/icon-field-userHidden.svg") no-repeat scroll 0 0 / 14px auto;}
.ikon-field-customerHidden {background: rgba(0, 0, 0, 0) url("../images/portal/icon-field-customerHidden.svg") no-repeat scroll 0 0 / 14px auto;}

.ikon-arrow-back {
    background: rgba(0, 0, 0, 0) url("../images/portal/ikon-arrow-back.svg") no-repeat scroll 0 0 / 24px auto;
    float: left;
}


.workOrderViews {
    padding-left: 3em;
    /*background-color: rgba(245, 245, 245, .4)*/
}

.workOrderViews .viewList {
    float: left;
    margin-right: 40px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    height: 400px;
    height: 240px;
    margin-bottom: 2em;
    width: 489px;
    overflow: hidden;
    background: #fff;
    border-radius: 2px;
    padding: 0;
    margin: 20px;
}
.workOrderViews .viewList.recentActivities {width: 1018px;}

.userSettings.workOrderViews h1 {
    font-size: 24px;
    font-weight: 300;
    letter-spacing: 1px;
    margin: 8px 0 20px;
}
.workOrderViews h3 {
    color: #47525d;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    margin: 14px 0 8px 18px;
    padding: 0;
}

/*table body scrolling */
 table.tableSection {
        display: table;
        width: 100%;
    }
table.tableSection thead, 
 table.tableSection tbody {
        float: left;
        width: 100%;
    }
 table.tableSection tbody {
        overflow: auto;
        height: 150px;
         height: 316px;
         height: 180px;
    }
table.tableSection tr {
        width: 100%;
        display: table;
        text-align: left;
    }
table.tableSection th {
        border-bottom: 1px solid #ddd;
    }
table.tableSection th, 
table.tableSection td {
        /*width: 33%;*/
    }


    .dashboard-new  table.tableSection th.searchName , 
    .dashboard-new  table.tableSection td.searchName  {
        width: 30%;
    }
    .dashboard-new  table.tableSection th.searchCount, 
    .dashboard-new  table.tableSection td.searchCount {
        width: 10%;
    }
    .dashboard-new  table.tableSection th.barGraph, 
    .dashboard-new  table.tableSection td.barGraph {
        width: 33%;
    }


/*.dashboard { min-width: 1540px;}*/

.dashboardLayout {}
.dashboardLayout td {vertical-align: top;}

.dashboard .vendorProfile {
    float: left;
    margin: 0;
    width: 200px;
    margin-right: 3em;
    min-height: 800px;
    padding-bottom: 100px;
}
.dashboard .vendorUser {
    border-bottom: 1px solid #8a9095;
    margin-bottom: 1em;
}
.dashboard .vendorUser img {
    border-radius: 100px;
}
.vendorUser .currentUserName {
    font-size: 16px;
    font-weight: 300;
    margin: 1em 0;
    color: #8a9095;
}
.dashboard .vendorProfile ul {margin:0;}
.dashboard .vendorProfile .companyContactInfo dt {
    color: #555;
    font-size: 9px;
    font-weight: 500;
    text-transform: uppercase;
}
.dashboard .vendorProfile dt {
    color: #8a9095;
    font-size: 12px;
    font-weight: 300;
    margin-bottom: .5em;
    margin-left: 0;
}
.dashboard .vendorProfile  dd {margin-left:0;color: #8a9095;}
.dashboard .vendorProfile  dd strong  {margin-left:0;font-weight: 300;}
.dashboard .vendorProfile .editLink {
    font-size: 11px;
    font-weight: 500;
}

.dashboard .vendorProfile .adminStats {margin-top: 40px;}
.dashboard .vendorProfile .adminStats dl {
    /*background: #f2f5f7 none repeat scroll 0 0;*/
    border-radius: 4px;
    /*padding: 18px;*/
    width: 195px;
}
.dashboard .vendorProfile .adminStats dt {
    border-bottom: 1px solid #c7c9c7;
    font-size: 13px;
    font-weight: 400;
    padding: 0 0 3px;
}
.dashboard .vendorProfile .adminStats dd {
    color: #47525d;
    font-size: 12px;
    font-weight: 300;
    line-height: 21px;
    margin-left: 0;
}

.adminStats dd span {float: right;text-align: right;}

.workOrderViews #fn_type_list {padding-top: 0;}
/*.workOrderViews #fn_type_list tr:hover {background:rgba(0, 0, 0, 0.01);}*/
.workOrderViews #fn_type_list th {border-right: 1px solid #eee;font-size: 11px; border-bottom: 1px solid #ddd;}
.workOrderViews #fn_type_list td {font-size: 12px; border:none;line-height: 1;}
.workOrderViews #fn_type_list th.searchName, .workOrderViews #fn_type_list td.searchName,
.workOrderViews #fn_type_list th.actDate, .workOrderViews #fn_type_list td.actDate   {padding-left: 18px;}
.workOrderViews #fn_type_list th.searchCount,
.workOrderViews #fn_type_list td.searchCount {padding-right: 8px;text-align: right;}
.workOrderViews #fn_type_list td.barGraph {padding:0 12px;}
.workOrderViews #fn_type_list td.barGraph .barWrap {position: relative;width: 150px;}
.workOrderViews #fn_type_list td.barGraph .barWrap span {position: absolute;background: #7ED321;top:11px;left:0;height: 14px;}
 p.msgNoViews {color: #999;font-size: 14px; margin: 18px;}
.workOrderViews #fn_type_list tbody tr:last-child {
    border-bottom: none;
}
/*.recentActivities td {border-top:rgba(0, 0, 0, 0.05) !important;}*/
.recentActivities .actDate {width: 15%;}
.recentActivities .actUser {width: 15%;}
.recentActivities .actProj {width: 45%;}
.recentActivities .actAct  {width: 25%;}

.favedRow {background: rgba(235, 235, 25, 0.11);border-bottom: 2px solid #ffffff;}
.favorites span {height: 16px; width:16px; display: inline-block;}
.favorites span:hover {cursor:pointer;}
.isFaved {background: rgba(0, 0, 0, 0) url("../images/portal/favorites-star-on.svg") no-repeat scroll 0 0 / 16px auto}
.notFaved {background: rgba(0, 0, 0, 0) url("../images/portal/favorites-star-off.svg") no-repeat scroll 0 0 / 16px auto}

/*these are for the photo viewer*/
#fn_type_list .checkbox.desc {width: 10px;}
#fn_type_list .checkbox.desc input[type="checkbox"]{margin: 5px 0 0 6px;}







#fn_type_list-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 5px 0;
    height: 50px;
    min-width: 960px !important;
    /*background: pink;*/
}
#fn_type_list-controls form {
    margin:0;
}
#fn_type_list-controls .top-pager {
    display: flex;
    align-items: center;
    position: relative;
    justify-content: flex-end;
    width: 205px;
}
#fn_type_list-controls .projectCount {
    font-size: 12px;
    margin-right: 1em;
}


#fn_type_list-controls .projectSearch {float: right;margin-left: 20px;overflow: hidden;width: 190px;}
#fn_type_list-controls .projectSearch.vendorSearch {width:400px;} 
.vendorSearch .showDistance {background: #fff none repeat scroll 0 0;
    color: #999;
    font-size: 12px;
    font-weight: 500;
    padding: 2px 6px;}
#fn_type_list-controls .projectSearch.vendorSearch input.search-query {margin-right: 0;}


.pl2 #fn_type_list-controls .pagination {margin: 0;}
.pl2 #fn_type_list-controls .pagination ul {box-shadow: none;border:none;}
.pl2 #fn_type_list-controls .pagination ul > li > a:hover {border-color: #ccc;}

.pl2 .pagination ul > li:first-child > a,
.pl2 .pagination ul > li:last-child > a {height: 20px;}
.pl2 .pagination ul > li:first-child > a {background: #fff url("../images/portal/chevron_page_left.svg") no-repeat scroll 50% 50% / 14px auto}
.pl2 .pagination ul > li:last-child > a {background: #fff url("../images/portal/chevron_page_right.svg") no-repeat scroll 50% 50% / 14px auto}
.pl2 .pagination span {display: none;}


.setResultsPerPage {color: #999;font-size: 11px;font-weight: 500;}
.setResultsPerPage .styled-select {
    background: #f6f6f6 url(../images/portal/styled-select.svg) no-repeat scroll 86% 49% / 7px auto;
    display: inline-block;
    width: 50px;
    height: 26px;
    position: absolute;
    border: none;
    top: -5px;
    border-radius: 2px;
    right: 0;
}
.setResultsPerPage .styled-select select {
    width:80px;
}




/*SET STATUS AND ASSIGN MENUS*/

/*#fn_type_list-controls .setStatus {float: right;}*/

/*#fn_type_list-controls .setStatus label {
    border: medium none;
    display: block;
    float: left;
    font-size: 12px;
    margin: 5px;}
#fn_type_list-controls .setStatus select {font-size: 12px;width: 150px; background: red;}
#fn_type_list-controls .setStatus select option {line-height: 2;padding: 4px 10px;}*/
/*
#fn_type_list-controls .bulk-assign a,
#fn_type_list-controls .bulk-assign .selectCount,
#fn_type_list-controls .bulk-assign .pipe {display: inline-block;margin-right: 0px;font-size: 12px; color:#666;}
*/




#fn_type_list-controls .bulk-assign a:hover {color: #000;}

/*#fn_type_list-controls .bulk-assign .scroll_container2 li a {
    margin: 0;
    padding: 6px 0 6px 40px;
    
    width: 220px;
}*/
#fn_type_list-controls .bulk-assign .selectCount {
    font-weight: bold;
    margin-left: 10px;
}
#fn_type_list-controls .bulk-assign .exportSearch {
    display: inline-block;
    font-size: 12px;
    margin: 0 0 0 1em;
    vertical-align: middle;
}

/*
#fn_type_list-controls .bulk-assign .pipe {color: #ccc;}
#fn_type_list-controls .bulk-assign .menu {border-radius: 3px;width: 260px;}

#fn_type_list-controls .bulk-assign .setCustomerMenu {left: 3px;}
#fn_type_list-controls .bulk-assign .setManagerMenu {left: 3px;}
#fn_type_list-controls .bulk-assign .archiveMenu {left: 3px;}

#fn_type_list-controls .bulk-assign .statusMenu {left: 3px;}
#fn_type_list-controls .bulk-assign .unarchiveMenu {right: -25px;}
#fn_type_list-controls .bulk-assign .permDelMenu {right: -112px;}
*/


#fn_type_list-controls .bulk-assign .assigneeMenu {
    left:2px; /*prevent left side from getting clipped*/
}
#fn_type_list-controls .bulk-assign .moreMenu {
    /*left: 3px;*/
    top: 20px;
}


/*#fn_type_list-controls .bulk-assign a.selected {background: #dfe4e9 url("../images/portal/checkmark.png") no-repeat scroll 10px 7px ;}*/

/* TODO: could this be to position the popups?*/
.dropdownWrap {
    position:relative;

}
.dropdownWrap .dropdown-menu {
    display: block;
    left: 3px;
    position: absolute;
    top: 29px;

}

.moreMenuWrap {
    position: relative;
}
.moreMenuWrap .moreMenu {
    display: none;
    position: absolute;
    top:26px;
    left: 0;
}
/*.moreMenuWrap .moreMenu a {display: block !important;}*/
.moreMenuWrap:hover .moreMenu {display: block; }

.moreMenu li a {
    padding:9px 0 9px 30px;
    margin: 0;
}

/*set the widths on the vendor table - move this to a better place?*/
/*.vendorListPage .vendorName {width:20%}*/
.vendorListPage .vendorKey {width: 10%;}
.vendorListPage .vendorPhone {width: 8%;}
.vendorListPage .vendorEmail {width: 15%;}
.vendorListPage .vendorCity {width: 9%;}
.vendorListPage .vendorState {width: 5%;}
.vendorListPage .vendorZip {width: 5%;}
.vendorListPage .vendorDist {width: 7%;}
.vendorListPage .vendorStatus {width: 7%;}
.vendorListPage .vnedorRating {width: 7%;}
.vendorListPage .vendorConnected {width: 7%;}
/*.vendorListPage td {outline: 1px dotted pink;}*/
#fn_type_list .bulk-btn.btn-createNew.createNew,
#newBatchExportBttn.bulk-btn.btn-createNew.createNew,
#newAddExistingBttn.bulk-btn.btn-createNew.createNew,
#newServiceBttn.bulk-btn.btn-createNew.createNew {
    background: url("../images/portal/icon-add-new.svg") no-repeat scroll 9px 5px transparent;
    padding-left: 34px;
    text-transform:  capitalize;
    border: 1px solid #ddd;
    border-radius: 2px;
    height: 30px;
    margin-left: 2px;
    margin-right: 2px;
    color: #0080FF;
    font-size: 12px;
}
#fn_type_list .search_title  .bulk-btn.btn-createNew.createNew {
    border:none;
}
#fn_type_list .bulk-btn.btn-createNew.importNew {background: url("../images/portal/icon-import.svg") no-repeat scroll 9px 5px transparent;}
#fn_type_list  #new-template-button {
    display: inline-block;
    height: 26px;
    margin-top: 6px;
    padding-top: 4px;}

#addExistingCompanyModal {width: 500px;margin-left: -250px;}
#addExistingCompanyModal .searchResults {
    border-top: 1px solid #ccc;
    margin: 0;
    max-height: 240px;
    overflow: scroll;
    border-bottom: 1px solid #ccc;
    clear: both;
}
#addExistingCompanyModal .searchResults li {padding: 8px;}
#addExistingCompanyModal .searchResults li:hover {background: #f7f7f7;}
#addExistingCompanyModal .searchResults li button {float: right; clear: both; margin-top: -2px;border: 1px solid #ddd;}
#addExistingCompanyModal .searchResults li button:hover { background: #3a88fe none repeat scroll 0 0;color:#fff;text-shadow: none;border:1px solid #3a88fe;}






/*new and cleaner style for the contained project list    */

#createNewChildProject .bulk-btn.btn-createNew.createNew {border:none;box-shadow: none;}

.selectAllControl.selectNone {background:url("../images/portal/checkbox-none.png") no-repeat scroll 10px 7px ;}
.selectAllControl.selectAll {background:url("../images/portal/checkbox-checked.png") no-repeat scroll 10px 7px ;}
.selectAllControl.selectSome  {background:url("../images/portal/checkbox-ind.png") no-repeat scroll 10px 7px ;}


.pl2 .selectAllControl.selectNone {background:url("../images/portal/checkbox-none.png") no-repeat scroll 0 0 / 13px ;}
.pl2 .selectAllControl.selectAll {background:url("../images/portal/checkbox-checked.png") no-repeat scroll 0 0 / 13px ;}
.pl2 .selectAllControl.selectSome  {background:url("../images/portal/checkbox-ind.png") no-repeat scroll 0 0 / 13px ;}

.bulk-assign .caret {display: none;}

#fn_type_list-controls .bulk-btn {
    border: 1px solid #ddd;
    border-radius: 2px;
    height: 30px;
    line-height: 2.1;
    margin-left: 2px;
    margin-right: 2px;
    padding: 0 12px;
    color: #333;
}

.bulk-assign-inner .infoValue {
    padding-top: 4px;
}

.selectAllControl {
    height: 13px;
    width: 13px;
    display: inline-block;
    border:none;
    cursor: pointer;
    border-radius: 2px;

    }
.selectAllControl input {
    margin:8px 0 0 10px;

}

.assignFeedback {
    border-bottom: 1px solid #eee;
    font-size: 12px;
    font-weight: bold;
    padding: 12px;
    margin-bottom: 6px;
    }
.archiveMenu  .assignFeedback, .unarchiveMenu  .assignFeedback, .permDelMenu  .assignFeedback {
    border:0;
    }   
.assignFormControl {
    padding: 0 16px;
    text-align: right;
}
.bulk-assign-inner .assignFormControl span {
    vertical-align: inherit;
    display: inline-block;
}
li.assignFormControl a {
    display: inline-block !important;
    font-weight: 500;
    text-transform: uppercase;
    width: auto;
}
 li.assignFormControl a.cancel {
    background: transparent;
    border-radius: 3px;
    color: #666;
    margin: 6px;
    padding: 4px 12px;
    width: auto;
    }
 li.assignFormControl .cancel:hover {
    background: transparent;
    color: #000;
    }
li.assignFormControl .confirm {
    border-radius: 3px;
    color: #339AFF;
    margin: 0;
    padding: 4px 8px;
    width: auto;
}
 li.assignFormControl .confirm:hover {   
    background: #e7f3fe none repeat scroll 0 0;
    color: #339AFF;
    }
 li.assignFormControl span.dis {
    opacity:.5;
    font-weight: 500;
    text-transform: uppercase;
    padding-right: 8px;
    padding-left: 8px;
}
.dropdown-menu .divider.small {
    margin: 0px 1px;
}

.popover .popoverConfirm.form-actions {border:0;padding-top: 0;}

#createNewChildProject .popover {margin-top: -40px;}
/*Add scrolling to the bulk assign lists*/


#fn_type_list-controls .dropdown-menu .scroll_container1 {
    /*height: 200px !important;*/
    /*height: 320px !important;*/
}

/*styles for my temp checkbox*/
/*.bulk-assign-inner {padding-left: 12px; font-size:12px;padding-left: 0;}
.bulk-assign-inner span {vertical-align: middle;display: inline-block;}*/


.dropdown-menu-flat.setDueDateMenu {left: 3px;}
/*Search UI for the assign pop up*/
/* .searchPopUp {
    border-bottom: 1px solid #eeeeee;
    padding: 6px 0 11px;
}*/
.searchPopUp form {margin:0;}
.searchPopUp input[type="text"] {
    border-radius: 50px;
    display: block;
    margin: auto;
    width: 86%;
}
 .searchPopUp input[type="text"]::-moz-placeholder {font-size: 12px;color:#999;}
.bulk-assign .vendorIndacator {
    /*background: rgba(0, 0, 0, 0) url("../images/portal/vendor_icon.svg") no-repeat scroll 0 0 / 19px auto;*/
    background: url("../images/portal/icon-vendor.svg") no-repeat scroll 0px 0px /14px rgba(0, 0, 0, 0);
    display: inline-block;
    font-size: 30px;
    height: 22px;
    padding-top: 0;
    position: absolute;
    right: 16px;
    text-align: center;
    vertical-align: top;
    width: 21px;
}



.popUpDialog {width:300px;}
.popUpDialog.integrationStatus {margin-left: -260px;} /* pop up was running off page */
.popUpDialog h5, .popUpDialog p {margin:20px;}


/*style the placeholder text in the search box*/
#fn_type_list-controls ::-webkit-input-placeholder, .userSearchform  input.search-query  {
   color: #888;
   font-size: 12px;
}
#fn_type_list-controls :-moz-placeholder, .userSearchform  input.search-query  { /* Firefox 18- */
   color: #888;  
   font-size: 12px;
}
#fn_type_list-controls ::-moz-placeholder, .userSearchform  input.search-query {  /* Firefox 19+ */
   color: #888;  
   font-size: 12px;
}
#fn_type_list-controls  :-ms-input-placeholder, .userSearchform  input.search-query  {  
   color: #888;  
   font-size: 12px;
}


/*variations of the list for templates */
#fn_type_list.templateList {margin-top:40px;}
#fn_type_list.templateList td {padding: 6px 0 6px 6px;}
.templateList #fn_type_list-controls {border:0;padding-top: 12px;}
.templateList #fn_type_list-controls .toggleEnabled {
    color: #666;
    float: right;
    font-size: 12px;
    margin-left: 20px;
    padding-top: 6px;
    width: 220px;
}
.templateList #fn_type_list-controls .toggleEnabled input {margin-top:0px;display: inline-block;}
.label-enabled {
    background-color: #d4e7d3;
    border-radius: 3px;
    color: #119020;
    display: inline-block;
    font-size: 11.844px;
    font-weight: normal;
    line-height: 14px;
    padding: 4px 7px;
    text-shadow: none;
    vertical-align: baseline;
    white-space: nowrap;
}
.label-enabled.draft {
    background-color: orange;
    color: #000;
}
.label-enabled.inactive {
    background-color: #eee;
    color: #999;
}
.projectDraftBanner {
    display: inline-block;
    border-radius: 4px;
    background: #ffe5b6;
    color: #000;
    padding: 2px 26px;
    margin-top: -4px;
    font-weight: bold;
    text-transform: none;
}

/*popover overrides - todo: move these to a better place in the doc...*/
.popover.right {
    margin-left: 10px;
    margin-top: 1px;
    top: 11px !important;
}
.popover.right .arrow {
    border-left-width: 0;
    border-right-color: rgba(0, 0, 0, 0.25);
    left: -11px;
    margin-top: -11px;
    top: 40%;
}
.popover-content label {font-size: 12px;}


  /* NEW PROJECT SHOW DESIGN
----------------------------------------------------------------------------------------------------------------------------------------------*/ 


#project_show {position: relative;padding-top: 1px;margin-top: -1px;}

/*  CONTROL BAR --------------------------------------------------- */
.ps_controls {position: absolute;right: -4px;top: 8px; background: transparent;padding: 0 12px 0 12px;}
.ps_controls > ul {float: right;padding: 0;margin: 0; }
.ps_controls > ul > li {float: right;margin: 2px;padding: 3px 10px;}
.ps_controls ul li a {}

/*.dropdown-menu>li>span {
    display: block;
    padding: 3px 20px;
}*/
.ps_controls button {border: 0;background: transparent;}

.ikon  {display: inline-block;height: 30px;width: 30px;}

.ikon-share {background: rgba(0, 0, 0, 0) url("../images/portal/icon-p-share.svg") no-repeat scroll 2px 2px / 25px auto;}
.ikon-pdf {background: rgba(0, 0, 0, 0) url("../images/portal/icon-report-menu.svg") no-repeat scroll 6px 4px / 17px auto;}
.ikon-eagleview {background: rgba(0, 0, 0, 0) url("../images/portal/icon-report-eagleview-menu.svg") no-repeat scroll 0px 0px / 24px auto;}
.ikon-download {background: rgba(0, 0, 0, 0) url("../images/portal/icon-p-export.svg") no-repeat scroll 3px 1px / 24px auto;}
.ikon-archive {background: rgba(0, 0, 0, 0) url("../images/portal/p_icon_archive-s.svg") no-repeat scroll 6px 6px / 18px auto;}
.ikon-upload {background:rgba(0, 0, 0, 0) url("../images/portal/icon-photo-upload.svg") no-repeat scroll 0 0 /20px;height: 23px !important;}
.ikon-upload.fieldRequired {background:rgba(0, 0, 0, 0) url("../images/portal/icon-photo-upload-required.svg") no-repeat scroll 0 0 /20px;height: 23px !important;}

.ikon-dependency {background: url("../images/portal/dependency.png") no-repeat scroll 0 0 ;margin-bottom: -6px;width: 4px !important;margin-right: 2px !important;}
.ikon-servicemax {background: rgba(0, 0, 0, 0) url("../images/portal/icon-servicemax.svg") no-repeat scroll 0 3px / 18px auto;}
.ikon-sync {background: rgba(0, 0, 0, 0) url("../images/portal/icon-sync.svg") no-repeat scroll 6px 5px / 20px auto}
.ikon-findVendorBy {background: rgba(0, 0, 0, 0) url("../images/portal/findVendor-btn.svg") no-repeat scroll 0 0px / 16px auto;}
.ikon-integration {background: rgba(0, 0, 0, 0) url("../images/portal/icon-sync.svg") no-repeat scroll 2px 0px / 20px auto}
.ps2 .ikon-integration {background: rgba(0, 0, 0, 0) url("../images/portal/icon-sync.svg") no-repeat scroll 2px 4px / 20px auto}
.ikon-integration-error {background: rgba(0, 0, 0, 0) url("../images/portal/icon-sync-error.svg") no-repeat scroll 2px 2px / 19px auto;}
.ikon-open-photo-manager {
    background: url("../images/portal/icon-open-photo-manager.svg") no-repeat scroll 1px 5px/26px rgba(0, 0, 0, 0)
}

.ikon-toggle-view {
    background: url("../images/portal/skunk.svg") no-repeat scroll 5px 5px/20px rgba(0, 0, 0, 0);
}
.ikon-show-controls-more {
    background: url("../images/portal/btn-more.svg") no-repeat scroll 10px 12px/30px rgba(0, 0, 0, 0);
    width: 50px;
    height: 30px;
    border-radius: 2px;
}
.ikon-show-controls-more:hover {
    background: url("../images/portal/btn-more.svg") no-repeat scroll 10px 12px/30px rgba(0, 0, 0, .05);

}

.list-utility-menu .ikon-show-controls-more {
    background: url("../images/portal/btn-more.svg") no-repeat scroll 6px 12px/22px rgba(0, 0, 0, 0);
    width: 50px;
    height: 30px;
}
.ikon-show-controls-more-vertical {
    background: url("../images/portal/btn-more-vertical.svg") no-repeat scroll 13px 7px/4px rgba(0, 0, 0, .0);
    width: 30px;
    height: 30px;
    border-radius: 2px;
}
.ikon-show-controls-more-vertical:hover {
    background: url("../images/portal/btn-more-vertical.svg") no-repeat scroll 13px 7px/4px rgba(0, 0, 0, .05);

}



/*imported from the show page*/
.ikon-back {
  /*background: transparent url("../images/portal/arrow-back.svg") no-repeat scroll 0 0px/14px auto;*/
  margin-bottom: -9px;
  margin-right: 0;
  margin-top: unset; 
}

.ikon-open-comments {
  background: transparent url("../images/portal/icon-comments-open.svg") no-repeat scroll 5px 6px/20px auto;
}

.ikon-close-comments {
  background: transparent url("../images/portal/icon-comments-close.svg") no-repeat scroll 5px 6px/20px  auto;
}


.ikon.ikon-refresh {
    background: rgba(0, 0, 0, 0) url("../images/portal/icon-refresh.svg") no-repeat scroll 0 2px / 15px auto;
    float: right;
    height: 20px;
    margin-bottom: -1px;
    width: 19px;
}

.ikon-close {background:url("../images/portal/icon-close.svg") no-repeat scroll 0 0/ 16px rgba(0, 0, 0, 0);}


.ikon-edit {background:url("../images/portal/icon-edit.svg") no-repeat scroll 6px 7px rgba(0, 0, 0, 0);}
.ikon-delete {background:url("../images/portal/icon-delete.svg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);}
.addService .ikon-delete {background:url("../images/portal/icon-delete.svg") no-repeat scroll 8px 8px rgba(0, 0, 0, 0)}
.ikon-delete-disabled {background: url("../images/portal/icon-delete-disabled.svg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);}

.ikon-archive-small {background: url("../images/portal/p_icon_archive-s.svg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);}
.ikon-clone-project {background: rgba(0, 0, 0, 0) url("../images/portal/clone-project.svg") no-repeat scroll 0 0 / 20px auto; }
.ikon-map {background: transparent url("../images/portal/icon-map.svg") no-repeat scroll 0 0/24px auto; }

/*.ikon.ikon-open-comments {background-size: 16px;}*/

tr:hover .ikon-archive-small, 
tr:hover .ikon-clone-project, 
tr:hover .ikon-trash, 
tr:hover .ikon-restore,
tr:hover .ikon-open-comments,
tr:hover .ikon-open-comments-yes,
tr:hover .ikon-open-comments-none,
tr:hover .ikon-show-controls-more,
tr:hover .ikon-integration,
tr:hover .ikon-integration-error {
    opacity:1;
}

.hoverFadeAnimation {
    opacity:0; 
    -webkit-transition: opacity 0.6s ease-out;  
       -moz-transition: opacity 0.3s ease-out;  
        -ms-transition: opacity 0.3s ease-out;  
         -o-transition: opacity 0.3s ease-out;  
            transition: opacity 0.3s ease-out;
}
.hoverFadeAnimation.partialFade {
    opacity:.5; 
}


/*new top nave icons - deprecated soon please!*/
.ikon-admin-menu-views {background: rgba(0, 0, 0, 0) url("../images/portal/icon-admin-menu-views.svg") no-repeat scroll 0 5px / 18px auto;}
.ikon-admin-menu-pages {background: rgba(0, 0, 0, 0) url("../images/portal/icon-admin-menu-pages.svg") no-repeat scroll 0 4px / 18px auto;}
.ikon-admin-menu-user {background: rgba(0, 0, 0, 0) url("../images/portal/icon-admin-menu-user.svg") no-repeat scroll 0 3px / 18px auto;}
.newUI .ikon-admin-menu-user {background: rgba(0, 0, 0, 0) url("../images/portal/icon-admin-menu-user-white.svg") no-repeat scroll 0px 6px / 22px auto;}
.ikon-admin-menu-help {background: rgba(0, 0, 0, 0) url("../images/portal/icon-help-menu.svg") no-repeat scroll 0 4px / 16px auto;}

.newUI .ikon-admin-menu-help {
    background: rgba(0, 0, 0, 0) url("../images/portal/icon-help-dark.svg") no-repeat scroll 0 5px / 22px auto;
}
.newUI .ikon-admin-menu-pages {
    background: rgba(0, 0, 0, 0) url("../images/portal/icon-admin-dark.svg") no-repeat scroll 0 4px / 22px auto;
}
.newUI .ikon-admin-menu-views {
    background: rgba(0, 0, 0, 0) url("../images/portal/icon-listviews-dark.svg") no-repeat scroll 0 4px / 24px auto;
}
.newUI .ikon-admin-menu-search {
    background: rgba(0, 0, 0, 0) url("../images/portal/icon-search.svg") no-repeat scroll 0px 7px / 20px auto;
}


/*  BREADCRUMB TRAIL --------------------------------------------------- */
.ps  .breadcrumb {background: transparent;height: 4px;padding: 4px 0 0 20px;font-size: 12px;text-transform: capitalize;}
.ps  .breadcrumb a:link, .ps  .breadcrumb a:visited {color: #339AFF;}
.ps  .breadcrumb a:hover {color: #0080FF;}





/*  move container ui at the end of the trail  */
.movecontainerBtton .gb_C {position:absolute; top:0;left:0;width: 1px !important;}
#containerSelect {position: relative;padding-right: 20px;margin: -8px 0 0 11px;}
.ikon-movecontainer {background: url("../images/portal/p_bttn_movecontainer.png") no-repeat scroll 0 0 ;position: absolute;top: -14px;right: 0; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    opacity:.2;
    -webkit-transition: opacity 0.3s ease-out;  
       -moz-transition: opacity 0.3s ease-out;  
        -ms-transition: opacity 0.3s ease-out;  
         -o-transition: opacity 0.3s ease-out;  
            transition: opacity 0.3s ease-out; 
        }
li:hover .ikon-movecontainer {display: inline-block;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity:1;}


.movecontainerBtton  .dropdown-menu a {font-size: 12px;color: #666;}
.movecontainerBtton  .dropdown-menu a:hover {color: #000;}
/* position the nubb! in the utility nav  */
.gb_E_mc {left: 10px;}
.gb_D_mc {left: 10px;}



/*  PROJECT HEADER --------------------------------------------------- */


/*  PROJECT thumbnail photo --------------------------------------------------- */
.ps .title_description img {max-width: 90px; min-height: 96px;}
/*.projectThumb {float:left; margin: 6px 0 0 20px;}*/
/*  PROJECT Title and Description --------------------------------------------------- */
.ps .title_description {width:50%;float:left;}
.ps .title-description-wrap {margin: 0px 0 0 120px;padding-top: 6px; }
.ps .projectTitle  {   margin: 0;;line-height: 1; font-weight: normal;font-size:20px;color:#333;}
.ps  .projectDescription {font-weight: normal;font-size:13px;color:#888;line-height: 1;}


/*  PROJECT status, owner...etc.  --------------------------------------------------- */
.ps_info { position: absolute; right: 0; top: 50px;}
.ps_info td {vertical-align: bottom;font-size: 13px;}
.ps_info .line-item {
    border-bottom: 1px solid #dddddd;
    height: 22px;
    min-width: 250px;
    padding: 5px 0 0;
    position: relative;
    text-align: right;
}

.ps_info .infoValue {   display: inline-block;max-width: 160px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 13px; margin-top: -2px;}
.ps_info .leftCol {padding-right: 40px;}
.ps_info .rightCol {padding-right: 20px;}
.ps_info  tr:last-child .line-item {border:0;}
.ps_info tr:last-child .leftCol .line-item {position: absolute;bottom: 0px;}
.ps_info label {
    color: #aaa;
    float: left;
    position: absolute;
    top: 3px;
    font-size: 13px;
}
.ps_info .btn-group {width: 100%;}
.ps_info .btn-group > .btn:first-child {display: block;text-align: right;}
.btn-flat {border:0;background: transparent;box-shadow:none;padding:0;color:#0080FF;color:#339AFF;}
.btn-flat:hover,
.btn-flat:active {color:#0080FF;background: transparent;box-shadow: none;}
.ps_info .btn-group.open .dropdown-toggle,
.ps_info .btn-group.open .dropdown-toggle:active {background-image: none;box-shadow: none;background: transparent;}
.dropdown-menu-flat {left: auto;right:  -14px;text-align: left;font-size: 12px;border: medium none;}
.dropdown-menu-flat a {font-size: 12px;color: #666;}
.dropdown-menu-flat a:hover {color: #000;}
.dropdown-menu {z-index: 6000;border-radius: 0;}

/*a better assign menu*/
/*.dropdown-menu.assign-menu {width: 320px;}*/

.dropdown-menu.assign-menu .scroll_container1 {
    /*height: 280px !important;*/
}

.dropdown-menu.assign-menu  .vendorIndacator {
    /*background: rgba(0, 0, 0, 0) url("../images/portal/vendor_icon.svg") no-repeat scroll 0 0 / 19px auto;*/
    background: url("../images/portal/icon-vendor.svg") no-repeat scroll 0px 0px /14px rgba(0, 0, 0, 0);
    display: inline-block;
    font-size: 30px;
    height: 22px;
    padding-top: 0;
    position: absolute;
    right: 16px;
    text-align: center;
    vertical-align: top;
    width: 21px;
}
.dropdown-menu .scroll_container2 li a.selected {
    background: #dfe4e9 url("../images/portal/checkmark.png") no-repeat scroll 8px 12px/14px;
}

#editTemplateModal .dropdownWrap {line-height: 3;clear:left;}
#editTemplateModal .dropdownWrap label {display: inline-block;}
#editTemplateModal .dropdownWrap .infoValue {
    background: #fff;
    padding: 3px 12px 6px 8px;
    min-width: 15em;
    margin-left: 1em;
    display: inline-block;
    height: 18px;
    border: 1px solid #ddd;
    text-align: left;
}
#editTemplateModal .dropdownWrap .caret {margin: 12px 0px 0 -21px;}
#editTemplateModal  .btn-group.open .btn.dropdown-toggle {box-shadow: none;background: transparent;}
#editTemplateModal .dropdown-menu.assign-menu {left:0;}
#editTemplateModal .dropdown-menu.assign-menu .scroll_container1 {
    height: 224px !important;
}
/* position the nubb! in the status nav  */
.gb_E_stat {left: -23px;}
.gb_D_stat {left: -23px;}

/*.setProjectDue {
    margin-bottom: 12px;
}*/

.setProjectDue .infoValue {}
.setProjectDue input {border:0;text-align: right;color: #0080FF; background: transparent;}
.setProjectDue button {border:0;background: transparent;margin-right: -8px;}
.setProjectDue .input-append {margin-bottom: 4px;}

/*remove the pointy thing from the  calendar picker - it's allways in the wrong place*/
.datepicker-dropdown:before {display: none;}
.datepicker-dropdown:after {display: none;}



/*  PROJECT tags  --------------------------------------------------- */
.portalSettings .projectTag {
    background: #efefef;
    border-radius: 3px;
    color: #000;
    display: inline-block;
    padding: 0 10px;
    position: relative;
    margin: 4px 4px 0 0;
}
.portalSettings .projectTag label {
    display: inline-block;
    font-size: 12px;
    margin: 2px;
    font-weight: 400;
    width: auto !important;
}
.portalSettings .projectTag .removeTag {
    display: inline-block;
    font-size: 16px;
    margin: -5px 0 0 0;
    padding: 0 0 0 8px;
}

.projectTag .dropdown-menu {
    display: block;
    left: 30px;
    top: 15px;
    width: 200px;
}
.projectTag .assignFeedback {margin: 0;padding: 6px 12px 0;}
.projectTag .assignFormControl .cancel {}
.projectTag .assignFormControl .confirm {color:red;}
.projectTag .assignFormControl .confirm:hover {color:red;background:#fce9e9;}


/*these are the list versions of the tags above - keeping them together for ease of editing*/

.tags a {font-weight: 500;}
.tags span {
    color: #7b8994;
}
.tags .list-tag {
    color: #676767;
    padding: 2px 8px;
    background: #fff8a9;
    margin: 0 0 2px 0;
    border-radius: 2px;
    font-size: 11px;
}
.projectTag .tagInfo {
    left: -5000px;
    top: 10px;
    width: 240px;
    opacity:0;
        -webkit-transition:opacity 0.5s, top 0.5s;
        -moz-transition:opacity 0.5s, top 0.5s;
        -ms-transition:opacity 0.5s, top 0.5s; 
        -o-transition:opacity 0.5s, top 0.5s;
        transition:opacity 0.5s, top 0.5s;
}

.projectTag:hover .tagInfo {height:auto;opacity:1;top:20px;left:0px;}
.tagInfo h5 {color:#7B8993;font-size: 12px;margin-left: 11px;}
.tagInfo ul {margin: 12px;}
.tagInfo li {line-height: 1;padding-bottom: 8px;width: 200px;color:#7B8993;}

/*one color for now...*/
/*.tags .caution  {color: #fcc33a;}
.tags .paleBlue {color: #2ab1d7;}
.tags .redAlert {color: #f83846;}*/

/*
.projectTag  li.assignFormControl   a {
    display: inline-block;
    width: auto;
    }
.projectTag  li.assignFormControl a.cancel {
    background: transparent;
    border-radius: 3px;
    color: #666;
    margin: 6px;
    padding: 4px 12px;
    width: auto;
    }
.projectTag  li.assignFormControl .cancel:hover {
    background: transparent;
    color: #000;
    }
.projectTag  li.assignFormControl .confirm {
    background: #74a7fe;
    border-radius: 3px;
    color: #fff;
    margin: 6px;
    padding: 4px 22px;
    width: auto;
    }
.projectTag  li.assignFormControl .confirm:hover {   
    background:#478afc; 
    }
*/
/*to cover for a bug in the datepicker the following classes are used to hide the broken input and replace it with a span tag*/

.datePickerHackHide {
    font-size: 0 !important;
}
.datePickerHack {
    position: absolute;
    font-size: 14px;
    right: 24px;
    top: 7px;
    width: 200px;
}


/* if there are too many names in the assign to list, it will scroll when the names exceeds the default height of 135px */
.dropdown-menu .scroll_container1 {
    height: 135px !important;
    width: 100% !important;
    overflow: hidden !important;
}
.dropdown-menu .scroll_container2 {
    /*width: 100% !important;*/
    /*the extra 10% pushes the scroll bar out of view*/
    /*width: 110% !important;*/
    height: 99% !important;
    margin-left: 0;
    overflow: auto !important;
}
.dropdown-menu .scroll_container2 li a {
    display: block;
    margin: 0px 0;
    padding: 9px 0 9px 30px;
    overflow: hidden;
    white-space: normal;
    line-height: 1.2;
    color: #333;
}
}

#toc_inner { 
    /*background: #ffff00;*/
    padding: 10px 0px 40px 0px!important;
    overflow: hidden !important;
    /*height:  is now set by the same function that sets the height of the comment box */
    width: 170px !important;
    overflow: hidden !important;
}
.scrollingArea {

    overflow: auto !important;
    width: 167px !important;
    height: 99% !important;
    padding: 0 20px 20px 0;
}



/*  PROJECT tabs  --------------------------------------------------- */
#attachedReports {margin-top: 40px; }
#attachedReports  a {text-transform: uppercase;color: #0080FF;border: 0 none;}
#attachedReports #myTab {margin-left: 0;}
#myTab.nav-tabs {padding-left: 20px;}
/*#myTab.nav-tabs > li > a {font-size: 12px;}*/
#attachedReports .nav-tabs > li.active > a {border: 0 none;color: #333;display: inline-block;margin-bottom: 1px;}
#attachedReports  .nav > li > a:hover,  #attachedReports  .nav > li > a:focus {background: #f2f2f2;}
#attachedReports .nav-tabs > li.active > a {background: #fff; border: 1px solid #bbb; border-bottom: 1px solid #fff;}
#attachedReports  .nav-tabs > li {margin-bottom: -2px;}


/*this table formats the INFO area*/
.myLayoutTable {margin: 0;}
.myLayoutTable td {margin:0;padding:0;border: 0;}
.myLayoutTable td.left {width: 62%;}
.myLayoutTable td.right  {}



/*  PROJECT FORM COLUMN  --------------------------------------------------- */
.ps_forms {border-top: 9px solid #FFFFFF;}
.ps_forms_content {overflow: auto;  padding: 1px 0;  width: auto; background: none repeat scroll 0 0 #f7f7f7;  border-left: 9px solid #FFFFFF;  }
.ps_forms_content_i {background: none repeat scroll 0 0 #f7f7f7;   padding-top: 30px;}

/*.section_toc {float: left;padding: 0 20px;width: 160px;}*/
/*.section_toc h6 {font-weight: normal; line-height: 16px;}*/


.ps_section_w {
    padding: 0 16px 20px;
    position: relative;
}
/*.ps_section_w h4 { color: #333;font-weight: normal;}*/

/*.ps_forms  .fieldLabel {color: #888;font-size: 14px;margin-bottom: 0;width: 90%;}*/
.ps_forms .fieldLabel  .dependantLabel {font-style: italic;}

/*.ps_field {border:1px solid #ddd;margin-bottom:6px;background:#fff;border-radius:6px;padding: 12px;position: relative;}*/
/*.field-container {border:1px solid #ddd;margin-bottom:6px;background:#fff;border-radius:6px;padding: 12px;position: relative;}*/
.field-container {
    background: #ffffff none repeat scroll 0 0;
    border: medium none;
    border-radius: 2px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
    margin-bottom: 14px;
    padding: 12px;
    position: relative;
}


.ps .sectionWrap h4 {border: 0;}


.spinnerMode {display: block;position: relative;}
.spinnerMode img {    position: absolute;right: 6px;top: -28px;}



/*  PROJECT FORM inputs read and edit states  ----------------------------- */

.ps .field-value {border: 0;}
.field_container {width: 100%;margin: 6px 0 0 0;}
.field_container form {margin: 0;}


/*.barcode {}*/

.field_container .boolean {margin-bottom: 10px;}
.field_container .boolean input[type="checkbox"] {margin-top:-1px;}
.field_container .boolean strong {display: inline-block;font-size: 16px;font-weight: normal;margin: 0 1.5em 0 0.25em;padding: 1px;}

.field_container .agreement {margin-bottom: 10px;}
.field_container .agreement input[type="checkbox"] {margin-top:-1px;}
.field_container .agreement strong {display: inline-block;font-size: 16px;font-weight: normal;margin: 0 1.5em 0 0.25em;padding: 1px;}




select, textarea, 
input[type="text"], 
input[type="password"], 
input[type="datetime"], 
input[type="datetime-local"], 
input[type="date"], 
input[type="month"], 
input[type="time"], 
input[type="week"], 
input[type="number"], 
input[type="email"], 
input[type="url"], 
input[type="search"], 
input[type="tel"], 
input[type="color"], 
.uneditable-input {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #ddd;
    border-radius: 0;
    color: #333;
    font-size: 16px;
    margin:0;
}

.money input[disabled] {
background: #f7f7f7;
border-radius: 0 4px 4px 0;
color: #666;
box-shadow: none;

}

.integer_field {width: 16em;}
/*.field_container input[type="text"] {width: 90%;}*/
.field_container textarea {width: 90%;}

.integer_field input[type="text"] {letter-spacing: 1px;}
.barcode-field {width: 24em;}
.barcode-field input {font-family: Consolas, monaco, monospace;letter-spacing: 1px;}


select:focus, textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .uneditable-input:focus {
    border-color: rgba(82, 168, 236, 0.8);
    box-shadow: none;
    outline: 0 none;
    background: rgba(82, 168, 236, 0.1);
    color: #000;
}
/*get rid of the dotted line in FF*/
select:focus {
    outline: 1px solid white;
    outline-offset: -2px;
}
/*select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
    
}*/



/*thse are unsorted */
.sectionWrap h4 {border:0;border-bottom: 1px solid #efefef;font-size: 20px;font-weight: 300;margin: 0 30px;padding: 5px 0 11px;}

.form-media-wrap .fotonote-thumbs-cell {padding:0 0 0;border: 0;}




/* Date picker UI */
.ui-datepicker {border:1px solid #DDDDCC;border-radius: 0;box-shadow: 2px 4px 7px #DDDDDD;padding:0;} 
.ui-datepicker-trigger {margin:4px;opacity: .5;}
.ui-datepicker-trigger:hover {opacity: 1;}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    background:  #fff;border: 1px solid #fff;color: #555;font-weight: normal;
}
.ui-state-default:hover, .ui-widget-content .ui-state-default:hover, .ui-widget-header .ui-state-default:hover {
    background:  #eee;border: 1px solid #fff;color: #333;font-weight: normal;
}
.ui-datepicker td {/*    font-size: 0.9em;padding-right: 7px;*/}
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {border-radius: 0;}
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {border:0;opacity: 1;}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, 
.ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
    background: #ddd;border: 1px solid #ddd;opacity: 1;font-weight: normal;
}
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {  opacity: 0.3;}
.ui-datepicker .ui-datepicker-prev:hover span, .ui-datepicker .ui-datepicker-next:hover span {  opacity: 1;}
.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {
    background: none repeat scroll 0 0 #FFFFFF;
}
.ui-state-hover.ui-datepicker-prev-hover, .ui-state-hover.ui-datepicker-next-hover  {background: transparent;}
.ui-datepicker-calendar th {text-transform: uppercase;font-weight: normal;color: #888;border-bottom: 1px solid #ddd;}
.ui-datepicker-header {border-radius: 0;background: #eee;border-color: #eee;}
.ui-datepicker-current-day {}
.ui-datepicker-current-day > .ui-state-default.ui-state-active {background: #729bf8;border:0;color:#fff;border-radius: 2px;}





/*  PROJECT FORM images --------------------------------------------------- */  

.ps .fotobabble-sumary img.imagethumb {background: none repeat scroll 0 0 #f4f4f4;border: 1px solid #fff;cursor: pointer;display: inline-block;height: 50px; padding: 0;width: 50px;}
.ps #myFotobabblesList {margin-left: 0px;}
.ps #myFotobabblesList .fotobabble-sumary {display: inline-block;float: left;height: auto;margin: 5px 5px 5px 0;padding-right: 0px;width: auto;}
.ps .form-media-wrap {margin: 6px 0 0;}
.ps .fotobabble-sumary .userControls a {margin-bottom: 14px; }
.ps .userControls a.deleteBttn {background: rgba(0, 0, 0, .5);border-radius: 0;height: 12px;left: 30px;opacity: 0;padding: 1px 8px 7px 3px;position: absolute;top: 30px; transition: opacity 0.3s ease-out 0s; width: 10px; }
.ps .thumb-wrap:hover a.deleteBttn {opacity:1;}
.ps .userControls {margin-top: -25px;height: 24px; width:24px; }
.ps .userControls a.deleteBttn:hover {}
.ps .icon-remove-sign {   background-color: #FFFFFF;   border: 2px solid #333;   border-radius: 10px 10px 10px 10px;   height: 10px;   width: 10px;   z-index: 200; background-position: -50px -98px;}
.ps .addPhotoBttn {margin: 0 0 9px 20px;}

.fotobabble-sumary  .userControls a  {margin-bottom: 14px;}
.spinnerDelete {height: 20px; width: 20px; float: left; margin: 10px 0 0 10px;} 

.ps .fotobabble-sumary .flaggedThumb {
    background: rgba(0, 0, 0, 0) url("../images/portal/flagBadge.svg") no-repeat scroll 0 0 / 14px auto;
    height: 25px;
    left: 1px;
    position: absolute;
    top: 1px;
    width: 22px;
}




/*  PROJECT FORM Comments  --------------------------------------------------- */  
.ps .comment-w form {  margin: 0; }
.ps .memo-cell-edit p,
.memo-cell-edit textarea {font-size: 12px;font-weight: normal;line-height: 1.3;}
.ps .memo-cell-edit p {color: #888;line-height: 1.3;margin: 6px 0 0 3px;min-width: 160px;max-width: auto;}    
.ps .memo-cell-edit p span {
    display: inline-block;
    float: left;
    font-size: 2em;
    height: 8px;
    letter-spacing: -1px;
    line-height: 0;
}
.memo-cell-edit textarea {background: none repeat scroll 0 0 #FFFFFF;color: #333;height: 4em;margin: 6px 0 0 0px;width: 90%;}



/*  PROJECT COMMENT THREAD - not the ones attached to fields  --------------------------------------------------- */  
.ps_comment_module {  float: left;width: 100%;margin-bottom: 20px;}
.ps_comment_module_i { padding-top: 20px; }
.ps_comment_module h4 {font-weight: normal;color: #333;   font-size: 11px; margin-bottom: 0; margin-top: 6px; font-weight: bold;}

.ps_comment_module .commentThread .commentText {background: none repeat scroll 0 0 rgba(0, 0, 0, 0);border: 0 none;color: #333;font-family: verdana;font-size: 11px;line-height: 1.1;margin: 0 0 4px;padding: 0;}

.ps_comment_module .commentThread .taskNotes {   background: #fff;padding: 0;line-height: 1.2;margin-bottom: 4px;}

.commentNodeAdd { 
    border-top: 1px solid #ccc;
    float: left;
    clear: both;
    width: 100%;
    height: 280px;
}

.ps_comment_module .commentThread .taskNotes .timeStamp {font-size: 11px;color: #888;font-weight: normal;}

.ps_comment_module .commentThread .taskNotes .deleteComment {display: inline;font-size: 11px;font-weight: normal;margin-top: 2px;text-align: left;text-transform: capitalize;opacity: .7;}
.ps_comment_module .commentThread .taskNotes .deleteComment:hover {opacity: 1;}
.commentThread .taskNotes.addCommentUI {}
.commentThread .taskNotes.addCommentUI textarea {color: #000;font-size: 12px;width: 97%;}
.commentThread .taskNotes.addCommentUI button {float:right;background: none repeat scroll 0 0 #ccc;border: 0 none;color: #333;float: right;text-shadow: none;}
.commentThread .taskNotes.addCommentUI button.btn[disabled] {opacity:.4;}







/*this is the floating comment panel*/

#projectComments {
    background: none repeat scroll 0 0 #fff;
    height: 450px;
    position: absolute;
    right: 0;
    top: 145px;
    height: calc(100vh - 175px);
    min-height: 300px;
    z-index: 5500;
    border: 1px solid #ccc;
    box-shadow:  2px 4px 7px #DDDDDD;
    }
#projectComments-inner {
    margin-top: 40px;
    overflow-y: scroll;
    padding: 0 20px 69px;
    width: 340px;
    min-height: 300px;
    height: calc(100vh - 325px);
    }  
#projectComments-header { 
    background: none repeat scroll 0 0 #fff;
    padding: 0 20px;
    position: absolute;
    width: 340px;
    }
#projectComments-header h4 {font-weight: normal;color: #999;text-transform: uppercase;font-size: 12px;}
#projectComments-header h4 a {float: right;}
/*#projectComments p {color: #fff;}*/

/*this is the button that toggles the comment panel*/
#showComments {color: #0080FF;font-size: 12px;position: absolute;right: 16px;text-transform: uppercase;top: 150px;}

#showLogLink {
    background: #ffffff none repeat scroll 0 0;
    border-top: 1px solid #ccc;
    bottom: 0px;
    font-size: 12px;
    font-weight: normal;
    left: 0;
    padding: 6px 20px 5px;
    position: absolute;
    text-transform: uppercase;
    width: 340px;
    color: #999;
}
#showLogLink a {
    float: right;
    }
.activityLogPanel {
    clear: left;
    float: left;
    height: 225px;
   
    width: 100%;

    background: #fff;
    bottom: 0px;
    left: 0;
    position: absolute;
}

.activityLogPanel-i {height: 160px; overflow-y: scroll; margin-top: 40px;}
.activityLogPanel h4 {
    background-color: #ffffff;
    border-top: 1px solid #ddd;
    color: #999;
    font-size: 12px;
    font-weight: normal;
    padding: 10px 20px;
    position: absolute;
    text-transform: uppercase;
    top: -10px;
    width: 340px;
}
.activityLogPanel h4 a {float: right;}


.auditEntry {
    background-color: #f7f7f7;
    border-radius: 2px;
    color:#000;
    line-height: 1.4;
    margin: 10px 20px;
}
.auditEntry p {color: #333;font-size: 11px;margin-bottom: 3px;padding: 5px 10px;}
.auditEntry .userName {color:#000;font-weight: bold;}
.auditEntry .activityType {color:#666;font-size: 13px;}
.auditEntry .activityMsg {color:#666;font-size: 13px;}
.auditEntry .activityDate {color:#666;}









/*  PROJECT attachements wrapper encloses the all other tab content except SUMMARY ------------------------------------------------- */
.ps #attachmentsWrapper {padding: 0px 20px;}

    

/* LOCKING SCROLL HEADER FUNCTION

--------------------------------------------------*/

/*locks the header section*/
.ps_isLocked {position: fixed;top: 0px;width: 100%;z-index: 900;background: #fff;}
/*conditional styles for the locked content - the positioning alters the effects of some rules*/
.ps_isLocked .nav-tabs  {margin-bottom: 10px;}
.topLockedButCanScroll #ps-forms {}


/*locks the toc side bar*/
.ps_tocLock {position: fixed;top: 200px; width: 160px;padding: 0 20px 0 0;}
/*assures a smooth transition while the above locking clicks in*/
.ps_formScrollWithLock {margin-top: 100px;}
/*assures that elements don't fly about when the locking clicks in*/
#myClearFix {clear: both;width: 100%;margin-top: 156px;margin-top: 173px;}
.ps-forms {padding-top: 190px;}
.ps_section_w a.adjust  {
    /*margin-top: -190px;         Size of fixed header 
    padding-bottom: 190px; */
    display: block;
    position: absolute;
    top: -220px;
    }



/*PROJECT TABS */
.documentTab p {margin: 18px 0;}
.documentTab ul {margin:0;}
.documentTab ul li {margin: 18px 0;}
.documentTab button {margin-left: 20px;}
 .doc-line-item .icon-removex {display: none;
    -webkit-transition: opacity 0.6s ease-out;  
       -moz-transition: opacity 0.3s ease-out;  
        -ms-transition: opacity 0.3s ease-out;  
         -o-transition: opacity 0.3s ease-out;  
            transition: opacity 0.3s ease-out;}
.doc-line-item:hover .icon-removex {opacity:1;display: inline-block; font-style: normal;font-weight: bold;}
.right_i {}
.right_i_Lock {
    padding: 0 20px 0 0;
    position: fixed;
    top: 205px; 
    width: 38%;
}
.documents-container {padding:0 1em;margin-bottom: 20px;}


.documents-container h4 {font-weight:normal;text-transform:uppercase;font-size:16px;color: #aaa;}
.documents-container ul {height: 256px;margin: 0 0 2em;overflow-y: scroll;}
.documents-container ul li {clear: left;line-height: 2;}

.documents-container button {background: none repeat scroll 0 0 #e5e5e5;border: 0 none;border-radius: 4px;color: #666;font-size: 12px;padding: 2px 16px;}
.documents-container button:hover {background: none repeat scroll 0 0 #5d9ff5;color: #fff; }

.uploadBrowseButton {
    background: none repeat scroll 0 0 #5d9ff5;
    border: medium none;
    border-radius: 3px;
    color: #fff;
    display: inline-block;
    font-size: 14px;
    font-weight: normal;
    margin: -2px 0 0 6px;
    padding: 12px 24px;
}
.btn.disabled, .btn[disabled] {opacity: 0.3;}

 .meta-data-container {
    padding: 1em;
    border-top: 1px solid #ddd;
}
 .meta-data-container p {
    font-size: 12px; 
    color: #999;
    
}


.ps2 .meta-data-container {
    position: absolute;
    bottom: 40px;
    padding: 1em 0 0 0;
    border-top: 1px solid #ddd;
}
.ps2 .meta-data-container p {
    font-size: 12px; 
    color: #666;
    
}

.ikon-doc {
    background: url("../images/portal/doc.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    display: inline-block;
    float: left;
    height: 20px;
    margin-top: 10px;
    width: 20px;
}

.tabSidebar {
    border-top: 1px solid #dddddd;
    margin-top: 15px;
    padding-top: 5px;
}
.tabSidebar .nav-tabs {border-bottom:none;}
.tabSidebar ul#myTab {
    margin:0;
    padding:0;
}
.tabSidebar ul#myTab li {
    clear: left;
    padding:4px 0;
}

.tabSidebar ul#myTab li a {
    background: rgba(0, 0, 0, 0) url("../images/portal/icon-folder.svg") no-repeat scroll 0 1px / 15px auto;
    border: 0 none;
    border-radius: 0;
    display: inline;
    font-weight: 400;    
    margin: 0;
    padding: 0 0 0 23px;
}
.tabSidebar ul#myTab li  a:hover {
    background: rgba(0, 0, 0, 0) url("../images/portal/icon-folder.svg") no-repeat scroll 0 1px / 15px auto;
}
.tabSidebar ul#myTab li.active  {
    font-weight: 600;    
}
.tabSidebar ul#myTab li.active a,
.tabSidebar ul#myTab li.active a:hover {
    background: rgba(0, 0, 0, 0) url("../images/portal/icon-folder-active.svg") no-repeat scroll 0 1px / 15px auto;
    font-weight: 600;  
}
.tabSidebar .containedItemCount {
    color: #aaa;
    font-weight: normal;
    display: inline-block;
    padding-left: 1em;
}



    
  /* PROJECT LIST - index of all your projects - this is depreciated - phase out, beware CBRE
----------------------------------------------------------------------------------------------------------------------------------------------*/ 


#project-list {
    padding-top:60px;
}

#project-list_inner {
    margin:auto;
}




#createNewProjectPopUp {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 2px solid #ccc;
    left: 250px;
    padding: 12px;
    position: absolute;
    top: 60px;
    width: 600px;
    }
.popover .form-actions {
    background: none repeat scroll 0 0 transparent;
    border-radius: 0 0 5px 5px;
    margin: 10px -10px -20px;
    padding: 9px 10px 10px;
    text-align: right;
    }
select#template {
   width:204px;
    }





/*
.project-list-item is used in these 2 files only:

fotonotes/grails-app/views/project/report/_subprojectreport.gsp
fotonotes/grails-app/views/template/_template.gsp
*/
.project-list-item {
    border-top: 1px solid #aaa;
    }
.project-list-item .title-description-wrap {
    }
.thumbnail {
    float: left;
    margin: 16px 16px 16px 0;
    }
.thumbnail img {
    width: 100%;
    }
/*.title-description-wrap {
    margin:10px 0 0 145px;
    padding: 0;
    }*/
/*.title-description-wrap h1 {
    margin-bottom: 0; 
    padding-bottom: 0;
    }*/
/*.title-description-wrap p {
    color: #666666;
    font-size: 15.5px;
    letter-spacing: 0.25px;
    line-height: 1.2;
    margin: 2px 0 0;
    text-shadow:  rgb(255, 255, 255) 1px 1px 0px;
    }*/

.nav-tabs {
    padding-left: 30px;
}    
.form-elements-wrap .field-value {
    font-size: 24px;
    border:0;
}
    

    
.table td.field-value-edit,
.table td.field-value-editMode {
    border:0;
    padding: 5px 0 0 42px;
}

.form-elements-wrap .field-value-editMode span { /*  this is the edit standby mode   */
    border: 1px solid #DDDDDD;
    display: block;
    font-size: 20px;
    font-weight: 600;
    margin: 5px 0 10px;
    padding: 12px 4px;
}
    
.form-elements-wrap .field-value-editMode span.errorMsg {
    border: 0 none;
    color: red;
    font-size: 14px;
    font-weight: 600;
    margin: 9px 0;
    padding: 0;
}

.edit-field .ng-dirty.ng-invalid input {
    background: none repeat scroll 0 0 #FFF0FF;
    border: 1px solid pink;
    color: #000;
    font-size: 20px;
    font-weight: normal;
    padding: 5px 4px;
    }

.edit-field .ng-dirty.ng-invalid textarea {
    background: none repeat scroll 0 0 #FFF0FF;
    border: 1px solid pink;
    color: #000;
    display: block;
    font-size: 20px;
    font-weight: normal;
    padding: 5px 4px;
}





/* NOTE: .form-media-wrap is the table that holds the media for each form element - babbles, memos...etc. */

.form-media-wrap {
    background: none repeat scroll 0 0 #F8F8F8;
    background: transparent;
    vertical-align: top;
}    
.form-media-wrap .memo-cell, .form-media-wrap  .memo-cell-edit  {
    
}
.form-media-wrap .memo-cell p {
    font-size: 12px; padding: 4px;margin: 6px 20px 12px;
    border: 1px solid #f7f7f7;
    color: #666666;
    line-height: 1.2;
}
.form-media-wrap .memo-cell p:hover {
    border:1px solid #f7f7f7F;padding: 4px; 
}
.field-value-editMode .button-select label {
    float: left;
    clear: left;}
.field-value-editMode input {

}







.button-select {
     list-style-type:none;
     margin:25px 0 0 0;
     padding:0;
}

.button-select li {
     float:left;
     margin:0 5px 0 0;
    width:auto;
    height:40px;
    position:relative;
}

.button-select input {
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    height: 100%;
    width: 100%;
}
.button-select label {
    border: 1px solid #0080FF;
    color: #000;
    cursor: pointer;
    display: inline-block;
    padding: 5px;
    position: relative;
    z-index: 90;
}

.button-select input[type="radio"] {
    opacity:0.011;
    z-index:100;
}

.button-select input[type="radio"]:checked + label {
    background: #000 none repeat scroll 0 0;
    border: 1px solid #000;
    color: #ffffff;
}

.button-select label {
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    padding: 5px 10px;
    z-index: 90;
}

.button-select li:hover label {
     border-color: #000;
}



.form-media-wrap .memo-cell-edit p {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #FFFFFF;
    color: black;
    font-size: 12px;
    margin: 6px 20px 12px;
    min-width: 383px;
    padding: 4px 8px;
     line-height: 1.3;
    border: 1px dashed #FFCD61;
}
    
.form-media-wrap .memo-cell-edit input {
    background: none repeat scroll 0 0 lemonchiffon;
    border: 1px solid #FFCD61;
    color: black;
    font-size: 16px;
    margin: 6px 20px 12px;
    width: 383px;
    padding: 6px 8px;
}

pre.longText {  
    border: 0 none;
    border-radius: 4px 4px 4px 4px;
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    margin: 6px 0 0;
    min-height: 10px;
    min-width: 200px;
    width: 100%;
    padding: 7px 2px;
    background:#fff;
    font-family: "Helvetica Neue","Helvetica","Arial","sans-serif";
    }
pre {word-break: normal;word-wrap: normal;white-space:normal;}
pre.longText-edit:hover {   }

    
    
.userControls span {display:none;}
.userControls a { height: 20px; width: 20px;float:left;  margin-right: 8px;}





/*  my fotobabble list is the thumbs attached to a Project (the ones uploaded from the phone)... class name is a hold over from fotobabble...  */

#myFotobabblesList {
    margin-left: 20px;
    }
#myFotobabblesList .fotobabble-sumary {
    float: left;
    height: 40px;
    margin: 0 10px 10px 0;
    width: 40px;
    height: auto;
    width: auto;
}



/* 
    NEW :) OVERLAY STUFF 
--------------------------------------------------- */

.modal-backdrop { background-color: #FFFFFF;}
.modal.fade.in {top: 50%; top: 20%;} /* save for reference*/
.modal.fade.in {top: 200px; top: 170px;}
.modal.fade {top: -25%;transition: opacity 0.3s linear 0s, top 0.3s ease-out 0s;}
.fade.in {opacity: 1;}

.modal {
    background-clip: padding-box;
    background-color: #FFFFFF;
    border:0px solid rgba(0, 0, 0, 0.3);
    border-radius: 2px ;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.6);
    left: 50%;
    margin: -142px 0 0 -476px;
    outline: medium none;
    position: fixed;
    top: 50%;
    width: 960px;
    z-index: 6050;
    }

.modal-body {max-height: 640px;overflow-y: auto;padding: 15px;position: relative;}
.modal-backdrop { z-index: 6000;}





/* classic photo viewer stuff*/




#showImageModal.modal {border:none;border-radius: 2px;}
#showImageModal .close {font-size: 30px;font-weight: normal;}
#showImageModal .close:hover {color: #000;opacity: .8;}
#showImageModal .modal-body {overflow: hidden;}
#showImageModal .modal-photo { 
    left: 15px;
    position: absolute;
    top: 15px;
}
#showImageModal .photoNavPrevNext { }

/*these have smaller targets so users can right click on the center of the image to download*/
#showImageModal .photoNavPrevNext .nextPhoto {
    height: 600px;
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
}
#showImageModal .photoNavPrevNext .prevPhoto {
    height: 600px;
    left: 0;
    position: absolute;
    right: 300px;
    top: 0;
    width: 100px;
}

#showImageModal .photoNavPrevNext .prevPhoto span {
    background: transparent url("../images/portal/arrowPrevPhoto.svg") no-repeat scroll 0 0 / 20px auto;
    left: 20px;
}
#showImageModal .photoNavPrevNext .nextPhoto span {
    background: transparent url("../images/portal/arrowNextPhoto.svg") no-repeat scroll 0 0 / 20px auto;
    right: 20px;
}
#showImageModal .photoNavPrevNext .prevPhoto span,
#showImageModal .photoNavPrevNext .nextPhoto span {
    font-size: 50px;
    height: 40px;
    position: absolute;
    top: 270px;
    width: 20px;
    opacity: 0;
    -webkit-transition: opacity 0.6s ease-out;  
       -moz-transition: opacity 0.3s ease-out;  
        -ms-transition: opacity 0.3s ease-out;  
         -o-transition: opacity 0.3s ease-out;  
            transition: opacity 0.3s ease-out;
}
#showImageModal:hover .photoNavPrevNext .prevPhoto span,
#showImageModal:hover .photoNavPrevNext .nextPhoto span {opacity: .4;}

#showImageModal:hover .photoNavPrevNext .prevPhoto:hover span,
#showImageModal:hover .photoNavPrevNext .nextPhoto:hover span {opacity: 1;}
.flaggedImage {
    background: rgba(0, 0, 0, 0) url("../images/portal/flagBadge.svg") no-repeat scroll 0 0 / 38px auto;
    height: 38px;
    left: 0;
    position: absolute;
    top: 0;
    width: 38px;
    opacity:0;
    -webkit-transition: opacity 0.6s ease-out;  
       -moz-transition: opacity 0.3s ease-out;  
        -ms-transition: opacity 0.3s ease-out;  
         -o-transition: opacity 0.3s ease-out;  
            transition: opacity 0.3s ease-out;
}
#showImageModal:hover .flaggedImage {opacity: 1;}
.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#showImageModal  .modal-data {margin: 0 0 0 620px;width: 310px;}
#showImageModal .fieldNav {position: relative;border-bottom: 1px solid #ccc;height: 30px;}

#showImageModal .fieldNav a {display: inline-block;height: 25px;width: 20px;
    opacity: .2;
    -webkit-transition: opacity 0.6s ease-out;  
       -moz-transition: opacity 0.3s ease-out;  
        -ms-transition: opacity 0.3s ease-out;  
         -o-transition: opacity 0.3s ease-out;  
            transition: opacity 0.3s ease-out;
        }
#showImageModal .fieldNav a:hover {opacity: 1;}
#showImageModal .fieldNav .prevField {
    background: transparent url("../images/portal/arrowPrevField.svg") no-repeat scroll 2px 3px / 10px auto;
}
#showImageModal .fieldNav .nextField {
    background: transparent url("../images/portal/arrowNextField.svg") no-repeat scroll 2px 3px / 10px auto;
}
#showImageModal #photoInfo {
    height: 640px;
    /*outline: 1px dotted #ff0000;*/
    position: absolute;
    right: 15px;
    top: 10px;
}
#showImageModal #photoInfo .inner {
    /*background: #ffc0cb none repeat scroll 0 0;*/
    height: 596px;
    overflow-x: hidden;
    /*overflow-y: scroll;*/
    padding-right: 12px;
    -ms-overflow-style: none;
}
#showImageModal #photoInfo .fieldName {
    font-weight: bold;
    font-size: 16px;
    margin:12px 0 0 0;
}
#showImageModal #photoInfo .fieldValue {
    font-size: 14px;
    margin: 6px 0 0;
  /*  max-height: 3em;
    min-height: 1.5em;*/
    /*overflow: scroll;*/
    -ms-overflow-style: none;
}
#showImageModal #photoInfo .fieldComment {
    color: #a7a7a7;
    font-size: 12px;
    font-weight: normal;
    line-height: 1.4;
    margin: 6px 0 0;
  /*  max-height: 4em;*/
    /*overflow: scroll;*/
}
#showImageModal .flagPhoto {margin:0px 0 16px 0;color:#888}
#showImageModal .flagPhoto input {float: left;margin: 5px 8px 0 6px;}
#showImageModal #photoInfo .photoMetaData {
    height: 95px;
    margin: 12px 0 0;
    position: relative;
}


#showImageModal  #googleMapDiv {float:left;width: 100px;  margin: 0 16px 0 0;}
/*this version is breaking in Mitch's portal in windows chrome - still not sure why. The version below uses absolute positiong
#showImageModal .metaDataList {float: left;margin-left: 2px;width: 160px;}*/
#showImageModal .metaDataList {
    float: left;
    margin: -9px 0 0;
}
#showImageModal .googleMapBlank {
    height: 100px;
    width: 100px;
    background: #f6f6f6 ;
    float: left;
    margin-right: 16px;
}
#showImageModal #photoInfo .photoMetaData .metaData {
    color: #999;
    /*float: left;*/
    font-size: 12px;
    margin: 4px 0;
    padding: 0 0 0 24px;
    max-width: 160px;
    height: 1.6em;
    overflow: hidden;
}
.capturedOn {background: rgba(0, 0, 0, 0) url("../images/portal/miniCapturedOn.svg") no-repeat scroll 0 4px / 14px auto;}
.uploadedOn {background: rgba(0, 0, 0, 0) url("../images/portal/miniUploadedOn.svg") no-repeat scroll 0 4px / 14px auto;}
.uploadedBy {background: rgba(0, 0, 0, 0) url("../images/portal/miniUploadedBy.svg") no-repeat scroll 0 4px / 14px auto;}
.latLong {background: rgba(0, 0, 0, 0) url("../images/portal/miniMapPin.svg") no-repeat scroll .5px 4px / 14px auto;}

.azimuth {background: rgba(0, 0, 0, 0) url("../images/portal/miniCompass.svg") no-repeat scroll .5px 4px / 14px auto;}
.angle {background: rgba(0, 0, 0, 0) url("../images/portal/miniAngle.svg") no-repeat scroll 4px 4px / 12px auto;}
.altitude {background:rgba(0, 0, 0, 0) url("../images/portal/miniElevation.svg") no-repeat scroll 2px 6px / 16px auto;}


#showImageModal  .toggleImageMetaData a {font-size: 12px;}

#showImageModal  .imageData ul {margin:0;}
#showImageModal .photoCaption {
    clear: left;
    padding: 20px 0 0;
}
#showImageModal .photoCaption form {margin:0;}
#showImageModal .caption-cell-edit textarea {
    background: #ffffff none repeat scroll 0 0;
    box-shadow: none;
    color: #333;
    font-size: 12px;
    font-weight: normal;
    height: 3.6em;
    width: 265px;
    resize: vertical;
}


#showImageModal #prevNextThumNav {margin:0;}
#showImageModal #photoInfo .thumbnailWrap {width: 315px;}
#showImageModal .thumbnailWrap img {height: 50px;width: 50px;margin:0 3px 6px;}

#showImageModal  .viewFullImage a {
    background: rgba(0, 0, 0, 0) url("../images/portal/viewFullSize.svg") no-repeat scroll 0 0 / 24px auto;
    font-size: 13px;
    height: 25px;
    padding-top: 12px;
    position: absolute;
    right: 0;
    top: 568px;
    width: 33px;
}
#showImageModal .preThumb {position: relative;display: inline-block;}
#showImageModal .currentThumb {
    border: 2px solid #419bf8;
    box-shadow: 0 333px rgba(255, 255, 255, 0.3) inset;
    height: 48px;
    left: 2px;
    position: absolute;
    top: -1px;
    width: 48px;
}
#showImageModal .flaggedThumb {
    background: rgba(0, 0, 0, 0) url("../images/portal/flagBadge.svg") no-repeat scroll 0 0 / 14px auto;
    height: 25px;
    left: 3px;
    position: absolute;
    top: 0;
    width: 22px;
}

#showImageModal #photoInfo .field-value span {
    border: 0 none;
    display: block;
    font-weight: normal;
    padding: 0;
    width: 100%;
}






#showImageModal .caption-cell-edit textarea {
    background: none repeat scroll 0 0 #FFFFFF;
    /*box-shadow: 0 0 6px rgba(0, 0, 0, 0.3) !important;*/
    color: #333;font-size: 12px;
    font-weight: normal;
    height: 3em;
    width: 253px;
    /*box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;*/
    box-shadow: none;

}
#showImageModal .caption-cell-edit textarea:focus {
border:1px solid rgba(82, 168, 236, 0.8);
    /*box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.6);*/
    box-shadow: none;
    outline: 0 none;
    background: rgba(82, 168, 236, 0.1);}



#showImageModal #player-html5 .jp-audio {height: 70px;}




/* Vertical wrap engine ---------------------------------------------------------------------------
----------------------------------------------------------------------------------------------*/
#showImageModal .v-wrap {
    height: 600px;
    white-space: nowrap;
    text-align: center;
}
#showImageModal .v-wrap:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 0;
    /* adjust for white space between pseudo element and next sibling */
    margin-right: -.25em;
    /* stretch line height */
    height: 600px; 
}
#showImageModal .v-box {
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
    width: 600px;
}




/*phot utility menu*/
#showImageModal .photo-utilities {
    position: absolute;
    top: 550px;
    right: 0px;
}
#showImageModal .photo-utilities .dropdown-toggle {
    display:inline-block;
    background: url(../images/portal/more-btn-photo-overlay.svg )no-repeat scroll 0 0 / 30px auto;
    height: 30px; width: 40px;
    opacity: 0.5;
    transition: opacity 0.3s ease-out 0s;}
#showImageModal .modal-photo:hover .photo-utilities .dropdown-toggle {opacity: 1;}
#showImageModal .photo-utilities .dropdown-menu {top: -40px;}
#showImageModal  .photo-utilities .dropdown-menu hr {margin: 10px 0;}
#showImageModal .dropdown-menu .danger, #showImageModal .dropdown-menu .danger :hover {color:red !important;}















/*NOTE: the #photoInfo is used on the teknion stuff, are these rules in TKN css? if so, delete here... */
#showImageModal #photoInfo {
    height: 640px;
    position: absolute;
    right: 15px;
    top: 10px;
}
#showImageModal #photoInfo .inner {
    height: 596px;
    overflow-x: hidden;
    padding-right: 12px;
    -ms-overflow-style: none;
}
#showImageModal #photoInfo .fieldName {
    font-weight:bold;
    font-size: 16px;
    margin:12px 0 0 0;
}
#showImageModal #photoInfo .fieldValue {
    font-size: 14px;
    margin: 6px 0 0;
    -ms-overflow-style: none;
}
#showImageModal #photoInfo .fieldComment {
    color: #a7a7a7;
    font-size: 12px;
    font-weight: normal;
    line-height: 1.4;
    margin: 6px 0 0;
}
#showImageModal #photoInfo .photoMetaData {
    height: 95px;
    margin: 12px 0 0;
    position: relative;
}
#showImageModal .modal-data {margin: 0 0 0 620px;width: 310px;}

/*end TKN styles - */




















/* upload a photo Overlay*/
#createFotonoteModal {width: 600px;}

#createFotonoteModal.modal {margin-left: -280px;}


#export-search-modal  input[type="text"] {width: 400px;}


/*add service modal stuff*/


/*#addCompanyServiceModal, #editCompanyServiceModal, #editCompanyInfotModal {
    margin-left: -360px;
        width: 730px;
    }*/
#addCompanyServiceModal, #editCompanyServiceModal, #editCompanyInfotModal {
    margin-left: -295px;
    width: 600px;
}

#addCompanyServiceModal  th, #addCompanyServiceModal  td,
#editCompanyServiceModal  th, #editCompanyServiceModal  td {
    border: 0;
    padding-right: 20px;
    }


.setServiceName  input   {width: 200px;}
.setServiceKey   input   {width: 200px;}
.setServiceFixed  input  {width: 80px;}
.setServiceVariable input{width: 80px;}
.setServiceUnit     input {width: 200px;}
#addCompanyServiceModal  input,
#editCompanyServiceModal  input {font-size: 14px;}
#addCompanyServiceModal .setServiceUnit input,
#editCompanyServiceModal .setServiceUnit input {
    /*width:94%;*/
}



#addVendorServiceModal {margin-left: -260px;
    width: 500px;}


#deleteCompanyServiceModal {
    height: auto;
    margin-left: -230px;
    margin-top: 80px;
    width: 410px;
    top:0;
}
#deleteCompanyServiceModal h4 {font-size: 14px}
#deleteCompanyServiceModal p {font-size: 14px}
#deleteCompanyServiceModal .form-controls {text-align: right;}
/*#deleteCompanyServiceModal .form-controls .btn-cancel {color:red;border:1px solid red;background: #fff;text-shadow:none;box-shadow: none;height: 28px;}*/

.form-actions-proto .btn-primary {background: #3a88fe; color: #fff;border-radius: 0; padding: 4px 25px;}
.form-actions-proto .btn-primary:hover {background:#4b92fc;}
.form-actions-proto .btn-cancel {
    background: #ffffff none repeat scroll 0 0;
    border: 1px solid #ccc;
    border-radius: 0;
    color: #666;
    padding: 3px 20px;
}
.form-actions-proto .btn-cancel:hover {border: 1px solid #999;color: #333;}
.form-actions-proto .pleaseWait {
    text-align: center;
    margin: 20px 0;
    display: block;
}
.form-actions-proto .pleaseWait img {
    display: block;
    margin: 10px auto;
}

#createVendorModal {margin-left: -320px; width: 650px;}
.primaryContactForm {margin-left: 20px;}
#createVendorModal h4 {font-size: 14px; font-weight: bold;margin:0 0 20px 0;}
#createVendorModal .companyState {float: left;margin-right: 1.3em;}

#createVendorModal input {margin-bottom: 10px;}
#createVendorModal label {font-size: 13px;}
#createVendorModal label .required {color:red;}
#createRelationModal input,
#vendorInfoModal input {width:320px;}
.companyState input {width: 12em}
#createRelationModal .companyZip input,
#vendorInfoModal .companyZip input,
#vendorInfoModal .companyState input {width: 5em}

/*use this rule please*/
.modal-body h3 {font-size: 16px;font-weight: bold;margin-top: 10px;}
.modal-body h4 {font-size: 14px;font-weight: bold;}
.modal-body label, .modal-body p  {font-size: 14px;font-weight: 400;}
/*#exportSearchResultsForm .modal-body input {
    width: 380px;
    margin-bottom: 1rem;
    font-size: 16px;
    padding: 5px;
}*/
#exportSearchResultsForm  .styled-select,
#reportModal  .styled-select {
    width: 390px;
    height: 2rem;
    margin-bottom: 1rem;
}
#exportSearchResultsForm  .styled-select  select ,
#reportModal  .styled-select  select {
    font-size: 16px;
    height: 2rem;
    width: 410px;
}
/*#export-search-modal input[type="checkbox"] {
    width: auto;
    margin:auto;
}*/

.modal-body .row-fluid .control-group {
    float: left;
    margin-bottom: 15px;
    margin-right: 20px;
}

#editVendorServiceModal, #addVendorServiceModal {
   margin-left: -230px;
    width: 500px;
}
#editVendorServiceModal th, #addVendorServiceModal th,
#editVendorServiceModal td, #addVendorServiceModal  td {border:0;}

#editVendorRelationshipModal {
    margin-left: -380px;
    width: 760px;
}

#editVendorRelationshipModal .modal-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-column-gap: 20px;
}
#editVendorRelationshipModal .modal-body > div {overflow: hidden;}
#editVendorRelationshipModal  .vendorKey  {clear: left;width:auto;}
#editVendorRelationshipModal .relationshipForm {}
#editVendorRelationshipModal input, 
#editVendorRelationshipModal select, 
#editVendorRelationshipModal textarea {
    font-size:13px;
    resize:none;
}
#editVendorRelationshipModal .setStatus  select {width: 12em;}
#editVendorRelationshipModal .vendorKey  input {width: 11em;}
#editVendorRelationshipModal .coverageArea  textarea,
#editVendorRelationshipModal .relationshipNotes textarea,
#editVendorRelationshipModal .serviceNotes textarea {
    width: 25em;
 }
#editVendorRelationshipModal .insuranceValid {margin-right: 50px;}
#editVendorRelationshipModal .vendorCategory   select {width: 12em;}
#editVendorRelationshipModal .vendorRating   select {width: 4em;}
#editVendorRelationshipModal .accessToTypes {}
#editVendorRelationshipModal .accessToTypes .helpText {
    font-size: 12px;
    font-weight: bold;
    color: rgb(102, 102, 102);
    margin: 10px 0px 10px 27px;
    font-style: italic;
}
#editVendorRelationshipModal .accessToTypes .checkbox-types {
    border-bottom: 1px solid #ccc;
    padding: 0 0 10px 0;
    max-height: 240px;
    margin: 0 0 20px 0;
    overflow-x: hidden;
    overflow-y: scroll;
    overflow: auto;
}
#editVendorRelationshipModal .accessToTypes .checkbox-types input {margin:-2px 1em 0 0;}

#editConnectToVendorModal {margin-left: -230px;width: 420px;}
#editConnectToVendorModal input {font-size:13px;}

#uploadDocumentModal.modal,
#editDocumentModal.modal {margin-left: -280px;}
#uploadDocumentModal,
#editDocumentModal { width: 600px;}

#uploadDocumentModal .uploading {margin-top: 0.4em;}
#uploadDocumentModal .showFileName {margin-top: 0.4em;}
#uploadDocumentModal .ie-assist {color: #666;display: inline-block;font-size: 12px;padding: 1px 0 0 110px;}
#uploadDocumentModal .renameDocument {width: 400px;}
#uploadDocumentModal .hideFromCustomer.control-group,
#uploadDocumentModal .hideFromWorker.control-group  {margin: 10px 0;}
#uploadDocumentModal .hideFromCustomer input[type='checkbox'],
#uploadDocumentModal .hideFromWorker input[type='checkbox'] {float: left;margin-top: 6px;}
#uploadDocumentModal .hideFromCustomer label,
#uploadDocumentModal .hideFromWorker label {padding: 0 0 0 9px;}

#editDocumentModal .ie-assist {color: #666;display: inline-block;font-size: 12px;padding: 1px 0 0 110px;}
#editDocumentModal .renameDocument {width:556px}
#editDocumentModal .hideFromCustomer.control-group,
#editDocumentModal .hideFromWorker.control-group  {margin: 10px 0;}
#editDocumentModal .hideFromCustomer input[type='checkbox'],
#editDocumentModal .hideFromWorker input[type='checkbox'] {float: left;margin-top: 6px;}
#editDocumentModal .hideFromCustomer label,
#editDocumentModal .hideFromWorker label {padding: 0 0 0 9px;} 
#editDocumentModal .deleteDocument {float: left;}


.editCompanyAddress {float: left;margin-bottom:0 !important;width: 340px;}
.editContactPersonInfo {
    margin-left: 20px;
}


/*project permissions Overlay*/
#shareModal {
    margin-left: -340px;
    width: 740px;
}

#shareModal .addPanel {
    border-bottom: 1px solid #dddddd;
    margin-bottom: 26px;
    padding: 0 10px 0 0;
}
#shareModal .control-group {float:left;margin-right: 20px}

.addPanel .setUser .styled-select  {width: 230px;}
.addPanel .setUser .styled-select select {width: 296px;}
.addPanel .setPermission {}
.addPanel .notifyUser {margin:27px 0 0 0;}
.addPanel .notifyUser input {margin: 2px;}
.addPanel .addUser {margin: 23px 0 0 0px;}




.shareWith {
    height: 260px;
    margin-left: 0;
    overflow: auto;
}
.shareWith > li {
    clear: left;
    float: left;
    padding: 8px 0;
    position: relative;
    width: 100%;
    font-size: 14px;
}

.shareWith .userName {
    display: inline-block;
    width: 30%;
}
.shareWith .sharePermissions {display: block;}




 
.editPermission {
    left: 80%;
    position: absolute;
    top: -1px;
    }
.editPermission.isAdmin {
    background: none repeat scroll 0 0 #EEEEEE;
    border-radius: 6px;
    color: #333;
    padding: 0 6px;
    }

.shareWith .btn-group.open .btn.dropdown-toggle {
    background-color: rgba(0, 0, 0, 0);
    box-shadow: none;
    color: #ccc;
    }
.shareWith .btn-group > .btn, .shareWith .btn-group > .dropdown-menu, .shareWith .btn-group > .popover {
    font-size: 11px;
    text-transform: uppercase;
    padding: 10px 0;
    text-shadow: none;
    }
.shareWith  .editPermission > .btn-flat {
    font-size: 14px;
    text-transform: capitalize;
    }
.editPermission > .dropdown-menu-flat {
    right: -70px;
    top: 20px;
    }
.editPermission > .dropdown-menu-flat li:last-child a {color: red;}
.editPermission > .dropdown-menu-flat a {text-transform: capitalize;font-size: 14px;color: #444;}
.shareEmail {
    color: #0080FF;
    }
.editPermission > .btn-group.open .dropdown-toggle {
    background-image: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
    color:red;
    }    
#shareModal form {
    }

.addPanel h5 {
    margin-bottom: 0;
    }
.addPanel p {
    color: #666666;
    font-size: 12px;
    }
.addPanel  p input[type="checkbox"] {
    display:inline-block;
    margin-top: 0;
    }

h3 .ikon {
    display: inline-block;
    margin: 0 8px -4px 0;
    }

/*this needs to be onsolodated into the new modal styles*/
#reportModal, 
#imageZipModal, 
#export-search-modal, 
#save-search-modal, 
#newProjectModal,
#exportCSVModal,
#batchCreateModal,
#newContainedModal,
#deleteSearchModal,
#permDeleteProjectModal,
#confirmViewCreateModal,
#removeVendorRelationModal,
#newTemplateModal,
#createNewTypeModal {
    margin-left: -225px;
    width: 450px;

}
#newTemplateModal {top:170px;}
/*#reportModal .select-role {margin: 0 0 20px;}*/
/*#reportModal .reportOptions {padding: 10px 0 0;}*/
/*#reportModal .reportOptions input {margin: 0 7px 0 0;}*/

/*#reportModal .modal-footer {
    border-top: medium none;
}
*/
#imageZipModal .includeOnlyFlaggedPhotos label.radio {
    margin-left: 30px;

}
#imageZipModal .includeOnlyFlaggedPhotos label.radio input {
    display: inline-block;
    margin-right: 12px;
}

/*
#reportModal .btn-primary, 
#imageZipModal .btn-primary, 
#export-search-modal .btn-primary {
    color:#fff;
    margin-left: 10px;
}
*/

/* these are depricated

#reportModal .cancel {
    background: #ffffff none repeat scroll 0 0;
    border: 1px solid #ccc;
    color: #999;
    padding: 4px 12px;
}
#reportModal .cancel:hover {
    background: #ffffff none repeat scroll 0 0;
    border: 1px solid #0080FF;
    color: #0080FF;
    padding: 4px 12px;
}

*/

#export-search-modal {}
#save-search-modal input[type="text"] {
    margin: 0 0 20px 0;
    width: 376px;
}


#newProjectModal .styled-select,
#newContainedModal .styled-select,
#save-search-modal .styled-select {
    width: 100%;
    height: 2rem;
}
#newProjectModal .styled-select select,
#newContainedModal .styled-select select,
#save-search-modal .styled-select select {
    width: 105%;
    font-size: 16px;
    height: 2rem;
}
#newProjectModal .containerSearchResults {
    margin: -2px 0 0 1px;
    box-shadow: 0px 4px 3px rgba(0, 0, 0, .5);
    z-index: 1;
    width: 391px;
}
#newProjectModal .containerSearchResults li a {
    margin:0;
    padding: 3px 10px;
    display: block;
}
#newProjectModal .containerSearchResults li a {
    color: #000;
    width: 95%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
}
#newProjectModal .containerSearchResults li a .tooltiptext {
        visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}
#newProjectModal .containerSearchResults li a:hover .tooltiptext {
    visibility: visible;
}
#newProjectModal .containerSearchResults li a:hover {
    color: #fff;
    background: #1a73e8;
}
#newProjectModal .containerSearchResults .noResults {
   color: #999;
   padding: 10px 10px;  
}
#newProjectModal .selectedContainer {
    background: #f6f6f6;
    padding: 10px;
    border-radius: 3px;
}
#newProjectModal .selectedContainer img {
    width: 50px;
    float: left;
    margin: 0 10px 0 0;
}
#newProjectModal .selectedContainer h5 {
    font-size: 12px;
    margin: -5px 0 0 0;
    padding: 0;
}
#newProjectModal .selectedContainer p {
    font-size: 12px;
    line-height: 1.3;
    margin: 0 0 0 60px;
}



#acceptDeclineWorkflowModal,
#completeConfirmWorkflowModal {
    margin-left: -170px;
    width: 350px;
    top: 290px;
}

#acceptDeclineWorkflowModal .reasonForDecline {
    border-radius: 6px;
    display: block;
    margin-left: -70px;
    margin-top: -113px;
    width: 500px;
}
#acceptDeclineWorkflowModal .reasonForDecline .assignFeedback {border:0;}
#acceptDeclineWorkflowModal .reasonForDecline input {
    display: block;
    height: 2em;
    margin: auto;
    width: 94%;
}

#acceptDeclineWorkflowModal .reasonForDecline .assignFormControl {
    border: 0 none;
    padding: 12px;
}


/*All the fn_modal rules in one place*/
.fn_modal {
    border: none;
    border-radius: 2px;
}
.fn_modal .modal-header,
.fn_modal .modal-body,
.fn_modal .modal-footer {
    border:none;
    padding: 10px 30px;
}
.fn_modal .modal-header h3,
.fn_modal .modal-header h4 {
    font-size: 20px;
    font-weight: 400;
    color: #000;
    letter-spacing: .025em;
    margin: 10px 0 0 0;
    font-weight: normal;
    text-transform: capitalize;
}
.fn_modal .modal-header h4 strong {
    font-weight: bold;
}
.fn_modal .modal-header .close {
    font-size: 30px;
    font-weight: normal;
    opacity: 1;
    text-transform: uppercase;
}
.fn_modal .modal-footer {
    padding-bottom: 20px;
}
.fn_modal  form {
    margin:0;
}
.fn_modal .form-horizontal .control-label {
    float: left;
    padding-right: .25em;
    padding-top: 5px; 
    text-align: right;
    width: auto;
}

.fn_modal .form-horizontal .controls {
    margin-left: auto;
}

.fn_modal label input[type="checkbox"] {
    display: inline-block;
    margin: -2px 6px 0 0;
}


/* for the SHARE modal on the show page */
.fn_modal .editPanel h4 {border-bottom: 1px solid #EEEEEE;margin-left: 15px;padding: 0 0 5px;}




/* for the addExistingCompanyModal modal on the vendor list page*/

.fn_modal .searchBar input[type="text"], 
.ps2 .searchBar input[type="text"]:focus {
    display: block;
    border: none;
    float: left;
    width: 368px;
    background: url("../images/portal/p_bttn_search.png") no-repeat scroll 0px center transparent;
    box-shadow: none;
    padding-left: 24px;
}
.fn_modal .searchBar button {
    border-radius: 2px;
    border: 1px solid #ddd;
   
}








#copyProjectModal {
    margin-left: -400px;
    width: 800px;
}
#copyProjectModal select {
    width: 340px;
}
#copyProjectModal .styled-select {
    width: 335px;
}
#copyProjectModal .modal-body label input {
    display: inline-block;
    margin-right: 1em;
}
#copyProjectModal .hint {
    color: #666666;
    display: inline-block;
    font-size: 12px;
    margin: 12px 0;
    line-height: 1.4;
}

#copyProjectModal .modal-body {
    max-height: calc(100vh - 240px);
    }
.groupItem {
    border-top:2px solid #f6f6f6;
    margin: 0;
    background: #fff;
    display: flex;
}
.groupItem input {
    margin: 10px;
}
.groupItem ul {
    margin: 10px;
}
.groupItem ul li {
    line-height: 1.2;
}
.groupItem ul li:first-child {
    font-weight: bold;
}
.groupItem ul li:nth-child(2) {

}

#copyProjectModal .itemsToCopy {
    background: #f6f6f6;
    padding: 5px 20px 35px 20px;
}
.itemsToCopy h4 {
    margin: 20px 0 5px 0;
}
.itemsToCopy h5 {
    background: #ececec;
    padding: 10px 20px 5px 10px;
    border-radius: 2px 2px 0 0;
    margin: 10px 0 0 0;
}
.itemsToCopy .itemSection {
    margin-bottom: 20px;
}








.form-actions-proto .btn-primary {
    background: #1a73e8 none repeat scroll 0 0;
    border-radius: 4px;
    color: #ffffff;
    padding: 10px 25px;
    letter-spacing: 1.5px;
    font-size: 14px;
    font-weight: 500;
}
.form-actions-proto .btn-primary:hover {
    background: #4389e6;
    box-shadow: 1px 1px 3px #7db1f6;
}
.form-actions-proto .btn-secondary {
    background: #f2f2f2;
    border: none;
    border-radius: 4px;
    color: #5f6368;
    padding: 10px 25px;
    letter-spacing: 1.5px;
    box-shadow: none;
}
.form-actions-proto .btn-secondary:hover {
    background: #eee;
    box-shadow: 1px 1px 3px #999;
}
.form-actions-proto .btn-cancel {
    background: #fff;
    border: none;
    border-radius: 4px;
    color: #5f6368;
    padding: 10px 25px;
    letter-spacing: 1.5px;
    box-shadow: none;
}
.form-actions-proto .btn-cancel:hover {
    background: #f2f2f2;
    border: none;
}
.form-actions-proto .btn-danger {
    background: #da4f49 none repeat scroll 0 0;
    border-radius: 4px;
    color: #ffffff;
    padding: 10px 25px;
    letter-spacing: 1.5px;
    font-size: 14px;
    font-weight: 300;
}
.form-actions-proto .btn-danger:hover {
    background: #ef7570;
    box-shadow: 1px 1px 3px #ffccca;
}
.form-actions-proto  .deleteThisUser {
    background: #fff4f4 repeat scroll 0 0;
    border: none;
    box-shadow: none;
    color: #d93025;
    float: left;
    font-size: 14px;
    letter-spacing: 1.5px;
    text-shadow: none;
    padding: 10px 25px;
    border-radius: 4px;
}
.form-actions-proto  .deleteThisUser:hover {
    background: #f9d3cf repeat scroll 0 0;
    border: none;
    color: #d93025;
    text-shadow: none;
    text-decoration: none;
    
}
.fotobabbleAuthor {   font-size: 12px;padding: 0 12px 0 0;text-align: left;}


#createFotonoteModal #html5Image {margin-left: 30px;width: 25%;}
#createFotonoteModal .modal-footer > a {display: inline-block;margin-right: 1em;}


/* 
    OLD OVERLAY STUFF 
--------------------------------------------------- */


.noAudio {
    font-style: italic;
}
.fotobabble {
    position: relative;
    z-index: 2008;
}

#recordWidgetWrap {
    background: none repeat scroll 0 0 transparent;
    height: 142px;
    margin-bottom: 20px;
    position: relative;
    width: 620px;
    z-index: 2009;
}
#player-box {
    height: 160px;
    margin: 20px 0;
    position: absolute;
    top: -27px;
}

.ui-widget-content .btn-primary {
    color: #FFFFFF;
}




/*  Overlay styles on the project page - view photos, play audio, uploade and create  */

#player-html5 .noAudio {
    color: #999;
    font-size: 12px;
    line-height: 1.2;
    padding-right: 12px;
    text-align: right;
    }




/*
ADMIN PAGES 
________________________________________________

*/

.emailResetForm {clear: left;float: left;width: 100%;margin-top: 40px;}

#manageAccess {}
#manageAccess  td {font-size:14px;}

#subheader {margin-bottom: 20px;}
#subheader h1 {margin:0;padding:0;}
#subheader p {margin:0;}

#AddPerson {background: none repeat scroll 0 0 #F6F6F6; margin-bottom: 20px; padding: 12px 20px 18px; text-align: left;}

#userPermissionsTable table {width: 100%;}
#userPermissionsTable  th {border-bottom: 1px solid #333;color: #666666;font-size: 16px;font-weight: normal;text-align: left;padding:0;border-top: 0 none;}
#userPermissionsTable  td {border-bottom: 1px dotted #ccc;padding: 6px 0; }

.userProfileImg  {position: relative;width: 50px;}
.userProfileImg img {height:35px;width:35px;}

  
#adminPermissionsTable table {width: 100%;}
#adminPermissionsTable th {border-bottom: 1px solid #333;color: #666666;font-size: 16px;font-weight: normal;text-align: left;}

#adminPermissionsTable td {border-bottom: 1px dotted #ccc;padding: 6px 0; }
.userProfileImg  {position: relative;width: 50px;}
.userProfileImg img {height:35px;width:35px;border-radius: 20px;display: inline-block;background: #ccc;}



.savingStatus {padding-left: 16px;}
.savingStatus .savedMessage {background:#FFFFD7;padding: 2px;}


#AddPerson  .enabled {background: none repeat scroll 0 0 #0080FF;border: 0 none;color: #fff;cursor: pointer;font-size: 16px;padding: 4px 26px;}
/*  disabled state below... need to add a class to input when it's ready to submit */
#AddPerson  .disabled {background: none repeat scroll 0 0 #ddd;border: 0 none;color: #999;cursor: pointer;font-size: 16px;padding: 4px 26px;}


.adminPages {
    padding-top: 30px;
}
.adminPage-iceCream {
    display: grid;
    grid-template-rows:50px 50px calc(100vh - 150px);
    grid-template-colums: 1fr;
    padding-top: 40px;
    grid-template-areas: 
    "title-bar"
    "utility-bar"
    "main-content";
}

.title_bar {
  grid-area: title-bar;
  display: flex;
  flex-direction:row;
  justify-content:space-between;
  align-items: center;
  /*background: orange;*/
  border-bottom: 1px solid #ddd;
}
.title_bar h2 {
    font-size: 18px;
    margin-right: 1em;
}
.title_tools {
    display: flex;
    flex-direction:row;
    justify-content:flex-start;
    align-items: center;
}
.utility_bar {
  grid-area: utility-bar;
  display: flex;
  flex-direction:row;
  justify-content:space-between;
  align-items: center;
  /*background: yellow;*/
}
.utility_bar form {
    display: flex;
    flex-direction:row;
    justify-content:flex-start;
    align-items: center;
    margin:0;
}
.utility_bar .search-query {
    margin-left: 1em;
}
.utility_bar .checkbox {
    font-weight: 400;
    margin-right: 1em;
}
.utility_bar .top-pager {
    display: flex;
    flex-direction:row;
    justify-content:flex-start;
    align-items: center;
}
.utility_bar .pagination {
    margin: 0 0 0 1em;
    overflow: hidden;
    display: flex;
}
.utility_bar .pagination .styled-select {
    width: 4em;
    margin: 0 0 0 10px;
    border-radius: 4px;
    height: 28px;
        background: #fff url(../images/portal/styled-select.svg) no-repeat scroll 84% 50%;
}
.utility_bar .pagination .styled-select select {
    width: 4.4em;
}
.main_content {
  grid-area: main-content;
  overflow: auto;
}
.main_content  #fn_type_list {
    margin-top: 20px;
    /*this is kinda hacky */
}
.adminPage-iceCream .main_content tbody  {
    /*iceCream pages have a table only in the main-content section*/
    height:calc(100vh - 220px);
    min-width: 998px;
}
.main_content td {
    overflow: hidden;
}
/*set the vendor and customer table (both views share the same table)*/
.vendorName {
    width:24%;
    /*this is 4% more than the vendor table needs, but if fixes the customer table which otherwise falls short*/
}
.vendorKey {
    width:4%;
}
.vendorPhone {
    width:8%;
}
.vendorEmail {
    width:8%;
}
.vendorCity {
    width:8%;
}
.vendorState {
    width:8%;
}
.vendorZip {
    width:8%;
}
.vendorDist {
    width:8%;
}
.vendorStatus {
    width:8%;
}
.vendorRating {
    width:12%;
}
.vendorConnected {
    width:8%;
}

.forceWrapTD td {
  overflow-wrap: break-word;
  word-wrap: break-word;
}





/*User table columns*/

.userProfileImg {
    width: 4%;
}
.userID {
    width: 4%;
}
.userDisplayName {
    width: 14%;
}
.userEnabled {
    width: 4%;
}
.userTitle {
    width: 12%;
}
.userRealName {
    width: 12%;
}
.userRole {
    width: 12%;
}
.userExternalID {
    width: 8%;
}
.userEmail {
    width: 14%;
}
.userPhoneNumber {
    width: 14%;
}
.userUtility {
    width: 2%;
}


/*type table*/

.typeMoveRow {
    width: 2%;
    position: relative;
    /*background: orange;*/
}
.typeName {
    width: 46%;
    /*background: yellow;*/
}
.typePluralName {
    width: 25%;
    /*background: orange;*/
}
.typeDisplay {
    width: 25%;
    /*background: yellow;*/
}
.typeUtility {
    width: 2%;
    /*background: orange;*/
}


/*service table*/
.serviceName {
    width:24%;
    /*background: yellow;*/
}
.serviceKey {
    width:22%;
    /*background: orange;*/
}
.serviceFixed {
    width:22%;
    /*background: yellow;*/
}
.serviceVariable {
    width:24%;
    /*background: orange;*/
}
.serviceUtility {
    width:8%;
    /*background: yellow;*/
}



/*template list*/
.templateTitle {
    width: 20%;
    /*background: yellow;*/
}
.templateVersion {
    width: 2.5%;
}
.templateKey {
    width: 17.5%;
}
.templateEnabled {
    width: 5%;
    /*background: pink;*/
}
.templateDesc {
    /*width: 25%;*/
    width: 15%;
    /*background: yellow;*/
}
.templateType {
    width: 10%;
    /*background: pink;*/
}
.templateUpdated {
    width: 10%;
    /*background: yellow;*/
}
.templateVersionState {
    width: 10%;
    /*background: yellow;*/
}
.templateUtilites {
    width: 10%;
    /*background: pink;*/
    overflow: visible !important;
    align-items: flex-start !important;
    flex-direction:column;
}
.templateUtilites div > .viewEdit,
#all-template-versions-modal .templateUtilites .viewEdit {
    float: left;
    margin: 4px 0 0 0;
    width: 3.5em;
    display: inline-block;
}
.templateUtilites ul ,
.templateVersionState ul {
    margin:0;
}
.templateUtilites ul li,
.templateVersionState ul li {
    line-height:32px;
}
.templateUtilites .field-more {
    height: 20px;
    margin: 1px 0 4px 0;
}
.templateUtilites .field-more .dropdown-menu {
    position: absolute;
    left: -130px;
    top: 19px;
    right: 0px;
    border-radius: 0;
    border: none;
}
.templateUtilites .dropdown-toggle {
    height: 22px;
    display: inline-block;
}
.templateUtilites .dropdown-toggle:hover {
    background: #eee;
}
.templateUtilites .ikon {
    height: 24px;
}
.templateUtilites .ikon-more {
    background: url("../images/portal/icon-more.svg") no-repeat scroll 6px 9px rgba(0, 0, 0, 0);
}
.templateUtilites .ikon-edit {
    background: url("../images/portal/icon-edit.svg") no-repeat scroll 4px 2px/ 17px rgba(0, 0, 0, 0);
}
.templateUtilites .ikon-view {
    background: url("../images/portal/icon-view.svg") no-repeat scroll 1px 0px/ 21px rgba(0, 0, 0, 0);
}


#all-template-versions-modal tbody {
    min-width: 900px;
    max-height: 400px;
}
#all-template-versions-modal .templateDesc {
    width: 30%
}
#all-template-versions-modal .templateUtilites {
    flex-direction: row;
    width: 10%;
}

/*Cake pages dont have the utility_bar and main_content has different kinda stuff*/
.adminPage-cake {
    display: grid;
    grid-template-rows:50px  calc(100vh - 110px);
    grid-template-colums: 1fr;
    padding-top: 40px;
    grid-template-areas: 
    "title-bar"
    "main-content";
}

/*clientList table*/
.clientList .name {
    width: 25%;
}
.clientList .contact {
    width: 15%;
}
.clientList .phone {
    width: 15%;
}
.clientList .email {
    width: 15%;
}
.clientList .connectedstatus {
    width: 30%;
}

.batchExpDate {
    width: 20%;
    /*background: orange;*/
}
.batchExpBy {
    width: 20%;
    /*background: yellow;*/
}
.batchExpStatus {
    width: 20%;
    /*background: orange;*/
}
.batchExpZip {
    width: 20%;
    /*background: yellow;*/
}
.batchExpUtility {
    width: 20%;
    /*background: orange;*/
}






.fotoAdminNav {margin:4em 0 0 0;}
.fotoAdminNav li {display: inline-block;margin-right: 2em;}
.fotoAdminNav li a {}

/*
LINKVILLE
________________________________________________*/

.nav .menuButton a:link,
.sortable a:link {
    color: #000;
    text-decoration: none;
}

.nav .menuButton a:hover,
.sortable a:hover {
    color: #0080FF;
    text-decoration: none;
}

.nav .menuButton a:visited,
.sortable a:visited {
    color: #000;
    text-decoration: none;
}







.list table {width:100%; margin-top: 16px}
.list table thead {font-size: 12px;}
.list table td {border-top: 1px dotted #ccc;}

#filterUserForm {padding: 11px 0 0 0;}
#filterUserForm form,
#filterUserForm table {margin: 0 0 10px 0px;}    
#filterUserForm td {padding: 0 0 0 10px;border:0;vertical-align: bottom;}
#filterUserForm label {color: #969893;font-size: 11px;font-weight: bold;}
#filterUserForm select {width: 12em;font-size: 12px;}
/*#listusers {margin-top: 6px;}*/
.list .sortable {text-align: left;}


/*portalSettings settings page*/
.portalSettings .addServiceLink {float:right;padding: 8px;}
.portalSettings .control-group label {width: 100%;cursor: default;color:#000; font-weight: bold;}
.portalSettings .control-group {display: relative;}
.portalSettings .control-group p {
    margin: -5px 0 20px 0;
    font-size: 13px;
    color: #444;
    line-height: 1.4;
}

.portalSettings .set-logo {
 
}
.portalSettings .set-logo img {
    display: block;
    margin: 1em 0;
    box-shadow: 0px 0px 8px 0px rgba(170,170,170,1);
}
.portalSettings .set-logo p {
    margin: 1em 0;
}


.portalSettings  .form-actions {clear: left;background: #fff;}
.portalSettings .control-group > .controls input,
.portalSettings .control-group > .controls textarea,
.portalSettings .control-group > .controls select {/*margin-left: 25px;*/}
.portalSettings .control-group > .controls input[type='checkbox'] {float: left;margin: 4px 6px 2px -24px;}
.section {margin: 0 0 20px 0px;}

.portalSettings {padding-bottom: 16px;padding-top: 34px;border-bottom:1px solid #e7e1ea;}
/*.portalSettings h1 {font-size:18px;}*/
.portalSettings h4 {font-size: 16px;font-weight: normal;margin: 0 5px;color:#444; font-weight: bold;}
.portalSettings .section {border-top: 1px solid #ddd;margin-bottom: 0;padding-top: 10px;padding-bottom: 2em;}

.permissions-info {margin: 0 0 0 0;}
.permissions-info h4 {margin:0;}
.permissions-info dl {}
.permissions-info dt {font-weight: normal;margin:1em 0 0 0;}
.permissions-info dd {list-style-type: dash;}


.salesforceSettings {padding: 0 !important;}
.salesforceSettings form {
    display: grid;
    grid-template-rows: 90px auto;
    grid-template-columns: 100%;
    height: calc(100vh - 30px);
    grid-gap:1px;
    overflow: hidden;
}
.salesforceSettings .form-head {
    height: 90px;
    padding: 0 16px;
    border-bottom: 1px solid #eee;
    -ms-grid-column: 1 / -1;
    grid-column: 1 / -1;
    -ms-grid-row: 1 / 2;
    grid-row: 1 / 2;
}
.salesforceSettings .form-head button {
    position: absolute;
    top: 45px;
    right: 20px;
}
.salesforceSettings .form-head button.testConfig {
    position: absolute;
    top: 50px;
    right: 200px;
    color: #3AA6E1;
    border-radius: 0;
}
.salesforceSettings h2 {
    font-weight: bold;
    font-size: 24px;
    line-height: 1;
    padding-top: 38px;
    line-height: 1.3;
}
.salesforceSettings h4 {
    font-weight: bold;
}
.salesforceSettings .form-body {
    overflow: scroll;
    -ms-grid-column: 1 / -1;
    grid-column: 1 / -1;
    -ms-grid-row: 2 / 3;
    grid-row: 2 / 3;
    height: calc(99vh - 100px);
    padding:16px;
    background: #fff;
}
.salesforceSettings .form-body .control-group {clear: both;}
.salesforceSettings .form-body .control-group .controls {
    margin-bottom: 2em;
}
.salesforceSettings .form-body .control-group .controls input,
.salesforceSettings .form-body .control-group .controls a {
    display: inline-block;
}


.salesforceSettings .form-body input[type=text],
.salesforceSettings .form-body input[type=password] {
    background: #E9F6FD;
    border: 1px solid  #E9F6FD;
    padding: 8px 11px;
    box-shadow: none;
    width:18em;
}
.salesforceSettings .form-body input[type=text]:focus,
.salesforceSettings .form-body input[type=password]:focus {
    border: 1px solid #79BBDE;
}
.salesforceSettings .includeImages {
    /*outline: 1px dotted red;*/
    margin-left: 3.5rem;
}
.salesforceSettings .includeImages label {
    /*outline: 1px dotted green;*/
}
.salesforceSettings .includeImages select {
    margin-left: 1.5rem;
    /*outline: 1px dotted blue;*/
}


.salesforceSettings .form-body .keysAndStates  ul {
        height: 12em;
        width: 403px;
        padding: 0px;
        background: #fff;
        box-shadow: inset 0 0 2px #ddd;
        border-top: 1px solid #aaa;
        overflow: scroll;
        margin-left:0;
}
.salesforceSettings .form-body .keysAndStates .controls a {
    margin: 0px 0 0 0;
    padding: 9px 30px;
}
.salesforceSettings .form-body .keysAndStates select {
    width: 305px;
}
.keysAndStates .addSelects li {
    width:auto;
}
.keysAndStates .addSelects li:hover,
.salesforceSettings .form-body .addSelects ul li:hover {
    background: #E9F6FD;
}
.keysAndStates input {
    width:180px;
}
.salesforceSettings .form-body .addSelects ul {
    background: #fff;
    box-shadow: inset 0 0 2px #ddd;
    border-top: 1px solid #aaa;
    width: 422px;
    
}
.salesforceSettings .form-body .addSelects ul li {
    width: 408px;
}

.salesforceSettings .form-body .addSelectControls {
    width: 422px;
    margin-bottom: 40px;
}
.salesforceSettings .form-body .addSelectControls  input {
    width: 136px;
    display: inline-block;
}
.salesforceSettings .form-body .addSelectControls a {
    margin: -10px 0 0 0;
    padding: 9px 30px;
}
.salesforceSettings .salesforceReportZipSettings {margin-left: 13px;}
.salesforceSettings input[type="checkbox"] {
    margin: -2px 7px 0;
}

.salesforceSettings ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #3a88fe;
  opacity: .5;
  font-size: 14px;
}
.salesforceSettings ::-moz-placeholder { /* Firefox 19+ */
  color: #3AA6E1;
  font-size: 14px;
}

.salesforceSettings table th {text-align: left; width:280px; border-top: 1px solid #ddd;}
.salesforceSettings table td {text-align: left; padding-bottom: 40px; border-top: 1px solid #ddd;padding-top: 20px;}
.salesforceSettings table {margin-bottom: 200px;width:99%;}


.salesforceFieldGrid {
    display: inline-grid;
    grid-template-columns: 460px 460px 1fr;
   
    

}
.salesforceFieldGrid .col1 {grid-column: 1 / 2;}
.salesforceFieldGrid .col2 {grid-column: 2 / 3;}
.salesforceFieldGrid .col12 {grid-column: 1 / 3;}

.salesforceFieldGrid .row2 {grid-row: 2 / 3;}
.salesforceFieldGrid .row3 {grid-row: 3 / 4;}
.salesforceFieldGrid .row4 {grid-row: 4 / 5;}

.salesforceFieldGrid2 {
    display: grid;
    grid-template-columns: 460px 460px 1fr;
    

}

 .childPushFieldChoices {
    height: 200px;
    overflow: scroll;
    margin: 10px 0 0 0;
    padding-top: 10px;

}
.salesforceSettings .childPushFieldChoices th,
.salesforceSettings .childPushFieldChoices td {
    padding: 5px 10px;
}

.salesforceSettings .childPushFieldChoices th {
    border-bottom: 1px solid #aaa;
}
 .childPushFieldChoices th.checkbox,
 .childPushFieldChoices td.checkbox {
    width:20px;
    padding-top: 10px;
 }

/*User settings page*/
.userSettings {padding-top: 34px;}
.userSettings h1 {font-size:18px;}
.userSettings h4 {font-size:12px;}
.userSettings .section {border-top: 1px solid #ddd;margin-bottom: 0;}
.userSettings .section.profileImage button {margin-top: 10px;}
.userSettings .section.profileImage img {margin: 10px 0;}
.deleteCurrentImage {font-size: 12px;}
.userSettings  .section.changePassword form  {margin-top: 10px;}
.userSettings  .section.changePassword label {font-size: 12px}
.userSettings  .section.receiveNotifications label { margin: 10px 0 40px 0;}
.userSettings  .section.receiveNotifications input {float: left;margin: 5px 10px 0 0;}


#sfConfigModal .modal-body {height:500px;overflow: scroll;}
#sfConfigModal .layoutTable td {width: 50%; padding:15px;}
#sfConfigModal .layoutTable td label {margin-left: 0px;}
#sfConfigModal .modal-body .left .row-fluid .control-group {margin-bottom: 0;}
#sfConfigModal .addSelects ul {height: 170px;}

#sfConfigModal .addSelects  li {width: 420px;}
#sfConfigModal .addSelects label {
    margin-left: 0px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 4px;
}
#sfConfigModal .addSelects ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #666; font-size: 14px;
}
#sfConfigModal .addSelects ::-moz-placeholder { /* Firefox 19+ */
 color: #666; font-size: 14px;
}
#sfConfigModal.addSelects :-ms-input-placeholder { /* IE 10+ */
  color: #666; font-size: 14px;
}
#sfConfigModal .addSelects :-moz-placeholder { /* Firefox 18- */
  color: #666; font-size: 14px;
}


/* 
    TEMPLATE LIST
    
--------------------------------------------------- */
#confirm-delete-group-entry,
#disable-template-modal,
#clone-template-modal,
#confirm-revise-modal,
#publish-template-modal,
#confirmDeleteModal,
#test-template-modal,
#template-error-modal,
#confirm-edit-modal {
    width: 500px;
    margin-left: -250px;
}











/* 
    TEMPLATE EDITOR
    
    index:
    display header - title, meta data
    section - wrapper, header (edit, delete confirmation)
    fields header (faux table header)
    fields - bar
    
--------------------------------------------------- */

/*create and import modals in the template list page*/
/*#newTemplateModal {width: 434px;margin-left: -200px;top:200px;}*/

#newTemplateModal input[type="text"] {width:360px;}
#newTemplateModal .modal-body {padding-bottom: 0;}
#newTemplateModal .modal-footer {padding-top: 0;}
.modal-body  .fn_fileUpload input[type="file"] {
    position: fixed;
    top: -1000px;
}
.modal-body  .fn_fileUpload {
    background: none repeat scroll 0 0 #5d9ff5;
    border: medium none;
    border-radius: 3px;
    color: #fff;
    display: inline-block;
    font-size: 14px;
    font-weight: normal;
    margin: -2px 0 0 0;
    padding: 12px 24px;
}

.modal-body p.uploadConfirm {font-size: 14px;}
/*.fn_fileUpload:hover {
    background: #CCC;
}
.fn_fileUpload:active {
    background: #CCF;
}
.fn_fileUpload :invalid + span {
    color: #A44;
}
.fn_fileUpload :valid + span {
    color: #4A4;
*/


.editSectionModal h3 {font-size: 20px;}

.editSectionModal {width: 434px;margin-left: -200px;}
.editSectionModal  label {
    font-size: 13px;
    font-weight: 500;
    padding: 0 0 2px;
    text-align: left;
    width: 120px;
}

.editSectionModal .controls,
#editFieldGroupModal .controls {margin-bottom:20px}

.editSectionModal  input {
    font-size: 13px;
    font-weight: 400;
    text-align: left;
    /*width: 390px;*/
}


.loadingTemplate {margin: auto;width: 200px;text-align: center;}
.loadingTemplate img {display: block;margin: 20px auto 10px;}

ul.admin-breadcrumb {font-size: 13px;margin-left: 16px;}
ul.admin-breadcrumb li {display: inline-block;font-weight: 400;}
ul.admin-breadcrumb li span.divider {color: #999;}
ul.admin-breadcrumb li.active {color: #666;}
ul.admin-breadcrumb li a {}


.icon-remove-sign {background-color: #FFFFFF;border: 2px solid #333;border-radius: 10px 10px 10px 10px;height: 10px;width: 10px;z-index: 200; background-position: -50px -98px;}

#content-container {z-index: 1;}
#sidebar-content {position: absolute;width: 260px;z-index: 3}

#sidebar-content #sidebar-header {border-bottom: 1px solid #eee;}
#sidebar-header h4 {color: #666666;font-size: 10px;font-weight: 400;margin-left: 16px;text-transform: uppercase;}

#sidebar-header .sectionEdit {    position: absolute;right: 10px;top: -4px;}
#sidebar-content .section-list ul {padding:6px 0;margin-left: 0;}
#sidebar-content .section-list li {padding:6px 0;font-size: 12px;}
#sidebar-content .section-list .sectionTitle {position: relative;}
#sidebar-content .section-list .sectionTitle a {
    display: inline-block;
    line-height: 1.2;
    margin: 0 16px;
    }
#sidebar-content .section-list .sectionTitle .myHandle {background:url(../images/portal/my-handle-small.svg) top left no-repeat;left: 3px;}
.field-area {
    border-left: 1px solid #eee;
    margin-left: 260px;
    padding-left: 20px;
}
.field-area  #fn_type_list-controls {min-width:auto; border:0;}
.field-area  #fn_type_list-controls .bulk-assign-inner  {padding-left: 0;}


.open-close {
    display: inline-block;
    left: -16px;
    position: absolute;
    top: 2px;
}
.open-close {}
.open-close span {display:none;}
.open-close a {height: 20px; width: 20px; float:left; }
.open-state {background:url(../images/portal/arrow_open.svg) top left no-repeat;}
.close-state {background:url(../images/portal/arrow_closed.svg) top left no-repeat;}


.alert-block.deleteTemplate {background: #fff;margin:0;border-radius: 0;border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;}
.alert-block.deleteTemplate p {color:#333;}
.hovertest {display: none;z-index: 6000;}

.ui-sortable-helper {background: yellow !important; opacity: .5;}


#editTemplateModal  #uploadDocumentModal .modal-body {padding:15px;}
.template-documents {margin:0;}
.template-documents li {
    clear: both;
    float: left;
    font-size: 13px;
    margin-left: 1px;
   
}
.template-documents li a {}
.template-documents li a .ikon-doc { margin-top: 4px;}
.templateSectionWrap h4 {
    float: left;
    font-size: 13px;
    font-weight: 500;
    margin: 3px 0 0 20px;
    position: relative
}
.templateSectionWrap h4 .sectionKey {color: #999;display: block;font-style: italic;font-weight: 300;}
.accordion-inner {border-top: 0 none;padding: 0;}
.templateSectionHeader.fieldbar {background: none repeat scroll 0 0 #fbfbfb;
    border-top: 1px solid #ccc;margin-top: 12px;}
.templateSectionHeader .alert {margin-bottom: 0;}
.form-sectionTitle-edit {margin:5px 0 0 0;margin: 10px 0 0 40px;height: 40px;}

#editSectionTitle {}

.myHandle {
    background:url("../images/portal/my-handle.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    cursor: move;
    height: 54px;
    left: 0;
    position: absolute;
    top: 7px;
    width: 14px;
    opacity:0; 
    -webkit-transition: opacity 0.6s ease-out;  
       -moz-transition: opacity 0.3s ease-out;  
        -ms-transition: opacity 0.3s ease-out;  
         -o-transition: opacity 0.3s ease-out;  
            transition: opacity 0.3s ease-out;
}
.userList tr:hover .myHandle, 
.sectionTitle:hover .myHandle,
.fieldbar:hover .myHandle,
.addSelects li:hover .myHandle {opacity:1;}
.section-renameDelete {vertical-align: middle; font-size: 12px; display: none;
    opacity:0; 
    -webkit-transition: opacity 0.6s ease-out;  
       -moz-transition: opacity 0.3s ease-out;  
        -ms-transition: opacity 0.3s ease-out;  
         -o-transition: opacity 0.3s ease-out;  
            transition: opacity 0.3s ease-out;
}
            
.sectionTitle:hover .section-renameDelete {opacity:1;display: inline-block;}
.section-renameDelete .btn {margin-top: -4px;}

.fieldbar .checkbox {float: left; margin: 3px 0 0 10px;}
.field-display-bar {border:0; border-top: 1px solid #ccc;border-radius: 0;}

.field-summary  { float: left;font-size: 13px;margin: 4px 0 0 20px;width: 260px;}
.field-summary dt,
.field-summary dd {margin-left: 0;}
.field-summary .fieldName {max-width: 260px;font-weight: 500;line-height: 1.3;}
.field-summary .fieldKey {color: #999;font-style: italic;}
.field-summary .fieldDefault {}
.field-summary-status .icon-on, .field-summary-status .icon-off  {height: 20px;width:20px;display: inline-block;}
.field-summary-status .fieldRequired .icon-on {background:url("../images/portal/icon-required.svg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);}
.field-summary-status .fieldRequired .icon-off {background:url("../images/portal/icon-required-off.svg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);}
.field-summary-status .fieldAdmin .icon-on {background:url("../images/portal/icon-admin-only.svg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);}
.field-summary-status .fieldAdmin .icon-off {background:url("../images/portal/icon-admin-only-off.svg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);}
.field-summary-status .fieldPhotos .icon-on {background:url("../images/portal/icon-photos.svg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);}
.field-summary-status .fieldPhotos .icon-on.HiR {background:url("../images/portal/icon-photos-HiR.svg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);}
.field-summary-status .fieldPhotos .icon-off {background:url("../images/portal/icon-photos-off.svg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);}
.field-summary-status .fieldComment .icon-on {background:url("../images/portal/icon-comments.svg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);}
.field-summary-status .fieldComment .icon-off {background:url("../images/portal/icon-comments-off.svg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);}
.field-summary-status .fieldCustomerHidden .icon-on {background:url("../images/portal/icon-customer-hidden.svg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);}
.field-summary-status .fieldCustomerHidden .icon-off {background:url("../images/portal/icon-customer-hidden-off.svg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);}
.field-summary-status .fieldFieldUserHidden .icon-on {background:url("../images/portal/icon-fielduser-hidden.svg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);}
.field-summary-status .fieldFieldUserHidden .icon-off {background:url("../images/portal/icon-fielduser-hidden-off.svg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);}
.field-summary-status .fieldDependent .icon-on {background:url("../images/portal/icon-dependent.svg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);}
.field-summary-status .fieldDependent .icon-off {background:url("../images/portal/icon-dependent-off.svg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);}

.field-summary-status .fieldFieldWorkflow .icon-on {background:url("../images/portal/icon-calculator.svg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);}
.field-summary-status .fieldFieldWorkflow .icon-off {background:url("../images/portal/icon-calculator-off.svg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);}

.fieldRequired.status, .fieldAdmin.status, .fieldPhotos.status, .fieldComment.status, .fieldCustomerHidden.status, 
.fieldFieldUserHidden.status, .fieldDependent.status, .fieldFieldWorkflow.status  {
    height: 20px;width:20px;display: inline-block;margin-right: 8px;
}
.fieldType {float: left;margin: 3px 0 0 10px;   width: 130px;}
.fieldType li {font-size: 13px;color:#999;}

.field-summary-status {float: left;margin: 3px 0 0 100px;width: 270px;}



.expandCollapseBtn {
  background: url("../images/portal/icon-section-toggle.svg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: medium none;
    height: 24px;
    left: -20px;
    position: absolute;
    top: 2px;
    width: 17px;
} 





#editTemplateModal {border-radius: 3px;width: 1040px;margin-left: -520px;}
#editTemplateModal label, #editTemplateModal input, #editTemplateModal select {font-size: 13px; }
#editTemplateModal label {font-weight: 500;}
#editTemplateModal input, #editTemplateModal select {font-weight: 400;}
#editTemplateModal form {margin:0;}
#editTemplateModal .modal-body {padding-top: 0;padding-bottom: 0;}
#editTemplateModal .col-container {float:left;width: 100%;}
#editTemplateModal .col-container .left-col {float:left;loat:left;width:580px; overflow: hidden;padding-top: 12px;}
#editTemplateModal .col-container .right-col {
    background: none repeat scroll 0 0 #f7f7f7;
    float: right;
    margin-right: -15px;
    padding: 15px;
    width: 400px;
    max-height: 480px;
    overflow: scroll;
    overflow-x:hidden;
}
#confirmEnableModal {
    position: absolute;
    top: 340px;
    width: 540px;
    margin-left: -272px;
}


.modal-footer {background: #fff;}
.set-title {float: left;width: 360px;}
.set-title label {}
.set-title input {display: inline-block;margin: 0px 0 0 0;
    /*width: 100%;*/
}

.set-enabled  {float:left;width: 99px;    margin: 27px 0 0 30px;}
.set-enabled label {}
.set-enabled input { float: left;margin: 4px 4px 0 0;}

.set-type {clear: both;   float: left;margin: 12px 12px 0 0;}
.set-type  label {}
.set-type  input {margin: -4px 0 0 10px;width: 100px;}


.set-report {float: left;margin: 12px;}
.set-report label {}
.set-report select {margin: 0;width: 160px;}


.manageStatusContainer {float: left;height: 300px;margin: 12px 0 0; position: relative;  width: 580px;}
.manageStatusContainer label {width: 570px; border-bottom: 1px solid #ccc; display: inline-block;padding-bottom: 4px;}
.manageStatusContainer .addSelects {left: 2px;position: absolute;top: 30px;width: 580px;}

.manageStatusContainer .statusInfo {position: absolute;right: 130px;top: 5px;}
.manageStatusContainer .statusInfo .fn-tp {display: none;}
.manageStatusContainer .statusInfo:hover .fn-tp {display: block;}

.fn-tp {
    box-shadow: 1px 0 3px #ccc;
    padding: 5px 15px;
    height: 20px;
    width: 340px;
    background: #fff;
    position: absolute;
    left: -250px;
    top: -10px;
    z-index: 2;

}



/*configure the select boxes in the template editor*/

.addSelects ul {float: left;margin: 0;padding: 0;height: 220px;overflow-y: auto;width: 595px;}
.addSelects li {position: relative;color: #999;display: block;float: none;margin-bottom: 4px;padding: 4px 0 4px 12px;width: 565px;font-size: 13px;}
.addSelects li:hover {background: #f7f7f7;}
.addSelects li code {background: transparent;border:0;color:#d4559c;padding:0;}
.addSelects li .myHandle {background:url(../images/portal/my-handle-small.svg) top left no-repeat;left: 3px; top:4px; left:1px;}
.addSelects li .optName {display: inline-block; font-size: 13px;width: 156px;color: #333;}
.addSelects li .pipe {color: #dddddd;display: inline-block;width: 8px;}
.addSelects li .workflowName {text-transform: lowercase;font-style: italic;}
.addSelects li .manageStatusLineItems {position: absolute;right: 0;top: 5px;}

.manageStatusLineItems .ikon-edit, .manageStatusLineItems .ikon-delete,.manageStatusLineItems .ikon-delete-disabled {
    background-size: 16px
}

.addSelects li .isCustomerHidden, .addSelects li .isWorkerHidden {
    height: 20px;
    width: 20px;
    display: inline-block;
    vertical-align: middle;
    margin-left: .5em;
}
.addSelects li .isCustomerHidden {
    background: url("../images/portal/icon-fielduser-hidden.svg") no-repeat scroll 0 0 / 18px rgba(0, 0, 0, 0);
}
.addSelects li .isWorkerHidden {
    background: url("../images/portal/icon-customer-hidden.svg") no-repeat scroll 0 0 / 18px rgba(0, 0, 0, 0);
}
.addSelects span {}
.addSelectControls {
    border-top: 1px solid #ccc;
    clear: both;
    float: left;
    margin: 0 20px 0 0;
    padding-top: 10px;
    width: 100%;
}
.addSelectControls input {width: 150px;}
.addSelectControls .bigSlash, .controls.editName .bigSlash {color: #ccc;font-size: 25px;font-weight: 200;}
.addSelectControls a,
.addSelectControls button {display: inline-block;margin-top: -10px;padding: 3px 15px;}

.manageStatusLineItems a .ikon-edit {
    background: url("../images/portal/icon-edit.svg") no-repeat scroll 0px 0px / 16px  rgba(0, 0, 0, 0);
}


.setSelect-workerHidden {}
.setSelect-workerHidden input { float: left;
    margin: 4px 12px 0 0;}
.setSelect-workerHidden label {float: left;}
.setSelect-customerHidden {clear: left;}
.setSelect-customerHidden input { float: left;
    margin: 4px 12px 0 0;}
.setSelect-customerHidden label {float: left;}










.defaultImageEdit { height: 70px;position: relative;}
.defaultImageEdit img {display: inline-block;margin-right: 6px;}
.defaultImageEdit .alert-block {
    background: none repeat scroll 0 0 #ffffff;
    border: medium none;
    box-shadow: 2px 2px 2px #333;
    color: #333;
    font-size: 12px;
    left: 50px;
    line-height: 1.2;
    position: absolute;
    top: 23px;
    width: 290px;
}
.defaultImageEdit .alert-block .form-controls {float: right; margin: -11px -20px;}
.defaultImageEdit #fileupload {position: absolute;top: 0;left:0;}
.setDisplay {float: left;width: 380px;}
.setDisplay label { display: inline-block; float: left;margin-top: 6px;}
.setDisplay select { float: right;font-size: 13px;font-weight: 400;width: 270px;}


.set-description { border-top: 1px solid #ccc; clear: both;float: left; margin-top: 20px;padding-top: 10px;width: 415px;}
.set-description label {}
.set-description label em {color: #999;font-weight: 300;width: 50px;}
.set-description input {display: inline-block;margin: 0px 0 0 0;width: 366px;font-size: 13px;}


.set-workflow {float: left;clear: both;margin-top: 1em;}
.set-workflow  label {}
.set-workflow ul {margin-left: 50px;}
.set-workflow ul li {line-height: 1.6;}
.set-workflow ul li  input[type='checkbox'] {float: left;margin: 6px 8px 0 0;}


.set-key {float: left;clear: both;margin-top: 12px;}
.set-key label {float: left;display: inline-block;margin-top: 6px;width: 50px;}
.set-key input {margin: -4px 0 0 10px;    width: 317px;float: right;}
#templateKey {display: inline-block;margin: 0; width: 317px;}

.set-quickAdd {float: left;clear: both;margin-top: 12px;}
.set-quickAdd input {margin: -4px 0 0 40px;width: 36px;}
.set-quickAdd label { float: right;}

.modal-body form {overflow: hidden;}
#inputFieldType {margin-top:7px}
.set-attributes label {display:inline;}








.set-relationship {}






.set-display-options {padding: 20px 0 0 0}
.set-display-options label {display: inline-block;width: 100px;}
.defaultImageEdit p {font-size: 12px; color:#999;}


.createTemplateEditor {padding-top: 50px;}
.createTemplateEditor .header {background: #f7f7f7;position: relative;min-height: 68px;padding-top: 1px;}
.createTemplateEditor .header h2 {line-height: 1;margin: 12px 16px 5px;font-size: 16px;font-weight: 500;}
.createTemplateEditor .header p {font-size: 13px;margin-left: 16px;}
.createTemplateEditor .header p strong {font-weight: 500;}
.createTemplateEditor .header img {float: left;margin: 8px 8px 8px 16px}
.createTemplateEditor .header .activeStatus-controls {position: absolute;top:20px;right: 16px;}
/*.createTemplateEditor .header li {float:right;margin-left: 2px;}*/
.createTemplateEditor .header .activeStatus {margin-right: 20px;}
.createTemplateEditor .header .activeStatus .statusEnabled {font-weight: 500; color: #15CF37;font-size: 14px;margin-right: 12px;}
/*.createTemplateEditor .header .controlExport a {display: inline-block;margin: 0 24px 0 0;}*/
 #edit-template-button,  #delete-template-button {
   /* opacity: 0.4;
    transition: opacity 0.3s ease-out 0s;*/
}
 #edit-template-button:hover,  #delete-template-button:hover {
   /* opacity: 1;*/
}


.section-controls {background: none repeat scroll 0 0 #F8F8F8;border-radius: 4px 4px 4px 4px;margin-bottom: 0.5em;overflow: auto;width: 96px;}
.section-controls a { float: left; margin: 5px;}

.sectionEdit button {display: block; margin-top: 1em;background: none;font-size: 18px;}
.sectionEdit a {
    display: inline-block;
    font-size: 40px;
    font-weight: 100;
    margin: 12px 0 0;
} 
.createNewSection {
    background: none repeat scroll 0 0 #ffffff;
    border: 1px solid #ccc;
    box-shadow: 0 2px 4px #ccc;
    left: 220px;
    padding: 20px 20px 0;
    position: absolute;
    top: 10px;
    z-index: 1;
    }
.createNewSection label {font-size: 13px;}
.createNewSection .controls {text-align: right;}
#addSectionTitle {width: 256px;}


/*Perfect scrolling*/

#scrollingSidebarList {  
    position: relative;
    height: 100%; 
    overflow: auto;
    -ms-overflow-style:none;
}
#scollingSections {
    position: relative;
    overflow: auto;
    min-height: 300px;
    -ms-overflow-style:none;
}


.addFieldtoSection {
    border-top: 1px solid #ccc;
    padding-right: 15px;
    text-align: right;
}
.addFieldtoSection > div {
    text-align: left;
    display: inline-block;
}
.dropdown.field-more.open > a {
    background: #eee;
    border-radius: 3px;
}





.cloneField {
    height: 20px;
    width: 16px
}
.cloneList { max-height: 150px;overflow: scroll;}


/*this is an override for the addFieldPopUP not sure I need it */
.accordion {margin-bottom: 0px;}
#create-form form {margin:0;}

.inline-forms select {font-size: 12px;height: 24px;line-height: 24px;margin-bottom: 0px;width: 150px;}
.accordion-group ul {    float:right;padding-top: .25em;margin: 0 .5em 0  0;}

/* This was breaking my dropdown button where the dropdown options would be listed in a row instead of vertical JT-2/5/2013
.accordion-group li {float:right;margin: 0 0 0 1em;} */

.accordion-heading { position:relative;}
.accordion-heading form {margin:0;padding: 6px 0 1px 8px;}
.accordion-heading form input {font-size: 18px;}
.accordion-heading h4 {font-weight: normal;margin: 0;padding: 0 0 9px;}
.accordion-heading  .form-horizontal .control-group { margin-bottom: 4px;}/* NOTE: this .form-horz... is suspect - and may conflict with Bootstrap styles... */
.fieldbar {
    min-height: 50px;
    padding-bottom: 4px;
}
.fieldbar .display-bar-controls {
    clear:right;
    float: right;
    margin: 14px 15px 0 0;
}
.viewReadOnly {display: inline-block;margin-right: 20px;}


.field-more {
    display: inline-block;
    position: relative;
}
.field-more .dropdown-menu {
    position: absolute;
    left: -210px;
    top: 14px;
    right: 10px;
    border-radius: 0;
    border:none;
}
.field-more .dropdown-menu  h5 {
    padding-left: 20px;
}
.field-more .dropdown-submenu:hover .dropdown-menu {
    top:0;
    left: -290px;
    width: 300px;
}
/* style the sub-menus */
.dropdown-submenu {
    margin:0;
}
.dropdown-submenu li {
    line-height: 1.6;
}
.dropdown-submenu li a,
.dropdown-submenu span {
    padding: 3px 20px;
    color: #000;
    display: block;
}
.dropdown-submenu li a:hover {
    /*background: #f2f2f2;*/
} 



.more .dropdown-menu {
/*left: -214px;
width: 260px !important;*/
}
/*set tag submenu - need better namingspacing here*/
.addTagMenu.dropdown-menu {
    right: 250px;
    left: auto;
}

.section-controls {background: none repeat scroll 0 0 transparent;border-bottom: 1px solid #DDDDDD;border-radius: 0 0 0 0;margin-left: -20px;margin-top: -10px;padding: 0 20px;width: 100%;}
.section-controls-inner {padding: 6px 12px;}    

.form-vertical .save-cancel {padding-top: 1em;text-align: right;width: 400px;}

.createTemplateEditor .form-horizontal .controls {margin-left: 0;}



/*animate the entrance of the new field*/
.insertAnimation.ng-enter {
  -webkit-transition: 2s;
  transition: 2s;
  background:yellow;
}

.insertAnimation.ng-enter-active {
  background: white;
}



.deleteFieldAlert {
    background: none repeat scroll 0 0 #ffffff;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.50);
    border-radius: 0;
    color: #333;
    position: absolute;
    left: 50%;
    background: #fff;
    z-index: 100;
    top: -40px;
    margin-left: -160px;
    text-align: left;
    padding: 20px;
    width: 300px;
}

.deleteFieldAlert .form-controls { 
    margin-top: 40px;
    text-align: right;
}
.deleteFieldAlert .form-controls .btn {
    background-color: #eee;
    background-image: none;
    background-repeat: repeat-x;
    border: 0 none;
    color: #666666;
    text-shadow: none;
    padding: 4px 12px;
    text-transform: uppercase;
    border-radius: 0;
    font-weight: 500;
    margin-left: 12px;
    font-size: 13px;
}

.deleteFieldAlert .form-controls .btn-danger {
    background-color: #ed3535;
    color: #fff;
}

/*  light op the field so you know which one you are deleting  */
.fieldbar.pendDelete {
    background: #ffefef;
}
.fieldbar.pendDelete .myHandle {
    opacity: 1;
    margin-top: -7px;
    background: red;
}
.fieldbar.pendInsert {
    background: #e1edff;
}

#insertFieldCopyModal {
    height: 428px;
    margin: 0 0 0 -200px;
    overflow: auto;
    top: 110px;
    width: 400px;
    position: fixed;
    left: 50%;
    background: #fff;
    box-shadow: 0px 2px 12px #888;
}

#insertServiceFieldModal {
    height: 428px;
    margin: 0 0 0 -200px;
    overflow: auto;
    top: 110px;
    width: 400px;
    position: fixed;
    left: 50%;
    background: #fff;
    box-shadow: 0px 2px 12px #888;
}
.insertFieldsModal .modal-header {
    border-bottom: none;
    height: 40px;
    padding: 9px 15px;
    position: relative;
}
.insertFieldsModal .modal-header h4 {
    font-size: 16.5px;
    font-weight: 500;
    margin-left: 10px;
}
.insertFieldsModal .modal-header .close {
    opacity: 1;
    position: absolute;
    right: 10px;
    top: 20px;
}
.insertFieldsModal .fieldtoCopy {
    height: 360px;
    margin: 0;
    overflow: auto;
    padding: 0;
    width: 400px;
}
.insertFieldsModal .fieldtoCopy li ul li {line-height: 30px;}





#editFieldModal .modal-header h3 {font-size:20px;}





.editStatusOptionModaldMask {
    background: none repeat scroll 0 0 #ffffff;
    height: 466px;
    opacity: 0.5;
    position: absolute;
    top: 0;
    width: 1025px;
}
#editStatusOptionModal {
    background: none repeat scroll 0 0 #ffffff;
    box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
    height: 312px;
    left: 198px;
    overflow: hidden;
    padding: 20px;
    position: absolute;
    top: 50px;
    width: 260px;width: 420px;
}
#editStatusOptionModal h5 {
    border-bottom: 1px solid #dddddd;
    margin-top: 0;
    padding-bottom: 12px;
}
#editStatusOptionModal .control-label {
    padding-right: 20px;
    /*width: 150px;*/
}
#editStatusOptionModal .form-actions-proto {
    border-top: 1px solid #dddddd;
    margin-top: 12px;
    padding-top: 12px;
    text-align: right;
}
#editStatusOptionModal .warning {
    color: #ff0000;
    display: block;
    font-size: 12px;
    font-weight: normal;
}



.editValue input {font-family: Monaco,Menlo,Consolas,"Courier New",monospace;}



.addFieldModalVariation {}

.addAndEditField {}
.addAndEditField .modal-body {padding:0 15px;overflow: hidden;}
.addAndEditField .modal-footer {background: #fff;}
.addAndEditField .col-container {float:left;width: 100%;}
.addAndEditField .col-container .left-col {float:left;width: 450px; overflow: hidden;padding: 12px 0 0 0;}
.addAndEditField .col-container .right-col {background: none repeat scroll 0 0 #f7f7f7;float: right;margin-right: -15px;padding: 15px;width: 450px; height: 330px;}
.addAndEditField .condition-container {
    border-top: 1px solid #ccc;
    clear: both;
    float: left;
    padding: 10px 15px 10px 0;
    width: 100%;
}

.addAndEditField label, .addAndEditField input, .addAndEditField select {font-size: 13px;}
.addAndEditField label {font-weight: 500;}
.addAndEditField input, .addAndEditField select {font-weight: 400;}
.addAndEditField .control-group {float: left;clear: both;width: 470px;margin: 0 0 8px;}
.addAndEditField .control-group label {float: left;width: 102px;margin:4px 0 0 0;padding:0;}
.addAndEditField .control-group select, .addAndEditField .control-group input {float: left;width: 300px;margin: 0;} 
.addAndEditField .control-group select {width: 315px;}

.set-fieldName {}
.set-fieldName label {}
.set-fieldName input {}
.set-key {}
.set-key label {}
.set-key input {}
.set-fieldType {}

.set-defaultValue {}

.addAndEditField .set-default-boolean {}
.addAndEditField .set-default-boolean label {font-weight: 400;}
.addAndEditField .set-default-boolean input {margin: 4px 8px 0 0;width: 16px;}


.set-default-date {position: relative;}
.set-default-text {}
.set-default-barcode {}
.set-barcode  .controls {}

.addAndEditField .set-barcode {height: 280px;position: relative; width: 400px;}
.addAndEditField .set-barcode ul {
    height: 200px;
    margin: 0;
}
.addAndEditField .set-barcode ul li {}
.addAndEditField .set-barcode .control-label {
    border-bottom: 1px solid #ccc;
    display: block;
    width: 440px;
}
.addAndEditField .set-barcode  .controls  label {float: none;}
.addAndEditField .set-barcode .controls input {
    display: inline-block;
    margin: 7px 0 0;
    width: 30px;
}
.addAndEditField .set-barcode  .scrollingPane {
    border-bottom: 1px solid #ccc;
    height: 240px;
    left: 0;
    overflow-y: auto;
    position: absolute;
    top: 25px;
    width: 440px;
}



.addAndEditField .addSelects {position: relative;}
.addAndEditField .addSelects .control-label { border-bottom: 1px solid #ccc;}
.addAndEditField .addSelects .scrollingPane { height: 150px;overflow-y: auto;width: 448px; background:#fff;-ms-overflow-style:none;}
.addAndEditField .addSelects ul {
    float: left;
    height: 239px;
    margin: 0;
    overflow-y: auto;
    padding: 6px 0;
    width: 445px;
}
.addAndEditField .addSelects li {
    color: #999;
    display: block;
    float: none;
    font-size: 13px;
    margin-bottom: 4px;
    padding: 4px 0 4px 12px;
    position: relative;
    width: auto;
}

.addAndEditField .addSelectControls {
    border-top: 1px solid #ccc;
    clear: both;
    float: left;
    margin: 0 20px 0 0;
    padding-top: 10px;
    width: 100%;
}

.addSelectTools {
    border-bottom: 1px solid #ccc;
    font-size: 12px;
    margin-bottom: 30px;
}
.addSelectTools a {padding:0;display: inline-block;margin-right: 20px;}
.set-default-integer input {}
.set-default-select {}

.addAndEditField .set-longText  {float: right;width: 410px;}
.addAndEditField .set-longText label {}
.addAndEditField .set-longText textarea {font-size: 13px;}

.addAndEditField .set-agrementText  {float: right;width: 410px;}
.addAndEditField .set-agrementText label {}
.addAndEditField .set-agrementText textarea {font-size: 13px;}

.addAndEditField .set-default-money input {float:none;width: 274px;}
.addAndEditField .set-default-date input {
    border: 1px solid #ccc;
    border-radius: 0;
    height: 26px;
    position: relative;
    width: 164px;
}
.addAndEditField .checkboxUI {}
.addAndEditField .checkboxUI label {
    font-weight: 400;
    width: 230px;
    line-height: 1;
    padding-left: 53px;
    position: relative;
} 
.addAndEditField .checkboxUI input {
    margin: 4px 8px 0 0;
    width: 20px;
    padding-left: 49px;
    position: absolute;
    left: 0;
    top: -2px;
}
.checkboxUI .controls {
    margin-left: 100px;
    height: 23px;
    width: 340px;
}

.control-label .ikon { 
    vertical-align: middle;
    position: absolute;
    left: 26px;
    top: -1px;
}


.set-required {}

.set-adminOnly {}
.set-photoAllowed {}
.set-commentAllowed {}

.setPhotoResolution {
    left: 343px;
    margin-left: -50px;
    position: absolute;
}
.setPhotoResolution  select {width: 140px !important;}
.allowPhotosFromAlbum {
    float: left;
    clear: both;
    margin-top: 20px;
    position: relative;
}
.allowPhotosFromAlbum label {}
.allowPhotosFromAlbum select {
    width: 140px !important;
    position: absolute;
    top: 0;
    left: 178px;
}

/*this is the animate version of ng-hide, it overrides the default dislplay none */
.ps_field .myAnimation.ng-hide:not(.ng-hide-animate) {
    display: block!important;
    position: absolute;
    top: -9990px;
    left: -9999px;
}


.ps_field  .animate-show {
  opacity: 1;
}

/*this is the hide animation, NOTE: I have to prevent the rule above from moving the animation off screen before animation is done  */
.ps_field .myAnimation.animate-show.ng-hide-add, 
.ps_field .myAnimation.animate-show.ng-hide-add-active {
    transition: all linear .2s;
    position: relative !important;
    top: auto;
    left: auto;

}
/*the preview label gets it's own exit animation...*/
.ps_field .myAnimation.animate-show.ng-hide-add.previewLabel,
.ps_field .myAnimation.animate-show.ng-hide-add-active.previewLabel {
    transition: all linear 0s;
    position: absolute;
    top: -9990px;
    left: -9999px;

}
/*this is the show animation*/
.ps_field .animate-show.ng-hide-remove,
.ps_field .animate-show.ng-hide-remove-active  {
  transition: all linear .2s;
}


.ps_field .animate-show.ng-hide {
    opacity: 0;
}



















/*dependency section - needs some fancy css*/
 .addAndEditField .condition-container .control-group {width: 100%;}
.conditionalInstructions {float: left;margin: 4px 10px 0 0;}
.conditionalInstructions.is {margin: 4px 10px 0 8px;}
.dependentPhrase select {display: inline-block !important;}

/* brute force this into position! BOOM */
.setHidden {position:relative;clear:both;}
.setHidden .control-group {width: auto  !important;}
.set-workerHidden {left: 280px;position: absolute;top: 0;}


.addLongText {position: absolute;right: 40px;top: 10px;width: 390px;}
.addLongText textarea {height: 260px;margin-top: 6px;width: 100%;}
.addLongText textarea:focus {background:#fff;border:1px solid #00c5ff;}
.set-dependancy {margin-top: 20px;}
.set-dependancy input {margin-bottom: 0;}

.property-label {color:#666;padding-right: 0.5em;width: 80px;}
.property-value {color: #000;}   


.ikon-fieldRequired {background:url("../images/portal/icon-required.svg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);}
.ikon-fieldAdmin {background:url("../images/portal/icon-admin-only.svg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);}
.ikon-fieldPhotos {background:url("../images/portal/icon-photos.svg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);}
.ikon-fieldComment {background:url("../images/portal/icon-comments.svg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);}
.ikon-fieldCustomerHidden {background:url("../images/portal/icon-customer-hidden.svg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);}
.ikon-fieldFieldUserHidden {background:url("../images/portal/icon-fielduser-hidden.svg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);}

.ikon-more {background:url("../images/portal/icon-more.svg") no-repeat scroll 2px 7px rgba(0, 0, 0, 0);}




.ikon-clone {}
.ikon-clone {
    background:url("../images/portal/icon-clone.svg") no-repeat scroll 0 0 rgba(0, 0, 0, 0); height: 22px;width:22px;
    background-size: 22px auto;
    display: inline-block;
    margin: 10px 0 0 -6px;
}
.add-services-field-btn {
    background:url("../images/portal/add-services-field-btn.svg") no-repeat scroll 0 0 rgba(0, 0, 0, 0); height: 22px;width:22px;
    background-size: 22px auto;
    display: inline-block;
    margin: 10px 0 0 -6px;
}
.ikon-add {}
.ikon-add {
    background: url("../images/portal/icon-add.svg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    background-size: auto auto;
height: 20px;
width: 20px;
background-size: 20px auto;
display: inline-block;
margin: 12px 11px 0 0;

}

.ikon-add {}
.ikon-add-s {
    background:url("../images/portal/icon-add.svg") no-repeat scroll 0 0 rgba(0, 0, 0, 0); height: 20px;width:20px;
    background-size: 20px auto;
    display: inline-block;
    margin: 0;
}

.publishControls {
    float: right;
    margin-right: 20px;
}
.testTemplate  {
    background: #1a73e8;
    color: #fff;
    border-radius: 2px;
    display: inline-block;
    height: 30px;
    min-width: 70px;
    padding: 0 20px 0 20px;
    margin: -5px 10px 0 0px;
    border: none;
    text-align: right;
}
.reviseTemplate  {
    background: #ffcf78;
    color: #000;
    border-radius: 2px;
    display: inline-block;
    height: 30px;
    min-width: 70px;
    padding: 0 20px 0 20px;
    margin: -5px 10px 0 0px;
    border: none;
    text-align: right;
}
.publishTemplate  {
    
    background: #43ba43;
    color: #fff;
    border-radius: 2px;
    display: inline-block;
    height: 30px;
    min-width: 70px;
    padding: 0 20px 0 20px;
    margin: -5px 10px 0 0px;
    border: none;
    text-align: right;
}
.disableTemplate  {
    background: #bbb;
    color: #fff;
    border-radius: 2px;
    display: inline-block;
    height: 30px;
    min-width: 70px;
    padding: 0 20px 0 20px;
    margin: -5px 10px 0 0px;
    border: none;
    text-align: right;
}



/*template editor field group styles*/

#addFieldGroupModal,
#editFieldGroupModal,
#deleteFieldGroupModal {
    width: 400px;
    margin-left: -200px;
}


.isFieldGroup {
/*    
    background: #f9fbeb;
*/    
    margin:0 20px;
    position: relative;

    background: #fff;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}





.field-display-bar {
    /*this is a temp override*/
    border:none;
}
.fieldbar {
    border-top:1px solid #ccc;
}




/*temp location - move these later*/
.openFieldGroup {
    /*    
    border-radius: 10px 10px 0 0;
    border:none;
    margin: 10px 10px 0 10px;
    background: #ecf0c5;
    padding-right: 0;
    */

    border-radius: 10px 10px 0 0;
    border: 1px solid #ccc;
    margin: 10px 20px 0 20px;
    background: #fbfbfb;
    padding-right: 0;
    border-bottom: 0;


}
.openFieldGroup  h3 {
    float: left;
    padding: 24px 0px 0 20px ;
    display: block;
    font-weight: bold;
    font-size: 13px;
    margin: 0;
    line-height: 1;
}
.closeFieldGroup {
    /*    
    border-radius: 0 0 10px 10px;
    border-top: 1px solid #ccc;
    margin: 0px 10px 20px 10px;
    background: #ecf0c5;
    padding-right: 0;
    */


    border-radius: 0 0 10px 10px;
    border: 1px solid #ccc;
    margin: 0px 20px 20px 20px;
    background: #f0f0f0;
    background: #fbfbfb;
    padding-right: 0;

}




/*       close the template editor stuff       

==========================================
========================================== */













.navbar { 
z-index: 2000 !important;
}











/*  paginate
------------------------------------------------------------------------------------------------------------------------*/     

#paginate {border-radius: 3px 3px 3px 3px;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);display: inline-block;margin-bottom: 0;margin-left: 0;}
#paginate .step,
#paginate .nextLink,
#paginate .prevLink,
#paginate .currentStep {background-color: #FFFFFF;border-color: #DDDDDD;border-image: none;border-style: solid;border-width: 1px 1px 1px 0;float: left;line-height: 38px;padding: 0 14px;text-decoration: none;
    -moz-border-bottom-colors: none;
     -moz-border-right-colors: none;
      -moz-border-left-colors: none;
       -moz-border-top-colors: none;
}
#paginate:first-child  > a,
#paginate:first-child  > .currentStep { border-left-width: 1px;border-radius: 3px 0 0 3px;}   
#paginate:last-child  > a,
#paginate:last-child  > .currentStep { border-radius: 0 3px 3px 0;}    
#paginate .nextLink {  border-radius: 0 3px 3px 0;}
#paginate .currentStep {    background-color: #F6F6F6;color: #999;cursor: default;}

/* UTILITIES */
#upload-spinner img {display: inline-block;margin-right: 0.5em;}


.alert-error ul {margin:0;}
.alert-error ul li {font-size: 14px; color: #B94A48; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);}
.icon-info-sign {opacity: 0.4;}
.errorMsg p {
    background: none repeat scroll 0 0 #FFF0FF;
    border-radius: 12px;
    color: #FF0000;
    display: inline-block;
    font-size: 12px;
    line-height: 1;
    margin: -3px 0 0 5px;
    padding: 6px 12px;
}
    

/* LEGAL */
.legal {border: 1px solid #ccc;font-size: 1.166em;height: 1000px;line-height: 1.43em; margin-bottom: 1em;overflow: auto;padding: 1em;}
.legal h1 {}
.legal h2 {font-size: 1.5em;}
.legal h3 {line-height: 1.428em;margin:0; padding:0; font-size:14px; }
.legal p {margin:0 0 24px 0;font-size:14px; color:#666;line-height: 20px;}



/* Log in page //////////////////////////////////////////////// */
.loginPage {
    z-index: 1;
}
.loginPanel {
    left: 50%;
    margin-left: -220px;
    padding: 0;
    position: fixed;
    width: 440px;
    z-index: 3;
    top: 0px;
    height: calc(100vh - 50px);
    display: flex;
    flex-direction: column;
    justify-content:flex-start;
    margin-top: 20px;
}
.loginBranding {
    display: flex;
    justify-content: center;
    min-height: 150px;
    margin-bottom: 20px;

    }
.loginBranding_inner {
    max-width: 360px;
    display: flex;
    height: 150px;
    } 
.loginBranding_inner img {
    object-fit: contain;
    } 
.loginPanel .sign-in {
    background: #F8F8F8;
    padding: 1px 0;
    width: 100%;
    text-align: center;
    position: relative;
}
.sign-in .login_message {
    position: absolute;
    top: -30px;
    width: 390px;
    box-shadow: 0px 4px 6px rgba(212, 45, 45, 0.6);
    
}
.sign-in h3 {
    olor: #000;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    padding: 0;
    margin: 15px 0;
}
.sign-in input[type="text"], 
.sign-in input[type="password"] {
    color: #000;
    border: 1px solid #ddd;
    display: block;
    font-size: 18px;
    font-weight: 600;
    height: 32px;
    margin: 15px auto;
    width: 340px;
     -webkit-box-shadow:none;
       -moz-box-shadow:none;
            box-shadow:none;
}
.sign-in input[type="text"]:focus,
.sign-in input[type="password"]:focus {
    border:1px solid #3a88fe;
    }
.rememberMe {
    color: #000;
    font-size: 14px;
    padding: 0 0 18px;
    float: left;
    margin-left: 40px;
    }
.rememberMe input[type="checkbox"]{
    margin-top: 0px; 
    height: 16px; 
    width: 16px;
    } 
.btn-signIn {
    background: #3a88fe none repeat scroll 0 0;
    color: #ffffff;
    display: block;
    font-size: 18px;
    margin: auto;
    overflow: hidden;
    padding: 13px 5px;
    text-align: center;
    transition: background 0.5s ease 0s;
    width: 340px;
    border: 1px solid #3a88fe;
    }
.btn-signIn:hover {
    color: #fff !important; 
    background: #045ae8; 
    }
.forgotMyPassword {
    display: block;
    margin: 20px 0;
    text-align: center;
    line-height: 2;
    font-size: 14px;
    }
.loginPanel .banner {    
    display: flex;
    flex-grow: 1;
    min-height: 100px;
}
.injected_content_wrapper {
    align-self: center;
}
.sign-in-help {
    width: 400px;
    }
.noUserName {
    bottom: 80px;
    color: #999;
    margin-top: 18px;
    text-align: center;
    font-size: 12px;
    }
.noUserName strong {
    color:#333;
    font-weight: normal;
    }
 #footer.signInPage {
    background: none repeat scroll 0 0 #fff;
    bottom: -2px;
    position: fixed;
    z-index: 4;
    padding-left:20px;

    border-top: 1px solid #e5e5e5;
    }
 #footer.signInPage p {font-size: 10px;}





















.photo-well {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: -1;
    background: #DEDEDE;
    display: grid;
    grid-template-rows: 45px 1fr;
    grid-template-columns: 1fr;
    
}
.photo-well-toolbar {
    display: flex;
    justify-content: space-between;
    height: 45px;
    align-items: center;
    padding: 0 1em;
}
.photo-data-sidebar {
    grid-column-start: 2;
    grid-column-end: -1;
    grid-row-start: 1;
    grid-row-end: -1;
    background: #EEEEEE;
    display: flex;
    flex-direction: column;
}
.photo-data-header {
    border-bottom: 1px solid #ddd;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.photo-well img {
    margin:auto;
    -moz-box-align: center;
    -webkit-box-align: center;
    cursor: default;
    display: flex;
    display: -webkit-flex;
}
.navigate-target {
    -moz-box-align: center;
    -webkit-box-align: center;
    -ms-flex-align:center;
    -ms-flex-pack:justify;
    cursor: default;
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    height: 100%;
    opacity: 0.7;
    position: absolute;
    z-index: 101;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}    
.navigate-target span {
    align-self: center;
    -webkit-align-self: center;
    display: block;
}
.navigate-target.navigate-prev {
    left: 0; 
    min-width: 200px;
    width: 40%;
}
.navigate-target.navigate-next {
    justify-content: flex-end;
    -webkit-justify-content: flex-end;
    -webkit-box-pack: end;
    -ms-flex-pack:end;
    min-width: 200px;
    right: 0;
    width: 60%;
}
.navigate-target.navigate-prev > span {
        background: url("../images/portal/prev.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    }
.navigate-target.navigate-next > span {
        background: url("../images/portal/next.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    }
.navigate-target > span {
    display: inline-block;
    height: 48px;
    width: 30px;
    }
.photo-data {
    background: none repeat scroll 0 0 #f7f7f7;
    border-top: 1px solid #DDDDDD;
    border-bottom: 1px solid #DDDDDD;
    bottom: 0;
    color: #000;
    font-size: 14px;
    height: 78px;
    left: 0;
    padding-top: 1px;
    text-align: left;
    width: 100%;
}

.photo-data p {margin: 10px 20px 0 20px; font-size: 12px;}
.goToProject {float: right;margin: 12px;}
.photo-date {display: block;font-weight: bold;}




#uploadDocumentModal input[type="file"] {
    /*add a pix because it gets cut off in FF, this is a temp fix because I don't like this UI at all...*/
    height: 36px; 
}

.selectedRow {background: #fefdee;background: #fffad5;background: #f1f5f8;}




/*some love for the microsite forms*/
.editMicrositeForm  {width: 600px;}
.editMicrositeForm  tr.prop {border-top: 1px solid #ccc;}
.editMicrositeForm  tr.prop td {padding: 1em 0 2em 0; vertical-align: top}
.editMicrositeForm  tr.prop td:first-child {width: 180px;padding-right: 20px;}
.editMicrositeForm  tr.prop input {width: 200px;font-size: 14px;}
.editMicrositeForm  tr.prop input[type="checkbox"] {width: auto;}
.editMicrositeForm  tr.prop input.baseURL {width: 400px;}
.editMicrositeForm  tr.prop textarea {width: 400px;font-size: 14px;}

.editMicrositeForm  tr.prop .codeInput {font-family:monospace;font-size: 12px;}














/*some love for the microsite admin page*/
.editMicrositeAdmin {}
.editMicrositeAdmin h1 {
    margin-top: 70px;
    padding: 20px 0 0;
}
.editMicrositeAdmin .sectionHeader  {border-bottom: 1px solid;border-top: medium none;padding: 40px 0 0;}
.editMicrositeAdmin .sectionHeader h4 {
    color: #444;
    font-size: 20px;
    font-weight: 300;
}
.editMicrositeAdmin label {color:#555;cursor: default;}
.editMicrositeAdmin .menuBar {
    background: #f7f7f7 none repeat scroll 0 0;
    border-bottom: 1px solid #f6f6f6;
    padding: 15px 0 20px 20px;
    position: fixed;
    top: 24px;
    width: 100%;
}

.editMicrositeAdmin .featuresAndRoles {
    float: right;
    margin: 0;
    padding: 10px 40px 60px;
    width: 350px;
    line-height: 2;}
.editMicrositeAdmin .featuresAndRoles h4 {
    color: #444;
    font-size: 20px;
    font-weight: 300;
    border-bottom: 1px solid #333;
    padding: 30px 0 10px;
}

.editMicrositeAdmin .message {
    color: #bd1426;
    margin: 1em 0;
    font-size: 18px;
}

.editMicrositeAdmin .prop td {padding-bottom: 20px;}
#updateMicrositeLink {
    background: rgba(255, 255, 255, 0.9) none repeat scroll 0 0;
    border-radius: 6px;
    box-shadow: 0 0 5px #ccc;
    margin-top: 0;
    padding: 6px 8px;
    position: fixed;
    right: 70px;
    top: 33px;
}


#deleteMicrositeLink {
    border: 1px solid #ff0000;
    border-radius: 4px;
    clear: both;
    color: #ff0000;
    display: block;
    margin: 200px auto 70px;
    padding: 8px;
    text-decoration: none;
    text-shadow: none;
    width: 300px;
}
/*dropzone styles for the photo upload*/
#dropzone {
    background: none repeat scroll 0 0 #fff;
    border: 2px dashed #ddd;
    border-radius: 7px;
    height: 60px;
    margin: 0;
    padding: 20px;
}
#dropzone.hover {background: #f5f5f5;}
#dropzone p {text-align: center;margin-top: 20px; color: #666;}
.modal-body #myFotobabblesList {padding:0 30px;}




.companyInfo h4 {color: #999;font-size: 14px;font-weight: normal;margin: .5em 0;padding: 0;}
.companyInfo.companyAddress {float: left;padding-left: 4px;margin-bottom: 2em;}
.companyInfo.primaryContact {margin-left: 400px;}
.companyInfo p {line-height: 1.6;}

#editCompanyInfoModal {margin-left: -290px;width: 600px;}
#editCompanyInfoModal .modal-body {min-height: 396px;}
#editCompanyInfoModal .modal-body .row-fluid .control-group {
    float: left;
    margin-bottom: 8px;
    margin-right: 20px;
}
#editCompanyInfoModal  .companyState {clear:left;}
#editCompanyInfoModal  .companyState input {width: 3em;}
#editCompanyInfoModal  .companyZip  input {width: 4em;}
#editCompanyInfoModal .editContactPersonInfo {left: 310px;position: absolute;width: 200px;}
#editCompanyInfoModal  .contactEmail {}


.userIsEnabeld, .userIsPortalAdmin {display: inline-block;background: lime; border-radius: 20px;width: 12px;height: 12px;margin: 0 0 0 15px;}
.typeIsDefault {display: inline-block;background: orange; border-radius: 20px;width: 12px;height: 12px;margin: 0 0 0 15px;}

#createNewBatchExportModal .modal-footer {position: relative;}
#createNewBatchExportModal .modal-footer .btn.confirmExport {
    background: none repeat scroll 0 0 #00a264;
    border: 1px solid #666;
    color: #fff;
    font-weight: bold;
    letter-spacing: 0.2px;
    padding: 4px 21px;
    text-shadow: none;
}
#createNewBatchExportModal .modal-footer .noneFound {padding-top: 12px;}

#editConnectToVendorModal .control-label,
#createVendorModal .control-label,
#editVendorRelationshipModal  .control-label,
#createNewUsertModal .control-label,
#editUsertModal .control-label,
#editTypeModal .control-label {
    padding-right: 20px;
    width: 150px;
}
#editTypeModal .checkbox {
    padding-left: 190px;
}
.control-group .radio-choices input {margin-left: -8px;}

.radio-choices {
    margin: 6px 0 0 180px;
}
.radio-choices li {
    margin: 0 0 10px;
}
.radio-choices li label {
    display: inline-block;
    padding-left: 6px;
}
.control-group .radio-choices input {margin: 0 0 0 -8px;}

.checkbox-choices {
    margin: 6px 0 0 180px;
}
.checkbox-choices li {
    margin: 0 0 10px;
}
.checkbox-choices li label {
    display: inline-block;
    padding-left: 6px;
}
.control-group .checkbox-choices input {margin: 0 5px 0 -14px;}


.required {color:red;}
#createVendorModal .portalSettings {padding-top: 6px;}
#createVendorModal .portalSettings h4 {margin-top: 0;}

#editUsertModal .modal-body {position: relative;overflow: hidden;padding-bottom: 0;}
#editUsertModal .userProfilePic {
    height: 100px;
    left: 30px;
    position: absolute;
    top: 14px;
    width: 100px;
    border-radius: 100px;
}
#editUsertModal .editUserForm {
    border-right: 1px solid #eeeeee;
    height: 480px;
    margin-bottom: 0;
    margin-left: 100px;
    overflow: scroll;
    width: 425px;
}
#createRelationModal,
#createNewUsertModal,
#vendorInfoModal {
    margin-left: -380px;
    width: 760px;
}


#createNewUsertModal ::-webkit-input-placeholder {
   color: #ccc;  font-size: 12px;
}
#createNewUsertModal :-moz-placeholder { /* Firefox 18- */
   color: #ccc;  font-size: 12px;
}
#editUsertModal .help-block, 
#createNewUsertModal .help-block {
    font-size: 12px;
    line-height: 1.2;
    width: 257px;
    margin-top: 5px;  
}
#createNewUsertModal .help-block  {
    margin: 5px 0 0 168px;
}
#createNewUsertModal .chooseUserRole {
    left: 340px;
    position: absolute;
    top: 10px;
}

#newTemplateModal       ::-moz-placeholder,
.createNewSection       ::-moz-placeholder,
#createNewUsertModal    ::-moz-placeholder,
#editUsertModal         ::-moz-placeholder {  /* Firefox 19+ */
   font-size: 12px;
}

#createNewUsertModal :-ms-input-placeholder {  
   color: #ccc;  font-size: 12px;
}
#editUsertModal {width: 850px;margin-left: -425px;}
#editUsertModal .changePasswordForm {margin-top: -40px;}
#editUsertModal .changePasswordForm h5 {border-bottom: 1px solid #ddd;padding-bottom: 12px;margin-top: 0;}
#editUsertModal .changePasswordForm .form-actions-proto {border-top: 1px solid #ddd;padding-top: 12px;text-align: right;}

#removeVendorRelationModal {}

/*Manage Types */

/*.createNewType {
    background: none repeat scroll 0 0 #ffffff;
    border: 1px solid #eeeeee;
    box-shadow: 1px 2px 2px #ccc;
    display: inline-block;
    left: 70px;
    margin: 0;
    padding: 10px 20px 20px;
    position: absolute;
    top: 0;
    z-index: 1;
}*/
#editTypeModal {
    margin-left: -350px;
    width: 700px;
}
#editTypeModal .modal-body {
    height: 300px;
}

.createNewType label {font-size: 13px;display: block;}
.createNewType input {font-size: 13px;display: block; margin: 0 0 15px;}
.createNewType button {float: right;margin-left: 5px;}

.createNewType .label-checkbox {
    display: flex;
    align-items: center;
    margin: 0 0 20px 0;
}
.createNewType .label-checkbox input {
    margin:0 10px 0 0 !important;
}
.userList tr {position: relative;}
.userList .myHandle {background:url(../images/portal/my-handle-small.svg) top left no-repeat;left: 3px;top: 10px;}
.userList .listControls {  width: 30px;}
.userList .myHandleWrap {width: 20px;padding:0 !important;position: relative;}

/* After the transition this will be the only class remaining */
.fadein {
  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.25s;
  -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) .25s;
  -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) .25s;
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) .25s;
  opacity: 1; /* Default value but added for clarity */
}

/* Initial state when showing */
.fadein.ng-hide-remove {
  opacity: 0;
  display: block !important;
}

/* Will transition towards this state */
.fadein.ng-hide-remove.ng-hide-remove-active {
  opacity: 1;
}



#editUsertModal .control-group.userEnabled { 
    height: 10px;
    left: 40px;
    position: absolute;
    top: 120px;
    width: 94px;
}
#editUsertModal .control-group.userEnabled label {
    float: right;
    padding-top: 3px;
    width: auto;}
.changePasswordLink {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    position: absolute;
    right: 140px;
    text-align: right;
    top: 16px;
    width: auto;
}

.deleteThisUser {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 1px solid #fff;
    box-shadow: none;
    color: #cd0a0a;
    float: left;
    font-size: 14px;
    text-shadow: none;
}
.deleteThisUser:hover {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: 1px solid  #fff;
color: red;
text-decoration: underline;
margin:0;

}
.editPasswordMask {
    background: none repeat scroll 0 0 #ffffff;
    height: 520px;
    left: 10px;
    opacity: 0.5;
    position: absolute;
    top: 0;
    width: 550px;
}

 #editUsertModal .changePasswordForm {
    background: none repeat scroll 0 0 #ffffff;
    box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
    height: 312px;
    left: 45%;
    margin-left: 107px;
    padding: 20px;
    position: absolute;
    top: 51px;
    width: 300px;
}
 #editUsertModal input[disabled="disabled"] {opacity: .5;}


.alert-success {
    background-color: #f7f7f7;
    border: 0 none;
    color: #119020;
}

.radio-choices {
	margin-left: 180px;
}

.radio-choices li {
	margin: 0 0 10px;
}

.radio-choices li label {
 	display: inline-block;
    padding-left: 6px;
}
/*.modal.fade {transition:none !important;}*/
.group:after {
  content: "";
  display: table;
  clear: both;
}



.isFnCert {display: inline-block;background: orange; border-radius: 20px;width: 12px;height: 12px;margin: 0 0 0 15px;}

.vendorProfile {
    padding-top: 50px;
}
.vendorProfile .admin-breadcrumb {
    margin: 0 0 0 30px;
}
.vendorProfileHeader {
    padding: 1px 30px;
    margin-bottom: 20px;
}
.vendorProfileHeader h2 {
    font-size: 28px;
    margin: 10px 0 5px;
}
.connectToVendor {
    float: right;
    margin: 20px 0 0 0;
}
.isConnected {
    color:#15CF37; font-weight: bold;
}
.bigitem {
   /* This will be twice as big as the small item. */
   -webkit-flex: 2 0 0; 
   flex: 2 0 0; 
}
.smallitem {
   -webkit-flex: 1 0 0;
   flex: 1 0 0;
}

.vendorProfile .companyInfo {
    display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row; 
   flex-direction: row;
   -webkit-align-items: flex-start;
   align-items: flex-start;
}
.vendorContact {
    min-width: 300px;
    width: 400px;
}
.vendorContact ul {font-size: 13px;margin:0 0 18px 0;}
.vendorContact ul label {display: inline-block; font-weight: bold;padding-right: .5em;}

.vendorContact .vendorAddress {}

.vendorContact .contactPerson {}
.vendorContact .vendorPhone {margin-left: 100px;}
.vendorContact .fnCertified {margin-left: 100px;font-style: italic;}


.vendorProfile .vendorData {
    background: #f6f6f6;
    margin:0;
    padding: 30px;
    position: relative;
    }
.vendorProfile .relationshipStatus {
    font-size: 13px; 
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row; 
    flex-direction: row;
    -webkit-align-items: flex
}
.editRelationship {
    position: absolute;
    top: 18px;
    right: 22px;
}
.editInfo {font-weight: bold;}
.vendorProfile .relationshipStatus > div {
    flex: 1;
    flex-grow: 1;
    flex-basis: 0;
    min-width: 200px;
    padding: 0 30px 0 0;
}
.vendorProfile .relationshipStatus ul {
    margin:0 0 2em 0;
}
.vendorProfile .relationshipStatus label {
    display: inline-block;
    font-size: 13px;
    font-weight: bold;
    margin-right: 1em;
}

.vendorProfile .relationshipStatus p, .vendorProfile .coverageAreas p, .vendorProfile .vendorData .template-documents {
    line-height: 1.6;
    overflow: auto;
    max-height: 12.5em;
    background: rgba(255, 255, 255, .8);
    padding: 8px 8px;
}
}.vendorProfile .relationshipStatus p {
    max-height: 78px;
}
.vendorProfile .coverageAreas p {
    /*max-height: 60px;*/
}
.vendorProfile .vendorData .template-documents {
    max-height: 140px;
    width: 360px;
}
.vendorProfile .vendorDocuments {
    width:420px;
    float: left;
}
.vendorProfile .upload-document {
    display: inline-block;
    font-size: 13px;
    margin: 0 0 0 1em;
}
.vendorProfile .relationshipStatus .editStatus li {padding: 0 30px 0 0;text-align: right;}








#editVendorRelationshipModal .setStatus textarea {
    border: 1px solid #dddddd;
    margin: 10px 0 0 170px;
    width: 300px;
}

#editVendorRelationshipModal .addNotes {
    border-left: 1px solid #eeeeee;
    left: 550px;
    padding-left: 20px;
    position: absolute;
    top: 10px;
}
#editVendorRelationshipModal .addNotes .control-label {text-align: left;}
#editVendorRelationshipModal .addNotes textarea {
    display: inline-block;
    height: 260px;
    margin-bottom: 20px;
    width: 350px;
    border: 1px solid #dddddd;
}

.rating {height: 16px; width: 84px;display: inline-block;}
.stars0 {background:url(../images/portal/icon-stars-0.svg) 0 0  no-repeat ; }
.stars1 {background:url(../images/portal/icon-stars-1.svg) 0 0  no-repeat ; }
.stars2 {background:url(../images/portal/icon-stars-2.svg) 0 0  no-repeat ; }
.stars3 {background:url(../images/portal/icon-stars-3.svg) 0 0  no-repeat ; }
.stars4 {background:url(../images/portal/icon-stars-4.svg) 0 0  no-repeat ; }
.stars5 {background:url(../images/portal/icon-stars-5.svg) 0 0  no-repeat ; }


#editVendorServiceModal .table th {border-top: none;}

.scroll_container2 li {position: relative;}
.vendorIndacator {
    color: #15CF37;
    display: inline-block;
    font-size: 30px;
    padding-top: 6px;
    /*position: absolute;*/
    text-align: center;
    /*top: 0;*/
    /*left: 0;*/
    width: 21px;
    vertical-align: top;
}
.assigneeMenu.removeVenderAssignment {}
.removeVenderAssignment p {margin: 8px 16px;}
.removeVenderAssignment .assignFormControl {border-top: 0;margin:16px;}

/* bulk assign setDueDateMenu */
.datePickerWrapper {
    padding: 0 0 0 15px;
}
.datePickerWrapper input {
    width: 180px;
}
.datePickerWrapper button {
    border: none;
    background: #f1f1f1;
    height: 28px;
    width: 44px;
    border-radius: 2px;

}
/*Services table for Vendors and Customers*/


.vendorProfile .services {float: left;width: 100%;}
.services_inner {padding: 21px;}
.services h3 {display: inline-block;padding: 0 1em 0 0;}
.services .addServiceLink { }

.vendorProfile .services table {margin-right: 30px;}


.vendorProfile  table th {font-size: 13px;font-weight: 600;color: #666;border-top: 0;}
.vendorProfile .services table td {font-size: 13px;font-weight: 400;}
.vendorProfile .services table .addService {text-align: right;}
.vendorProfile .services .addServiceLink {font-size: 13px;font-weight: 400;}
.vendorProfile .services .table th {
    color: #999;
    font-size: 14px;
    font-weight: normal;
}



/*vendorListModal  - this is the quick and dirty undesigned version*/

.findVendorLink {
    color: transparent;
    position: absolute;
    right: -26px;
    top: 7px;
    height: 20px;
    width: 20px;
}

#vendorListModal .modal-body a {font-size: 14px;}
#vendorListModal .modal-body a.selected {color:#000;font-weight: bold;}

#vendorListModal .showVendorsBy {margin-bottom: 18px;}
#vendorListModal .showVendorsBy select {}
#vendorListModal .showVendorsBy label {
    display: block;
    margin-bottom: 0px;
    float: left;
    font-size: 13px;
    padding: 6px 12px 0 0;
}
#vendorListModal .scroll_container1 { 
    border-bottom: 1px solid #eeeeee;
    height: 200px;
    margin-bottom: 12px;
    overflow: auto;
}
#vendorListModal {}
#vendorListModal table th {
    border: 0 none;
    color: #7b8994;
    font-size: 11px;
    font-weight: 400;
}
#vendorListModal table .name {width: 20%;}
#vendorListModal table .category {width: 20%;}








.showDistance {margin:20px 5px;}
/*clearfix hack*/
.group:after {
  content: "";
  display: table;
  clear: both;
}



/* user agreement */
.staticPage.terms {
    width: 960px;
    color: #3d464d;
    font-size: 13px;
    font-weight: normal;
    margin-bottom: 200px;


}
.staticPage.terms h1 {
    font-size: 14pt;
    margin-bottom: 4px;
    padding-bottom: 10px;
    padding-top: 3px;
}

.staticPage.terms h2 {
    font-size: 10pt;
    margin-bottom: 4px;
    padding-bottom: 10px;
    padding-top: 3px;
}

.staticPage.terms p, .staticPage.terms  h1,.staticPage.terms  h2, .staticPage.terms  h3, .staticPage.terms  h4, .staticPage.terms h5 {
    line-height: 1.6em;
   
}

/*
.list-comma::before {
  content: ', ';
}
.list-comma:first-child::before {
  content: '';
}*/


#attachedReports {
    float: left;
    height: 35px;
    margin-top: -26px;
    width: 100%;
    background: #fff;

    display: none;
}

#attachedReports .nav-tabs > li.active > a {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 0 none;
    font-weight: bold;
    padding: 8px 1px 0;
}

#exportActiveVendors.bulk-btn.btn-createNew.createNew {
    background: url("../images/portal/p_bttn_download.png") no-repeat scroll 9px 5px transparent;
    padding-left: 34px;
    text-transform:  capitalize;
    border: 1px solid #ddd;
    border-radius: 2px;
    height: 30px;
    margin-left: 2px;
    margin-right: 2px;
    color: #0080FF;
    font-size: 12px;
}
#exportActiveVendors.bulk-btn.btn-createNew.createNew a {
    color: #0080FF;
    display: inline-block;
    margin-top: 5px;
}

/*start new ps2 show page styles
------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------
*/

.ps2 {
    /*all: Initial;*/
    font-family: "Helvetica";
}

/*.ps2 div {outline: 2px dotted green;}*/

#project_show.ps2 {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns:300px 1fr 340px;
    grid-template-columns:300px 1fr 340px;
    -ms-grid-rows:40px 90vh;
    grid-template-rows:40px calc(100vh - 80px);
    padding-top: 0;
    margin-top: 40px;
    height: calc(100vh - 40px);
    width: 100vw;


}
.ps2 #projectData,
.ps2 #attachmentsWrapper {
    grid-column: 2 / 4;
    grid-row: 2 / 3;
    height: 100%;
    overflow: scroll;
    overflow-x:hidden; /*hide bottom scroll bar in chrome win*/
    overflow-y:auto; /* style vertical scroll bar in chrome win*/
    margin: 0;

    -ms-grid-column: 2;
    -ms-grid-column-span: 3;

}
.ps2 #projectData .project-data-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    grid-template-rows: calc(100vh - 80px);
    overflow: hidden;
}
.ps2 #attachmentsWrapper .tab-pane {
}
.ps2 .ps_forms {
    overflow-y: scroll;
    border:0;
/*    grid-column: 1 / 2;
    grid-row: 1 /2;*/
}


.ps2 .utility_bar {
    grid-column: 1 / -1;
    grid-row: 1 / 2;
    border-bottom: 1px solid #ddd;
}

/*  CONTROL BAR --------------------------------------------------- */
.ps2 .ps_controls {
    position: fixed;
    right: 20px;
    top: 42px;
    /*background: rgba(255, 255, 255, 0.8);*/
    padding: 0;
    z-index: 1;
}

.ps2 .ps_controls > ul {
  display: flex;
  float: none;
  padding: 0;
  margin: 0; 
}

.ps2 .ps_controls > ul > li {
  float: none;
  margin: 4px 8px;
  padding: 0;
}

.ps2 .ps_controls > ul > li > a,
.ps2 .ps_controls > ul > li > div > a,
.ps2 .ps_controls > ul > li > button {
    background: transparent;
    height: 30px;
    width:30px;
    display: block;
    border-radius: 2px;
    padding:0;

}

.ps2 .ps_controls > ul > li.more > a {
    width: 50px;
}
.ps2 .ps_controls > ul > li > a
.ps2 .ps_controls > ul > li > a:hover,
.ps2 .ps_controls > ul > li > div > a:hover,
.ps2 .ps_controls > ul > li > button:hover {
    /*background: #f6f6f6;*/
}


.ps2 .ps_controls button {
  border: 0;
  background: transparent; }

 .saveSearchControls .dropdown-menu {
    right:-30px;
}

.open-photo-viewer {
    position: relative;
    width: 50px;
}
.project-photo-total-badge {
    /*background: #cd2be6;*/
    background: transparent;
    /*color: #fff;*/
    color: #3e3e3e;
    border-radius: 50px;
    padding: 0px 6px 1px 7px;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 1px;
    position: absolute;
    top: 0;
    left: 25px;
}



/*  BREADCRUMB TRAIL --------------------------------------------------- */
.ps2 .breadcrumb {
    background: transparent;
    color: #000;
    padding: 0;
    font-size: 13px;
    text-transform: capitalize;
    margin: 8px 0 0 20px;
    font-weight: 500;
    line-height: 1.8;
}

.ps2 .breadcrumb .pipe {
    color: #999;
    display: inline-block;
    padding: 0 .25em;
}

.ps2 .breadcrumb a:link, .ps2 .breadcrumb a:visited {
  color: #339AFF; }

.ps2 .breadcrumb a:hover {
  color: #0080FF; }

.ps2 .breadcrumb .property {
    padding-left: 20px;
    background: url("../images/portal/ikon-property-breadcrumb.svg") no-repeat scroll 4px 1px/12px rgba(0, 0, 0, 0)
}


/* 
fade out the placeholder image - first paint...
now the element will fade out before it is removed from the DOM */
.animate-show-hide.ng-hide {
  opacity: 0; }

.animate-show-hide.ng-hide-add,
.animate-show-hide.ng-hide-remove {
  transition: all linear 0.5s; 
}
.includeFarm {
    height: 100px;
    position: absolute;
    left: 0;
    top: 0;
}

/*  PROJECT HEADER --------------------------------------------------- */

#ps_head_w {
    margin:0;
    padding: 0 0px 0 20px;
    width: auto;
    height: 100%;
    background: transparent;
    border-right: 1px solid #eeedec;
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    display: flex;
    flex-direction:column;
}
#ps_header { 
    min-height: auto;
    margin-right: 10px;
    padding:10px 0 0 0;
}
#ps_header .title_description {
  margin: 0;
}
#ps_header .projectThumb {
    float: right;
    margin: 0;
}
#ps_header .title_description img {
    max-width: 50px;
    min-height: 50px;
    float: left;
    margin: 0 0 10px 10px; 
}
#ps_header .title_description .projectTitle {
    margin: 2px 0;
    line-height: 1.1;
    font-size: 20px;
}
#ps_header .title_description .projectDescription {
    font-weight: normal;
    font-size: 14px;
    color: #000;
    line-height: 1.2;
    letter-spacing: 0.25px;
    margin: .25em 0; 
}
#ps_header .title_description .mapLink a {
    float: left; 
}
#ps_header .title_description .mapLink .ikon {
    height: 24px;
    width: 24px; 
}
#ps_header .projectDescription.mapLink .geocode {
    background: #339AFF;
    color: #afd7ff;
    text-shadow: none;
    font-size: 13px;
    padding: 4px 10px;
    border-radius: 3px;
}
#ps_header .projectDescription.container {
    display: flex;
    justify-content:flex-start;
    align-items: center;
}
#ps_header .container a.moveContainer {
    background: url("../images/portal/folder-container-on.svg") no-repeat scroll 5px 6px /14px rgba(240, 240, 240, 1);
    height: 24px;
    width: 24px;
    display: inline-block;
    border-radius: 2px;
    margin-right: 5px;
}
#ps_header .container a.moveContainer:hover {
    background: url("../images/portal/folder-container-on.svg") no-repeat scroll 5px 6px /14px rgba(200, 200, 200, 1);
}
#ps_header .container .containerName {

}
#ps_header .container .containerNameNull {
    color: #999;
}


.section_toc {
    padding: 0 0;
    width:100%;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    -o-flex: 1;
    flex: 1;
    position: relative;
    overflow: hidden;
}
.section_toc #myTab {
    position:absolute;
    top:0;
    bottom: 0;
    left: 0;
    right:0;
    overflow-y: scroll;
    overflow-x: hidden;
    padding:0;
}

.toc_spinner {
    text-align: center;
    /*border-bottom: 1px solid #ccc;*/
}
.toc_spinner i {
    border-bottom: 1px solid #f1f1f1;
    font:normal normal normal 22px/1 FontAwesome;
}
/*project tags ----------------------------------------------- */
#ps_header .tagWrapper {
  clear: left;
  float: left;
  margin: 10px 0px; 
}
#ps_header .projectTag {
  background: #f9e936 none repeat scroll 0 0;
  border-radius: 3px;
  color: #000;
  display: inline-block;
  padding: 0 10px;
  position: relative;
  margin: 4px 4px 0 0; 
}
#ps_header .projectTag label {
  display: inline-block;
  font-size: 10px;
  margin: 2px;
  font-weight: 400;
  width: auto !important;
}
#ps_header .projectTag .removeTag {
  display: inline-block;
  font-size: 16px;
  margin: -5px 0 0 0;
  padding: 0 0 0 8px; 
}
#ps_header .projectTag .dropdown-menu {
  display: block;
  left: 30px;
  top: 15px;
  width: 200px;
}
#ps_header .projectTag .assignFeedback {
  margin: 0;
  padding: 6px 12px 0;
}
#ps_header .projectTag .assignFormControl .confirm {
  color: red;
}
#ps_header .projectTag .assignFormControl .confirm:hover {
  color: red;
  background: #fce9e9;
}
#ps_header .tags a {
  font-weight: 500;
}
#ps_header .tags span {
  color: #7b8994; 
}
#ps_header .projectTag .tagInfo {
  left: -5000px;
  top: 10px;
  width: 240px;
  opacity: 0;
  -webkit-transition: opacity 0.5s, top 0.5s;
  -moz-transition: opacity 0.5s, top 0.5s;
  -ms-transition: opacity 0.5s, top 0.5s;
  -o-transition: opacity 0.5s, top 0.5s;
  transition: opacity 0.5s, top 0.5s; 
}
#ps_header .projectTag:hover .tagInfo {
  height: auto;
  opacity: 1;
  top: 20px;
  left: 0px;
}
#ps_header .tagInfo h5 {
  color: #7B8993;
  font-size: 12px;
  margin-left: 11px;
}
#ps_header .tagInfo ul {
  margin: 12px;
}
#ps_header .tagInfo li {
  line-height: 1;
  padding-bottom: 8px;
  width: 200px;
  color: #7B8993;
}



/*  Tab sidebar  --------------------------------------------------- */
.nav-tabs {
  border-bottom: none; }

.nav-tabs li:last-child {
    margin-bottom: 100px; /*so the last item isn't cramped against the bottom*/
}

#myTab {
  margin: 0 0 0 0;
  padding: 0; }

#myTab li {
  clear: left;
  padding: 10px 0;
  width: 250px; 
  }
#myTab li h6 {
    padding: 4px;
    /*outline: 1px solid red;*/
    margin: 2px 0 2px 0px;
    width: 272px;
}
#myTab li h6:hover {
    background: #f6f6f6;
}
#myTab li.containedList {
    background: url("../images/portal/dash_workorder_views_icon_off.svg") no-repeat scroll 6px 6px / 16px;
    padding-left: 30px;
}
#myTab li.containedList:hover {
    background: url("../images/portal/dash_workorder_views_icon_off.svg") no-repeat scroll 6px 6px / 16px #f6f6f6;
}
#myTab li a {
  background: transparent;
  border: 0 none;
  border-radius: 0;
  color: #888;
  display: block;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  margin: 0;
  padding: 0 0 0 0; 
}

#myTab h6 a .sectionLabel  {
    display: inline-block;
    width: 235px;
}
#myTab h6 a .incompleteCount {
    float: right;
    color: orange;
    margin-right: 20px;
  }
#myTab li a .containedItemCount {
    float: right;
    margin: 0 5px 0 0;
    font-weight: bold;
    background: url(../images/portal/chevron_right_lite.svg) 100% 0px / 19px no-repeat;
    padding-right: 20px;
}
#myTab li.active {
  font-weight: 600;
  color: #000;
}
#myTab li.active a,
#myTab li.active a:hover {
  font-weight: 600;
  color: #000;
  background: transparent;
}
#myTab li.containedList.active {
    background: url("../images/portal/dash_workorder_views_icon.svg") no-repeat scroll 6px 6px / 16px #f6f6f6;
    padding-left: 30px;
}
.ps2 .tabSidebar .containedItemCount {
  color: #aaa;
  font-weight: normal;
  display: inline-block;
  padding-left: 1em;
}



#fn_type_list h2 {
    float: left;
    font-size: 18px;
    font-weight: 600;
    margin: 0 1em 0 0px;
    position: relative;
    text-transform: capitalize;
}


.ps2 .ps_comment_module {
    float: none;
width: auto;
margin: 0 20px 60px 10px;
}
.ps2 #project-comments,
.ps2 #project-comments > div {
    height: 100%;
}
.ps2 #project-info,
.ps2 #project-documents,
.ps2 #projectComments,
.ps2 #project-activity {
    background: none repeat scroll 0 0 #fff;
    height: 100%;
    position: relative;
    right: 0;
    top: auto;
    /* z-index: 5500; */
    border: none;
    border-top: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    width: 339px;
    margin: 0;
}
.ps2 .documents-container ul li.document-toolbar {
    position: absolute;
    border-bottom: 1px solid #ddd;
    width: 94%;
    top: 0;
    background: #fff;
    z-index: 1;
}
.ps2 .documents-container .upload-document {
    font-size: 12px;
    display: inline-block;
    padding: 0;
    margin: 10px 0 10px 0;
    color: #777;
}
.ps2 .documents-container .doc-line-item {
    background: url(../images/portal/document-icon.svg) no-repeat scroll 1px 11px/14px rgba(0, 0, 0, 0);
    padding: 0 0 0 25px;
    height: 40px;
}
#eagleView-toolbar {
    width: auto;
    display: flex;
    align-items: center;
    border: 1.5px solid #ddd;
    border-radius: 2px;
    padding: 0px 12px;
    height: 23px;
    margin: 2px 20px 0 0;
    color: #3e3e3e;
    font-size: 12px;
}

#eagleView-toolbar .ikon-eagleview {
    background: rgba(0, 0, 0, 0) url("../images/portal/icon-report-eagleview-menu.svg") no-repeat scroll 0px 0px / 18px auto;
    height: 18px;
    width: 20px;
    margin: -4px 5px 0 0;
}


.ps2 .documents-container .doc-line-item.eagleview {
    background: url(../images/portal/document-icon-eagleview.svg) no-repeat scroll 1px 13px/18px rgba(0, 0, 0, 0);
    padding: 0 0 0 25px;
}
.documents-container .eagleviewOrder,
.documents-container .eagleviewOrder:hover {
    float: right;
    margin: 0px 10px 0 0;
    background: url(../images/portal/eagleview-icon-color.svg) no-repeat scroll 14px 9px/16px rgba(0, 0, 0, 0);
    border: 1px solid #ddd;
    color: #019AC5;
    text-shadow: none;
    letter-spacing: .5px;
    padding: 5px 12px 5px 35px;
}

.documents-container.eagleViewList h4 {
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    text-align: center;
}
#orderEagleViewReportModal {
    display: none;
    width: 600px;
    left: 63%;
}
#orderEagleViewReportModal h4 {
    background: url(../images/portal/eagleview-branding.jpg) no-repeat scroll 100% -5px/170px rgba(0, 0, 0, 0);
    padding-bottom: 15px;
}
#orderEagleViewReportModal .legal-eagle {

}
.ps2 .documents-container.eagleViewList ul {
    margin:0;
    padding:0;
}
.ps2 .documents-container.eagleViewList .doc-line-item {
    background: #f6f6f6;
    padding: 10px;
    border-radius: 4px;
}
.ps2 .documents-container.eagleViewList .doc-line-item .docMeta {
    color: #666;
    font-size: 12px;
    margin-top: 5px;
}

#projectComments-inner {
 
}
.ps2 #projectComments-inner {
    margin-top: 0px;
    overflow-y: scroll;
    padding: 0 0 0 0;
    width: 100%;
    min-height: 300px;
    margin: 0;
    height: auto;
    flex: 1;
}
.ps2 .projectDocuments-header,
.ps2 #projectComments-header,
.ps2 .projectActivity-header {
    background: none repeat scroll 0 0 #fff;
    padding: 0 20px;
    position: relative;
    width: auto;
}


  .ps2 .projectDocuments-header h4,
  .ps2 #projectComments-header h4,
  .ps2 .projectActivity-header h4 {
    color: #000;
    text-transform: none;
    font-size: 14px;
    font-weight: 600;
    text-align: center;

}
.ps2 .projectDocuments-header h4 {
    text-align: left;
}
.ps2 .projectActivity-header h4 {
    text-align: right;
}


  .ps2 .ps_comment_module .commentThread .commentText {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 0 none;
    color: #333;
    font-family: verdana;
    font-size: 11px;
    line-height: 1.1;
    margin: 0 0 10px;
    padding: 0;
}
.pl2 .commentThread .taskNotes ,
.ps2 .ps_comment_module .commentThread .taskNotes {   
    background: #f0f7fb;
    padding: 0;
    line-height: 1.2;
    margin: 0 25px 10px 15px;
    padding: 2px 10px;
}
.pl2 .commentThread .taskNotes.commentsOfOtherUsers, 
.ps2 .ps_comment_module .commentThread .taskNotes.commentsOfOtherUsers {
    background: #f9f6da;
    margin: 0 20px 10px 25px;
}
.pl2 .ps_comment_module .profilePic,
.ps2 .ps_comment_module .profilePic {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    border: 3px solid #fff;
    float: right;
    margin: 4px -35px 0 0px;
    background: rgba(0, 0, 0, 0) url("../images/portal/icon-admin-menu-user-white.svg") no-repeat scroll 0px 0px / 30px auto;
}
.pl2 .commentThread .taskNotes.commentsOfOtherUsers .profilePic ,
.ps2 .ps_comment_module .commentThread .taskNotes.commentsOfOtherUsers .profilePic {
    float: left;
    float: left;
    margin: 4px 3px 0 -35px;
}

.ps2 .ps_comment_module .commentThread .taskNotes .timeStamp {
    font-size: 11px;
    color: #999;
    font-weight: 400;
    display: inline-block;
    padding:0 1em;
}

.ps2 .commentNodeAdd {
    border: none;
    position: absolute;
    clear: both;
    left: 0;
    height: auto;
    padding: 0;
    right: 0;
    bottom: 0;
    background: #fff;

}
.ps2 .commentNodeAdd textarea {
    resize: none;
    margin: 10px 0 0 10px;
    width: 250px;
    border-top-left-radius: 4px;
    height: 32px;
    border-bottom-left-radius: 4px;
    border-right: none;
}

.ps2 .commentNodeAdd button {
    height: 42px;
    display: inline-block;
    margin: 10px 0 0 -4px;
    border: 1px solid blue;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: none;
}



/*.ps2 .activityLogPanel h4 {
    color: red;
    text-transform: none;
    font-size: 14px;
    font-weight: 600;
}*/
.ps2 .activityLogPanel {
    clear: left;
    float: none;
    height: auto;
    width: 100%;
    background: #fff;
    bottom: 0px;
    left: 0;
    position: relative;
 /*   flex:1;
    overflow-y:scroll;*/
}
.ps2 .activityLogPanel-i {
    position: relative;
    overflow-y: scroll;
    top: 0px;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
}
.ps2 .activityLogPanel-i div:last-child {
    margin-bottom: 40px;
}


/*.ps2 .activityLogPanel h4 {
    background-color: #ffffff;
    border-top: 1px solid #ccc;
    color: #000;
    font-size: 16px;
    font-weight: 600;
    padding: 10px 20px;
    position: absolute;
    text-transform: none;
    top: -10px;
    width: 340px;
}
    .ps2  .activityLogPanel h4 a {
        float: right;
        font-size: 12px;
        font-weight: 400; 
    }*/

.ps2 h4#showLogLink {
    background: #ffffff none repeat scroll 0 0;
    border-top: 1px solid #ccc;
    bottom: -10px;
    font-size: 16px;
    font-weight: 600;
    left: 0;
    padding: 6px 20px 20px;
    position: absolute;
    text-transform: none;
    width: 340px;
    color: #333;
}
    .ps2 h4#showLogLink a {
        float: right;
        font-weight: 400;
        font-size: 12px;
    }



/*form fields*/
.ps2 .myLayoutTable td.left {
    width:auto;
}
.ps2 .ps_forms_content {
    overflow: auto;
    padding: 1px 0;
    width: auto;
    background: none repeat scroll 0 0 #EEEDEC;
    border-left: none;
}

.ps2 .ps_forms_content_i {
    /*background: none repeat scroll 0 0 #f7f7f7;*/
    background: transparent;
    padding-top: 0px;
    /*min-height: 0;*/
    

    /* width: 640px; 
    because of .newspaper */
}
.ps2 .ps_section_w a.adjust {
    margin-top: -15px;
    padding-bottom: 190px;
    display: block;
    position: absolute;
    top: 0px;
}


.ps2 .uploadBrowseButton {
    background: none repeat scroll 0 0 #6cd183;
    border: medium none;
    border-radius: 3px;
    color: #fff;
    display: inline-block;
    font-size: 16px;
    font-weight: 500;
    margin: 0px 0 0 0px;
    padding: 12px 24px;
    width: 100%;
}
.ps2 #uploadDocumentModal .showFileName {
    padding: .4em 0 1em 0;
    text-align: center;
    border-bottom: 1px solid #ccc;
    font-size: 16px;
}

.ps2 #uploadDocumentModal .form-horizontal .control-label {
    float: left;
    padding-right: .25em;
    padding-top: 5px;
    text-align: right;
    width: auto;
    font-size: 14px;
}
#uploadDocumentModal .hideFromCustomer.control-group, #uploadDocumentModal .hideFromWorker.control-group {
    margin: 10px 0;
    clear: left;
}
/* -------------------------------------
   layout ONE COLUMN COMPACT
   -------------------------------------*/
.ps2  .ps_section_w  {
    /*max-width: 640px;*/
    width:auto;
    min-width: 300px;
    padding: 0;
    margin: 0 20px;
    z-index: 0;
}

.ps2  .ps_section_w  h4 {
    clear: both;
    padding: 0px 0px 12px 0;
    margin: 20px 0 0px 0;
    font-size: 16px;
    font-weight: 800;
}


/*field comment - new referedt o as a field memo */
.ps2 .comment-w {
    clear:both;
    margin:10px 0 0 0;
}
.ps2 .comment-w .placeholder {
    color: #A7A7A7;
    font-size: 12px;
    font-weight: 300;
}
.ps2  .comment-w p {
    border:none;
    padding: 0;
    width: 417px;
    border-radius: 0;
    margin: 0 0 0 18px;
    font-size: .9em;
    line-height: 1.2;
    color: #000;
    background: #fff;
    border-bottom: 1px solid #fff;
    min-height:18px;
}
.ps2 .comment-w p.noComment {
        border:none;
        border-bottom: 1px solid #fff;
}
.ps2 .comment-w p:hover,
.ps2 .comment-w p.noComment:hover {
    /*cursor: text;*/
    /*border-bottom: 1px solid rgba(82, 168, 236, 0.8);*/
    border-bottom: 1px solid #fff;
    /*background: #f7f7f7;*/
}
.ps2 .memo-cell-edit form {
    margin: 0;
}
.ps2 .memo-cell-edit textarea {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #000;
    margin: -4px 0 0 4px;
    padding: 3px;
    width: 420px;
    font-size: .9em;
    height:4em;

}
.ps2 .memo-cell-edit textarea:focus {

    border: 1px solid rgba(82, 168, 236, 0.8);
    /*background: #f6f6f6;*/
}

.comment-w .ikon.ikon-field-memo {
    background: url("../images/portal/ikon-field memo.svg") no-repeat scroll 1px 3px / 10px rgba(0, 0, 0, 0);
    float: left;
    width: 11px;
    height: 16px;
}

.comment-w .ikon.ikon-field-memo.fieldRequired {
    background: url("../images/portal/field-memo-required_btn.svg") no-repeat scroll 1px 3px / 10px rgba(0, 0, 0, 0);
}


.ps2 .comment-w .ikon.ikon-field-memo.testMe {
    opacity: .5;
}





.ps2 .addPhotoBttn span {
    position: absolute;
    font-weight: bold;
    color: #888;
    margin: 0px 1px 0px 0;
    font-size: 12px;
    right: 35px;
}
.ps2 .field_box {
    width: auto;
    margin: 0px 0 10px 0;
    padding: 10px;
    border-radius: 4px;
    display: flow-root;
    background: #ffffff none repeat scroll 0 0;
    border: medium none;
    position: relative;
    -webkit-column-break-inside: avoid;
    min-height: 60px;
}
.ps2 .ps_forms .fieldLabel {
    color:#637282;   
    font-weight: 500;
    width: 100%;
    cursor: default;
}
.ps2 .ps_forms .fieldLabel.fieldRequired {
    color: #f07914;
}

.ps2 .ps_forms .fieldLabel  span {
    /*background: yellow;*/
}
.ps2 .ps_forms .fieldLabel  .field-icons {
    float: right;
    margin: 0 0px 0px 10px;
    cursor: default;
}
.ps2 .ps_forms .fieldLabel  .field-icons  .displayFieldID {
    font-weight: bold;
    color: #999;
    font-size: 10px;
    padding: 0 10px 0 10px;
    vertical-align: super;
    display: inline-block;
    background: url("../images/portal/icon-displayField.svg") no-repeat scroll 0 4px;
    padding: 0 0 0 16px;
}


.ps2 .ps_forms .fieldLabel .dependantLabel {
    font-style: italic;
    color: #666;
}
.ps2 .ps_forms .styled-select {
    width: 320px;
    height: 32px;
}
.ps2 .ps_forms .styled-select select {
    font-size: 16px;
    width: 336px;
    height: 34px;
}
/*.ps2 .ps_forms .styled-select select {
    font-size: 16px;
}*/
.ps2 .ikon-dependency {
    background: url("../images/portal/dependency.png") no-repeat scroll 0 0;
    margin-bottom: -14px;
    width: 4px !important;
    margin-right: 2px !important;
}
.ps2  .field_container_i {
    padding: 1px 0 0 0;
}
.ps2 .field_container input[type="text"],
.ps2 .field_container textarea {
    width: 85%;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: none;
    border-radius: 2px;
}
.ps2 .field_container input[type="text"]:hover,
.ps2 .field_container  textarea:hover {
    border: 1px solid #5EAFFF;
    }
.ps2 .field_container input[type="text"]:focus,
.ps2 .field_container  textarea:focus {
    border: 1px solid #5EAFFF;
    background: #E9F6FD;

    }
.ps2 .styled-select  {
    background: #FFF url("../images/portal/styled-select.svg") no-repeat scroll 96% 50%;
    border: 1px solid #ddd;
    box-shadow: none;
    border-radius: 2px;
}
.ps2 .button-select li {
    display: inline-block;
}
.ps2 .button-select input[type="radio"]:checked + label {
    background: #1477ef none repeat scroll 0 0;
    border: 1px solid #1477ef;
    color: #ffffff;
}
.ps2 .input-append .add-on, .ps2 .input-prepend .add-on {
    border-color:#eee;
}
.ps2 .field_container .date-field input[type="text"] {
    border-right:none;
}
.ps2 .field_container .money-field input[type="text"],
.ps2 .field_container .barcode-field input[type="text"]  {
    border-left:none;
}
.ps2 .field_container .money-field  .input-prepend.input-append .add-on:first-child,
.ps2 .field_container .barcode-field  .input-prepend.input-append .add-on:first-child {
    border: 1px solid #ccc;
    border-right: none;
}
.ps2 .field_container .date-field  .input-append .btn:last-child {
    border: 1px solid #ccc;
    border-left: none;

}


.ps2 .boolean label {
    position: relative;
    display: inline-block;
    width: 5rem;
}
.ps2 .styled-checkbox {
/*  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;*/
}
.ps2 .field_container .boolean {
    margin-bottom: 10px;
    height: 40px;
}
/* Hide the browser's default checkbox */
.ps2 .styled-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}


/* Create a custom checkbox */
.ps2 .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 65px;
    background-color: #fff;
    text-align: center;
    border-radius: 4px;
    font-weight: 400;
    padding: 2px 6px;
    line-height: 1.9;
    color: #000;
    border:1px solid #ddd;
}

/* On mouse-over, add a grey background color */
.ps2 .styled-checkbox:hover input ~ .checkmark {
  background-color: #fff;
  color: #000;
  border:1px solid #ddd;
}

/* When the checkbox is checked, add a blue background */
.ps2 .styled-checkbox input:checked ~ .checkmark {
  background-color: #1477ef;
  border:1px solid #1477ef;
  color: #fff;
}

/* Create the checkmark/indicator (hidden when not checked) */
.ps2 .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.ps2 .styled-checkbox input:checked ~ .checkmark:after {
  display: block;
}
/* Style the checkmark/indicator - not using it here */
.ps2 .styled-checkbox .checkmark:after {
 /* left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);*/
}




/* -------------------------------------
   documents sidebar
   -------------------------------------*/

.ps2 .sidebar-right {
    grid-column: 2 / 3;
    grid-row: 1 / 2;


    background: #fff;
    border-left: 1px solid #EEEDEC;
    padding: 0;
    margin: 0;
    float: none;
    height:99%;
    position: relative;
    overflow: auto;
    display: flex;
    flex-direction: column;
}

.ps2 .sidebar-right.layout_containerView {
    /*display: none;*/
}


.ps-settings {
    padding: 10px 20px;
    background: #f6f6f6;
}
.ps-settings .line-item {
    margin: 10px 0;
    padding: 0;
}
.ps-settings .status-last-updated {
    font-size: 11px;
    font-weight: 400;
    color: #888;
    margin: 0px 0 0 6px;
}
.ps-settings label {
    display: inline-block;
    font-weight: 500;
    margin: -2px 0 0 0;
    color: #666;
    padding: 0px 10px 0 0;
    height: 20px;
    width: 60px;
    vertical-align: middle;
    font-size: 12px;
}

    .ps2 .ps-settings .btn-group .btn {
    box-shadow: none;
    background: #FFF url("../images/portal/styled-select.svg") no-repeat scroll 96% 50%;
    color: #333;
    padding: 3px 24px 2px 10px;
    height: 22px;
    border: 1px solid #ddd;
    font-weight: 400;
    width: 150px;
    text-align: left;
    border-radius: 2px;
}
  .ps2 .ps-settings .btn .caret {
    opacity: .5; }

/*  .ps2 .ps-settings .dropdown-menu {
    right: 0;
    top: 30px;
    width: 240px;
    }*/
 .ps2 .ps-settings .infoValue {
    vertical-align: text-bottom;
    max-width: 154px;
    overflow: hidden;
    display: inline-block;
    }

 .ps2 .ps-settings .readOnly .infoValue  {

}    
  .ps2 .ps-settings .infoValueNull {
    color: #888;
    font-style: italic;
    font-size: 14px;
    vertical-align: inherit;
    letter-spacing: .24px;
    font-weight: 400;
    margin-left: -4px;
    }
  .ps2 .ps-settings .findVendorLink {
    color: #888;
    position: absolute;
    right: -27px;
    top: 12px;
    height: 20px;
    width: 20px;
    font-size: 10px;
    }
  
 .ps2 .ps-settings .ikon-findVendorBy {
    background: rgba(0, 0, 0, 0) url("../images/portal/findVendor-btn.svg") no-repeat scroll 2px 0px / 14px auto;
    height: 19px;
    position: absolute;
    top: -11px;
    left: 6px;
}


  .ps2 .project-info {
    clear: both;
    font-size: 11px;
    color: #666;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: .25px;
    margin: 10px 0 0 0;
    font-size: 12px;
    margin: 20px 20px 10px;
  }
.ps2 .project-info hr {border-top: 1px solid #ccc;}

.ps2 .auditEntry {margin:10px 15px;}
.ps2 .setProjectDue input {
    background: #fff;
    border: 1px solid #ddd;
    color: #333;
    float: left;
    margin: 0 0 0 0;
    width: 5.2em;
    font-weight: 500;
    cursor: pointer;
    height: 22px;
    padding: 2px 24px 3px 11px;
}
  .ps2 .setProjectDue input:placeholder-shown {
    padding-left: 11px;
  }
  .ps2 .setProjectDue input::placeholder {
    color: #888;
    font-style: italic;
    font-size: 14px;
    vertical-align: inherit;
    letter-spacing: .24px;
    opacity: 1;
    font-weight: 400;
    text-align: left;
}   
.ps2 .setProjectDue button {
    border: 1px solid #ddd;
    background: #f6f6f6;
    margin: 0 0 0 -1px;
    opacity: 0.4;
    height: 29px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;}
.ps2 .setProjectDue .input-append {
  margin:0;
}

/*Search UI for the assign pop up*/
.searchPopUp {
  border-bottom: 1px solid #eeeeee;
  padding: 6px 0 11px; }

.searchPopUp form {
  margin: 0; }

.searchPopUp input[type="text"], .searchPopUp input[type="text"]:focus {
  display: block;
  border: none;
  margin: auto;
  width: 86%;
  background: url("../images/portal/p_bttn_search.png") no-repeat scroll 5% center transparent;
  box-shadow: none;
  padding-left: 40px; 
font-size: 14px;}

.searchPopUp input[type="text"]::-moz-placeholder {
  font-size: 14px;
  color: #666; }

.bulk-assign .vendorIndacator {
  background: transparent url("../images/portal/vendor_icon.svg") no-repeat scroll 0 0/19px auto;
  display: inline-block;
  font-size: 30px;
  height: 22px;
  padding-top: 0;
  position: absolute;
  right: 16px;
  text-align: center;
  vertical-align: top;
  width: 21px; 
}



.sidebar-tabs-wrap {
    flex:1;
    position: relative;
}
.sidebar-tabs-content {
    overflow-y: scroll;
    overflow-x: hidden;
    position: absolute;
    top: 40px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
}
.show-right-sidebar-tabs {
    display: flex;
    flex-direction: row;
    margin: 0 0 0 0;
    background: #eeedec;
}
.sidebar-tab {
    flex-grow:1;
    padding: 4px 0;
    /*background: #f6f6f6;*/
    text-align: center;
}
.sidebar-tab.active {background: #fff;}

.sidebar-tab a {
    display: block;
    height: 27px;
    }

.ps2 .info-tab a{
    background: url("../images/portal/icon-info-sidebar.svg") no-repeat scroll 50% 6px/18px  rgba(0, 0, 0, 0);
    opacity: .4;
}
.ps2 .documents-tab a{
    background: url("../images/portal/icon-documents-sidebar.svg") no-repeat scroll 50% 6px/14px  rgba(0, 0, 0, 0);
    opacity: .4;
}
.ps2 .comments-tab a{
    background: url("../images/portal/icon-comments-close.svg") no-repeat scroll 50% 7px/19px  rgba(0, 0, 0, 0);
    opacity: .4;
}
.ps2 .activity-tab a {
    background: url("../images/portal/icon-activity-sidebar.svg") no-repeat scroll 50% 5px/16px  rgba(0, 0, 0, 0);
    opacity: .4;
}
.ps2 .sidebar-tab.active a {
    opacity: 1;
}
.ps2 .documents-container {
    padding: 0 0px;
    margin: 20px;
}
.ps2 .documents-container h4 {
    font-weight: 600;
    text-transform: none;
    font-size: 14px;
    color: #000;
}
.ps2 .documents-container h4 a {
    display: inline-block;
    border-radius: 30px;
    color: #119020;
    margin: 0px 0 -2px 5px;
    background: url("../images/portal/addSign.svg") no-repeat scroll 6px 6px/10px #43ba43;
    height: 22px;
    width: 22px;
    vertical-align: text-bottom;
}
.ps2 .documents-container ul {
    height: auto;
    margin: 0 0 0 20px;
    overflow-y: auto;
    padding: 40px 0px 020px;
}
.ps2 .documents-container ul li {
    line-height: 1;
    position: relative;
    padding: 0;
}
.ps2 .documents-container li > a {
    padding: 6px 30px 0 0px;
    border-radius: 2px;
    line-height: 1.4;
    color: #444;
    display: block;
    font-weight: 500;
}
.ps2 .documents-container .docMeta {
    font-size: 11px;
    color:#bbb;
 }
.ps2 .documents-container li:hover {
}
.ps2 .documents-container li:hover a {
    color:#339AFF;
}
.ps2 .documents-container .ikon-doc {
    background: url("../images/portal/icon-doc.svg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    position: absolute;
    height: 20px;
    top: -1px;
    width: 20px;
    left: 10px;
}
.ps2 .documents-container li:hover .ikon-doc {
    background: url("../images/portal/icon-doc-hover.svg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
}
.ps2 .documents-container li > a.edit {
    display: none;
    position: absolute;
    top: 0px;
    right: 10px;
    padding: 8px;
    border-radius: 2px;
    }
.ps2 .documents-container li:hover > a.edit {
    display: block;
    opacity:.4;
}
.ps2 .documents-container li:hover > a.edit:hover {
    opacity: 1;
}
.ps2  .noDocsYet {
    color: #aaa;
    font-size: 12px;
    margin: 60px 20px;
}
.ps2 .fotobabble-sumary .flaggedThumb {
    background: rgba(0, 0, 0, 0) url("../images/portal/flagBadge.svg") no-repeat scroll 0 0 / 14px auto;
    height:14px;
    left: 1px;
    position: absolute;
    top: 1px;
    width:14px;
}


/*TODO*/
.ps2  .photo-wrap {width: 85%;}
.ps2  .photo-wrap td {border:none;}

.ps2 .button-select {
    list-style-type: none;
    margin: 0px 0 0 0;
    padding: 0;
}
.ps2 #clearFix {margin-top:0px;}


/*  PROJECT FORM images --------------------------------------------------- */  

.ps2 .fotobabble-sumary img.imagethumb {background: none repeat scroll 0 0 #f4f4f4;border: 1px solid #fff;cursor: pointer;display: inline-block;height: 50px; padding: 0;width: 50px;}
.ps2 #myFotobabblesList {margin-left: 0px;}
.ps2 #myFotobabblesList .fotobabble-sumary {display: inline-block;float: left;height: auto;margin: 5px 5px 5px 0;padding-right: 0px;width: auto;}
.ps2 .form-media-wrap {margin: 6px 0 0;}
.ps2 .fotobabble-sumary .userControls a {margin-bottom: 14px; }
.ps2 .userControls a.deleteBttn {background: rgba(0, 0, 0, .5);border-radius: 0;height: 12px;left: 30px;opacity: 0;padding: 1px 8px 7px 3px;position: absolute;top: 30px; transition: opacity 0.3s ease-out 0s; width: 10px; }
.ps2 .thumb-wrap:hover a.deleteBttn {opacity:1;}
.ps2 .userControls {margin-top: -25px;height: 24px; width:24px; }
.ps2 .icon-remove-sign {   background-color: #FFFFFF;   border: 2px solid #333;   border-radius: 10px 10px 10px 10px;   height: 10px;   width: 10px;   z-index: 200; background-position: -50px -98px;}
.ps2 .ps_field  .addPhotoBttn {
    position: absolute;
    bottom: 0px;
    right: 5px;
    top:auto;
    margin: 0 0 9px 20px;
}





/*tab panes ----------------------*/

.ps2 .tab-pane.overview-pane,
.ps2 .tab-pane.documents-pane,
.ps2 .tab-pane.child-projects {
    padding: 0 0px 40px 0px;
    min-width: 800px;
    overflow: scroll;
}
#fn_type_list td {
    color: #666;
    font-size: 12px;
    color: #47525d;
    border-top: 1px solid #dee6ec;
    line-height: 1.3; 
    padding-left: 12px;
}

/*new header for child projects on the new show page*/
#fn_type_list.containedProjects {margin-top:0;}
.child_list_head {
    position: relative;
    padding: 1px 20px 0 20px;
    height: 50px;
    margin-bottom: 20px;
    display: flex;
    flex-direction:row;
    justify-content: space-between;
    align-items:center;
    background: #EEEDEC;
}
.child_list_head h2 {
    display: inline-block;
    font-size: 16px !important;
    margin-top: 4px !important;
}
.child_list_head .form-search {
    float: none !important;
    display: block;
    margin: auto;
    width: 200px;
    margin: 0;
}
.child_list_head .archive_count {
    display: inline-block;
}
.child_list_head .createNewProject {
    margin:0;
}




/*   -----------------------------------------------------------------------------
                new photo Modal styles
---------------------------------------------------------------------------------- */





#showPhotoManager.photo-manager {
    left: auto;
    position: fixed;
    top: 0;
    width: 100%;
    margin: auto;
    overflow: auto;
    bottom: 0;
    padding: 0;

    z-index: 2000;
    background: #fff;

   

}
#showPhotoManager.photo-manager .inner {
    position: absolute;
    top:0;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: 420px 1fr;
    grid-template-rows: 100vh;
    overflow: hidden;
}
#showPhotoManager .project-thumbnails {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: -1;
    /*background: pink;*/
    margin-bottom: 100px;
}
#showPhotoManager .project-thumbnails.hidePhotoWell {
    grid-column-start: 1;
    grid-column-end: -1;
}

#showPhotoManager .project-photo-header {
    border-bottom: 1px solid #ddd;
    width: calc(100% - 20px);
    margin: 0 0 0 20px;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    min-height: 40px;
    padding: 0 0 5px 0;
}
#showPhotoManager .project-photo-header h2 {
    font-size: 18px;
    flex-grow:1;
    margin:0;
    line-height: 1.4;
    /*truncate*/
    width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: -1;

}
#showPhotoManager .project-photo-header  .photoTotal {
    font-size: 13px;
    padding: 0 10px;
    display: block;
    margin: 0px 0px 10px 0px;
}
#showPhotoManager .project-photo-header  .findThumb {
    background: url("../images/portal/find-thumb.svg") no-repeat scroll 0px 0px/22px;
    display: block;
    margin: 0px 10px 9px 0px;
    height: 22px;
    width: 22px;
}
#showPhotoManager .project-photo-header  .download-zip {
    background: url("../images/portal/download-zip.svg") no-repeat scroll 0px 2px/20px;
    display: block;
    margin: 0px 10px 9px 0px;
    height: 22px;
    width: 22px;
}
#showPhotoManager .photo-viewer {
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: -1;
    display: grid;
    grid-template-columns: 1fr 230px;
    grid-template-rows: 100vh;
}
#showPhotoManager .photo-viewer.expandPhotoWell {
    grid-column-start: 1;
    grid-column-end: 3;
}
#showPhotoManager.photo-manager .modal-header h2 {
    position: absolute;
    left: 50%;
    top: -2px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    font-size: 14px;
    margin: 0;
    padding: 0;
    color: #7b8994;
    font-weight: 400;
}
#showPhotoManager.photo-manager .togglePhotoWell {
  /*  position: absolute;
    right: 10%;
    top: 9px;*/
}
#showPhotoManager.photo-manager .togglePhotoWell a {
    display: inline-block;
    width: 36px;
    height: 27px;
    opacity: .5;
}
#showPhotoManager.photo-manager .togglePhotoWell a.hidePhotoWell {
    background: transparent url("../images/portal/photo-well-minimize.svg") no-repeat scroll 0px 6px / 18px;

}
#showPhotoManager.photo-manager .togglePhotoWell a.showPhotoWell {
    background:transparent url("../images/portal/photo-well-restore.svg") no-repeat scroll 0px 4px / 18px;
    margin: 0 12px 4px 90px;
}
#showPhotoManager.photo-manager .togglePhotoWell a.expandPhotoWell {
    background: transparent url("../images/portal/photo-well-expand.svg") no-repeat scroll 0px 0px / 18px;
    margin: 0px 0 -6px 0;
}
#showPhotoManager.photo-manager .togglePhotoWell a.restorePhotoWell {
    background: transparent url("../images/portal/photo-well-restore.svg") no-repeat scroll 0px 1px / 18px;
    margin: 0 0 -12px 0;
}
#showPhotoManager.photo-manager .close {
    font-size: 30px;
    opacity: .6;
    font-weight: 400;
}
#showPhotoManager.photo-manager .project-photo-header .close {
     margin: 0 15px 11px 0;
}
#showPhotoManager.photo-manager .photo-data-header .close {
    margin: 0 15px 10px 0;
}

#showPhotoManager.photo-manager .modal-body {
    overflow: auto;
    position: relative;
    height: 100%;
    bottom: 0;
    max-height: 100%;
    padding:0;
    overflow: hidden;
}
.right-side {
    margin: 40px 0 0 0;
    background: #fff;
    float: right;
    width: 54.833333%;
    overflow: scroll;
    padding: 20px 20px 0 0;
    height: 100%;
    border-left: 1px solid #ddd;  
}
.right-side-inner {
    width:600px;
    margin: auto;
    height: 100%;
    padding-bottom: 100px;
    position: relative;
}
.left-side {
    overflow: auto;
    height: calc(100vh - 60px);
    padding: 15px 0 0 0;
}
.left-side.hideAllThumbs {
    display: none;
}
.fixed-control-strip {
    z-index: 0;
    display: flex;
    margin:0;
    height: 30px;
}
.fixed-control-strip li {
    margin:0 10px;
}
#showPhotoManager.photo-manager  .flagPhoto {
    /*margin:0px 0 16px 0px;*/
}
#showPhotoManager.photo-manager .flagPhoto input[type="checkbox"] {
    display:none;
}
#showPhotoManager.photo-manager  .flagPhoto input[type="checkbox"] + label span {
    display: inline-block;
    width: 28px;
    height: 26px;
    margin: 0 0 0 0;
    vertical-align: middle;
    background: transparent url(../images/portal/icon-flag-toggle-off.svg )  6px 8px / 14px no-repeat;
    cursor: pointer;
    border-radius: 2px;
}
#showPhotoManager.photo-manager  .flagPhoto input[type="checkbox"]:checked + label span {
    background:url(../images/portal/icon-flag-toggle-on.svg) 6px 8px / 14px  no-repeat;
}
.fixed-control-strip a {
    height: 100%;
    width: 30px;
    display: block;
    opacity: .6;
    border-radius: 4px;
}

.fixed-control-strip .editPhoto {
    background: transparent url(../images/portal/icon-edit-photo.svg ) 7px 7px / 16px no-repeat;
}
.fixed-control-strip .viewFullSizePhoto {
    background: url(../images/portal/open-image-new-tab.svg ) 7px 10px / 14px no-repeat;
}
.fixed-control-strip .downloadPhoto {
    background:url(../images/portal/icon-download-photo.svg ) 8px 6px / 15px no-repeat;
}
.fixed-control-strip .deletePhoto {
    background:url(../images/portal/icon-delete-photo.svg ) 9px 8px / 13px no-repeat;
}
.fixed-control-strip .deletePhoto:hover {
    background:url(../images/portal/icon-delete-photo-caution.svg ) 9px 8px / 13px no-repeat;
}
.fixed-control-strip .icon_getURL {
    background: transparent url(../images/portal/icon_getURL.svg ) 7px 7px / 16px no-repeat;
}
#showPhotoManager.photo-manager  .flagPhoto input[type="checkbox"] + label span:hover,

.fixed-control-strip a:hover {
    opacity:1;
    background-color: transparent !important;
}

.toggleFullSize {
    display: flex;
    z-index: 1;
}
.fullSizeOn,
.fullSizeOff {
    display: inline-block;
    height: 28px;
    width: 27px;
    border-radius: 4px;
}
.fullSizeOn {
    background: #fff url(../images/portal/icon_magGlass_Off.svg )  4px 5px  / 21px no-repeat;
}
 .fullSizeOff {
    background: transparent url(../images/portal/icon_magGlass_Off.svg )  4px 5px  / 21px no-repeat;
    opacity: .5;
}






#showPhotoManager.photo-manager .photo-utilities .dropdown-toggle {
    display:inline-block;
    background: url(../images/portal/more-btn-photo-overlay.svg )no-repeat scroll 0 0 / 32px auto;
    height: 30px; width: 40px;
    opacity: 0.5;
    transition: opacity 0.3s ease-out 0s;
}
#showPhotoManager.photo-manager .modal-photo:hover .photo-utilities .dropdown-toggle {
    opacity: 1;
}
#showPhotoManager.photo-manager .photo-utilities .dropdown-menu {
    top: -20px;
    left: -110px;
}
#showPhotoManager.photo-manager .photo-utilities .dropdown-menu hr {
    margin: 10px 0;
}
#showPhotoManager.photo-manager .dropdown-menu .danger, #showPhotoManager.photo-manager .dropdown-menu .danger :hover {color:red !important;}


#showPhotoManager .v-wrap {
    height: 600px;
    white-space: nowrap;
    text-align: center;
}
#showPhotoManager .v-wrap:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 0;
    /* adjust for white space between pseudo element and next sibling */
    margin-right: -.25em;
    /* stretch line height */
    height: 600px; 
}
#showPhotoManager .v-box {
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
    width: 600px;
}



#showPhotoManager .fullscreen-wrap {
    /*outline: 1px dotted green;*/
    height: calc(100vh - 50px);
    width: calc(100% - 20px);
    margin: 0 10px;
}

#showPhotoManager  .fullscreen-box {
    /*set this way to calculate if the magnify button is needed. */
    height: calc(100vh - 50px);
    width: calc(100vw - 250px);
    /*outline: 1px dashed red;*/
    /*overflow: hidden;*/
    display: flex;
    justify-content: center;
    align-items: center;
}
#showPhotoManager  .fullscreen-box img {
    max-height: 100% !important;
    max-width: 100% !important;
    /*overflow: hidden;*/
    /*outline: 20px dotted blue;*/
    /*box-sizing: border-box;*/
    
}
#showPhotoManager  .fullscreen-box img {
    all: unset;
    object-fit:contain;    
}


#showPhotoManager .fullsize-wrap {
    height: calc(100vh - 50px);
    width: calc(100vw - 670px);
    margin: 0 10px;
    overflow: scroll;
    
}
#showPhotoManager .fullsize-wrap.expandThePhotoWell {
    width: calc(100vw - 250px);
}

#showPhotoManager .fullsize-wrap img {
    max-width: inherit;
}

#showPhotoManager.photo-manager #showPhotoManager .modal-photo {
    /*reset these, but I should prolly use a new class*/
    left:auto;
    position: relative;
    top:auto;
    float: none;
    background: #F7F7F7;
    width:600px;
    
    border-bottom: 1px solid #333;
    padding-bottom: 24px;
}
.photoLoading {
    position: absolute;
    background: rgba(0, 0, 0, .2);
    border-radius: 20px;
    color: #ccc;
    padding: 10px 30px;
    font-style: normal;
    letter-spacing: 1.2px;
    left: 50%;
    top: 50%;
    margin: -32px 0 0 -5em;
}
#showPhotoManager.photo-manager  .photoNavPrevNext .nextPhoto {
    /*height: 600px;*/
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    /*width: 45%;*/
    width: 100px;
}
#showPhotoManager.photo-manager  .photoNavPrevNext .prevPhoto {
    /*height: 600px;*/
    height: 100%;
    left: 0;
    position: absolute;
    right: 300px;
    top: 0;
    /*width: 50%;*/
    width: 100px;
}

#showPhotoManager.photo-manager  .photoNavPrevNext .prevPhoto span {
    background: transparent url("../images/portal/step_previous.svg") no-repeat scroll 0 0 / 40px auto;
    left: 40px;
}
#showPhotoManager.photo-manager  .photoNavPrevNext .nextPhoto span {
    background: transparent url("../images/portal/step_next.svg") no-repeat scroll 0 0 / 40px auto;
    right: 40px;
}
#showPhotoManager.photo-manager  .photoNavPrevNext .prevPhoto span,
#showPhotoManager.photo-manager  .photoNavPrevNext .nextPhoto span {
    font-size: 50px;
    height: 40px;
    position: absolute;
    top: 270px;
    top: 45%;
    width: 40px;
    opacity: 0;
    -webkit-transition: opacity 0.6s ease-out;  
       -moz-transition: opacity 0.3s ease-out;  
        -ms-transition: opacity 0.3s ease-out;  
         -o-transition: opacity 0.3s ease-out;  
            transition: opacity 0.3s ease-out;
}
#showPhotoManager.photo-manager:hover .photoNavPrevNext .prevPhoto span,
#showPhotoManager.photo-manager:hover .photoNavPrevNext .nextPhoto span {opacity: .4;}

#showPhotoManager.photo-manager:hover .photoNavPrevNext .prevPhoto:hover span,
#showPhotoManager.photo-manager:hover .photoNavPrevNext .nextPhoto:hover span {opacity: 1;}

#showPhotoManager.photo-manager .modal-photo {
    left: auto;
    position: relative;
    top: auto;
    padding-bottom: 20px;
    border-bottom: 1px solid #ddd;
    grid-column-start: 1;
    grid-column-end: -1;
    grid-row-start: 2;
    grid-row-end: -1;
    align-self:center;
}
#player-html5 .jp-audio {
    height: 30px;
}
#showPhotoManager.photo-manager  .photoCaption {
    float: left;
    clear: both;
    width: 215px;
    padding: 10px 0 0 0;
    border-top: 1px solid #ddd;
    margin: 20px 0 0 0px;
}
#showPhotoManager.photo-manager  .caption-cell-edit textarea {
    box-shadow: none;
    font-weight: 400;
    height: 10em;
    width: 186px;
    resize: none;
    background: transparent;
    font-size: 13px;
    letter-spacing: .4px;
    border: 1px solid #ddd;
    color: #000;
    padding:6px;
}
#showPhotoManager.photo-manager  .caption-cell-edit textarea:hover {
    /*background: #f8f8f8;*/
}
#showPhotoManager.photo-manager  .caption-cell-edit textarea:focus {
    border:1px solid #00A1FE;
    background: #f6f6f6;
    border-radius: 4px;
}

#showPhotoManager.photo-manager #saveCaptionButton {
    float: right;
    margin: 10px 15px 0 0;
    padding: 6px 10px;
    font-size: 12px;
    background: #f6f6f6;
    text-transform: uppercase;
    color: #1a73e8;
    font-weight: 600;
    letter-spacing: .5px;
    border: 1px solid transparent;
    border-radius: 3px;

}
#showPhotoManager.photo-manager #saveCaptionButton:hover {
    box-shadow: none;
    background: #f6f6f6;
}
.photo-manager .photoMetaData {
    display: block;
    width: 210px;
    padding: 10px 20px 0 15px;
    font-size: 12px;
    margin: 0px 0px 0 0;
    height: calc(100vh - 45px);
    overflow-x: hidden;
    overflow-y: scroll;
}
.photo-manager .photoMetaData li {
    padding: 0 0 0 25px;
    margin: 6px 0;
    color: #999;
}

#showPhotoManager.photo-manager #googleMapDiv {
    width: 200px;
    height: 100px;
    overflow: hidden;
    box-shadow: 1px 1px 2px #ccc;
}
#showPhotoManager.photo-manager #googleMapDiv img {
    margin-top: -37px;
}
.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#showPhotoManager.photo-manager  .metaDataList {
    float: left;
    margin: -9px 0 0;
    /*dark theme*/
    color: #888;
    width: 200px;
}
#showPhotoManager.photo-manager  #photoInfo .photoMetaData .metaData {
    color: #333;
    /*float: left;*/
    font-size: 12px;
    margin: 4px 0;
    padding: 0 0 0 24px;
    max-width: 160px;
    height: 1.6em;
    overflow: hidden;
}
.metaData.dimension {letter-spacing: .5px;}

.imageData ul {margin:0;}
.capturedOn {background: rgba(0, 0, 0, 0) url("../images/portal/miniCapturedOn.svg") no-repeat scroll 0 4px / 14px auto;}
.uploadedOn {background: rgba(0, 0, 0, 0) url("../images/portal/miniUploadedOn.svg") no-repeat scroll 0 4px / 14px auto;}
.uploadedBy {background: rgba(0, 0, 0, 0) url("../images/portal/miniUploadedBy.svg") no-repeat scroll 0 4px / 14px auto;}
.dimension {background: rgba(0, 0, 0, 0) url("../images/portal/dimension.svg") no-repeat scroll 0 4px / 14px auto;}
.latLong {background: rgba(0, 0, 0, 0) url("../images/portal/miniMapPin.svg") no-repeat scroll .5px 4px / 14px auto;}
.azimuth {background: rgba(0, 0, 0, 0) url("../images/portal/miniCompass.svg") no-repeat scroll .5px 4px / 14px auto;}
.angle {background: rgba(0, 0, 0, 0) url("../images/portal/miniAngle.svg") no-repeat scroll 4px 4px / 12px auto;}
.altitude {background:rgba(0, 0, 0, 0) url("../images/portal/miniElevation.svg") no-repeat scroll 2px 6px / 16px auto;}























/* thumbnail manager */

#showPhotoManager.photo-manager .ps_section_w {
    float: left;
    clear: both;
    width: calc(100% - 20px);
    padding: 0 0 20px 0
}
#showPhotoManager.photo-manager  .ps_field {
    position: relative;
    float: left;
    clear: both;
    width: 100%;    
}
#showPhotoManager.photo-manager .thumbnail-manager  h4 {
    font-size: 16px;
    padding: 3px 0 0 0;
    font-weight: 600;
    margin: 0 0 10px 0;
    border-bottom: 2px solid #000;
}

#showPhotoManager.photo-manager .thumbnail-manager  h5 { /*line item subheader*/
    font-size: 14px;
    padding: 3px 0 0 0;
    font-weight: 600;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #999;
    line-height:1;
}
#showPhotoManager.photo-manager .thumbnail-manager  h5 .lineItemName {
    font-size:10px; 
    text-transform: uppercase;
    display: block;
}
#showPhotoManager.photo-manager .thumbnail-manager  h5 .lineItemDisplayFields {
    font-size: 12px;
    font-weight: normal;
    color: #666;
}
#showPhotoManager.photo-manager .thumbnail-manager  h5 .lineItemDisplayFields .bull {
    font-size: 25px;
    color: #666;
    vertical-align: middle;
    display: inline-block;
    margin: 0 4px -2px 4px;
}
 #showPhotoManager.photo-manager .thumbnail-manager p {
    line-height: 1.2;
    font-size: 14px;
    margin: .2em 0;
}
 #showPhotoManager.photo-manager .thumbnail-manager .fieldLabel {
    font-weight: bold;
}
 #showPhotoManager.photo-manager .thumbnail-manager  .comment {
    font-size: 12px;
    color: #888;
}
#showPhotoManager.photo-manager .thumbnail-manager .fieldThumbs {
    margin: 0;
    float: none;
    display: flex;
    position: relative;
    width: 98%;
    flex-wrap: wrap;
}
#showPhotoManager.photo-manager .thumbnail-manager .fieldThumbs li {
    display: inline-block;
    position: relative;
}

.dimEditMode div {opacity:.3;}
.dimEditMode > div.dimNotCurrentField {opacity: 1;}

.disabled-class a {cursor: default;}

#showPhotoManager .editMenu {flex-grow:1;}
#showPhotoManager .editMenu ul.dropdown-menu {
    margin:-2px 0 0 0;
    height: 380px;
    width: 400px;
}
#showPhotoManager .editMenu ul.dropdown-menu li.scroll_container1 {
    height: 399px !important;
}
#showPhotoManager .editMenu  .dropdown-menu .scroll_container2 li a {
    color: #000;    
}
#showPhotoManager .editMenu > ul  {
    margin:0;
    }
#showPhotoManager .editMenu > ul > li {
    display: inline-block;
    margin-right: 1em
}
#showPhotoManager .editMenu .dropdown {
    display: inline-block;
}



#showPhotoManager .editMenu .disabled-class {
    color: #666 !important;
    cursor: default;
}
#showPhotoManager.photo-manager .selectAllControl {
    border: none;
    height: 25px;
    width: 38px;
    display: inline-block;
    border-radius: 2px;
    margin:0 0 -6px 0;
}
#showPhotoManager.photo-manager .selectAllControl.selectNone {
    background: #ddd url("../images/portal/checkbox-none.png") no-repeat scroll 10px 6px ;
}
#showPhotoManager.photo-manager .selectAllControl.selectAll {
    background: #ddd url("../images/portal/checkbox-checked.png") no-repeat scroll 10px 6px ;
}
#showPhotoManager.photo-manager .selectAllControl.selectSome  {
    background: #ddd url("../images/portal/checkbox-ind.png") no-repeat scroll 10px 6px ;
}
.thumbnail-manager .editTools .deleteConfirmation {
    position: absolute;
    z-index: 1;
    width: 200px;
    height: 100px;
    padding: 16px;
    background: #fff;
    top: 9px;
}
#showPhotoManager.photo-manager .thumbnail-manager .thumbnails { /* bs override */
    margin: 0;
}
.preThumb {   /* used by teknion */
    position: relative;
    display: inline-block;
}
#showPhotoManager.photo-manager .thumbnail-manager .preThumb {
    position: relative;
    display: inline-block;
    width: 70px;
    height: 70px;
    margin: 0 4px 4px 0;
}
#showPhotoManager.photo-manager .thumbnail-manager .thumbnailWrap img {
    width: 100%;
    height: auto;
    margin: auto;
}
#showPhotoManager.photo-manager .thumbCheckbox  {
    position: absolute;
    right: 10px;
    bottom: 10px;
}
#showPhotoManager.photo-manager .currentThumb {
    border: 4px solid #00A1FE;
    box-shadow: none;
    height: 64px;
    left: -1px;
    position: absolute;
    top: -1px;
    width: 64px;
    border-radius: 2px;
    /*z-index: 1;*/
}
#showPhotoManager.photo-manager .thumbnail-manager .flaggedThumb {
    background: rgba(0, 0, 0, .5) url("../images/portal/icon-flag-thumb-on.svg") no-repeat scroll 7px 5px / 12px auto;
    height: 24px;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 24px;
    border-radius: 0px;
}

#showPhotoManager.photo-manager .thumbnail-manager .thumbnailWrap input {
    position: absolute;
    right: 17px;
    bottom: 24px;
}



#showPhotoManager.photo-manager .thumbnail-manager .editTools .preThumb {
/*    
    height: 66px;
    width: 66px;
    margin: 2px;
*/
    height: 68px;
    width: 68px;
    margin: 2px;
}


.thumbnail-manager .displayThumbs a.edit {
    position: absolute;
    top: -34px;
    right: 10px;
    background: #fff;
    font-size: 11px;
    padding: 4px 9px;
    /*border: 1px solid #aaa;*/
    box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.25);
    border-radius: 0;
    color: #999;
    display: none;
    z-index: 1;
}
.ps_field .thumbfieldWrap:hover  a.edit {
    display: block;
}


/*.thumbnail-manager .editTools a.done {
    position: absolute;
    top: -30px;
    right: -1px;
    background: #046fe8;
    font-size: 11px;
    padding: 4px 9px;
    border: 1px solid #347ee3;
    border-radius: 3px 3px 0 0px;
    color: #fff;
}*/
.thumbnail-manager .editTools a.done {
    position: absolute;
    top: -28px;
    right: 0px;
    background: #eaeff5;
    font-size: 13px;
    padding: 5px 9px;
    border-radius: 4px 4px 0 0px;
    color: #347ee3;
}
#showPhotoManager .displayThumbs {
    position: relative;
    margin: 15px 20px 20px 0;
}
#showPhotoManager .editTools {
    /*background: #f7f7f7;*/
    background: #eaeff5;
    margin: 0 20px 20px 0;
    /*border: 1px dashed #046fe8;*/
    border-radius: 3px 0 3px 3px;
    padding: 4px;
    position: relative;
}

#showPhotoManager .editTools  .currentThumb {
    border: 4px solid #f0ff00;
    box-shadow: none;
    height: 59px;
    left: -1px;
    position: absolute;
    top: 0px;
    width: 61px;
}
#showPhotoManager.photo-manager .thumbnail-manager .editTools .flaggedThumb {
    top:3px;
    left:3px;
}
.confirmationPopUp {
    position: absolute;
    box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.25);
    width: 240px;
    padding: 16px;
    background: #fff;
    top: 14px;
    z-index: 1;
}
.confirmationPopUp .assignFormControl {}
.confirmationPopUp .assignFormControl a {margin-left: 1em;}

.assignFormControl a.delete {color: red;}





/*aviary stuff*/


.avpw_main_mode #avpw_tool_main_container {background:#fff;}
#avpw_tool_content_header {background: red;border-radius: 0;}
.showPhotoManager .avpw_is_embed #avpw_controls {top: 15px;border-radius: 0;background: red;}
#avpw_tool_content_header {background: #fff !important;border-radius: 0 !important;}
#showPhotoManager .avpw_is_embed #avpw_controls {top: 0px;border-radius: 0;}
#showPhotoManager  .avpw_is_embed #avpw_controls {left:0;right: 0;}
.avpw_main_close, .avpw_main_close:hover {
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
}
#avpw_control_cancel_pane .avpw_close_inner {
    margin-top: 1px;
    box-shadow: none;
    font-size: 24px;
    margin-top: -3px;
    margin-top: -4px !important;
    border-radius: 0;
    text-indent: 0  !important;
    height: 20px !important;
    background: #fff;
}
.avpw_main_close .avpw_close_inner {
    color: #000 !important;
}
.avpw_is_embed #avpw_control_cancel_pane {
    position: absolute;
    top: 1px;
    left: 1px;
    right: 10px !important;
    height: 1px;
    display: none;
}

#saveImageModal {
    width: 360px;
    margin: 0 0 0 -180px;
    top: 100px;
    padding-bottom: 10px
}
#saveImageModal .close {
    margin-top: -4px;
}
#saveImageModal .saveSpinner {
    text-align: center;
}
#saveImageModal .form-actions-proto {
    display: flex;
    flex-direction:column;
    }
#saveImageModal .form-actions-proto button {
    margin:5px auto;
    width: 240px;

}
#saveImageModal .form-actions-proto button.btn-cancel {
    /*background: #f6f6f6;*/
}

#retryModal {width:600px; margin-left: -300px;}


/*the dropdown menu in the last row gets clipped, this fixed it.*/
#fn_type_list .list-wrapper table tbody tr:last-child  .utility .more .dropdown-menu {
    top: -20px !important;
}
/*  ********************************
FIXED HEADER RULES
********************************  */

.fixed_header {
    width: 100%;
}
.fixed_header tbody {
  display:block;
  overflow:auto;
  /*for webkit browsers*/
  overflow-y: overlay; 
  padding-bottom: 40px;
  /*set the height for each table below... */
  width:100%;
}
.fixed_header thead tr,
.fixed_header tbody tr {
  display:flex;
}
.fixed_header th {
    align-items:center;
}
.fixed_header td {
    display: flex;
    align-items:flex-start;
    align-self: self-start;
}

/*  ******************************  */



#fn_type_list.pl2 tbody  {
    height:calc(100vh - 195px);
}

#fn_type_list td,
#fn_type_list th {
    padding: 10px 5px;
}

#fn_type_list.pl2 .checkbox {
    width:2%;
    padding: 0 0 0 0 !important;
    justify-content: center;
    /*this puts the colored line (border) on the inside of the cell without adding to the width */
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
#fn_type_list.pl2 .displayImg {
    width: 8%;
    max-width: 50px;
}
#fn_type_list.pl2 .titleDesc {
    width:20%;
}
#fn_type_list.pl2 .status {
    width:8%;
}
#fn_type_list.pl2 td.status {
    flex-direction: column;
}
#fn_type_list.pl2 .statusLastUpdated {
    width:8%;
}
#fn_type_list.pl2 .priority {
    width:8%;
}
#fn_type_list.pl2 .dateDue {
    width:8%;
}
#fn_type_list.pl2 .assigned {
    width:8%;
}
#fn_type_list.pl2 .tags {
    width:8%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
#fn_type_list.pl2 .templateSource {
    width:8%;
    flex-direction: column;
    align-items: flex-start;
    align-items: flex-start;
}
#fn_type_list.pl2 .dateCreated {
    width:8%;
}
#fn_type_list.pl2 .utility {
    width:6%;
}


/*Property table overrides*/
#fn_type_list.pl2 .propertyList .titleDesc {
    width:28%;
}
#fn_type_list.pl2 .propertyList  .status {
    width:10%;
}
#fn_type_list.pl2 .propertyList .statusLastUpdated {
    width:10%;
}
#fn_type_list.pl2  .propertyList  .tags {
    width:10%;
}
#fn_type_list.pl2 .propertyList .templateSource {
    width:10%;
}
#fn_type_list.pl2 .propertyList .dateCreated {
    width:10%;
}
#fn_type_list.pl2 .propertyList  .utility {
    width:10%;
}
.disabled {
    opacity: .25;
    cursor: not-allowed;
    pointer-events: none;
}

#fn_type_list.pl2 .property_child_list tbody  {
    height:calc(100vh - 195px);
}
.property_child_list td,
.property_child_list th {
    padding: 10px 0 10px 10px !important;
    float:left;
}







/* Table cell sizes for the Property Show's Child Projects */

#fn_type_list .property_child_list .displayImg {
    width: 5%;
}
#fn_type_list .property_child_list .desc {
    width: 15%;
}
#fn_type_list .property_child_list .status {
    width: 10%;
    flex-direction: column;
}
#fn_type_list .property_child_list .statusLastUpdated {
    width: 7.5%;
}
#fn_type_list .property_child_list .priority {
    width: 10%;
}
#fn_type_list .property_child_list .dateDue {
    width: 10%;
}
#fn_type_list .property_child_list .assigned {
    width: 10%;
}
#fn_type_list .property_child_list .tags {
    width: 10%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
#fn_type_list .property_child_list .templateSource {
    width: 10%;
    display: flex;
    flex-direction:column;
    align-items: flex-start;
}
#fn_type_list .property_child_list .created {
    width: 7.5%;
}
#fn_type_list .property_child_list .utility {
    width: 5%;
    position: relative;
}
#fn_type_list .property_child_list .templateSource .type {
    display: block;
    color: #999;
    font-style:italic;
}
#fn_type_list .property_child_list .templateSource .type {
    display: block;
    color: #999;
    font-style:italic;
}
#fn_type_list .property_child_list .displayImg .typeThumb {
    width: 40px; height: 40px;
}
#fn_type_list.integrationTable .title {
    width: 16.666%;
}
#fn_type_list.integrationTable td.title {
    flex-direction: column;
}
#fn_type_list.integrationTable .type {
    width: 16.666%;  
}
#fn_type_list.integrationTable .status {
    width: 16.666%;
}
#fn_type_list.integrationTable .date {
    width: 16.666%;
}
#fn_type_list.integrationTable .message {
    width: 16.666%;
}
#fn_type_list.integrationTable .action {
    width: 16.666%;
}
#startForm,
#results {
    /*width: 600px;*/
    padding:15px;
    margin: auto;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#startForm .fileUpload {
    display: flex;
}
#startForm .fileUpload div {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: .25em 1em;
    min-width: 26.3em;
    margin-right: .25em;
    cursor: pointer;
}
#startForm .form-actions-proto,
#results .form-actions-proto {
    text-align: right;
}




/*toast*/
.tui-image-editor-controls-logo {
    display:none !important;
}
.tui-image-editor-controls-buttons {
     display:none !important;   
}
.toast.tui-image-editor-container {
    position: absolute;
    z-index: 1;
} 
#showPhotoManager.photo-manager .photo-data-header .close.toast {
    position: absolute;
    right: 10px;
    z-index: 2;
    color: #fff !important;
    font-size: 16px;
    font-weight: lighter;
    letter-spacing: 1px;
    top: 22px;
}
/* override bootstrap conflicts */
.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-button {
    width: 16px;
    height: 16px;
}
.tui-image-editor-container [class^="icon-"] {
    width: inherit;
    line-height: 20px;
}
.tui-image-editor-container .icon-star,
.tui-image-editor-container .icon-heart {
    background-position: -1200px 0;
}
/*hack to fix broken editor in Chrome - still needed as of Nov 7 2019, go figure! */
.tui-image-editor-container.top .tui-image-editor-submenu {
    top: 0;
    bottom: initial !important;
}
/*end toast*/





#errorDisplay {margin-top: 1em;}
#errorDisplay h5 {
    float: left;
    width: 9em;
    margin: 0;
}
#errorDisplay ul {
    margin-left: 10em;
}


#results .errors {

}

#results .errors dl {}
#results .errors dl > div {display: flex;}
#results .errors dt {}
#results .errors dd  {}
#results .fieldKey {font-style: italic;}
.scrollingBox {
    max-height: 100px;
    overflow: scroll;
    padding: 5px 10px;
    margin: 0 0 20px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#startForm #upload-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    box-shadow: 0px 3px 5px 2px rgba(0,0,0,0.2);
    padding: 15px;
    background: #fff;
    margin-left: -75px;
    width: 150px;
}



/*dynamic items */


.dynamicFields {
    background: #fff;
    border-radius: 4px;
    padding:15px;
    margin-bottom: 100px;
}
.dynamicFields h5 {
    color: #fff9f9;
    font-size: 15px;
    text-transform: capitalize;
    font-weight: 500;
    background: #aaa;
    margin: -15px -15px 0 -15px;
    padding: 7px 15px;
    border-radius: 6px 6px 0 0;
    letter-spacing: .25px;
}

.dynamicFields hr {
    margin:10px 0;
    border-top: 1px solid #ccc;
}
.fieldGroup {
}
.fieldGroup_header {
    margin-bottom: -1px;
    border-bottom: 1px solid #ccc;
    padding-top: 12px;
    cursor: pointer;
    position: relative;
    background:url(../images/portal/faux-toggle.svg ) 99.5% 50% / 14px no-repeat;
}
.fieldGroup_header .imgPlaceholder {
    height: 60px;
    width: 60px;
    background: #f7f7f7;
    float: left;
    margin: 0 10px 10px 0;
}
.fieldGroup_header h6 {
    font-size: 16px;
    margin: 0;
}
/*.fieldGroup_header h6 a {
    float: right;
    font-size: 14px;
    font-weight: normal;
}*/
.fieldGroup_header ul {
    font-size: 16px;
    margin: 0 0 10px 0;
}
.fieldGroup_header ul li {
    margin: 0;
    color: #4A4A4A;
    font-size: 14px;

}
.fieldGroup_header ul li:first-child {
    font-weight: bold;
    font-size: 16px;
}
.ps2 .fieldGroup .field_box {
    min-height: 70px;
    padding: 10px 0 0 10px;
    border-top: 1px solid #eeedec;
}




.scrollTo {
    display: block;
    position: relative;
    top: -50px;
    visibility: hidden;
    height: 1px;
}

.fieldGroupEdit hr {
    margin:10px 0;
    border-top: 1px solid #eeedec;
    }

.fieldGroupEdit {
    background: #e0dfde;
    /*padding: 10px 15px 30px 15px;*/
    padding: 0 15px 0 15px;
    margin: 0 -15px;
    position: relative;
}
.fieldGroupEdit .inner {
    padding: 10px 15px 30px 15px;
}
.fieldGroup .deleteItem {
    color: #666;
    margin: 0 -10px 0 10px;
    display: block;
    float: left;
    background: url(../images/portal/icon-delete-photo.svg ) 0px 1px / 13px no-repeat;
    font-weight: bold;
    font-size: 12px;
    text-align: left;
    padding-left: 20px;
}
.fieldGroup .deleteItem:hover {
    color: red;
    background:url(../images/portal/icon-delete-photo-caution.svg ) 0px 1px / 13px  no-repeat;
}
.addItemToolbar {display: flex;}
.dynamicFields .addItem {
    display: inline-block;
    background: #fff;
    text-align: center;
    color: #666;
    font-weight: 500;
    margin: 20px auto;
    padding: 5px 20px ;
    border-radius: 34px;
    border: 1px solid #aaa;
    font-size: 13px;
}
.dynamicFields .hideItemDetails {
    display: block;
    /*background: url("../images/portal/chevron_page_left.svg") no-repeat scroll 0 0/ 16px rgba(0, 0, 0, 0);*/
    /*text-align: center;*/
    color: #666;
    font-weight: bold;
    float: right;
    margin: 0 10px 0 0;
    font-size: 12px;
}
.dynamicFields .hideItemDetails:hover {
    text-decoration: underline;
}
.fieldGroupEdit #myFotobabblesList {
    float:left;
}
*these are a hack, will need to rethink this stuff*/

#imageURLModal {
    display: block;
    width: 800px;
    margin-left: -400px;
}
#imageURLModal form { }
#imageURLModal textarea {
    width: 100%;
    resize: none;
    height: 1.2em;

}
#imageURLModal  .checkbox input {
    margin: 3px 10px 0px 0;
}

.urlControls {
    display: flex;
    justify-content: center;
}
.urlControls .btn {
    margin: 20px;
}

@media only screen and (max-width: 800px) {
    /*hide the bootstrap padding when the window gets small*/
    body {
        padding:0;
    }
}