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

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

html, body {
    height: 100%;    
    scroll-behavior: smooth;
}
body {
    position: relative;
}
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;
}

/* typography
-----------------------------------*/

body, input, button, select, textarea {
    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

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

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

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


#fn_sb {background: none repeat scroll 0 0 orange; height: 0;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;
    /*z-index: 6000;*/
    /*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;
    } 
.ps-settings .dropdown-menu,
.more .dropdown-menu,
.bulk-assign .dropdown-menu {
    width: 260px;
}

/* share-assign stuff  */
.ps-settings .assign-menu.share {
    width: 420px;
    margin-top: -30px;
}

 .assign-menu.share  .scroll_container1 {
    height: 215px !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  .group-tag-wrapper {
    display: flex;
    gap: 4px;
    overflow: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */

  }
  .group-tag-wrapper::-webkit-scrollbar {
    display: none; /* Chrome, Safari, and Opera */
  }

  .assign-menu.share .assignee-name {
    white-space: nowrap;
  }
 .assign-menu.share .scroll_container2 li a {
    gap: 10px;
    align-items: baseline;
  }
.user-group-tag {
    background: #ecf5ff;
    padding: 2px 11px;
    border-radius: 4px;
    display: inline-block;
    color: #3986e9;
    white-space: nowrap;
  }
  .ps-settings .remove-previous {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    width: auto;
    padding: auto;
  }

.share-project {
    background: #e2e2e2;
    color: #575757;
    border: none;
    padding: 2px 11px;
    font-size: 14px;
    border-radius: px;
    cursor: pointer;
    display: block;
    transition: background 0.2s ease-in-out;
    margin-top: 10px;
  }
  .share-project:hover {
    background: #d1d1d1; /* Darker blue on hover */
  }
  .share-with-teams {
  
  }
  .share-with-teams h5 {
    border-top: 1px solid #eee;
    font-size: 12px;
    font-weight: bold;
    padding: 12px  12px 0 ;
    white-space: break-spaces;
    margin: 0;
  }
  .share-with-teams .tag-wrapper {
    padding: 10px 30px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }
  .share-with-teams .checkbox-button {
    display: inline-block;
    cursor: pointer;
    background: #fff;
    color: #339aff;
    border: 1px solid #339aff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
    user-select: none;
    text-align: center;
    width: auto;
  }
  .group-tag-wrapper .vendorIndacator {
    margin-top:-12px;
  }
  .share-with-teams .checkbox-button input {
    display: none; /* Hide the actual checkbox */
  }
  
  .share-with-teams .checkbox-button span {
    display: inline-block;
  }
  
  .share-with-teams .checkbox-button:has(input:checked) {
    background: #007bff; /* Active color */
    color: white;
    border: 1px solid #007bff;
    
  }
  

/*  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-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 h3 {
    color: #ddd !important;
}
.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 10px;
    }
.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: 230px 230px 230px; */
    padding: 0 10px;
    display: flex;
}
.newUI .dropdown-menu.admin-menu .inner > div {
    padding: 0;
    min-width: 238px;
    /* outline: 1px dotted red; */
}
#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 10px;
    border-radius: 2px;
}
#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;
}


/* upgrade badges */
#n_un  a span {
    font-size: 12px;
    padding: 2px 4px;
    border-radius: 4px;
    margin-left: 5pt;
    letter-spacing: initial;
    border: 1px solid transparent;
    opacity: .5;
}
#n_un  a .upgrade-badge {
    display: inline-block;
    background: #303030;
    color: #a9a9a9;
}
#n_un  a:hover .upgrade-badge {
    display:none;
}
#n_un  a .learnMore-badge {
    display: none;
}
#n_un  a:hover .learnMore-badge {
    display: inline-block;
    background: #4b4b4b;
    color: #d6d6d6;
    border: 1px solid #4b4b4b;
    
}


.upgradeAPIBadge {
    display: inline-block;
    background: #f3f3f3;
    padding: 6px 12px;
    border-radius: 4px;
    margin: 20px 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: 10px;
    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;
    align-items: flex-end;
}
#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: 14px 0 0 0;
    width: 35px;
    height: 28px;
    border-radius: 4px;
}
#fn_type_list .utility a:hover {
    background: #f1f1f1;
} 
.utility li .ikon {
    height: 26px;
    width: 32px;
    border-radius: 4px;
    display: block; /*fix for flicker bs-tooltip*/
}
.utility li .ikon:hover {
   background-color: #f6f6f6;
}
.utility li .ikon-open-comments-yes {
    background: transparent url("../images/portal/icon_comments_list.svg") no-repeat scroll 6px 7px/20px auto;
    margin-bottom: -8px;
}
.utility li .ikon-open-comments-none {
    background:  url("../images/portal/icon_comments_list_none.svg") no-repeat scroll 6px 4px/20px auto;
    margin-bottom: -8px;
    /* outline: 1px solid red; */
}
#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; */
    top: 25px;
    left: -255px;
    box-shadow: 0px 4px 6px #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: 12px;
    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: #f6f6f6;
    padding: 5px 10px;
    margin: 5px -10px -10px -10px;
}

.line-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;  
    overflow: hidden;
  }

.fn-table th,
.fn-table td {
    color:#666;
    font-size:12px;
}
.sortable  {
    cursor:pointer;
}
.ascending,
.descending {
    color: #444 !important;
    font-weight: 600 !important;
}
.descending span {
    background: url(../images/portal/arrow_descending.svg) 5px 50% no-repeat #f6f6f6 !important;
}
.ascending span {
    background:url(../images/portal/arrow_ascending.svg) 5px 50% no-repeat #f6f6f6 !important;
}
.ascending span,
.descending span {
    display: block;
    padding-left: 20px;
    width: 100%;
    margin-left: -20px;
}

#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;}

#fn_type_list .projectTooltip  span {
    line-height: 1;
    padding: 0;
    margin: 0;
    line-height: 1 !important;
    display: inline-block;
    cursor: pointer;
}
#fn_type_list .projectTooltip span:hover {
    background: #f6f6f6;
    color: #000;
    cursor: default;
  
}

.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: auto;
    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;
    overflow: scroll;
    max-width: 100%;
    width: calc(100vw - 320px);
*/
/* temp fix double scroll bars from showing - this is a temp fix as this page may get overhuled soon
to make them configurable by the user  

note that on line 10754 I added debug to disable a rule */
    margin: 0 20px 0 0;
    min-width: auto;
    overflow: auto;
    max-width: initial;
    width: auto;
}





/* 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;
}
.blank-row {
    border:none;
    line-height:1px;
    padding:0;
}
.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 {
    display: flex;
    justify-content: center;
    flex-direction: column;
    border-bottom: 1px solid #cdcdcd;
}

.banner_alert,
.banner_trial,
.banner_customer {
    background: #FFF;
    color: #000;
    /* padding: 10px 20px; */
}
.banner_trial {
    padding: 10px 20px;
}
.banner_customer {
    background: #D6E4F8;
}
.banner_alert_inner,
.banner_customer p  {
    margin: 10px 20px;
    font-size: 16px;
}

/*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;*/
    margin: 10px 0 0 150px;
}

.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;
}

.market_region label {
    width: auto !important;
    margin-left: 10px !important;
}
.market_region label input {
    display: inline-block;
    margin:0  4px 2px 0;
}

/*.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-size: 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;
    width: 350px;
    background: #fff;
}
#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: 12px 12px 40px 0;
}
#projectCommentsReadOnly #projectComments-header .displayFields {
    width: 280px;
    margin: 15px 0 10px 20px;
    /* 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;
}
.ps2 #projectCommentsReadOnly  .ps_comment_module .commentThread {
  padding: 0;
}

#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 {
    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;
    padding:0;
    height: auto;
    grid-row: 2 /3;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    justify-content: space-between;

}


 #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: 0px;
    padding-top: 40px;
}

/* not read only anymore - we added comments*/
 #projectCommentsReadOnly  .ps_comment_module {
    margin:0;
    overflow-y: scroll;
    padding: 0 0 0px 5px;
    width: auto;
    height: 100%;
 }
 #projectCommentsReadOnly .ps_comment_module_i {
    padding: 0 10px 0 5px;
}


 #projectCommentsReadOnly .commentNodeAdd {
    border: none;
    clear: both;
    height: auto;
    padding: 0 0 10px 0;
    background: #fff;

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

 #projectCommentsReadOnly .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;
}
 #projectCommentsReadOnly .commentsOfOtherUsers  {

    /* margin: 0 10px 10px 30px; */
}







/*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;
}
.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: calc(100% - 20px);
    overflow: hidden;
    vertical-align: top;
    text-overflow: ellipsis;
}
.textEllipsisWrap button.btn .btnTxt {
    max-width: 128px;
    text-overflow: ellipsis;
}

.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: 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.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;
} 



.leftSideBar .views-list li {
    margin: 0;
    width: 260px;
    padding: 0px 40px 0px 0;
    position: relative;
}
.list-item-inner {
    position: relative;
    display: flex;
    justify-content: space-between;
}
.list-item-inner .scrollTo {
    position: absolute;
    top:calc(-100vh + 200px);
    left:-1000px;
    height: 1px;
    width: 1px;
    visibility: hidden;
}


/*dots left of the search's title*/
.displayViewType {
    position: absolute;
    left: 6px;
    top: 2px;
}
.displayViewType .viewType.viewVendor,
.displayViewType .viewType.viewManager,
.displayViewType .viewType.viewAdmin,
.displayViewType .viewType.viewPrivate {
    display: inline-block;
    height: 7px;
    width: 7px;
    border-radius: 10px;
    background: #e4859f;
    vertical-align: inherit;
}
.displayViewType .viewType.viewVendor {
    background: #e4859f;
}
.displayViewType .viewTye.viewManager {
    background: #86b7a2;;
}
.displayViewType .viewType.viewAdmin {
    background: #9e86b7;
}
.displayViewType .viewType.viewPrivate {
    background: #8fc1f9;
}




.nameAndCount {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    padding: 8px 8px 8px 20px;
    min-width: 236px;
    color: #888;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 400;

}
.nameAndCount .searchName {
    display: block;
    width: 220px;
}
.currentCount {
    display: block;
}


.refreshCount {
    position: relative;
}
.refreshCountButton {
    display: inline-block;
    height: 18px;
    width:18px;
    margin: 8px 0 0 0;
    opacity: 0;
    transition-duration: .2s;
    transition-delay: .3s;
    background: rgba(0, 0, 0, 0) url("../images/portal/btn-refresh.svg") 0px 0px / 18px no-repeat scroll ;
}
.refreshCount .spinner {
    position: absolute;top:4px;left: 0;
}
/*show the button when you hover over the row...*/
.views-list li:hover .refreshCountButton {
    opacity: .5;
}
.views-list li:hover .refreshCountButton:hover {
    opacity: 1;
  cursor: pointer;  
}





/*set the blue hilight on the list wrapper*/
.views-list li.search_name:hover  {
    background: #f1f1f1;
}
.views-list li.active,
.views-list li.active:hover  {
    background: #5281cc;
}
.views-list li.active span,
.views-list li.active span:hover {
    font-weight: 500;
    color: #fff;
    letter-spacing: .5px;
}



.views-list li .searchName:hover {
    color:#339AFF;
}









.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;
    top: 11px;
    position: absolute;
    }
*/




.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;
}



#copy-views-modal {
    padding-bottom: 20px;
    margin-left: -460px;
    top: 180px;
}

#copy-views-modal .modal-body {
    height: 460px;
}


#copy-views-modal .userName {
    color: #423e44;
    display: block;
    padding: 0 4px;
    border-radius: 2px;
}

#copy-views-modal .userName.selected,
#copy-views-modal .userName.selected:hover  {
    color: #fff;background: cornflowerblue;
}
#copy-views-modal .userName:hover {
    background: #f8f8f8;
} 
#manage-types-modal {
    padding-bottom: 20px;
    margin-left: -530px;
    top: 180px;
    height: 580px;
}
#manage-types-views-modal {
    padding-bottom: 20px;
    margin-left: -498px;
    top: 180px;
    width: 1024px;
}
#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: 530px;
}
#manage-types-modal table.scroll tbody,
.manage-views-modal table.scroll tbody,
#manage-favorites-modal table.scroll tbody {
    min-height: 290px;
    max-height: 290px;
}
#manage-types-views-modal table.scroll tbody {
    min-height: 330px;
    max-height: 330px;
}

/* this is used a bunch of places edit the names of Tags, View (Saved Searches), Report Columns */
.renameOff {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-grow: 1;
}
.renameOff span {
    font-size: 16px;
    display: inline-block;
    padding:2px 20px 0 0px;
}
.renameOn input {
    background: red;
    margin-left:-7px;
}




#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;
}
.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 .tableWrapTypesAndViews {
    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,
.reportColumsList  thead .move {
    background: #fff url(../images/portal/move-col.svg) 9px 12px / 8px no-repeat;
    opacity: .5;
    padding: 0;
}

.manage-views-modal tbody {
    overflow-x: hidden;
}
.manage-views-modal td {
    vertical-align: middle;
}
.manage-views-modal .move,
.manage-favorites-modal .move {
    width: 20px;
}
.manage-views-modal .name {
    width: 69%;
    padding-right: 40px;
}
.manage-favorites-modal .name {
    width: 80%;
}
#manage-favorites-modal .kind {
    width: auto;
    text-align: center;
}
.manage-views-modal .delete  {
    width: 5%;
}
.manage-views-modal .renameOn,
.manage-favorites-modal .renameOn {
    display: flex;
    align-items: center;
} 
.manage-views-modal .name  input,
.manage-favorites-modal .name  input {
    width: 50%;
    margin: 0;
    flex-grow: 2
}
.favCol {
    background: rgba(0, 0, 0, 0) url("../images/portal/icon-stars-1.svg") no-repeat scroll 7px 5px / 75px auto;
    height: 21px;
    width: 30px;
    display: inline-block;
}
.unFav {
    background: url("../images/portal/icon-stars-1.svg") no-repeat scroll 1px 3px / 75px auto;
    width: 20px;
    display: inline-block;
    height: 16px;
}
.manage-views-modal .name input:hover,
.manage-favorites-modal .name input:hover {
    border: 1px solid #5EAFFF;
}
.manage-views-modal .name input:focus,
.manage-favorites-modal .name input:focus  {
    border: 1px solid #5EAFFF;
    background: #E9F6FD;
}




/*set the pencil icon a bunch of places we edit in place*/
.manage-views-modal .renameOff a,
.manage-favorites-modal .renameOff a,
.reportColumsList .renameOff a {
    background:  url(../images/portal/icon-edit-photo.svg ) 7px 7px / 14px no-repeat;
    width: 5px;
    height: 20px;
}


.manage-views-modal .delete i {
    background-position-y: 6px;
}
.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: 16px;
}


/*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 #f9f9f9;
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,
.userSearchform  input.search-query:focus {
    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;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-field-readOnly {background: rgba(0, 0, 0, 0) url("../images/portal/icon-field-readOnly.svg") no-repeat scroll 0px 0px / 18px auto;}
.ikon-btn-delete {
    background: url("../images/portal/btn-delete.svg") no-repeat scroll;
    background-size: contain;
}
.ikon-btn-delete:hover {
    background: url("../images/portal/btn-delete-hover.svg") no-repeat scroll;
    background-size: contain;
}

.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;
}
 .top-pager {
    display: flex;
    align-items: center;
    position: relative;
    justify-content: flex-end;
    /*width: 205px;*/
}
 .projectCount {
    font-size: 12px;
    margin-right: 1em;
}
.pageControls {
    display: flex;
    flex-direction: column;

}
.pageControls button {
    align-self: flex-end;
}

#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: 5%;}
.vendorListPage .vendorStatus {width: 5%;}
.vendorListPage .insuranceValidDate {width: 5%;}
.vendorListPage .vendorRating {width: 5%;}
.vendorListPage .vendorConnected {width: 5%;}

#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;
}

.deleteServices .ikon-show-controls-more {
    margin: 0px 0 -12px 0;
}
.deleteServices.field-more .dropdown-menu {
    top:24px;
}
.deleteServices #deleteAll {
    color:red;
}
#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;
}

.warning-message {
    background-color: #FFF3CD;
    color: #856404;
    /* border-left: 4px solid #FFC107; */
    padding: 1em;
    margin-bottom: 1.5em;
    font-size: 0.95rem;
    border-radius: 4px;
    text-align: left;
  }



#addExistingCompanyModal {
    width: 760px;
    margin-left: -380px;
}
#addExistingCompanyModal .searchResults {
    margin: 0;
    max-height: 240px;
    clear: both;
    height: 300px;
    overflow-y: auto;
    border-bottom: 1px solid #ddd;
}
#addExistingCompanyModal .searchResults li {
    display: flex;
    margin: 10px 0;
}
#addExistingCompanyModal .searchResults li span {
    width: 30%;
    line-break: anywhere;
    padding-right: 10px;
    display: inline-block;
}

#addExistingCompanyModal .searchResultHeader {
    border-bottom: 1px solid #ddd;
    color: gray;
    padding-bottom: 3px;
}

#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;}
#addExistingCompanyModal .vendor-search {
    display: flex;
    align-items: center;
    margin-top: 20px;
}

#addExistingCompanyModal .vendor-search input {
    flex: 1;
    border: 1px solid #ddd;
    margin-bottom: 0;
    margin-right: 10px;
    background-position-x: 5px;
}

.showVendorWrapper {
    text-align: center;
    padding: 10px 0;
    font-size: 18px;
}




/*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 this was pre appended but I'm deprecating it*/
.selectAllControl.selectNone {background:url("../images/portal/checkbox-none.png") no-repeat scroll 0 0 / 13px ;}
.selectAllControl.selectAll {background:url("../images/portal/checkbox-checked.png") no-repeat scroll 0 0 / 13px ;}
.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;
    white-space: break-spaces;
}
.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;}*/



/*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;
}

/*trying a new placeholder style*/
#fn_type_list-controls ::placeholder, .userSearchform input.search-query {
    color: #000;
    font-size: 16px;
}

#chat-messages-modal {
  /*  margin-left: -275px;
    width: 550px;*/
}
#chat-messages-modal .modal-header {
    padding: 10px 20px;
}
#chat-messages-modal .modal-body {
    padding: 10px 0 0 10px;
}
#chat-messages-modal .modal-footer {
    background: transparent;
    box-shadow: none;
}
#chat-messages-modal .modal-footer .btn-cancel {
    /*background: transparent;*/
}
.newChatMessageList {
    padding: 0px 10px 0 0;
    margin: 0;
    font-size: 16px;
    max-height: 375px;
    overflow: auto;
}
.newChatMessageList li {
    margin: 4px 0;
}
.newChatMessageList a {
    color: #333;
    display: block;
    padding: 10px !important;
    margin-left: -10px;
}
.newChatMessageList a:hover {
    background: #f8f8f8;
    /*color: red;*/
}
.chatItem {
    display: flex;
}
.chatImg {
    margin: 0 10px 0 10px;
    width: 60px;
    height: 60px;
    background: #eee;
}
#chat-messages-modal .chatImg img {
    height: 60px;
    width: 60px;
    display: none;
    margin: 0;
}
#chat-messages-modal .chatImg img[src] {
   display: block;
 }
.chatDisplayFields {
    flex-grow: 2;
}
.chatDisplayFields span {
  display: block;
  padding: 0;
  line-height: 1.2;
  font-size: 14px;
  width: 360px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
#n_un a .unreadMessageCount {
    background: red;
    display: inline-block;
    color: #fff;
    border-radius: 50px !important;
    height: 20px;
    min-width: 9px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    margin: 0 0 0 10px;
    padding: 0 6px;
    opacity: 1;
  }
div > .unreadMessageCount {
    line-height: 1.7;
}
.newChatNotice {
    background: url("../images/portal/icon_chat_notification.svg") no-repeat scroll 50% 11px/24px rgba(0, 0, 0, 0);
    /* background: url("../images/portal/icon_stream_chat.svg") no-repeat scroll 50% 9px/29px rgba(0, 0, 0, 0); */
    padding: 5px 0px 5px 48px;
}
.newChatNotice a > .unreadMessageCount {
    position: absolute;
    left: 10px;
}
#chat-messages-modal p {
    margin-left: 10px;
}
.newChatNotice > a {
    margin: 0 0 0 -35px;
}
.newChatNotice > ul {
    top: 38px;
    left: -500px;
    width: 550px;
    padding: 0 0 !important;
    margin: 0;
}



.serviceSelectList {
    border: 1px solid #ccc;
    padding: 10px 0;
    border-radius: 4px;
    margin: 20px 0;
    height: 360px;
    overflow: auto;
}

.serviceSelectList li > div {
    line-height: 20px; 
    padding: 5px 30px;
    background: #fff url("../images/portal/icon_check_off.svg") no-repeat scroll 8px 9px/14px;
}
.serviceSelectList li:hover > div {
    background: #fafafa url("../images/portal/icon_check_off.svg") no-repeat scroll 8px 9px/14px;
    cursor: pointer;
}
.serviceSelectList li.testSelect > div {
    background: #dfe4e9 url("../images/portal/icon_check_on.svg") no-repeat scroll 8px 9px/14px;
}



.fieldGroupChoices {
    border: 1px solid #ccc;
    height: 260px;
    margin: 20px 0 auto;
    overflow: auto;
    border-radius: 3px;
}
.fieldGroupChoices ul {
    margin:0;
}
.fieldGroupChoices li {
    padding:0 30px ;
    line-height: 30px;
}
.fieldGroupChoices li:hover {
    background: #fafafa;
}
.fieldGroupChoices li.testSelect {
    background: #dfe4e9 url("../images/portal/checkmark.png") no-repeat scroll 8px 9px/14px;
}
#groupName { /*input for new fieldgroup name*/
    width: 325px;
    padding: 9px 6px;
    font-size: 18px;
    font-weight: bold;
}


/*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-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-open-line-items {
    background: url("../images/portal/icon_items.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);

}

.ikon-open-url {background:rgba(0, 0, 0, 0) url("../images/portal/icon_open.svg") no-repeat scroll 0 0 /20px;height: 23px !important;}

/*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.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;*/
    height: 154px !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;}

#edit-multiple-fields-modal {
    padding: 40px 0 0 0;
}

#edit-multiple-fields-modal .successNotification {
    background-color: white;
    box-shadow: 2px 1px 6px 2px rgba(0, 0, 0, .5);
    color: black;
    left: 50%;
    position: fixed;
    text-align: center;
    top: 35px;
    z-index: 7000;
    transform: translateX(-50%);
    padding: 20px;
    border-radius: 6px;
    font-weight: bold;
}

#edit-multiple-fields-modal .header-title-wrapper {
    display: flex;
    align-items: center;
    font-size: 16px;
    line-height: 1;
    margin: 0;
    border-bottom: 1px solid #ddd;
    padding: 16px 20px;
    position: fixed;
    background: #f9f9f9;
    z-index: 1;
    width: 359px;
    max-height: 64px;
    top: 40px;
    border-right: 1px solid #eee;
}

#edit-multiple-fields-modal .header-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#edit-multiple-fields-modal form {
    width: 100%;
    height: 100%;
    display: flex;
    overflow-y: auto;
}

#edit-multiple-fields-modal .left-section {
    min-width: 300px;
    width: 400px;
    background-color: #f9f9f9;
    /*height: calc(100vh - 40px);*/
    padding-bottom: 80px;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 50px;
    position: absolute;
    top: 60px;
    bottom: 0;
}

.left-section .section-container {
    padding: 0 20px;
}

.left-section input {
    margin: 0 5px 0 0;
}

.left-section h4 {
    font-size: 14px;
    font-weight: bold;
}

#edit-multiple-fields-modal .right-section {
/*    flex: 1;
    padding-bottom: 80px;
    position: relative;
    overflow-y: auto;*/
    position: absolute;
    top: 40px;
    left: 400px;
    right: 0;
    bottom: 45px;
    overflow: scroll;
}

#edit-multiple-fields-modal .field-search-fields {
    margin-bottom: 16px;
}

#edit-multiple-fields-modal .fields-search-query {
    background: url("../images/portal/p_bttn_search.png") no-repeat scroll 8px center rgba(256, 256, 256, 01);
    padding: 4px 8px 4px 30px;
    border: none;
    background-color: #e9e9e9;
    border-radius: 4px;
}

#edit-multiple-fields-modal .right-section .title_bar {
    padding: 0 20px;
}

#edit-multiple-fields-modal .right-section .main-content {
    padding: 20px 40px;
}

#edit-multiple-fields-modal .main-content .field-sections {
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
}

#edit-multiple-fields-modal .field-sections .field-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#edit-multiple-fields-modal .control-label {
    position: relative;
}

#edit-multiple-fields-modal .field-group {
    padding-left: 20px;
}

#edit-multiple-fields-modal .left-section .field-item {
    display: flex;
    padding-left: 20px;
    position: relative;
    align-items: center;
    justify-content: space-between;
    margin: 4px 0;
}

#edit-multiple-fields-modal .inform-icon-wrapper {
    display: none;
    position: relative;
    background: #f8f8f8;
}

#edit-multiple-fields-modal .field-item .inform-icon {
    padding: 2px 8px;
    border: 1px solid #bbb;
    text-align: center;
    border-radius: 2px;
    cursor: pointer;
}

#edit-multiple-fields-modal .field-item:hover .inform-icon-wrapper {
    display: block;
}

#edit-multiple-fields-modal .inform-icon-wrapper .field-inform-card {
    background-color: white;
    box-shadow: 0 3px 7px rgb(0 0 0 / 60%);
    left: 12px;
    top: 12px;
    padding: 10px;
    z-index: 9999;
    width: 400px;
    font-size: 13px;

    /*delay the hover state to prevent it from being so twitchy*/
    visibility: hidden;
    opacity: 0;
    /*transition-delay: 0.25s;*/
    transition: visibility 0s, opacity 0.5s linear .25s;
    position: fixed;

    display: none;
}

#edit-multiple-fields-modal .field-item:hover .inform-icon-wrapper:hover .field-inform-card {
    display: block;
}

#edit-multiple-fields-modal .field-item label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

#edit-multiple-fields-modal .field-item:hover {
    background: #f1f0ec;
    border-radius: 3px;
    padding-left: 20px;
}

#edit-multiple-fields-modal .field-item.active {
    background: #d1e4fe;
    border-radius: 3px;
    padding-left: 20px;
}

#edit-multiple-fields-modal .right-section .control-label .ikon {
    position: relative;
    left: 0;
    top: 3px;
}

#edit-multiple-fields-modal .right-section label {
    font-weight: 500;
}

#edit-multiple-fields-modal .col-container {
    display: flex;
}

#edit-multiple-fields-modal .right-section .right-col {
    /*background: none repeat scroll 0 0 #f7f7f7;*/
    padding: 0 15px;
    /*width: 450px;*/
    width: 47%;
    /*height: 330px;*/
}

#edit-multiple-fields-modal input, #edit-multiple-fields-modal select {
    width: 300px;
}

#edit-multiple-fields-modal input[type="checkbox"] {
    width: 20px;
}

#edit-multiple-fields-modal .set-defaultValue {
    float: left;
    clear: both;
    margin: 0 0 8px;
    width: 100%;
}

#edit-multiple-fields-modal .set-defaultValue label {
    float: left;
    min-width: 102px;
    margin: 4px 0 0 0;
    padding: 0;
}

#edit-multiple-fields-modal .set-default-boolean input {
    margin: 4px 8px 0 0;
    width: 16px;
}

#edit-multiple-fields-modal .set-photoAllowed .controls {
    display: flex;
}

#edit-multiple-fields-modal .set-photoAllowed .controls .control-label {
    min-width: 160px;
    box-sizing: border-box;
}

#edit-multiple-fields-modal .scrollingPane {
    height: 150px;
    overflow-y: auto;
    width: 448px;
    background: #fff;
}

#edit-multiple-fields-modal .addSelects li {
    width: auto;
}

#edit-multiple-fields-modal .addSelects ul {
    width: 100%;
}

#edit-multiple-fields-modal .addLongText {
    position: relative;
    right: 0px;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    box-sizing: border-box;
}

#edit-multiple-fields-modal .multiple-fields-footer-actions {
    position: fixed;
    bottom: 0;
    right: 0;
    width: calc(100% - 440px);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background: #ddd;
    padding: 10px 20px;
}

#edit-multiple-fields-modal .multiple-fields-footer-actions .btn-primary {
    margin-right: 20px;
}

.fieldWrap {
    padding: 10px 20px 10px 20px;
    border-radius: 5px;
    /*background: #bdc1c63d;*/
    background: #b4ceef3d;
    border: 1px solid #edf3fb;
    /*box-shadow: 0px 1px 4px -1px rgba(0,0,0,0.5);*/

}
.fieldWrap.disabled {
    background: #fff;
    opacity: .5;
    border: 1px solid #ccc;
    /*box-shadow: none;*/
}
#edit-multiple-fields-modal .conditionalInstructions {
    display: inline-block;
    width: 100px;
}
.field-item .active {
    background: #1a73e8;
    color: #fff;
    padding: 2px;
    border-radius: 3px;
}


.fieldKeyMessage {
  position: absolute;
  top: -22px;
  left: 0;
  background: #fff;
  width: 320px;
  margin: 0 0 0 60px;
  height: 65px;
  padding: 2px 10px;
  opacity: 0;
  transition: .25s;
  transition-delay: 0.25s;
  /*display: none;*/
  z-index: 1;
}
.fieldKeyForm .rounded-switch {
    position: relative;
}
.rounded-switch:hover .fieldKeyMessage {
    /*display: block;*/
    opacity: 1;
}

/*  PROJECT tags  --------------------------------------------------- */

.portalSettings .projectTag {
    background: #efefef;
    border-radius: 3px;
    color: #000;
    display: inline-block;
    padding: 6px 10px;
    position: relative;
    margin: 4px 4px 0 0;
    display: flex;
    justify-content: space-between;
    width: 400px;
    min-height: 28px;
    align-items: center;
}
.portalSettings .projectTag label {
    display: inline-block;
    font-size: 12px;
    margin: 2px;
    font-weight: 400;
    width: auto !important;
}
.renameOn input {
    margin: -1px 0 -1px -7px;
}
.projectTag .renameOff a {
    background:  url(../images/portal/icon-edit-photo.svg ) 5px 5px / 14px no-repeat;
    width: 4px;
    height: 20px;
 }
 .projectTag .renameOff {
    max-width: 370px;
}
  .projectTag .renameOn {
    width: 93%;
    display: flex;
    justify-content: space-between;
  }
.projectTag .renameOn .tagInput {
    flex-grow:1;
    }
 .projectTag .renameOff span {
    padding: 0 0px;
    margin-right: 1em;
}
.portalSettings .projectTag .removeTag {
    isplay: inline-block;
    background: #fff;
    border-radius: 3px;
    height: 23px;
    width: 18px;
    background: url("../images/portal/icon-delete.svg") no-repeat scroll 0 0/ 20px transparent;
}
.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*/


.apiKeyInput {
  margin: 0 0px 10px 0;
  display: block !important;
  width: 400px;
}
.apiToggle {
    width: 130px;
    margin-right: 10px;
}
.apiCopy {
    width: 160px;
}
.apiCopy[disabled] {
    cursor: not-allowed;
}


.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: flex;
    align-items: center;
    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;
display: flex;
gap: 10px;}


/*.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; height: auto !important;}
.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;
    line-height: 1.5;
    height: auto;

}

.field_container .agreement p {
    color: #999;
    max-height: 168px;
    overflow-y: scroll;
    border: 1px solid #ddd;
    width: 90%;
    padding: 9px;
}


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;
}


.field_container select, 
.field_container textarea, 
.field_container input[type="text"], 
.field_container input[type="password"], 
.field_container input[type="datetime"], 
.field_container input[type="datetime-local"], 
.field_container input[type="date"], 
.field_container input[type="month"], 
.field_container input[type="time"], 
.field_container input[type="week"], 
.field_container input[type="number"], 
.field_container input[type="email"], 
.field_container input[type="url"], 
.field_container input[type="search"], 
.field_container input[type="tel"], 
.field_container input[type="color"], 
.uneditable-input {
    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 #f9f9f9; 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 #d1d1d1; 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  --------------------------------------------------- */  

/*this block is deprecated - can delete?
.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; background: red;}
.ps .memo-cell-edit p {color: #888;line-height: 1.3;margin: 6px 0 0 3px;min-width: 160px;}    
.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: 12px; 
    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: 13px;
    line-height: 18px;
    /* margin: 10px 0; */
    padding: 0;
    overflow-wrap: break-word;}

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



.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;}
*/

/*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;
    width: 290px;
    z-index: 1;
}
.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;word-break: break-all;}
.auditEntry .activityDate {color:#666;}

.docName {word-break: break-all;}
.toggleSettings {
    height: 19px;
    width: 20px;
    display: inline-block;
    border: none;
    position: absolute;
    right: 20px;
    margin-top: -20px;
}
.toggleSettignsMore {
    background: url("../images/portal/settings-show-less.svg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
}
.toggleSettignsLess {
    background: url("../images/portal/settings-show-more.svg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
}



.setMarket  a {white-space: break-spaces !important;}





/*  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 #f7f7f7; 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"],
.button-select input[type="checkbox"] {
    opacity:0.011;
    z-index:100;
}

.button-select input[type="radio"]:checked + label,
.button-select input[type="checkbox"]: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;
}

.signatureImage {
 /*   width:100px;
    height:50px;
    margin: 0 20px 10px 0*/
    width: 200px;
    height: 100px;
    margin: 0 20px 10px 0;
    border: 1px solid #ccc;
    padding: 2px;
    border-radius: 2px;
}
.signatureTimestamp {
    display: block;
    margin: .5em 0 1em;
    font-size: 12px;
    color: #888;
}
/* 
    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*/



#editCompanyInfotModal,
#importCompanyServicesModal,
#deleteAllCompanyServicesModal {
    margin-left: -295px;
    width: 600px;
}
#addCompanyServiceModal {
    /*width: auto;*/
}
/*style the error table*/
#importCompanyServicesModal table {
    width: 100%;
}
#importCompanyServicesModal th,
#importCompanyServicesModal td {
    padding:6px 0;
}
#importCompanyServicesModal th {
    border-bottom: 1px solid #ccc;
}
#importCompanyServicesModal .errorRow {
    text-align: right;
    width: 4em;
    padding-right: 2em
}
#importCompanyServicesModal .errorMsg {
    text-align: left;
}




/* editServiceForm is used both the addCompanyServiceModal and editCompanyServiceModal */

.editServiceForm input {
    font-size: 14px;
}

.editServiceForm  .modal-body {
    display: flex;
    flex-direction: row;
}

.editServiceForm .serviceInfo {
    width: 350px;
    flex-grow: 1;
}

.editServiceForm .unitInfo {
     width: 420px;

}

.editServiceForm  .unitInfo .inner {
    background: #f2f2f2;
    padding: 8px 30px 30px;
    border-radius: 8px;
    margin: 0;
}

.editServiceForm  .unitAndQuantity {
    display: flex;
}

.editServiceForm  .modal-body label {
    font-weight: bold;
}

.editServiceForm  .modal-body .setServiceName input,
.editServiceForm   .modal-body .setServiceKey input {
    width: 420px;
    padding: 8px;
}

.editServiceForm  .modal-body textarea {
    font-size: 14px;
    color: #000;
    width: 424px;
    resize: none;
}

.editServiceForm  .setUnit {
    margin-right: 30px;
}

.editServiceForm  .setDefaultQuantity input {
    width: 100px;
}

.editServiceForm  .setCategory input,
.editServiceForm  .setTag input {
    width: 200px;
    padding: 8px;
}

.editServiceForm  .setMarket  .styled-select,
.editServiceForm  .setMarket select {
    width: 216px;
    height: 38px;
}

.editServiceForm  .helptext {
    font-size: 14px;
    color: #666;
    margin: -6px 0 10px 0;
    line-height: 1.2;
    display: none;
    /*show this when we write the text*/
}

.editServiceForm  .dollar {
    letter-spacing: 2px;
}

.editServiceForm  .setServiceUnit input {
    width: 150px;
    padding: 8px;
}

.editServiceForm   .setDefaultQuantity input {
    width: 70px;
}





.deleteConfirmation {
    display: flex;
    justify-content: center;
    background: red;
    padding: 10px;
    border-radius: 20px;
    margin: 30px 0;

}
.modal-body  .deleteConfirmation input  {
    margin:0 10px 3px 0;
}
.modal-body .deleteConfirmation label  {
    font-weight: bold;
    color:#fff;
}

#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 {
    width:320px;
}
#vendorInfoModal .vendorAddress {
    border-right: 1px solid #ddd;
    padding-right: 30px;
}
#vendorInfoModal input {
    width: 250px;
}
#vendorInfoModal .contactPhone input,
#vendorInfoModal .contactPhone2 input {
    width: 140px;
}
.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  .styled-select,
#reportModal  .styled-select,
#setMarketModal  .styled-select {
    width: 390px;
    height: 2rem;
    margin-bottom: 1rem;
}
#setMarketModal  .styled-select {
    /*hack to hide scroll bar in chrome*/
    width: 387px;
}
#exportSearchResultsForm  .styled-select  select ,
#reportModal  .styled-select  select,
#setMarketModal .styled-select  select {
    font-size: 16px;
    height: 2rem;
    width: 410px;
}
.reportUrlPopUp {
    position: absolute;
    bottom: 0px;
    left: -10px;
    background: #fff;
    z-index: 1;
    width: 380px;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.6);
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: end;
}
.reportUrlPopUp .close {
    font-size: 24px;
    display: inline-block;
    padding: 5px 10px;
    cursor: pointer;
    margin: -15px -13px 3px 0;
}
.reportUrlPopUp #sharedReportURL {
    width: 350px;
    background: #e2eeff;
    border: none;
    box-shadow: none;
    resize: none;
    padding: 15px;
    font-size: 14px;
    height: 8em;
    border-radius: 4px;
}
.modal-body .row-fluid .control-group {
    float: left;
    margin-bottom: 15px;
    margin-right: 20px;
}

#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: 100%;
    box-sizing: border-box;
    padding: 16px 8px;
}
#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: 30px;
}
  

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

#shareModal .addPanel {
    border-bottom: 1px solid #dddddd;
  margin-bottom: 26px;
  padding: 0 10px 0 0;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}
#shareModal .control-group {float:left;margin-right: 20px}

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

.editPanel {
    max-height: 300px;
    overflow-y: scroll;
  }
.editPanel thead th {
    position: sticky;
    top: 0;
    background: white; 
    z-index: 1; 
  }

.shareWith {
    /* table  */
    max-height: 260px;
    margin-left: 0;
    overflow: auto;
    width: 100%;
    margin-bottom: 110px;
}
.shareWith > li {
    clear: left;
    float: left;
    padding: 8px 0;
    position: relative;
    width: 100%;
    font-size: 14px;
}
.shareWith .sharePermissions {
    display: block;
}
.shareWith .user-group-tag {
    display: inline-block;
    /* width: 30%; */
}
.shareWith .tag-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.shareWith th, .shareWith td {
    vertical-align: top;
    width: 20%;
    padding: 4px;
    /* border: .5px solid red; */
    border-bottom: 1px solid #ddd;
}
.shareWith th {
    text-align: left;
}
.editPanel  .permissions-col {
    position: relative;
}
.editPanel .tag-col {
    width: 20%;
}
.editPanel .user-name-col {
    /* width: 20%; */
}

#shareModal .modal-body.overflow-visible {
    /* so the pop up menus in the table are NOT clipped - hack!  */
    overflow: auto;
    height: 390px;
    z-index: 1;
    padding-top: 0;
}

.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 {
    left: -30px;
    top: -10px;
    }
.editPermission > .dropdown-menu li:last-child a {color: red;}
.editPermission > .dropdown-menu 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;
    }    
.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,
#batchReportModal,
#createNewTypeModal,
#multiSelectModal,
#setMarketModal,
#marketRegionModal {
    margin-left: -225px;
    width: 450px;

}

#marketRegionModal {
    margin-top: -300px;
}

#createNewTypeModal {
    top:270px;
}
#batchReportModal  .modal-footer p {
    text-align: left;
    margin-top: 2em;

}

#newTemplateModal {top:170px;}

#imageZipModal .includeOnlyFlaggedPhotos label.radio {
    margin-left: 30px;

}
#imageZipModal .includeOnlyFlaggedPhotos label.radio input {
    display: inline-block;
    margin-right: 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;
    /* overflow: unset; this was breaking some modals */
}
.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: transparent;
    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 .modal-header h3 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    line-height: 1.2;
}
#createFotonoteModal .modal-header h3 .field-name {
    color: #666;
}
#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;background: #f1f1f1;border: 1px solid #fff;}



.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;}

.userTag-wrapper {
    display: flex;
    gap:6px;
    flex-direction: column;
}
.userTag .user-group-tag {
    background: #ecf5ff;
    padding: 2px 11px;
    border-radius: 4px;
    display: inline-block;
    color: #3986e9;
    white-space: nowrap;
  } 

.adminPages {
    padding-top: 30px;
}
.adminPage-iceCream {
    display: grid;
    grid-template-rows:50px 50px calc(100vh - 150px);
    grid-template-columns: 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;
}
.title_tools .btn {
    margin-right: 20px;
}
.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); new value below Win Chrome */
    max-height:calc(100vh - 275px);
    min-width: 998px;
    /*background: pink;*/
}
.main_content td {
    overflow: hidden;
}
/*set the vendor and customer table (both views share the same table)*/
.vendorName {
    width:20%;
    /*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:4%;
}
.vendorZip {
    width:8%;
}
.vendorDist {
    width:8%;
}
.vendorStatus {
    width:8%;
}
.vendorMarket {
    width:8%;
}
.vendorRating {
    width:8%;
}
.vendorConnected {
    width:8%;
}

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




/*User table columns*/
.userID {
    width: 4.6%;
    max-width: 44px;
    /* background-color: yellowgreen; */
}
.userProfileImg {
    width: 4.6%;
    max-width: 44px;
    /* background-color: yellow; */
}
.userDisplayName {
    width: 12.6%;
    /* background-color: yellowgreen; */
}
.userEnabled {
    width: 4.6%;
    /* background-color: yellow; */
}
.userTitle {
    width: 6.6%;
    /* background-color: yellowgreen; */
}
.userUserName {
    width: 6.6%;
    /* background-color: yellow; */
}
.userRole {
    width: 6.6%;
    /* background-color: yellowgreen; */
}
.userTag {
    width: 6.6%;
    /* background-color: yellow; */
}
.userExternalID {
    width: 6.6%;
    /* background-color: yellowgreen; */
}
.userEmail {
    width: 12.6%;
    /* background-color: yellow; */
}
.userPhoneNumber {
    width: 6.6%;
    /* background-color: yellowgreen; */
}
.lastLogin {
    width: 6.6%;
    /* background-color: yellow; */
}
.userTypeAccess {
    width: 4.6%;
    /* background-color: yellowgreen; */
}
.userMobileClient {
    width: 6.6%;
    /* background-color: yellow; */
}

.userUtility {
    width: 2.6%;
    /* background-color: crimson; */
}



th.userUtility {
    margin-right: 15px;
} 


/*type table*/

.typeMoveRow {
    width: 2%;
    position: relative;
}
.typeName {
    width: 46%;
}
.typePluralName {
    width: 25%;
}
.typeDisplay {
    width: 25%;
}
.typeUtility {
    width: 6%;
}


/*service table*/
.serviceName {
    width:32%;
}
.serviceKey {
    width:12%;
}
.serviceCat {
    width:12%;
}
.serviceMarket {
    width:12%;
}
.serviceFixed {
    width:12%;
}
.serviceVariable {
    width:12%;
    justify-content: flex-end;
}
.serviceVariable.ascending span {
    /*background: url(../images/portal/arrow_ascending.svg) .5em 50% no-repeat #fff !important;*/
    text-align: right;
}
.serviceVariable.descending span {
    /*background: url(../images/portal/arrow_descending.svg) .5em 50% no-repeat #fff !important;*/
    text-align: right;
}
.serviceUtility {
    width:8%;
}



/*data view table*/
.dataViewName {
    width:94%;
}
.dataViewUtility {
    width: max(80px, 5%);
    overflow: visible !important;
}

/*template list*/
.templateTitle {
    width: 20%;
}
.templateVersion {
    width: 2.5%;
}
.templateKey {
    width: 17.5%;
}
.templateEnabled {
    width: 5%;
}
.templateDesc {
    width: 15%;
    flex-direction: column;
}
.templateType {
    width: 10%;
}
.templateUpdated {
    width: 10%;
}
.templateVersionState {
    width: 10%;
}
.templateUtilites {
    width: 10%;
    overflow: visible !important;
    align-items: flex-start !important;
    flex-direction:column;
}
td.templateDesc {
    flex-direction: column;
}
#fn_type_list .table th.templateDesc {
    align-items: flex-start;
}
.templateDesc .default-report {
    display: inline-block;
    margin-top: .25rem;
    font-weight: 500;
    color: #47525d;
}

.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-columns: 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;*/
}











/*reportColumsList stuff*/

.reportColumsList {
    position: relative;
    border-collapse: collapse; 
}
.reportColumsList .name {
    width: 50%;
    padding-right: 20px;
}

.reportColumsList .groupable,
.reportColumsList .enable-disable {
    text-align: center;
}
.reportColumsList .groupable span {
    display: inline-block;
    background: #48ddff;
    border-radius: 20px;
    width: 12px;
    height: 12px;
}
.reportColumsList .groupable.disabled  span {
    background: #666;
}
.reportColumsList .renameOff,
.reportColumsList .renameOn {
    display: flex;
    justify-content: space-between;
}
.reportColumsList thead  th {
    background: white;
    position: sticky;
    top: 0; /* Don't forget this, required for the stickiness */
    /*box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);*/
}
.reportColumsList .myHandle {
    background: url("../images/portal/my-handle.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    cursor: move;
    height: 28px;
    left: 7px;
    position: absolute;
    top: 7px;
    width: 24px;
    z-index:-1;
}

/*
    fiddling with the z-index to keep the handle showing through the table's header 
    - total hack, but it works
*/
.reportColumsList tbody th:hover .myHandle {
    z-index: 1;
}

.reportColumsList .edit a {
    background: transparent url(../images/portal/icon-edit-photo.svg ) 7px 2px / 16px no-repeat;
    background-color: transparent;
}



#addReportColumn, #editReportColumn, #confirm-column-action {
    width: 440px;
    margin-left: -220px;
}

.btn-switch-off {
    background: transparent url(../images/portal/switch_off.svg ) 0 0px / 30px no-repeat;
    height: 20px;
    width: 30px;
    display: inline-block;
}
.btn-switch-on {
    background: transparent url(../images/portal/switch_on.svg ) 0 0px / 30px no-repeat;
    height: 20px;
    width: 30px;
    display: inline-block;
}


.fotoAdminNav {margin:40px 0 0 20px;}
.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: 11em;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.faux-disabled label {
    color:#999;
}
.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;
}

.image-quality-caution {
    display:inline-block;
    background: #fff8e5;
    padding: 20px 16px 10px 16px;
}
.image-quality-caution p {
    color:#000;
}
.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,
#deleteItemsModal,
#test-template-modal,
#template-error-modal,
#confirm-edit-modal,
#deleteMarketConfirmModal,
#closeEditMultipleFieldsConfirmModal {
    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;}


.fileUpload  .fn_fileUpload input[type="file"],
.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;
}*/

/*I think we should redesign this button...*/
.fileUpload .fn_fileUpload,
.modal-body .fn_fileUpload {
    background: none repeat scroll 0 0 #fff;
    border: 2px solid #ccc;
    border-radius: 113px;
    color: #000;
    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 / 20px no-repeat;}
.close-state {background:url(../images/portal/arrow_closed.svg) top left  / 20px 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:.5; 
    -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;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 !important;
}
.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: 88px;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: 600;}
.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;
    max-height: 300px;
    overflow: scroll;
}

.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;}

.auto-create-one {
    clear: both;
    display: flex;
    flex-direction: column;
    padding: 10px 30px 0 0;
    gap: 10px;
    margin-right: 20px;
    width: 100%;
}

.auto-create-one .choose-auto-create-value {
    display: flex;
}
.auto-create-one .choose-auto-create-value label {
    width: 8rem;
    font-weight: 400;
   
}
.auto-create-one strong {
    font-weight: 500 !important;
    font-size: 13px;
}

.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%;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}
.addAndEditField .col-container .left-col {float:left;width: 450px; overflow: hidden;padding: 12px 0 0 0;
    max-height: 480px;
    overflow-y: scroll;}
.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;min-width: 102px;margin:4px 0 0 0;padding:0;}
.addAndEditField .control-group select, .addAndEditField .control-group input {float: left;width: 300px;margin: 0;border-radius: 3px;} 
.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 {}
.control-label.defaultValue {
    width: 128px;
}
.addAndEditField .set-default-boolean {
    display: flex;
    flex-direction: column;
    clear: left;
    gap: 20px;
    padding-top: 10px;

}
.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: 20px;
}
.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: 500;
    width: 230px;
    line-height: 1.3;
    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 {}

/* checkbox-row so we can jam more stuff into the edit field modal  */
.checkbox-row {
    display: flex;
    clear: left;
    /* outline: 1px solid pink; */
}
.checkbox-row .control-group {
    width: 160px;
}
.setPhotoResolution {
    margin: 3px 0;
    height: 24px;
    /* outline: red solid 1px; */
    clear: left;
}

.setPhotoResolution  select {
    width: 160px !important;
}
.allowPhotosFromAlbum {
    float: left;
    clear: both;
    height: 24px;
    position: relative;
    /* outline: 1px dotted red; */
    margin: 3px 0;
}
.allowPhotosFromAlbum label {
    padding: 0 0 0 53px;
}
.allowPhotosFromAlbum select {
    width: 130px !important;
    position: absolute;
    top: -1px;
    left: 188px;
    height: 26px;
  }
.example-image {
    clear: left;
    margin: 3px 0;
    float: left;
    /* outline: 1px solid blue; */
    padding: 0 0 0 24px;
    position:relative;      
}
  .saveBeforeUploading {
    background: #f6f6f6;
    float: left;
    padding: 2px 8px;
    margin: 2px 0 0 0;
    font-size: 11px !important;
    border-radius: 3px;
  }
  .examplePreview {
    display: none;
    position: absolute;
    top: -40px;
    left: -80px;
    z-index: 1;
    opacity: 0;
    box-shadow: 0px 0px 20px -10px rgba(0,0,0,0.75);
    animation: fadeInFromNone 0.5s ease-out;
  }
 .example-image-icon {
    width: 25px;
  }
  .examplePreviewWrap:hover .examplePreview {
    display: block;
    opacity: 1;

  }

/* temp style for the ai .configure-report-sidebar */

.configure-ai {
    position: absolute;
    background: #fff;
    padding: 20px;
    border-radius: 6px;
    top: 20px;
    width: 500px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1;
    left: 210px;
  }
  .configure-ai label {
    display: flex;
    gap: 10px;
    align-items: self-start;
  }
  
  #open-ai-button,
  .configure-ai .close-btn {
    align-self: flex-end;
    background: #d9534f;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
  }

  .configure-ai .vertical-layout {
    display: flex;
    flex-direction: column;
    padding-left: 23px;
  }

  .configure-ai  .disabled-label {
    opacity: 0.5;
    pointer-events: none;
  }

.ai-is-on {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #4CAF50; /* green */
    border-radius: 50%;
    margin-left: 6px;
    vertical-align: middle;
  }

  .displayThumbs .validation-failed,
  .editTools.group .validation-failed {
    background: transparent url("../images/portal/validation-fail.svg") no-repeat scroll 0px 0px / 25px auto;
    height: 25px;
    left: 6px;
    position: absolute;
    top: 42px;
    width: 25px;
    z-index: 1;
  }






/* this allows us to use display:block with the animation!  */
  @-webkit-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-moz-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-o-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}


/*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-fieldVideos {background:url("../images/portal/icon-video.svg") no-repeat scroll 2px 2px/21px 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-example-photo {
    background: url("../images/portal/icon-example-photo.svg") no-repeat scroll 0 0 / 21px rgba(0, 0, 0, 0);
    left: 3px !important;
    top: 4px !important;
}
.ikon-albums {background:url("../images/portal/icon-albums.svg") no-repeat scroll 1px 0/ 19px rgba(0, 0, 0, 0);}
.ikon-resolution {background:url("../images/portal/icon-resolution.svg") no-repeat scroll 1px 0/ 18px  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-configure-validation {
    background: url("../images/portal/icon-configure.svg") no-repeat scroll 0 0 / 21px rgba(0, 0, 0, 0);
    left: 3px !important;
    top: 4px !important;
}

.examplePhotoSpinner {
    height: 20px;
    width: 20px;
    position: absolute;
    background: #fff url("../images/portal/spinner-material.gif") no-repeat scroll 3px 3px /14px;
    top: 3px;
    left: 26px;
}


.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: #eee;
    color: red;
    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;
}
.deactivateTemplate  {
    background: #eee;
    color: #339AFF;
    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;

}

.creatingTestProjectSpinner {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.creatingTestProjectSpinner i {
    margin-bottom: 12px;
}



.sectionToggle {
    margin: 15px 0 0 ;
}

.sectionToggle a {
    background: #eee;
    padding: 4px 12px 4px 20px;
    border-radius: 1px;
    margin-right: 10px;
    font-size: 13px;
    color: #000;
}
.sectionToggle a.openAll {
    background: #eee url(../images/portal/arrow_closed.svg) 4px 4px / 16px no-repeat;
}
.sectionToggle a.closeAll {
    background: #eee url(../images/portal/arrow_open.svg) 4px 4px / 16px no-repeat;
}
.sectionToggle a:hover {}

/*       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);}
.custom-alert.alert-error {
    background-color: #ffea00;
    border: 0 none;
    color: #000;
    text-align: center;
    margin-bottom: 0px;
}
.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;margin-top:20px;font-size: 1.166em;height: 300px;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: 10px;
    /* 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: 15px 40px;
    width: 100%;
    max-width: 440px;
    text-align: center;
    position: relative;
    box-sizing: border-box;
    align-self: center;
}
.sign-in .login_message {
    width: 390px;
    box-shadow: 0px 4px 6px rgba(212, 45, 45, 0.6);
    box-sizing: border-box;
    max-width: 100%;
}
.sign-in h3 {
    color: #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: 40px;
    margin: 15px auto;
    width: 100%;
    box-sizing: border-box;
     -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;
}
.sign-in .title {
    margin-bottom: 15px;
}
.sign-in .content {
    margin: 15px 0px;
    text-align: left;
    line-height: 1.4;
}
.sign-in .helpText {
    line-height: 1.2;
    margin: 10px 0;
}
.sign-in .action-container {
    margin-bottom: 20px;
}


.rememberMe {
    color: #000;
    font-size: 14px;
    padding: 0 0 18px;
    float: left;
}
.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: 100% !important;
    border: 1px solid #3a88fe;
    box-sizing: border-box;
}
.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;
    
    min-width:620px;
    
}
.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;}


.photo-resolution {
    display: flex;
    margin-top: 3px;
    position: relative;
}
.photo-resolution .select-res {
    display: inline-block;
    padding: 0 6px;
    background: transparent;
    color: #000;
    font-size: 12px;
    border: 1px solid #ccc;   
    width: 36px;
    height: 30px;
}
.select-res.standard-res {
    border-radius: 4px 0 0 4px;
    border-right: 0;
    background: transparent url(../images/portal/size-small.svg ) 8px 7px / 20px no-repeat;
}
.select-res.high-res {
    border-left: 0;
    border-right: 0;
    background: transparent  url(../images/portal/size-medium.svg ) 8px 7px / 20px no-repeat;
}
.select-res.actual-res {
    border-radius: 0px 4px 4px 0;
    border-left: 0;
    background: transparent url(../images/portal/size-large.svg ) 8px 7px / 20px no-repeat;
}
.photo-resolution .select-res.state-on  {
    background-color: #f1f1f1;
}
.photo-resolution.read-only .select-res {
    pointer-events: none;
}
.photo-resolution.read-only .high-res,
.photo-resolution.read-only .actual-res {
    opacity: .2;
}

.photo-resolution .tool-tip-when-only-small {
    position: absolute;
    height: 30px;
    width: 110px;
    display: block;
}





#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: none;
    padding: 40px 0 10px 0;
    border-bottom: 1px solid #444;
}
.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 {
    padding: 0px 20px 0 20px;
  min-width: 280px;
  line-height: 2.4;
  margin: 20px 0 0 20px;
  background: #f8f8f8;
}
.editMicrositeAdmin .featuresAndRoles h4 {
    color: #444;
    font-size: 20px;
    font-weight: 300;
    border-bottom: 1px solid #333;
    padding: 30px 0 10px;
}

.featuresAndRoles input[type="checkbox"] {
    margin: 0px 4px 0 0;
}

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

.editMicrositeAdmin .prop td {padding-bottom: 20px;}

.editMicrositeAdmin .upgrade-to-customer {
    display: flex;
    flex-direction: column;
    float: right;
    background: #f8f8f8;
    padding: 12px;
    align-items: baseline;
}
.editMicrositeAdmin .upgrade-to-customer p {
    margin: 0 0 10px 0;
}
.editMicrositeAdmin .content-edit {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    min-width: 940px;
}

.editMicrositeAdmin .enabled-users {
    display: flex;
    justify-content: space-between;
}
.editMicrositeAdmin .trial-date-picker select {
    width: 5rem;
}
.editMicrositeAdmin .trial-date-picker  #trialExpirationDate_month {
    width: 8rem;
}
.editMicrositeAdmin .billing-detail h4 {
    margin: 20px 0 -10px 0;
}


.editMicrositeAdmin .billing-detail td {
    padding: 6px 0;

}
#updateMicrositeLink {
    /* background: rgba(255, 255, 255, 0.9) none repeat scroll 0 0;
    border-radius: 6px;
    box-shadow: 0 0 5px #ccc; */
    margin-top: -4px;
    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: 120px;
    margin: 0 0 20px 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;}
.userAccessAllTypes {display: inline-block;background: #48ddff; 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;}


#editConnectToVendorModal .control-label,
#createVendorModal .control-label,
#editVendorRelationshipModal  .control-label,
#createNewUserModal .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;}

#editUserModal .modal-body {position: relative;overflow: hidden;padding-bottom: 0;}
#editUserModal .userProfilePic {
    height: 100px;
    left: 30px;
    position: absolute;
    top: 14px;
    width: 100px;
    border-radius: 100px;
    background: #f8f8f8;
    border: 1px solid #fff;
}
#editUserModal .editUserForm {
    border-right: 1px solid #eeeeee;
    min-height: 520px;
    margin-bottom: 0;
    margin-left: 100px;
    /*overflow-y: scroll;*/
    width: 515px;
}
#createRelationModal,
#createNewUserModal {
    margin-left: -380px;
    width: 760px;
}

#vendorInfoModal {
    margin-left: -480px;
    width: 960px;
}
#editUserModal .control-label {
    width: 230px;
    padding-right: 15px;
}
#createNewUserModal ::-webkit-input-placeholder {
   color: #ccc;  font-size: 12px;
}
#createNewUserModal :-moz-placeholder { /* Firefox 18- */
   color: #ccc;  font-size: 12px;
}
#editUserModal .help-block,
#createNewUserModal .help-block {
    font-size: 12px;
    line-height: 1.2;
    width: 257px;
    margin-top: 5px;  
    margin-left: 246px;
}
#createNewUserModal .help-block  {
    margin: 5px 0 0 168px;
}
#createNewUserModal .chooseUserRole {
    left: 340px;
    position: absolute;
    top: 10px;
}
#createNewUserModal .caution {
    background: #FFF4F4;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 15px;
    margin: 10px 0;
}
#newTemplateModal       ::-moz-placeholder,
.createNewSection       ::-moz-placeholder,
#createNewUserModal    ::-moz-placeholder,
#editUserModal         ::-moz-placeholder {  /* Firefox 19+ */
   font-size: 12px;
}

#createNewUserModal :-ms-input-placeholder {
   color: #ccc;  font-size: 12px;
}
#editUserModal {    
    width: 920px;
    margin-left: -440px;
}
#editUserModal .changePasswordForm {margin-top: -40px;}
#editUserModal .changePasswordForm h5 {border-bottom: 1px solid #ddd;padding-bottom: 12px;margin-top: 0;}
#editUserModal .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;
}



#editUserModal .control-group.userEnabled {
    left: 24px;
    position: absolute;
    top: 130px;
    width: 110px;
    font-weight: bold;
    border-radius: 4px;
    display: flex;
    justify-content: center;
}
#editUserModal .control-group.userEnabled.userEnabledTrue {
    background: #aeffa2;
}

#editUserModal .control-group.userEnabled label {
    float: right;
    padding: 6px 0 0 0;
    width: auto;
    font-weight: bold;
}

.changePasswordLink {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    position: absolute;
    right: 70px;
    text-align: right;
    top: 16px;
    width: auto;
}


.userActivity {
  border-top: 1px solid #eee;
  padding: 16px 0px;
  position: absolute;
  right: 20px;
  top: 236px;
  width: 234px;
  font-size: 12px;
  color: #666;
}
.userActivity h5 {
  font-size: 12px;
  margin-bottom: 4px;
}
.userActivity span{
  color: #aaa;
}

#fn_type_list  .noUserData {
    color: #999;
    cursor: default;
    /* font-size: 11px; */
    /* background-color: #f6f6f6; */
    /* padding: 2px 4px; */
    /* border-radius: 2px; */
}
#fn_type_list .noUserData:hover {
    background-color: #f6f6f6;
}


.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 #fff;
    height: 570px;
    left: 10px;
    opacity: 0.5;
    position: absolute;
    top: 0;
    width: 98%;
}
 #editUserModal .changePasswordForm {
    background: none repeat scroll 0 0 #ffffff;
    box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
    height: 250px;
    right: 20px;
    margin-left: 107px;
    padding: 20px;
    position: absolute;
    top: 47px;
    width: 370px;
}
 #editUserModal 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 ; }


.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 a {
    font-size: 14px;
    /*text-decoration: underline;*/
}

#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 .assignmentFeedback p {
    font-size: 16px !important;
}
#vendorListModal .name {width: 30%;}
#vendorListModal .vendorRating {width: 10%;}
#vendorListModal .category {width: 15%;}
#vendorListModal .market  {width: 20%;}
#vendorListModal .state  {width: 10%;}
#vendorListModal .dispance  {width: 10%;}
#vendorListModal .info  {width: 5%;}

#vendorListModal .info a {
    background: url("../images/portal/icon-info-sidebar.svg") no-repeat scroll 50% 2px/16px rgba(0, 0, 0, 0) !important;
    display: inline-block;
    width: 20px;
    border-radius: 10px;
}
#vendorListModal .info a:hover {
    background: url("../images/portal/icon-info-sidebar.svg") no-repeat scroll 50% 2px/16px #fff !important;
}

#vendorListModal tbody tr:hover {
    background: #f6f6f6;
    cursor: pointer;
}
#vendorListModal tr.selected ,
#vendorListModal tr.selected a {
    /*  
    background: #1a73e8;
    color: #fff;
    */
    background: #eaf3ff;
}
#vendorListModal tr.selected:hover {
    background: #eaf3ff;
} 

.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";*/
}


#project_show.ps2 {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns:300px 1fr 340px;
    grid-template-columns:320px 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;
    position: relative;
}
.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 10px 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;
}

.geocode_new {   
    height: 24px;
    width: 24px; 
    float: right;
    clear: both;
    margin: 0 10px 10px 10px;
    background: transparent url("../images/portal/icon-map.svg") no-repeat scroll 0 0/24px auto;
}
.ikon-geocode_off {
  background: transparent url("../images/portal/show/btn_geocode_off.svg") no-repeat scroll 0 0/24px auto;
}
.ikon-geocode_on {
  background: transparent url("../images/portal/show/btn_geocode_on.svg") no-repeat scroll 0 0/24px auto;
}



#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;
}
#ps_header .marketRegionUI {
    clear: both;
}
#ps_header .marketRegionUI a {
    padding: 4px 8px;
    border-radius: 3px;
    color: #000;
    margin: 10px 10px 10px 0;
    display: inline-block;
}
#ps_header .marketRegionSet {
    background: #f7e4f7;
}
#ps_header .marketRegionNone {
    background: #eee;
}
#ps_header .marketRegionSet:hover {
    background: #f4d3f4; 
}
#ps_header .marketRegionNone:hover {
    background: #e1e1e1;
}
#ps_header .marketRegionSet_readOnly {
    padding: 4px 8px;
    border-radius: 3px;
    color: #000;
    margin: 10px 0;
    display: inline-block;
    background: #f7e4f7;
}

/*used on market_region on show and list page*/
.truncate_273px {
  max-width: 273px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.truncate_140px {
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}



.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 0 0;
    max-height: 140px;
    overflow-y: scroll;
    width: 100%; 
}
#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 > div {
    display: flex;align-items: center;
}
#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: 276px;
    border-radius: 2px;
    padding-right: 4px;
}

/* for fastLoad version  */
#myTab li h6.active-link {
    background: #ddd;
    border-radius: 2px;
}
#myTab li h6.active-link:hover {
    background: #ddd !important;
}
#myTab li h6.active-link a {
    color: #000;
}

#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;  */
  padding: 5px 4px 6px 3px;
}

#myTab h6 a .sectionLabel  {
    display: inline-block;
    width: 235px;
}
#myTab h6 a .incompleteCount {
    float: right;
    color: orange;
    /*margin-right: 20px;*/
  }
#myTab h6.active-link a .incompleteCount {
    color: #ff6c00;
  }
#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; */
    width: 275px;
}


/* .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 {
   padding: 10px 10px 60px 10px;
 }
  .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: 13px;
    line-height: 18px;
    margin: 0 0 10px;
    padding: 0;
    overflow-wrap: break-word;
}

.pl2 .commentThread .taskNotes ,
.ps2 .ps_comment_module .commentThread .taskNotes {   
    background: #f6f6f6;
    padding: 0;
    line-height: 1.2;
    margin: 10px 0;
    padding: 2px 10px;
}
.pl2 .commentThread .taskNotes.commentsOfOtherUsers, 
.ps2 .ps_comment_module .commentThread .taskNotes.commentsOfOtherUsers {
    
    
    background: #fff;
    /* 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: 12px;
    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: 18px;  /* keep scrollbar visible */
    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;
    }


/*
    tag modal
*/
#tagsModal,
#batchTagModal,
#batchRemoveTagModal {
    /*display: block;*/
    width: 500px;
    margin-left: -250px;
}
.tagsModal .modal-body {
    max-height: 500px;
    padding-top: 0;
    overflow: auto;
    }
.tagsModal .searchPopUp {
    position: sticky;
    top: 0;
    background: #fff;
}
.tagsModal ul.tags {
    margin-left: 0;
    margin-top: 10px;
}
.tagsModal .tag  span,
.batch-tag-list .tag  span {
    display: inline-block;
    padding: 4px 8px;
    margin: 2px 0;
    border-radius: 4px;
    background-color: #f6f6f6;
    color: #666;
     -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.tagsModal .tag:hover  span,
.batch-tag-list .tag:hover  span {
    background-color: #eee;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 1px -2px rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.20);
}
.tagsModal .tag input:checked + span {
    background-color: #F5E562;
    color: #000;
}
.tagsModal .tag:hover  input:checked + span {
    background-color: #F2E681;
    color: #000;
}
/* different styles for the batch version because we don't add/remove from the same modal  */
#batchTagModal .modal-body,
#batchRemoveTagModal .modal-body {
    padding-right: 0;
}
.batch-tag-list {
    max-height: 450px;
    overflow-y: scroll;
}
.batch-tag-list label {
    display: flex;
}
.batch-tag-list .tag input:checked + span {
    background-color: #e1e1e1;
    color: #000;
}







/*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.fast-load {
    height: calc(100vh - 83px);
} 
.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;
}
.ps2  .ps_section_w  h4.fast-load {
    position: sticky;
    background-color: #eeedec;
    top: -1px;
    z-index: 3000;
    padding-top: 10px;
    margin-bottom: 10px;
}

/*field comment - new referedt o as a field memo */
.ps2 .comment-w {
    clear:both;
    margin:10px 0 0 0;
    width: calc(100% - 75px);
}
.ps2 .comment-w .placeholder {
    color: #A7A7A7;
    font-size: 12px;
    font-weight: 300;
}
.ps2  .comment-w p {
    /*      
    border:none;
    padding: 0;
    border-radius: 0;
    margin: 0 0 0 18px;
    color: #000;
    background: #fff;
    border-bottom: 1px solid #fff;
    min-height:18px;
    */

    line-height: 1.2;
    font-size: .9em;
    width: 100%;
    padding: .25em 0 0 .25em;;
}
.ps2 .comment-w > div {
    display: flex;
    margin-bottom: 10px;
}



.ps2 .comment-w p.noComment {
        border:none;
}
.ps2 .comment-w p:hover,
.ps2 .comment-w p.noComment:hover {
    cursor: text;
}
.ps2 .memo-cell-edit form {
    margin: 0;
    width: 100%;
}
.ps2 .memo-cell-edit textarea {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #000;
    padding: 3px;
    width: 100%;
    font-size: .9em;
    height:4em;
    line-height: 1.2;
    box-sizing: border-box;
}
.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 5px 4px / 10px rgba(0, 0, 0, 0);
    float: left;
    width: 20px;
    height: 19px;
    border-radius: 2px;
}
.comment-w:hover .ikon.ikon-field-memo {
    background: url("../images/portal/ikon-field memo.svg") no-repeat scroll 5px 4px / 10px rgba(240, 240, 240, 1);
}

.comment-w .ikon.ikon-field-memo.fieldRequired {
    background: url("../images/portal/field-memo-required_btn.svg") no-repeat scroll 5px 4px / 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;
}

.fieldGroup_header li:first-child .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 .fieldDescriptions {
    color: #8a8a8a;
    font-size: 13px;
    margin: -5px 0 10px 0;  
}
.ps2 .fieldDescriptions span a {
    color: #637282;
    font-weight: bold;
}


.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;
    }

.reset { /*reset button to clear signature and date fields*/
    border: 1px solid #ccc;
    display: inline-block;
    border-radius: 4px;
    color: #999;
    letter-spacing: .5px;
    margin-bottom: 10px;
}
.reset:hover {
    color: #666;
    text-decoration: none;
}

/*for read only / disabled fields*/
.fieldReadOnly input[type="text"]:disabled,
.fieldReadOnly input[type="text"]:disabled:hover,
.fieldReadOnly  textarea:disabled,
.fieldReadOnly  textarea:disabled:hover {
    background: #f6f6f6;
    border-color: #f6f6f6;
    color:#999;
}
.fieldReadOnly .input-append button,
.fieldReadOnly .input-prepend .add-on,
.fieldReadOnly .styled-checkbox .checkmark  {
    color: #999;
    cursor: not-allowed;
    border-color: #f6f6f6;
}
.ps2 .fieldReadOnly .field_container .date-field .input-append .btn:last-child,
.ps2 .fieldReadOnly .field_container .money-field .input-prepend.input-append .add-on:first-child,
.ps2 .fieldReadOnly .field_container .barcode-field .input-prepend.input-append .add-on:first-child {
    border-color: #f6f6f6;
}
.ps2 .fieldReadOnly .styled-checkbox input~ .checkmark,
.ps2 .fieldReadOnly .styled-checkbox input~ .checkmark:hover {
    border-color: #ddd;
    color: #999;
    display: block;
}
.ps2 .fieldReadOnly .styled-checkbox input:checked ~ .checkmark {
    background-color: #8c99cc;
    border-color: #8c99cc;
    color: #fff;
    display: block;
}
.ps2 .fieldReadOnly .styled-select {
    color: #999;
    background: #f6f6f6;
    border: 0;
    padding: 0;
}
.ps2 .fieldReadOnly .styled-select select {
    color: #999;
}
.ps2 .fieldReadOnly .agreement span {
    opacity: .5;
}

.ps2 .fieldReadOnly .memo-cell p {
    color:#999;
}
.ps2 .fieldReadOnly .serviceSelect {
     color:#999;
     cursor: not-allowed;
}

.ps2 .fieldReadOnly  .button-select  label,
.ps2 .fieldReadOnly  .button-select  label:hover {
    /*outline:4px dashed red !important;*/
    opacity: .5;
    border-color: #8c99cc;
}




.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,
.ps2 .button-select input[type="checkbox"]: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 {
    margin-right: 20px; /*margin for clear date button*/
}
.ps2 .field_container .date-field .input-append .btn:last-child {
    border: 1px solid #ccc;
    border-left: none;
}

 .field_container .serviceSelect {
    border: 1px solid #ddd;
    max-width: 440px;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    margin-right: 10px;
    border-radius: 2px;
    font-size: 16px;
}
 .field_container .serviceSelect span {
    display: inline-block;
    padding: 6px;
}
.field_container .serviceSelect button {
    border-left: 1px solid #ddd;
    border-radius: 0 0 0 0;
}

.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;
    /* to fit wider assign pop up  */
    overflow: visible;
}

.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.6em;
    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;
    /*this is new*/
    overflow: hidden;
}
.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/20px  rgba(0, 0, 0, 0);
    opacity: .4;
}
.ps2 .documents-tab a {
    background: url("../images/portal/icon-documents-sidebar.svg") no-repeat scroll 50% 6px/16px  rgba(0, 0, 0, 0);
    opacity: .4;
}

.ps2 .comments-tab.hasComments a  {
    background: url("../images/portal/icon_comments_show.svg") no-repeat scroll 50% 5px/20px rgba(0, 0, 0, 0);
    /* background: url("../images/portal/icon-comments-close.svg") no-repeat scroll 50% 7px/19px  rgba(0, 0, 0, 0); */
    opacity: .4;
}


.ps2 .comments-tab a  {
    background: url("../images/portal/icon_comments_show_none.svg") no-repeat scroll 50% 5px/20px rgba(0, 0, 0, 0);
    /* 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 .stream-tab a {
    background: url("../images/portal/icon_chat.svg") no-repeat scroll 50% 4px/24px rgba(0, 0, 0, 0);
    /* background: url("../images/portal/icon_stream_chat_tab.svg") no-repeat scroll 50% 5px/24px  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: 0px;
    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;
}
.ps2 .fotobabble-sumary .video-thumb {
    background: rgba(0, 0, 0, 0) url("../images/portal/video-badge.svg") no-repeat scroll 0 0 / 21px auto;
    height: 21px;
    left: 16px;
    position: absolute;
    top: 18px;
    width: 21px;
    pointer-events: none;
}
.stream-tab {
    position: relative;
}

.stream-tab .unreadMessageCount {
    position: absolute;
    top: 0;
    left: 30px;
    background: red;
    display: inline-block;
    color: #fff;
    border-radius: 50px !important;
    height: 20px;
    min-width: 9px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    margin: 0 0 0 10px;
    padding: 0 6px;
    opacity: 1;
}


/*metro modal*/
.loadMessages {
    position: absolute;
    top: 30%;
    width: calc(100% - 16px);
    text-align: center;
}
/*.loadMessages button {
    color: #006ECC;    
    background: #fff;
    border: 1px solid #006ECC;
    padding: 12px 20px;
    border-radius: 6px;
}*/



#project-stream {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.tab-panel-scroll {
  height: 100%;
  overflow-y: scroll;
}

/*chat UI*/
.msger-chat ul {
    margin: 10px;
    padding: 0;
}
.msger-chat ul li:last-child  {
  float: left;
  clear: both;
  width: 100%;
  padding-bottom: 60px;
}
.msger-chat {

}

.chatTimeStamp {
  font-size: 12px;
  color: #999;
}
.right_msg .chatTimeStamp {
    text-align: right;
    margin: 10px 0 4px 0;
}
.left_msg .chatTimeStamp {
    margin: -3px 0 4px 40px;
    display: block;
}


.chatMsgText {
    padding: 10px;
}

.right_msg {
  float: right;
  clear: both;
  display: flex;
  flex-direction: column;
  width: 260px;
  margin: 4px;
}

.right_msg .chatMsgText {
  color: #fff;
  background: #3598ef;
  display: inline-block;
  border-radius: 6px 6px 0px 6px;
}

.right_msg .chatContent {
    text-align: right;
}

.chatContent img {
    width: 200px;
    height: auto;
    max-height: 200px;
    object-fit: cover;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.3s;
}

.chatContent img:hover {
    opacity: 0.7;
}

.image-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 6000; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(255,255,255,0.75); /* Black w/ opacity */
}

.image-modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    max-height: 80%;
    object-fit: contain;
}

.image-modal .image-close {
    position: absolute;
    top: 50px;
    right: 25px;
    color: #000;
    font-size: 40px;
    transition: 0.3s;
    cursor: pointer;
}
  
@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .image-modal-content {
        width: 100%;
    }
}

.msger-chat .left_msg {
  float: left;
  clear: both;
  display: flex;
  width: 260px;
  margin: 4px;
}
.left_msg_inner {
    display: flex;
    position: relative;
}
.left_msg {
  display: flex;
  flex-direction: column;
  width: 260px;
  margin: 4px;
}
.left_msg .chatMsgText {
  color: #000;
  display: inline-block;
}

.left_msg  .chatContent {
    margin-left: 40px;
    max-width: 220px;
    border-radius: 6px 6px 0px 6px;
    background: #eee;
    overflow: hidden;
}


.chatUserName {
  color: #333;
  font-size: 12px;
  font-weight: bold;
  display: inline-block;
}
.left_msg .chatUserName {
    margin: 0 0 0px 40px;
    display: block;
}


.chatProfilePic {
    width: 30px;
    border-radius: 40px;
    position: absolute;
    top: -36px;
    display: flex;
}
.chatProfilePic img {
    border-radius: 40px;
    width: 30px;
    height: 30px;
    align-self: end;
}


.msger-inputarea {
  float: left;
  clear: both;
  position: absolute;
  bottom: 0px;
  background: silver;
  width: 100%;
  padding: 10px 20px;
}
#lastPostAnchor {
    background: pink;
    clear: both;
    float: left;
    height: 80px;
}



#chatTextInput {
    width: 233px;
    height: 28px;
    margin: 10px 0 0 15px;
    border-right: none;
    border-radius: 3px 0 0 3px;
    box-shadow: none;
    font-size: 16px;
    padding: 6px;
    border: 1px solid #ccc;
}
#chatTextInput:focus {
    border: 1px solid #5EAFFF;
background: #E9F6FD;
}
/*chat list modal*/



/*end chat UI*/




/*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-debug {
    /* added debug to fix the double scrollbars - remove the whole rule if the fix works */
    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: column;
    /* align-items: flex-end; */
    min-height: 60px;
    padding: 10px 0;
}
#showPhotoManager .project-photo-header h2 {
    font-size: 16px;
    flex-grow:1;
    margin:0;
    line-height:1;
    /*truncate*/
    max-width: 270px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* z-index: -1; */

}
#showPhotoManager .project-photo-header  .photoTotal {
    font-size: 13px;
    display: block;
}
#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 .project-photo-header  .flag-all {
    background: url("../images/portal/flag-all.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; this was not working,  not sure what changed */
    grid-template-columns: 1fr;
    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; */
    background: transparent url("../images/portal/chevron_left.svg") no-repeat scroll 0px 0px / 12px;
    margin: 16px 0 0px 0;
    opacity: 1;
}
#showPhotoManager.photo-manager .togglePhotoWell a.restorePhotoWell {
    background: transparent url("../images/portal/chevron_right.svg") no-repeat scroll 0px 1px / 12px;
    margin: 0 0 -12px 0;
    opacity: 1;
}
#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;
}

.show-full-size {
    width: auto;
  text-align: center;
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-block;
  background: #585858;
  height: auto;
  color: #fff;
    
}
.show-full-size.on {
    background:greenyellow;
}
#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 - 100px);
    padding:0;
    width: 420px;
    overflow-x: hidden;
}
.left-side.hideAllThumbs,
.sidebar-header.hideAllThumbs {
    display: none;
}
.fixed-control-strip {
    z-index: 0;
    display: flex;
    margin: 4px 0 0 0;
    height: 30px;
}
.fixed-control-strip li {
    /* margin:0 10px; */
    margin: 0 4px;
    background: #dedede;
    padding: 0;
    border-radius: 4px;
    border: 1px solid transparent;
}
.fixed-control-strip li:hover {
    background-color: #ebebeb;
}
.flagPhoto.isFlagged {
    background-color: #ebebeb
}
#showPhotoManager.photo-manager  .flagPhoto {
    width: 36px;
    text-align: center;
}
#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.fill.svg )  8px 6px / 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) 8px 6px / 14px  no-repeat;
}
.fixed-control-strip a {
    height: 100%;
    width: 36px;
    display: block;
    /* opacity: .6; */
    border-radius: 4px;
}

.fixed-control-strip .editPhoto {
    background: transparent url(../images/portal/icon-edit-photo.svg ) 11px 6px / 16px no-repeat;
}
.fixed-control-strip .viewFullSizePhoto {
    background: url(../images/portal/open-image-new-tab.svg ) 10px 5px / 16px  no-repeat;
}
.fixed-control-strip .downloadPhoto {
    background:url(../images/portal/icon-download-photo.svg )10px 1px / 17px no-repeat;
}
.fixed-control-strip .deletePhoto {
    background:url(../images/portal/icon-delete-photo.svg ) 12px 6px / 14px no-repeat;
}
.fixed-control-strip .deletePhoto:hover {
    background:url(../images/portal/icon-delete-photo-caution.svg ) 12px 6px / 14px no-repeat;
}
#showPhotoManager.photo-manager  .flagPhoto input[type="checkbox"] + label span:hover,
.fixed-control-strip a:hover {
    opacity:1;
    background-color: transparent !important;
}
.fixed-control-strip li.faux-disabled:hover {
    background-color: transparent;
}
.fixed-control-strip .editPhoto.faux-disabled,
.fixed-control-strip .viewFullSizePhoto.faux-disabled,
.fixed-control-strip .downloadPhoto.faux-disabled {
    opacity:.3;
    cursor: default;
}
.fixed-control-strip .editPhoto.faux-disabled:hover,
.fixed-control-strip .viewFullSizePhoto.faux-disabled:hover,
.fixed-control-strip .downloadPhoto.faux-disabled:hover {
    opacity:.3;
}

.toggleFullSize {
    display: flex;
    z-index: 1;
    margin-left: 10px;
}
.select-res a,
.toggleFullSize a {
    display: inline-block;
    height: auto;
    width: auto;
    border-radius: 4px;
    padding: 3px 10px 3px 30px;
    font-size: 12px;
    color: #000;
    font-weight: 500;
}
.fullSizeOn {
    /* background: #fff url(../images/portal/icon_magGlass_Off.svg )  4px 5px  / 21px no-repeat; */
    background: #fff url(../images/portal/mag-actual.svg ) 7px 5px / 17px no-repeat;
}
 .fullSizeOff {
    background: transparent url(../images/portal/mag-actual.svg ) 7px 5px / 17px no-repeat;
}






#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;
    display: flex;
    align-items: center;
    justify-content: center;
}
#showPhotoManager .v-wrap.showOriginalImage {
    height: 90vh;
}
#showPhotoManager .v-wrap:before {
    /* content: "";
    display: inline-block;
    vertical-align: middle;
    width: 0;
    margin-right: -.25em;
    height: 600px;  */
}

#showPhotoManager .v-box {
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
    width: 600px;
}



#showPhotoManager .fullscreen-wrap,
#showPhotoManager .showFullSizePhoto,
#showPhotoManager .show-actual-size {
    height: calc(100vh - 50px);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 600px;
    max-height: 90vh;
}
#showPhotoManager .fullscreen-box {
    max-height: calc(100vh - 50px);
    margin:0 10px;
  }
#showPhotoManager  .fullscreen-box img {
    max-height: calc(100vh - 70px);
    object-fit:contain;   
}


#showPhotoManager .fullsize-wrap {
    height: calc(100vh - 50px);
    width: calc(100vw - 685px);

    margin: 0 10px;
    overflow: scroll;
    display: flex;
    align-items: center;
    min-width: 600px;
}

#showPhotoManager .expandThePhotoWell .fullsize-wrap  {
    width: calc(100vw - 260px);
}
#showPhotoManager .fullsize-wrap.expandThePhotoWell {
    width: calc(100vw - 250px);
    
}
#showPhotoManager .fullsize-wrap img {
    max-width: inherit;
}

#showPhotoManager .fullsize-wrap video {
    margin:auto;
}
.v-box video { 
    max-width: 600px; 
    max-height: 600px; 
    background-color: #000;
}
.fullscreen-box video {
    max-height: calc(100vh - 100px);
    max-width: 100%;
}
.fullsize-wrap video {
    /* outline: 1px solid blue; */
}
#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,
#showPhotoManager.photo-manager  .photoNavPrevNext .prevPhoto {
    position: absolute;
    height: 40px;
    width: 40px;
    top: 50%;
    transform: translateY(-50%);
}
#showPhotoManager.photo-manager  .photoNavPrevNext .nextPhoto {
    right: 26px;
}
#showPhotoManager.photo-manager  .photoNavPrevNext .prevPhoto {
    left: 26px;
}

#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 {
    position: absolute;
    font-size: 50px;
    height: 40px;
    width: 40px;
    left: 0;
    top: 0;
    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: 10px;
    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;}




.photo-manager .photoMetaData .ai-generated-data {
    padding-bottom: 100px;
}
.photo-manager .photoMetaData .ai-generated-data h3 {
    font-size: 12px;
    padding: 0 0 0 36px;
    line-height: 2.6;
    background: rgba(0, 0, 0, 0) url("../images/portal/photo-analysis.svg") no-repeat scroll 0px 6px / 28px auto;
    clear: left;
}
.photo-manager .photoMetaData .ai-generated-data ul,
.photo-manager .photoMetaData .ai-generated-data li {
    margin: 0;
    padding: 0;
}
.photo-manager .photoMetaData .ai-generated-data li {
    color: #666 !important;
    margin-bottom: 10px;
}
.ai-generated-data .ai-tag {
    display: inline-block;
  background: #fade04;
  color: #000;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  border: none;
  font-weight: 600;
}
.ai-generated-data .validation-item {
    background: #e6e6e6 !important;
    border-radius: 4px !important;
    padding: 10px 10px 10px !important;
    color: #666 !important;

    margin-bottom: 10px !important;

}

.ai-generated-data .tag-extractor {
    margin-bottom: 1rem;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.ai-generated-data h5 {
    font-size: 12px;
}
.ai-generated-data .key-moment-wrapper {
    margin-bottom: 1rem !important;
} 
.ai-generated-data .key-moment {
    display: flex;
    gap: 6px;
   
}


.validation-header {
    display:flex;
    justify-content: space-between;
    cursor:pointer;
}

.validation-item p {
    margin: 0;
    cursor: default;
  }

  .ai-generated-data strong.validation-failed {
    color: red;
  }
  .ai-generated-data strong.validation-passed {
    color: green;
  }
  .chevron {
  display: inline-block;
  transition: transform 0.2s ease-in-out;
}
.chevron.expanded {
  transform: rotate(90deg);
}
  .no-select {
    user-select: none;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* Internet Explorer/Edge */
  }
.confidence {
  /* color: #999; */
  font-weight: 400 !important;
  font-size: 86%;
  text-transform: capitalize;

}



/* 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: 22px;
    padding: 10px 0 13px 0;
    margin: 0 0 10px -1px;
    border-top: 3px solid #666;
    top: 0;
    position: sticky;
    z-index: 2;
    background: #fff;
}

#showPhotoManager.photo-manager .thumbnail-manager  h5 { /*line item subheader*/
    border-bottom: 1px solid #ddd;
    line-height: 1.4;
    font-size: 14px;
    padding: 10px 0 6px 8px;
    font-weight: 600;
    margin: 10px 0 10px -10px;
    line-height: 1.4;
    background: #f6f6f6;
    color: #000;
}
#showPhotoManager.photo-manager .thumbnail-manager  h5 .lineItemName {
    font-size:12px; 
    text-transform: uppercase;
    display: block;
}
#showPhotoManager.photo-manager .thumbnail-manager  h5 .lineItemIndex,
.currentPhotoField .lineItemIndex {
    background: #ddd;
    display: inline-block;
    padding: 0 4px;
    margin-left: .5em;
    font-size: 8pt;
    vertical-align: super;
}

#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: sub;
    display: inline-block;
    margin: 0 2px 0 2px;
}
 #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;
}
#showPhotoManager.photo-manager .thumbnail-manager .fieldGroupEntry {
    margin-left: 0px;
    margin-bottom: 30px;
    background: #f6f6f6;
    padding: 0 0px 1px 10px;
    }
.dimEditMode div {opacity:.3;}
.dimEditMode > div.dimNotCurrentField {opacity: 1;}

.disabled-class a {cursor: default;}

#showPhotoManager .editMenu {
    flex-grow:1;
    margin: 0 20px 0px 0;
    height: 34px;
    background: #e4f4fc;
}
#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;
    display: flex;
    gap: 30px;
    align-items: center;
    }

#showPhotoManager .editMenu > ul > li {
    display: inline-block;
    margin-top: -4px;
}
#showPhotoManager .editMenu > ul > li.selectAllToggle {
    margin-top: 0;
}
#showPhotoManager .editMenu .dropdown {
    display: inline-block;
}


.filter-photo-menu {
    display: flex;
    flex-direction: column;
}
.filter-photo-menu ul {
    margin:0;
}
.filter-photo-menu label {
    display: flex; 
    align-items: center; 
    gap: 0.5em;
    padding: 4px 20px;
    max-height: 400px;
}
.showPhotoFilterButton {
    background: #eee;
    padding: 4px 8px;
    border-radius: 2px;
}

.filter-photo-menu .scroll-container {
    overflow-y: auto;
    flex: 1 1 auto;
    max-height: 240px; /* enough for 10 items */
  }
  
#showPhotoManager .editMenu .disabled-class {
    color: #666 !important;
    cursor: default;
}
#showPhotoManager.photo-manager .selectAllControl {
    border: none;
    height: 33px;
    width: 38px;
    display: inline-block;
    border-radius: 4px 0 0 4px;
    margin: 0;
}
#showPhotoManager.photo-manager .selectAllControl.selectNone {
    background: #71d2fe url("../images/portal/checkbox-none.png") no-repeat scroll 10px 6px / 20px ;
}
#showPhotoManager.photo-manager .selectAllControl.selectAll {
    background: #71d2fe url("../images/portal/checkbox-checked.png") no-repeat scroll 10px 6px / 20px ;
}
#showPhotoManager.photo-manager .selectAllControl.selectSome  {
    background: #71d2fe url("../images/portal/checkbox-ind.png") no-repeat scroll 10px 6px / 20px ;
}
.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: 8px;
    bottom: 8px;
}
#showPhotoManager.photo-manager .thumbCheckbox input {
    height: 20px;
    width: 20px;
}
#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;*/
    border: 9px solid #F700FF;
    box-shadow: none;
    height: 53px;
    left: -1px;
    position: absolute;
    top: -1px;
    width: 53px;
    border-radius: 4px;
}
#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 .video-thumb {
    background: transparent url("../images/portal/video-badge.svg") no-repeat scroll 0px 0px / 24px auto;
    height: 25px;
    left: 24px;
    position: absolute;
    top: 20px;
    width: 25px;
    border-radius: 19px;
    pointer-events: none;
}
#showPhotoManager.photo-manager .thumbnail-manager .thumbnailWrap input {
    position: absolute;
    right: 17px;
    bottom: 24px;
}
.displayThumbs .scrollOffset {
    height: 0;
    width: 0;
    position: absolute;
    top:-60px
}


#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: 0px;
right: 0px;
background: #fff;
font-size: 26px;
padding: 0px 10px 13px 10px;
box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.25);
border-radius: 4px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
color: #999;
line-height: .5;
z-index: 1;
font-weight: bold;
display: none;
}
.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: -15px;
right: 0px;
background: #eaeff5;
background: #d3edf9;
font-size: 13px;
padding: 5px 9px;
border-radius: 4px 4px 0 0px;
color: #347ee3;
}
#showPhotoManager .displayThumbs {
    position: relative;
    margin: 15px 20px 2em 0;
}
#showPhotoManager .editTools {
    /*background: #f7f7f7;*/
    background: #eaeff5;
    background: #d3edf9;
    margin: 0 20px 20px 0;
    /*border: 1px dashed #046fe8;*/
    border-radius: 3px 0 3px 3px;
    padding: 4px;
    padding: 12px;
    position: relative;
}

#showPhotoManager .editTools  .currentThumb {
    border: 6px solid #F700FF;
box-shadow: none;
height: 57px;
left: -1px;
position: absolute;
top: 0px;
width: 57px;
}
#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 - check later to see if still needed */
  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 .reportList tbody,
#fn_type_list.pl2 .propertyList tbody  {
    min-width: 968px;
    height:calc(100vh - 220px);
}

#fn_type_list td,
#fn_type_list th {
    padding: 10px 5px;
    overflow-wrap: anywhere;
}

#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 th {
    padding: 2px 5px !important;
  }


#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%;
}
#fn_type_list .property_child_list td.status {
    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,
#errorChecking,
#results {
    /*width: 600px;*/
    padding:15px;
    margin: auto;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#startForm .fileUpload {
/*    display: flex;
    flex-direction: column;*/
}
#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,
.tui-image-editor-header-logo,
.tui-image-editor-header-buttons {
    display:none !important;
    /*border: 1px dotted red;*/
}
.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;
}
.tui-image-editor-container.top.tui-image-editor-top-optimization .tui-image-editor-controls ul {
    text-align: center;
}
.tui-image-editor-container ul {
  /*  width: 100vw;
    outline: 1px solid;
    display: flex;
    justify-content: center;*/
}
.tui-image-editor-container li {
    width: auto;
    height: auto;
}
.tui-image-editor-button {
    position: relative;
    cursor: pointer;
    display: inline-block;
    font-weight: normal;
    font-size: 11px;
    margin: 0 6px 6px 6px;
/*    outline: 1px solid red;*/
    width: 60px;
}
.tie-icon-add-button {background: none;}
.tui-image-editor-button div {
    height: 38px;
}
/*fix broken color picker wrapper */
.tui-image-editor-container .color-picker-control {
    height: auto;
}
/* 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;
}

.history-list {
    margin: 0;
}
.tui-image-editor-history-item {
    padding-left: 20px !important;
}
.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item .tui-image-editor-history-item svg {
    width: 20px !important;
    height: 20px !important;
}
#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: 20px;
    background: #006dcc;
    padding: 8px 14px;
    border-radius: 4px;
    opacity: 1;
}
.photo-image-editor-header {
    z-index: 1;
    position: absolute;
    left: 0;
    padding: 10px 20px 0px 80px;
    display: flex;
    justify-content: space-between;
    right: 0;
}
.photo-image-editor-header h4 {
    margin: 0;
}

.photo-image-editor-header p {
    color: #999;
}
.photo-image-editor-header .form-actions-proto {
    min-width: 380px;
    padding-top: 10px;
}
.photo-image-editor-header .saveSpinner {
background: #fff;
display: flex;
align-items: center;
padding: 0 20px;
border-radius: 4px;
box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.25);
margin-top: 10px;
}

/*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: 20px;
}
.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;
    display: flex;
    justify-content: flex-start;

}
.fieldGroup_header .imgPlaceholder {
    height: 60px;
    width: 60px;
    background: #f7f7f7;
    min-width: 60px;
    margin: 0 10px 10px 0;
}
.fieldGroup_header img {
    height: 60px;
    width: 60px;
}
.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 30px 10px 0px;
}
.fieldGroup_header ul li {
    margin: 0;
    color: #4A4A4A;
    font-size: 14px;

}
.fieldGroup_header ul li.incompleteCount {
    color: orange;
}
.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;
    width: 1px;
}

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

.fieldGroupEdit {
    background: #e0dfde;
    /*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;
    justify-content: flex-start;
}
.dynamicFields .addItem {
    display: inline-block;
    background: #fff;
    text-align: center;
    color: #666;
    font-weight: 500;
    margin: 20px 10px 10px 0;
    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;
}

.admin_create_report {
    margin: 20px;
}
.admin_create_report .reportInfo {
    margin-top: 20px;
    display: flex;
}

.admin_create_report .reportInfo .fieldcontain {
    margin-right: 40px;
}

.admin_create_report .reportInfo .fieldcontain.enabled {
    flex-grow: 1;
    margin: 20px 0 0 auto;
    display: flex;
    flex-direction: row-reverse;
}
.admin_create_report .reportInfo .fieldcontain.enabled label {
    display: inline-block;
    margin-left: 10px;
}
.admin_create_report .reportInfo .fieldcontain.enabled input {
    height: 14px;
}
.admin_create_report .reportOptions textarea {
 width: 99%;
 background: #fdf6e3;
 color: #a57800;
 font-family: monospace;
 line-height: 1.4;
 max-height: calc(100vh - 540px);
 overflow: scroll;
}
.admin_create_report .bottomBar {
    display: flex;
    justify-content: space-between;
    border: 3px dotted red;
}
.admin_create_report .testProject {
    display: flex;
    height: 40px;
    align-items: center;
}
.admin_create_report .testProject label {
    margin-right: 20px;
}


/*data view stuff*/
#show-data-viewer {
    height: 100vh;
    width: 100vw;
    margin: 0;
    overflow: scroll;
    top: 0;
    left: 0;
}
#show-data-viewer .modal-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    background: #fafafa;

    height: 60px;
}
#show-data-viewer  .pagination {margin:0;}
#show-data-viewer .modal-body {
    height:calc(100vh - 130px);
}
#show-data-viewer .modal-header h3 span {
    display: block;
    font-size: 14px;
    font-weight: normal;
    color: #666;
}
#show-data-viewer .modal-header h3 {font-weight: bold;font-size: 24px;line-height: 1.2;}
#show-data-viewer .viewInfo {display:flex;align-items:flex-end;}
#show-data-viewer .viewInfo a {margin:2px 2em;}
#show-data-viewer .upload-spinner,
.dataViews .upload-spinner {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -3.5em;
    }
.dataViewsDisplay {
    overflow: scroll;
    height: auto;
    max-height: 100%;
}
.dataViewsDisplay h4 {
    padding-left: 5px;
}
.dataViewsDisplay  tbody {
    height: inherit !important;
}
.dataViewsDisplay table {
    width: 100% !important;
    min-width: inherit !important;
} 
.dataViewsDisplay th,
.dataViewsDisplay td {
    border-right: 1px solid #ccc;
}
.dataViewsDisplay th:last-child,
.dataViewsDisplay td:last-child {
    border-right: none;
}
.dataViewsDisplay th {
    font-weight: bold;
    text-align: left;
    border-right: 1px solid #ccc;
    background: #fafafa;
}
.dataTotals {
   table-layout: fixed;
}
.dataTotals th,
.dataTotals td {
    border-top: 1px solid #dee6ec;
    width: 50%;
    font-size: 14px !important
}
.dataTotals td {
    text-align: right;
}
.totalsAverages {
    display: flex;
    flex-direction: column;
}
.averagesWrap {
    margin-top: 20px;
}
.dataViewsDisplay .category {
    background: #fff  !important;
}

.totalsAverages .averagesTotalsRow th {
    background: #fff;
    border:none;
    text-align: center;
    padding: 2px 0 8px 0 !important;
}
.totalsAverages .averagesTotalsRow div {
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}
.totalsAverages .averagesTotalsRow .totalsSpan div {
    border-left: none;
}
.category .inner {
 /*   display: flex;
    justify-content:space-between;
    padding-right: 1em;*/
}
.categoryLabel {
    padding-left: 20px;
}
.categoryCount {
    font-weight: normal;
    color: #999;
}

/*.totalsRow:last-of-type td,
.totalsRow:last-of-type th, {
  border-color: red;
}*/
#fn_type_list .dataTotals tbody tr:last-child td,
#fn_type_list .dataTotals tbody tr:last-child th {
    /*border-top: 2px solid #ddd;*/
    font-weight: bold;
}
#fn_type_list .dataTotals tbody tr:last-child th .categoryLabel {
    padding-left: 0px;
}

.dataWrap {margin:60px 0;padding-bottom: 50px;}
.dataHeader {display: flex; justify-content: space-between;}

.dataAll {
    border-bottom: 2px solid #ccc;
    /*table-layout: fixed;*/
}
.dataAll th,
.dataAll td {
    padding: 10px !important;
}
.dataAll th {
    border-top: 1px solid #dee6ec;
}
.dataAll td {
    height: 16px;
    vertical-align: top;
}


#addDataviewForm input::placeholder {
    font-style: italic;
    letter-spacing: 1px;
    font-size: 14px;
}

.dataViewsDisplay .DATE {}
.dataViewsDisplay .INTEGER,
.dataViewsDisplay .PROJECT_ID,
.dataViewsDisplay .DECIMAL,
.dataViewsDisplay .MONEY {
    text-align: right;
}



.dataAll .descending,
.dataAll .ascending {
    background: #eaeaea  !important; /*reset the styles on this table*/
}
.dataAll span {
    display: inline-block;
    padding: 0 20px 0 5px;
    margin-left: 0;
}
.dataAll .descending span,
.dataAll .ascending span {
    padding: 0 5px 0 20px;
}
.dataAll .DECIMAL span, .dataAll .DECIMAL span,
.dataAll .INTEGER span, .dataAll .INTEGER span,
.dataAll .MONEY span, .dataAll .MONEY span,
.dataAll .PROJECT_ID span, .dataAll .PROJECT_ID span  {
   padding-right: 0;
}
.dataAll .DECIMAL.descending span, .dataAll .DECIMAL.ascending span,
.dataAll .INTEGER.descending span, .dataAll .INTEGER.ascending span,
.dataAll .MONEY.descending span, .dataAll .MONEY.ascending span,
.dataAll .PROJECT_ID.descending span, .dataAll .PROJECT_ID.ascending span  {
   padding: 0;
}
.dataAll .descending span {
    background:url(../images/portal/arrow_descending.svg) 2px 31% no-repeat transparent !important;
}
.dataAll .ascending span {
    background:url(../images/portal/arrow_ascending.svg) 2px 31% no-repeat transparent !important;
}




/*fix for long titles in data view dropdown*/

.dataview-menu > li > a {
    white-space: normal;
}


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



#shareByUrlModal {
    width: 700px;
    margin-left: -360px;
}
#publicShareURL {
    width: 600px;
    background: #f8f8f8;
    border: none;
    box-shadow: none;
    resize: none;
    padding: 20px;
    font-size: 14px;
}
#sendUrlByEmailModal {
    width: 720px;
    margin-left: -370px;
}

#sharedReportURL {
    width: 300px;
    background: #f8f8f8;
    border: none;
    box-shadow: none;
    resize: none;
    padding: 20px;
    font-size: 14px;
}

#sendUrlByEmailModal p {
    margin:20px 0;
}
#sendUrlByEmailModal .recipient  label,
#sendUrlByEmailModal .emailSubject  label,
#sendUrlByEmailModal .emailMessage  label {
    display:inline-block;
    padding-right: 1em;
    font-weight: bold;
    cursor: default;
}
#sendUrlByEmailModal .emailMessage  label {
    display: block;
}

#sendUrlByEmailModal .recipient  span,
#sendUrlByEmailModal .emailSubject  span,
#sendUrlByEmailModal .emailMessage  span {
    color: #888;
}
#sendUrlByEmailModal .emailMessage  span {
    max-height: 200px;
    display: block;
    overflow-y: scroll;
    white-space: pre-line;
}

#sendUrlByEmailModal .setReminderEmails {
    border-top: 1px solid #ccc;
    padding: 10px 0 0 0;
}
#sendUrlByEmailModal .setReminderEmails p {
    margin-top: 0;
}

#sendUrlByEmailModal .setReminderEmails label {}
#sendUrlByEmailModal #emailBody {
    border: none;
    box-shadow: none;
    padding: 10px 0px;
    resize: none;
    width: 100%;
    height: 16em;
    margin-bottom: 20px;
}
#sendUrlByEmailModal #emailBody:focus {background: #fff;}
#sendUrlByEmailModal .recipientName {
   background: #f1f1f1;
    padding: 8px 18px;
    border-radius: 50px;
}

#sendUrlByEmailModal .recipientEmail  {
    margin-left: 1em;
    color: #999;
}
#sendUrlByEmailModal .emailSubject {
    display: flex;
    align-items: center;
}
#sendUrlByEmailModal .emailSubject label {
    margin-bottom: 0;
}
#sendUrlByEmailModal .emailSubject input {
    width: 100%;
    border: none;
    box-shadow: none;
    font-size: 14px;
    display: inline-block;
    margin-top: -4px;
}
#sendUrlByEmailModal .emailSubject input:focus {
    background: #fff;
}
#sendUrlByEmailModal #emailBody:focus::-webkit-input-placeholder,
#sendUrlByEmailModal #emailBody:focus::placeholder {
  transition: opacity 0.5s 0.5s ease; 
  opacity: 0;
}

.configuredReportList .dataViewUtility {
     display: flex;
    justify-content: flex-end;
}
.configuredReportList .row-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.configuredReportList .row-controls .reportEnabled {
    margin-right: 2em;
}
.configuredReportList tr th {
    display: table-cell !important;
}

#batchSendConsumersModal table {
    width: 100%
}
#batchSendConsumersModal .modal-body {
    max-height: 560px;
}
.sendErrorTitle {width: 30%}

#reportOptionsForm  section {
    margin: 0px 20px 30px 0;
    background: #f8f8f8;
    padding: 10px 40px 60px 40px;
    border-radius: 10px;
}
#reportOptionsForm h3 {
    /*border-top: 1px solid #ccc;*/
}
#reportOptionsForm label {
    cursor: default;
}

#reportOptionsForm .report-key-label {
    margin-bottom: 0;
    color: #888888;
    font-size: 14px;
}

#reportOptionsForm label.checkbox-wrapper {
    cursor: pointer;
}

#reportOptionsForm input[disabled],
#reportOptionsForm select[disabled],
#reportOptionsForm div[disabled]  {
    cursor: default;
    color: #000;
}
#reportOptionsForm input[disabled] {
    background: #eee;
}

#reportOptionsForm label[disabled] {
    color: #999;
}
#reportOptionsForm .setCustomTitle label[disabled] {
    /* color: red !important; */
}
#reportOptionsForm .setCompanyLogo select[disabled],
#reportOptionsForm .setCustomTitle input[disabled],
#reportOptionsForm .setCustomTitle select[disabled] {
    color: #999;
}

#reportOptionsForm input[type="checkbox"],
#reportOptionsForm input[type="radio"] {
    width: 18px;
    height: 18px;
    margin-right: 10px;
}
#reportOptionsForm h3 {
    font-size: 20px;
}

/*configure config table inset*/
#reportOptionsForm .inner {
    background: #eee;
    width: 80%;
    border-radius: 10px;
    padding: 20px 20px;
    margin: 20px 0 20px 0;
}
#reportOptionsForm .setReportColumns {
    font-size: 16px;
    border: 1px solid;
    display: inline-block;
    padding: 10px 20px;
    border-radius: 7px;
    background: transparent;
    margin-bottom: 10px;
}

#reportOptionsForm hr {
    margin: 10px 0 20px 0;

    border-top: 1px solid #ccc;
    border-bottom: 1px solid #fff;}
#reportOptionsForm .setTopBorder {
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
}
  #reportOptionsForm .setColor {
    width: 9em;
    font-size: 16px;
    padding: 4px 6px;
    margin: 0px 0px 0px 1.5em;
}
#reportOptionsForm  .set-title-color {
    
}
#reportOptionsForm  .row { 
    display: flex;
    flex-direction: row;
    margin: 0 0 0px 0 ;
}
 #reportOptionsForm  .row > div {
    flex-basis: 50%
}
 #reportOptionsForm  .left {
    position: relative;
 }
 #reportOptionsForm  .navAnchor {
    position: absolute;
    top: -2em;
 }
@media (max-width:1080px) { 
    #reportOptionsForm  .row { 
        display: flex;
        flex-direction: column;
        margin: 0 0 0px 0 ;
    }
    #reportOptionsForm  .row > div {
    flex-basis: 50%;
    margin-bottom: 30px;
    }
 }




#reportOptionsForm .controls {
    background: #f6f6f6;
    border-radius: 10px;
    padding: 0px 20px 20px;
}
#reportOptionsForm .form-controls {
    display: flex;
    align-items:center;
    margin-bottom: 10px;
}
#reportOptionsForm .form-controls label {
    width: 6em;
    margin-left: 1.5em;

}
#reportOptionsForm label {
     margin-bottom: 14px;
     font-size: 16px;
}
#reportOptionsForm select {
    width: 350px;
}
#reportOptionsForm input[type="radio"] {
    margin: -2px  6px 0 0;
}
/*trying something with the modal height*/

/*height: calc(100vh - 80px);*/
#edit-report-config-modal {
    height: auto;
    position: absolute;
    margin: 0;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: auto;
}
#edit-report-config-modal .modal-body {
   /* max-height: none;

    overflow-y: scroll;
    height: calc(100vh - 290px);
    padding: 10px 16px;*/
    max-height: calc(100vh - 220px);
    padding: 10px 0;
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-rows: 1fr;
}
.configure-report-sidebar ul {
    margin: 0 10px 0 0px;
    /*padding-left: 20px;*/
}
.configure-report-sidebar ul > li {
    line-height: 1.6;
    padding: 0;
    margin-top: 1em;
} 
.configure-report-sidebar a {
    display: block;
    padding-left: 30px;
    color: #000;
}

.configure-report-sidebar a:hover {
    background: #f8f8f8;
}  
/*sidebar submenu*/
.configure-report-sidebar ul ul {
    margin: 0 0 0 0;
    /*padding: 0 0 0 0;*/
}
.configure-report-sidebar ul ul li {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
}
#edit-report-config-modal .sectionHelp {
    color: #666;
    margin: -10px 0 20px 0;
}
#edit-report-config-modal .fieldHelp {
    font-size: 9pt;
    color: #666;
}
#edit-report-config-modal .form-content {
    overflow-y: scroll;
}
#edit-report-config-modal .form-content textarea[disabled]{
    color: #aaa;
}

#signatureModal.portal {
    width: 600px;
    margin-left: -300px;
}
#signatureModal.portal .signature-pad--body {
    box-shadow: 0px 0px 4px 1px rgba(50, 50, 50, 0.25);
    width:540px;
    height: 270px;
}
#signatureModal.portal .signature-pad--footer .description {
    text-align: center;
    margin: 1em;
}
.container-warning {
    background: pink;
    border-radius: 6px;
    padding: 10px 16px;
    margin-bottom: 10px;
}

.container-warning h4 {
    line-height: 1;
    margin-bottom: 8px;
}

.container-warning p {
    
}
#edit-fieldgroup-columns-modal {
    height: calc(100vh - 80px);
    top: 180px;
    width: 1000px;
    margin-left: -500px;
}
#edit-fieldgroup-columns-modal .modal-body {
    max-height: none;
    overflow-y: scroll;
    height: calc(100vh - 230px); 
    padding: 0px 16px 10px 16px;
    
}
#edit-fieldgroup-columns-modal th {
    z-index: 1;
}

.rounded-switch {
    position: relative;
    display: inline-block;
    width: 30px;
    min-width: 30px;
    height: 20px;
    margin-right: 20px;
}

/* Hide default HTML checkbox */
.rounded-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .1s;
    transition: .1s;
    outline: unset;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: #444;
    -webkit-transition: .1s;
    transition: .1s;
}

/* input:checked + .slider {
    background-color: #2196F3;
} */

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input[ng-checked=true] + .slider:before {
    -webkit-transform: translateX(12px);
    -ms-transform: translateX(12px);
    transform: translateX(12px);
    background-color: lime;
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}



.microsite-list .button-wrapper {
    white-space: nowrap;
}
.microsite-list tbody tr:hover {
    background: #fbfbfb;
}
.microsite-list thead th {
    line-height: 1;
    font-weight: 500;
}
.microsite-list .total-users {
    font-weight: bold;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
}
.microsite-list .host-name-prefix {
  width: 5rem;
  padding-left: 20px !important;
}
.microsite-list  .btn-info {
    color: #fff;
}
.microsite-list  .false {
    color: #ff7800;
}
.microsite-report-list .btn-danger {
    color:#fff;
}
.microsite-report-list .report-key {
    word-break: break-all;
}
.admin-template-list .btn {
    color:#fff;
}
.admin-template-list tr:hover {
    background: #f6f6f6;
}
/*
    billing stuff -  note the alt method of fixed table headers
    pro - super simple and light
    con - can't add borders to the th, requires an extra div to wrap the table to set a sticky reference point.
*/
.billing-metrics {
    height: calc(100vh - 110px);
    overflow: scroll;
    margin-top: 20px;
}
.billing-metrics thead {
    position: sticky;
    top: 0;
}
.billing-metrics table { 
    border-collapse: collapse; 
    width: 100%; 
}
.billing-metrics th, 
.billing-metrics td { 
    padding-top: 2px 4px;
 }
.billing-metrics th {
    background: #fbfbfb; 
    padding-top: 0px;
}
.billing-metrics .this {
    border-right: 1px dotted #8c8c8c;
    padding-right: 30px;
}

.microsite-list .num,
.billing-metrics .num,
.billing-metrics .date {
    text-align: right;
}
.billing-metrics th.super  {
    text-align: center;
}
.billing-metrics th.super span {
    display: block;
    text-align: center;
    border-bottom: 2px solid #666;
}
.billing-metrics th.plan, 
.billing-metrics td.plan {
    padding-left: 60px;
    padding-right: 40px;
}
.billing-metrics .recurly {
     padding-left: 20px;
}
.daily-billing-metrics {
    height: 680px;
    overflow: scroll;
    margin-top: 20px;
    margin-bottom: 100px;
}
.daily-billing-metrics thead {
    position: sticky;
    top: 0;
}
.daily-billing-metrics table { 
    border-collapse: collapse; width: 100%; 
}

.daily-billing-metrics .num {
    text-align: right;
}
.daily-billing-metrics th {
    background: #fbfbfb; 
}

.daily-billing-metrics .user {
    border-right: 1px dotted #8c8c8c;
    padding-right: 30px;
}
/*end billing metrics styles*/

select {background: #fff;}


/* Markets and Regions */
.create-btn {
    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;
}

.create-btn:hover {
    background: url("../images/portal/icon-add-new.svg") no-repeat scroll 9px 5px transparent;
}
/* scrolling table bodies for markets and regions tables  */
.table-container {
    width: 100%; /* Adjust as necessary */
    overflow-y: auto;
    height: calc(100vh - 210px); /* Adjust as necessary */
    position: relative;
}
.table-container .table {
    width: 100%;
    border-collapse: collapse;
}

.table-container .table thead {
    background-color: #fff;
    position: sticky;
    top: 0;
    z-index: 1;
}
.enabled-label {    
    color: black;
    padding: 4px 8px;
    border-radius: 14px;
    font-size: 12px !important;
    margin-bottom: 0px;
    margin-left: 8px;
}

.enabled-label.checked {
    background-color: #c1ffc8;
}

.marketButtonWrapper .tooltip {
    transform: translateY(-20px) !important;
}

#editItemsModal {
    margin-left: -350px;
    width: 700px;
}

.edit-items-field-item-names {
    font-size: 14px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.viewSamplePhoto {
    display: inline-block;
    background: #f6f6f6;
    border-radius: 4px;
    padding: 4px 8px 4px 4px;
    cursor: pointer;
  }

.viewSamplePhoto img {
    height: 20px !important;
    width: 20px !important;
    border: none !important;
}

.viewSamplePhoto span {
    font-size: 12px;
    color: #5F5F5F;
    font-weight: 400;
      }

#sampleImageModal {
    display: block;
    width: 660px;
    margin-left: -320px;
}

#moveFieldGroupModal .modal-body {
    max-height: 424px;
}
.fieldtoCopy {
    margin: 0;

}
.fieldOrGroup {
    background: #f6f6f6;
    padding: 10px ;
}
  .fieldOrGroup.isGroup {
    padding: 15px 10px;
    font-weight: bold;
}
.insertionPoint {
    padding: 4px;
    border: 1px dashed #86C0F9;;
    display: block;
    /* text-align: center; */
    margin: 10px 0;
    border-radius: 4px;
    font-size: 12px;
  }
  .insertionPoint:hover {
    background: #ebf5ff;
    border: 1px dashed #339AFF;
    cursor: copy;
  }
  .insertionPoint span {
    display: none;
  }
  li:last-child .insertionPoint span {
    display: inline-block;
  }

.inserted span {
    display: block;
font-size: 12px;
font-weight: normal;
}

.fieldOrGroup.inserted {
    background: #ffffbc;
margin: 10px 0;
border-radius: 6px;
padding: 6px 10px 15px 10px;
}