#fn_type_list-controls {
    margin: 3px auto;
    height: 50px;
    max-width: 960px !important;
}

/*sorting controls*/
.fb-list-controls {
    display: flex;
    justify-content: inherit;
    padding: 0;
    /*width: 160px;*/
    margin: 0;
    /*outline: 1px dotted red;*/
}
#fn_type_list.pl2 .fb-list-controls .titleDesc,
#fn_type_list.pl2 .fb-list-controls .assigned,
#fn_type_list.pl2 .fb-list-controls .dateCreated {
    width: auto;
    padding: 4px 24px;
    border:1px solid #ccc;
    border-radius: 4px;
    margin: 0 5px;

}
#fn_type_list.pl2 .fb-list-controls .titleDesc:hover,
#fn_type_list.pl2 .fb-list-controls .assigned:hover,
#fn_type_list.pl2 .fb-list-controls .dateCreated:hover {
    cursor: pointer;
}
#fn_type_list.pl2 .fb-list-controls .titleDesc div,
#fn_type_list.pl2 .fb-list-controls .assigned div,
#fn_type_list.pl2 .fb-list-controls .dateCreated div {
    display: inline-block;
    margin: 0 0px ;
    font-weight: 500 !important;
    color: #666;
    letter-spacing: .5px;
}
#fn_type_list.pl2 .fb-list-controls .ascending div, 
#fn_type_list.pl2 .fb-list-controls .descending div {
    
    color: #444;
}

.fb-list-wrapper .textSearch input.search-query {
    width: 200px !important;
}

#fn_type_list .assigned.descending, #fn_type_list .assigned.ascending {
    /*padding-right: 14px;*/

}
.ascending {
    background: url(../images/portal/arrow_ascending.svg) 93% 54% no-repeat    #f6f6f6 !important;
}
.descending {
    background: url(../images/portal/arrow_descending.svg) 93% 54% no-repeat #f6f6f6 !important;
}






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




.search_filters {

    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    min-width: auto;

}

.createNewProject {
    border-radius: 4px;
}
.fb-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 400px;
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    width: 960px;
    margin: auto;
    justify-content: space-between;
    /*outline: 1px dotted red;*/
}

.fb-card {
    width: 300px;
    height: 400px;
    margin: 20px 0  20px 0;   
}
.card-title {
    display: flex;
    align-content: space-evenly;
    height: 60px;
}
.fb-card h4 {
    font-size: 14px;
    align-self: center;
    margin: 0;
}
.fb-card h4 a {
    color:#000;
}
.fb-card-media {
    height: 300px;
    display: flex;
    align-items: center;
    overflow:hidden;
    background: #f8f8f8;
}
.fb-card-media  img {
    /*width: 100%;*/
    /*this oversizes all images so that landscape images aren't letterboxed - neet better fix*/
    width: 150%;
    max-width: 150%;
    margin-left: -24%;
    
}


.fb-meta {
    display: flex;
    flex-direction: column;
    margin-top: 4px;
    line-height: 1.4;

}
.fb-creator {
    font-size: 12px;
    color: #888;
}

.fb-date {
color: #888;
font-size: 12px;
}


.hide {display: none;}




.fotobabble_show {
    display: grid;
    grid-template-columns: 357px 1fr;
    grid-template-rows: 40px 1fr 40px ;

    grid-template-areas:
    "titleBar titleBar"
    "gallery feature"
    "gallery feature";

    height: calc(100vh - 40px);
    margin-top: 40px;
}

/*when slide show is on, change the grid nad hide the gallery and feature tools divs*/
.fotobabble_show.slideShowMode {
    
    grid-template-columns: 1fr;
    grid-template-rows: 40px 1fr ;

    grid-template-areas:
    "titleBar "
    "feature";
}


/*set up grid areas*/
.titleBar {
    grid-area: titleBar;
    border-bottom: 1px solid #ccc;  
}
.fotobabble_show.slideShowMode .titleBar {
    border:none;
}
.gallery {
    grid-area: gallery;
    border-right: 1px solid #ccc;
    overflow: scroll;
}
.feature {
    grid-area: feature;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #fafafa;
    align-items: center;
    padding-top: 10px;
    position: relative;
    /*height: calc(100vh - 90px) !important;*/
    /*outline: 4px dashed red;*/
}
.feature.editMode {
    /*justify-content: flex-start;*/
    background: #fff;
}


.featureTools{
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: unset;
    background:
    transparent;
    height: 180px;
    right: 20px;
    top: 140px;
}
.galleryTools {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 60px;
    width: 356px;
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
    background: rgba(255, 255, 255, .8);
}
.audio-player.slideshowOn {
/*    position: absolute;
    bottom: 0;*/
}

.audio-player {
  /*  position: absolute;
    bottom: 0px;*/
    order: 1px solid #ddd;
height: 40px;
margin-top: 10px;
width: 600px;
}


.recorder {
    background:#444;
    width: 580px;
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-radius: 6px;
    margin: 10px 0;
   
}

.record_controls {}

#audioInput {
    /*border:1px solid red;*/
    display: flex;
}

/*title bar*/
.titleBar h2 {
    float: left;
    line-height: 1;
    padding: 0;
    margin: 5px 0 0 10px;
    font-size: 26px;
    position: relative;
}
.editTitle {
    height: 22px;
    width: 22px;
    /*background: #f6f6f6 url("../images/portal/fotobabble/icon_text.svg") no-repeat scroll 50% 50% / 11px auto;*/
    background: #f6f6f6 url("../images/portal/fotobabble/pencil.svg") no-repeat scroll 50% 50% / 12px auto;
    display: inline-block;
    position: absolute;
    top: 0px;
    right: -40px;
}
#editTitleModal {
    width: 600px;
    margin-left: -300px;
}
.fotobabble_show.slideShowMode .titleBar {
    background: #fafafa;
}
.fotobabble_show.slideShowMode .titleBar h2 {
   /* float: none;
    text-align: center;
    margin: 5px 0 0 10px;
    background: #fafafa;*/
}


/*add photos modal*/
#dropzone {
    background: none repeat scroll 0 0 #f1f8ff;
    border: 2px dashed #ddd;
    border-radius: 7px;
    height: 310px;
    margin: 0 0 40px 0;
    padding: 20px;
    display: flex;
    align-content: center;
    align-items: center;

}
#dropzone p {
    text-align: center !important;
    margin-top: 0;
    color: #666;
    width: 100%;

}


/*prev and next buttons*/
.photo-caption-wrap {
    flex-grow: 1;
    /*outline: 3px dotted green;*/
}
.modal-photo {
    position: relative;
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.slideShowMode .modal-photo {
    background: #fff;
    border:1px solid #ddd
}
.fotobabble_show .photoNavPrevNext .nextPhoto {
    height: 600px;
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
}
.fotobabble_show .photoNavPrevNext .prevPhoto {
    height: 600px;
    left: 0;
    position: absolute;
    right: 300px;
    top: 0;
    width: 100px;
}

.fotobabble_show .photoNavPrevNext .prevPhoto span {
    background: transparent url("../images/portal/arrowPrevPhoto.svg") no-repeat scroll 0 0 / 20px auto;
    left: 20px;
}
.fotobabble_show .photoNavPrevNext .nextPhoto span {
    background: transparent url("../images/portal/arrowNextPhoto.svg") no-repeat scroll 0 0 / 20px auto;
    right: 20px;
}
.fotobabble_show .photoNavPrevNext .prevPhoto span,
.fotobabble_show .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;
}
.fotobabble_show:hover .photoNavPrevNext .prevPhoto span,
.fotobabble_show:hover .photoNavPrevNext .nextPhoto span {opacity: .4;}

.fotobabble_show:hover .photoNavPrevNext .prevPhoto:hover span,
.fotobabble_show:hover .photoNavPrevNext .nextPhoto:hover span {opacity: 1;}

/*  end photoNavPrevNext buttons*/

.v-wrap,
.v-box,
.v-box img {
  width: 600px;
  height: 600px;
}
.v-box img {
    object-fit: contain;
}


/*edit tools*/
.editTools ul {
    display: flex;
    flex-direction: row;
    flex-wrap:wrap;
    margin: 0;
    padding:6px;

}
.editTools ul li {
    margin: 6px;
}
.editTools .thumbnails  {
    margin: 0;
    cursor: grab;
}
.editTools .currentThumb {
    border: 6px solid #fff411;
    display: inline-block;
    outline: navajowhite;
    position: absolute;
    top: -4px;
    left: -4px;
    width: 95px;
    height: 95px;
}
.babble-btn {
    font-size: 12px;
    border: none;
    border-radius: 4px;
    background: #dfdfdf;
    color:#000;
    font-weight: bold;
    display: inline-block;
    line-height: 2;
    height: 23px;
    margin: 0 20px;
    padding: 10px;
    height: 20px;
    width: 20px;
}
.babble-btn:hover {
    background-color: #f6f6f6;
    color: #000;
    border
}

.addPhotos {
    position: absolute;
    bottom: 16px;
    left: 240px;
    background: #f6f6f6 url("../images/portal/fotobabble/icon_plus.svg") no-repeat scroll 50% 50% / 50px auto;
    height: 40px;
    width: 40px;
}
.editPhotoBabble {
     background: #f6f6f6 url("../images/portal/fotobabble/icon_brush.svg") no-repeat scroll 50% 50% / 22px auto;
}
.recordBabble {
    background: #f6f6f6 url("../images/portal/fotobabble/mic.svg") no-repeat scroll 50% 50% / 22px auto;
}
.deleteBabble {
    background: #f6f6f6 url("../images/portal/fotobabble/trash.svg") no-repeat scroll 50% 50% / 18px auto;
}
.deleteBabble:hover {
    color: red;
    background: #f6f6f6 url("../images/portal/fotobabble/trash-hover.svg") no-repeat scroll 50% 50% / 18px auto;
}

.captionPhotoBabble {
     background: #f6f6f6 url("../images/portal/fotobabble/icon_text.svg") no-repeat scroll 50% 50% / 20px auto;
}



/*photo well stuff*/

#player {
    width:600px;
}


/* caption edit */
#photoCaption {
    width: 590px;
    background:#f1f8ff;
    border: 1px solid #f1f8ff;
    margin: 5px 0 0 0;
    padding: 5px;
    resize: none;
    height: 3.4rem;
    border-radius: 4px;
    border:
    navajowhite;
    text-align: center;
    box-shadow: none;
    font-weight: bold;
    font-size: 14px;
    line-height: 1.2;
}
#photoCaption:focus {
    background: #e9f4ff;
    border:1px solid #75baff;
}

.photo-well p,
.photo-well textarea {
    text-align: center;
    width: 600px !important;
    margin: 0 auto;
    padding: 6px;
    font-size: 14px !important;
    height: 6em !important;
    display: block;
    font-weight: 300;
    letter-spacing: .2px;
}
.caption_wrap {
    /*no rules*/
}
.caption_wrap p {
    width: 600px;
    font-size: 22px !important;
    text-align: center;
    margin: 20px 0 0 0;
    line-height: 1.2;
    font-weight: normal;
    color: #575757;
    letter-spacing: .8px;
    max-height: 4.8em;
    overflow: hidden;
}
.photo-well textarea {
    text-align: left;
    border: 1px solid #999 !important;
    border-radius: 6px;
}
.photo-well textarea:focus {
    text-align: left;
    background: #fff !important;
}
.photo-well audio {
    width: 600px;
    margin: 0 auto;
}
.photo-data-sidebar {
    background: #fff;
    position: relative;
}
.photo-data-header {
    border:none;
    
}
.photo-well .form-actions-proto {
    width: 600px;
    margin: auto;
}


.fotobabble-meta {
    border-top: 1px solid #ddd;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 600px;
    padding: 1em 0;
    margin-top: 20px;
}

.photoCounter {
    color: #999;
    
}
.photoCounter strong {
    color: #333;
}


/*toast editor */
.toast.tui-image-editor-container {
    position: absolute;
    z-index: 4;
    top: 40px;
}
.doneEditingPhoto,
.doneEditingPhoto:hover {
    color: #fff;
    z-index: 200;
    position: absolute;
    top: 60px;
    right: 30px;
    opacity: 1;
    font-weight: normal;
    letter-spacing: 1px;
}

.delete_slideshow {
    position: absolute;
    font-size: 16px;
    padding: 3px 15px 4px 35px;
    border-radius: 4px;
    margin: 4px 10px;
    right: 200px;
    top: 42px;
}
.delete_slideshow a {
    font-weight: 500 !important;
    color: #666;
    letter-spacing: .5px;
    font-size: 14px;
    width: auto;
    padding: 4px 24px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin: 0 5px;
}

/*slide show button*/
.play_slideshow ,
.stop_slideshow {
    position: absolute;
    font-size: 16px;
    padding: 3px 15px 4px 35px;
    border-radius: 4px;
    margin: 4px 10px;
    right: 0px;
    top: 40px;   
}



.play_slideshow {
    color: #fff !important;
    background: #e64224;
    border:2px solid #e64224;
    background: #e64224 url("../images/portal/fotobabble/play_slideshow.svg") no-repeat scroll 12px 8px / 10px auto;
}
.stop_slideshow {
    color: #3c3a3a !important;
    background: #fff;
    border-radius: 4px;
    /*border:2px solid #000;*/
 /*   opacity: 0; */   
    background: #ddd url("../images/portal/fotobabble/pencil.svg") no-repeat scroll 12px 6px / 14px auto;
}

/*html:hover .stop_slideshow  {
    opacity: .2;
}*/
/*html:hover .stop_slideshow:hover  {
    opacity: 1;
}
*/





/*record widget stuff -----------------------*/
.record_widget {}
.record_controls {
    /*width: 600px;*/
    display: flex;
    height: 38px;
    
}
.record_icon {
    background: url(../images/portal/fotobabble/record.svg ) 0 0 / 67px no-repeat;
    height: 70px;
    width: 70px;
}
.meter_wrap {
    height: 25px;
    width: 280px;
    margin: 10px auto;
    padding: 2px;
    border-radius: 2px;
    align-self:center;
    background: #fff;
  display: inline-block;

}
.start_rec,
.stop_rec {
    /*border: 3px solid #000;*/
    border-radius: 20px;
    font-weight: bold;
    padding: 6px 25px 6px 35px;
    margin-right: 25px;
    width: 175px;
    display: inline-block;
}

.start_rec,
.start_rec:hover {
    color: #000; 
    background: #fff; 
    top: 40px;  
    background: #fff url("../images/portal/fotobabble/record-dot-off.svg") no-repeat scroll 15px 11px / 16px auto;
}

.stop_rec,
.stop_rec:hover {
    color: #fff; 
    /*border: 3px solid #FF0000;*/
    background: #FF0000 url("../images/portal/fotobabble/record-dot-on.svg") no-repeat scroll 15px 11px / 16px auto;
        
}
.playback_rec,
.playback_rec:hover {
    /*border: 2px solid #000;*/
    border-radius: 5px;
    font-weight: bold;
    padding: 6px 15px 6px 30px;
    background: #fff;
    color: #000;
    background: #fff url("../images/portal/fotobabble/playback.svg") no-repeat scroll 10px 11px / 13px auto;
}
.start_rec:hover,
.stop_rec:hover,
.playback_rec:hover {
    box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.25);
}
.babble-btn-small {
    font-size: 12px;
    font-weight: bold;
    padding: 3px 12px;
    border-radius: 4px;
    margin: 0 5px;
    height: 30px;
}
.save_rec {
    border: 2px solid #006FFE;
    color: #fff;
    background: #006FFE;
}
.save_rec:hover {
    border: 2px solid #0F78FF;
    color: #fff;
    background: #0F78FF;
    box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.25);
}
.cancel_rec {
    background: #fff;
    border: 2px solid #fff;
}
.cancel_rec:hover {
    background: #fff;
    border: 2px solid #fff;
    box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.25);
}
.cancel-save {align-self: center;}


.navWrapper.newUI {
    background: #ddd;
    border-bottom: 1px solid #f4d5d0;

}
.newUI #typeNav .nav-tabs > li > a,
.newUI #typeNav .nav-tabs > li > a:hover,
.newUI #typeNav .nav-tabs .active a {
    color: #333;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.newUI #typeNav .nav .active {
    border:none;
}
/*
.newUI #typeNav .nav #portal_id {
    display: none;
}
*/
.createNewProject {
    background: url("../images/portal/addSign.svg") no-repeat scroll 7px 9px/12px #e64224;
    opacity: 0.8;
}

.views-list li.active, .views-list li.active:hover {
    background: #e64224;
    opacity: 0.8;

}



/*make the photo smaller in edit mode*/
/*.feature.editMode .modal-photo {
    width: 500px;
    margin-left: 50px;
    height: 500px;
    margin-bottom: 20px;
}
*/

.welcome {
    text-align: center;
    height: calc(100vh - 580px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}




/*play stuff*/







.fotobabble_play {}

.fotobabble_play .titleBar {
    display: flex;
    justify-content: center;
    margin-top: 40px;
    border: none;
    width: 100%;
    align-items: center;
    min-height: 65px;
    margin-bottom: -20px;
}
.fotobabble_play .titleBar h2 {
    width: 100%;
    max-width: 600px;
    font-size: 22px;
}
.fotobabble_play  .modal-photo {
    height: auto;
    max-width: 600px;
    margin: 20px auto;
}
.modal-photo-ratio {
    width: 100%;
    padding-top:100%;
}
.fotobabble_play .v-wrap, .v-box, 
.fotobabble_play .v-box img {
    width: 100%;
    height: 100%;
    max-width: 600px;
    position: absolute;
    top: 0;
}
.fotobabble_play .photoNavPrevNext {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
}
.fotobabble_play .photoNavPrevNext a {
    width: 20px;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .5;
}
.fotobabble_play .photoNavPrevNext a.prevPhoto {
    top: 0;
    bottom: 0;
    left: 0;
    width:50px;
}
.fotobabble_play .photoNavPrevNext a.nextPhoto {
    top: 0;
    bottom: 0;
    right: 0;
    width:50px;
}
.fotobabble_play .photoNavPrevNext .prevPhoto span, 
.fotobabble_play .photoNavPrevNext .nextPhoto span {
    font-size: 50px;
    height: 40px;
    width: 20px;
}
.fotobabble_play .photoNavPrevNext .prevPhoto span {
    background: transparent url("../images/portal/arrowPrevPhoto.svg") no-repeat scroll 0 0 / 20px auto;
    left: 20px;
}
.fotobabble_play .photoNavPrevNext .nextPhoto span {
    background: transparent url("../images/portal/arrowNextPhoto.svg") no-repeat scroll 0 0 / 20px auto;
    right: 20px;
}
.fotobabble_play .audio-player {
    display: flex;
    justify-content: center;
    width: 100%;
}
.fotobabble_play #player {
    width: 100%;
    max-width: 600px;
    text-align: center;
}
.fotobabble_play  .fotobabble-meta {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top:0;
    padding:0;
    border:none;
}
.fotobabble_play  .fotobabble-meta-inner {
    padding: 0 ;
    border:none;
    margin: 10px 10px;
    width: 100%;
    max-width: 600px;
    display: flex;
    justify-content: space-between;
}