/*** Containers ***/
#dashboardContainer { background: #262640; border-radius: 5px; }
#dashboardLeft { /*padding: 10px 20px;*/ padding:10px 10px 10px 20px; overflow:hidden; }
#dashboardRight { border: 3px solid #EDAD25; border-radius: 5px; }

#dashboardRight #launchContainer {
    width: 100%;
    height: 100%;
    min-height: 355px; /*224px;*/
    /*position: relative;*/
    background: #3D3E53;
    /*padding-top: 12px;*/
    padding:18px;
}
/*#dashboardRight #launchDarkButtonsContainer { position:absolute; bottom:15px; margin-left:33px; }*/

#dashboardRight #launchDarkButtonsContainer {
    padding-top:5px;
}
#launchDarkButtonsContainer .buttonList { margin:0; }


#projectGridViewContainer {
    margin-top: 10px;
    /* padding-right: 10px; */
    max-height: 835px;
    overflow-y: auto;
    overflow-x: hidden;
} /*665px*/
#projectListViewContainer {
    margin-top: 10px;
    padding-right: 10px;
    max-height: 835px;
    overflow-y: auto;
    overflow-x: hidden;
    display: none;
}
#projectGroupViewContainer {
    margin-top: 10px;
    padding-right: 10px;
    max-height: 835px;
    overflow-y: auto;
    overflow-x: hidden;
    display: none;
}

#projectArchivedViewContainer {
    margin-top: 10px;
    padding-right: 10px;
    max-height: 835px;
    overflow-y: auto;
    overflow-x: hidden;
    display: none;
}




/* Buttons */


/* Override - create project button */
#dashboardContainer .createProjectButton { width: 100% !important; height: 43px; padding-left:30px; border: 2px solid #FFFFFF; }
#dashboardContainer .createProjectButton .icon { width: 33px; position: absolute; top: 10px; left: 4px; }





/* Options (filter buttons etc) */
#optionsContainer { margin-top:5px; }
#optionsContainer .buttonList { margin:0; }
#optionsContainer .buttonList li { display:inline; float:left; }
#optionsContainer .button { width:38px; margin-right:10px; }


/* Project Analytics */
#projectScreenshot {
    min-height: 685px;
    background-size: cover !important;
    background-position: center center !important;
    border-bottom: solid 1px #EDAD25;
    position: relative;
}

#emmaProjectOptions {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 25%;
    max-width: 280px;
    min-width: 190px;
}

.projectAnalyticsContainer { float:left; padding-right:25px; margin-bottom:15px; }
.projectAnalyticsContainer .projectAnalyticsIcon { width:30px; height:30px; float:left; margin-right:10px; }
.projectAnalyticsContainer .ownerIcon { border-radius:50%; }

.projectAnalyticsContainer .span { display:block; float:left; }


.projectAnalyticsContainer .projectUsersIcon { display: none; }
.projectAnalyticsContainer .imgProjectUser1 { width: 30px; height: 30px; position: absolute; display:none; }
.projectAnalyticsContainer .imgProjectUser2 { width: 30px; height: 30px; position: absolute; left: 55px; display:none; }
.projectAnalyticsContainer .projectUserCount { position: absolute; left: 85px; display:none; }


.dashboard-info-container {
    display: flex;
    flex-wrap: wrap;
    white-space: nowrap;
    overflow: hidden; 
    text-overflow: ellipsis; 
}

.dashboard-info-item {
    flex: 1 0 20%;
    box-sizing: border-box;
    padding: 10px; 
    display: flex;
    align-items: center;
    text-align: center;
}

.dashboard-info-icon {
    height: 30px;
    width: 30px;
    margin-right: 10px;
}

.dashboard-info-item .imgProjectUser1, .dashboard-info-container .imgProjectUser2, .dashboard-info-container .projectUsersIcon, .dashboard-info-item .projectUserCount {
    display: none;
}

.dashboard-info-icon-joint {
    position: relative;
    display: inline;
    vertical-align: middle;
}

.dashboard-info-icon-joint .imgProjectUser2 {
    position: absolute;
    left: 50%;
}

.projectUserCount {
    margin-left: 16px;
}

/* For medium screens: 4 items per row */
@media (max-width: 992px) {
    .grid-item {
        flex-basis: 25%;
    }
}

/* For small screens: 3 items per row */
@media (max-width: 768px) {
    .grid-item {
        flex-basis: 33.3333%;
    }
}

/* For extra small screens: 2 items per row */
@media (max-width: 576px) {
    .grid-item {
        flex-basis: 50%;
    }
}

/* For very small screens: 1 item per row */
@media (max-width: 400px) {
    .grid-item {
        flex-basis: 100%;
    }
}

#lblModifiedDate { position:absolute; top:0; left:0; }
#lblCreatedDate { position: absolute; top: 0; left: 0; }



/* Override - launch project button */
#dashboardRight .launchProjectButton { /*width: 236px !important;*/ width:100%; height: 50px; padding: 8px 0 0 0; margin:0 0 10px 0; border: 2px solid #EDAD25 !important; background: #FFFFFF !important; color: #EDAD25 !important; font-size:16px; /*position:absolute; left:33px;*/ }
#dashboardRight .launchProjectButton:hover { cursor:pointer; }
#dashboardRight .launchProjectButton .icon { width: 30px; height:30px; position: absolute; top: 6px; left: 6px; }



/** Project header **/
#projectHeader {
    margin-top:14px;
    border-radius:5px;
}

#btnProjectHeader
{
    text-decoration:underline;
    cursor:pointer;
}

#btnProjectHeaderGroup {
    text-decoration: underline;
    color: #EDAD25;
}



/* Projects - grid */

.gridProject {
    width: 100%;
    /* max-width: 283px; */
    min-height: 175px;
    border: 3px solid #199BD8;
    border-radius: 5px;
    position: relative;
    cursor: pointer;
    overflow:hidden;
    background-position:center !important;
}


.highlightedProject { border: 3px solid #EDAD25 !important; }
.highlightedProject .launchIcon { border: 2px solid #EDAD25 !important; }

.gridProject .projectTitle {
    width: 265px;
    display: block;
    padding: 5px 10px;
    /*font-family: 'FundamentalBrigadeSchwer';*/
    font-family: 'SegoeUI';
    white-space: nowrap;
    overflow: hidden;
    font-size:14px;
}
.gridProject .infoBackground { width:100%; height:40px; position:absolute; bottom:0; background:#000; opacity:0.3; z-index:1; }
.gridProject .launchIcon { width: 40px; height: 40px; background: #EDAD25; padding: 5px; position:absolute; bottom: 0; right: 0; border: 2px solid #199BD8; border-radius: 3px; opacity: 1; z-index: 2; }
.gridProject .imgInfoOwnerAvatar { width:20px; height:20px; position:absolute; bottom:16px; left:4px; z-index:2; border-radius:50%; }
.gridProject .imgInfoClientGroupAvatar { width:20px; height:20px; position:absolute; bottom:16px; left:140px; z-index:2; }
.gridProject .infoProjectOwner { position: absolute; bottom: 17px; left: 28px; z-index: 2; }
.gridProject .infoProjectStartDate { position: absolute; bottom: 0; left: 4px; z-index: 2; }
.gridProject .projectUsersIcon { width: 15px; height: 15px; position: absolute; bottom: 18px; right: 85px; z-index: 2; /*display: none;*/ }
.gridProject .imgProjectUser1 { width: 20px; height: 20px; position: absolute; bottom: 16px; right: 60px; z-index: 2; /*display:none;*/ }
.gridProject .imgProjectUser2 { width: 20px; height: 20px; position: absolute; bottom: 16px; right: 50px; z-index: 3; /*display: none;*/ }
.gridProject .projectUserCount { position: absolute; right: 45px; bottom: 20px; z-index: 4; /*display: none;*/ }



/* Projects - list */

.listProject { width: 100%; height: 53px; background:#3D3E53; border: 1px solid #fff; border-radius: 10px; position:relative; }
.listProject:hover { cursor:pointer; }

.listProject .projectTitle { width:445px; display:block; padding: 8px 10px; white-space: nowrap; overflow:hidden; }
.listProject .imgInfoOwnerAvatar { width:30px; height:30px; position:absolute; bottom:11px; right:100px; z-index:2; border-radius:50%; }
.listProject .imgInfoClientGroupAvatar { width:30px; height:30px; position:absolute; bottom:11px; right:60px; z-index:2; }
.listProject .projectUsersIcon { width: 15px; height: 15px; position: absolute; bottom: 18px; right: 45px; z-index: 2; /*display: none;*/ }
.listProject .imgProjectUser1 { width: 30px; height: 30px; position: absolute; bottom: 11px; right: 20px; z-index: 2; /*display:none;*/ }
.listProject .imgProjectUser2 { width: 30px; height: 30px; position: absolute; bottom: 11px; right: 5px; z-index: 3; /*display: none;*/ }
.listProject .projectUserCount { position: absolute; right: 2px; bottom: 20px; z-index: 4; /*display: none;*/ }




/* Project groups */
.projectGroupContainer {
    padding-bottom: 30px;
    position: relative;
    text-align: center;    
}

.projectGroupContainer .folder
{
    width:103px;
    height:92px;
    position:relative;
    margin:0 auto;
    
}

.projectGroupContainer .folder img {
    width: 103px;
    height: 92px;
}

.projectGroupContainer .folder img:hover {
    cursor: pointer;
}

/*.projectGroupContainer .folder { width:103px; height:92px; }
.projectGroupContainer .folder:hover { cursor:pointer; }*/

.projectGroupContainer .projectGroupCountLocked { width:78px; position:absolute; bottom:10px; left:0; padding-right:7px; text-align:right; }
.projectGroupContainer .projectGroupCountLocked:hover { cursor:pointer; }

.projectGroupContainer .projectGroupCountUnlocked { width:78px; position:absolute; bottom:10px; right:10px; padding-right:7px; text-align:right; }
.projectGroupContainer .projectGroupCountUnlocked:hover { cursor: pointer; }

.projectGroupContainer .projectGroupName { width:100%; position:absolute; bottom:0; left:0; background:none; color:#fff; border:none; text-align:center; }

.projectGroupContainer .projectGroupScreenshot
{
    position:absolute;
    top:29px;
    left:21px;
    width: 71px !important;
    height: 50px !important;
}



/*** EDI ***/

.ediDisabled { pointer-events: none; cursor: default; animation: fadeinout 5s ease infinite; }

@keyframes fadeinout {
    0% {
        opacity: 0.85;
    }


    50% {
        opacity: 0.25;
    }

    100% {
        opacity: 0.85;
    }
}


#dashboardContainer #contextMenu { background:#EDAD25; z-index:10; }
#dashboardContainer #contextMenu ul { width:190px; }
#dashboardContainer .dropdown-menu { background: none; }
#dashboardContainer .dropdown-menu li { background: none; text-align:center; }
#dashboardContainer .dropdown-menu li a { color: #fff !important; }
#dashboardContainer .dropdown-menu li:hover { background:none !important; cursor:pointer; }


/** Add new/change project group **/
#projectGroupsContainer { display: none; z-index: 99; position: absolute; width: 519px; height: 334px; background: #3D3E53; box-shadow: 6px 10px 20px #00000080; border: 2px solid #EDAD25; border-radius: 10px 0px 0px 10px; }

@media (max-width: 768px) {
    #projectGroupsContainer {
        width: 330px;
    }

    #projectGroupsContainer .searchContainer {
        margin-left: 10px;
    }
}

@media (max-width: 640px) {
    #projectGroupsContainer {
        width: 330px;
        top: 120px !important;
        right: 10px !important;
    }

    #projectGroupsArrow {
        display: none !important;
    }

    #projectGroupsContainer .searchContainer {
        margin-left: 10px;
    }
}

#projectGroupsArrow { display:none; background-image: url("/static/app/images/icons/YellowArrow.svg"); background-repeat:no-repeat; position: absolute; width:50px; height:40px; }

#projectGroupSearchHeader { width:250px; padding:10px; float:left; }

#projectGroupsContainer .searchContainer { float:left; }

#projectGroupsContainer .searchTextBox { width:255px; height:40px; margin-top:8px; font-size:14px; }

#projectGroupsContainer .searchIcon { width:25px; height:25px; top:15px; }

#projectGroupsList { max-height: 255px; list-style: none; margin: 0; padding: 10px 0 0 0; overflow-y:auto; }

#projectGroupsList li { cursor: pointer; padding-left: 40px; margin-bottom:10px; background: url("/static/app/images/icons/ProjectGroup_Panel.svg"); background-repeat:no-repeat; background-position: left 10px center; background-size: 20px 20px; }

#projectGroupsList li:hover { background: #fff url("/static/app/images/icons/ProjectGroup_Panel_hover.svg"); background-repeat: no-repeat !important; background-position: left 10px center !important; background-size: 20px 20px !important; color:#1A1A34; }

.createProjectGroupItem { background: url("/static/app/images/icons/CreateProjectGroup.svg") !important; background-repeat: no-repeat !important; background-position: left 10px center !important; background-size: 20px 20px !important; }

.createProjectGroupItem:hover { background: #fff url("/static/app/images/icons/CreateNewProjectGroup_hover.svg") !important; color: #1A1A34 !important; background-repeat: no-repeat !important; background-position: left 10px center !important; background-size: 20px 20px !important; }



/** Filter **/
#filterContainer {
    display: none;
    position: absolute;
    width: 258px;
    height: 370px;
    background: #3D3E53;
    box-shadow: 6px 10px 20px #00000080;
    border: 2px solid #EDAD25;
    border-radius: 0px 10px;
    z-index: 5;
}

#filterArrow {
    display: none;
    background-image: url("/static/app/images/icons/YellowArrow.svg");
    background-repeat: no-repeat;
    position: absolute;
    width: 50px;
    height: 40px;

    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

#filterContainer .filterHeader {
    padding: 10px;
}


.filterList { list-style: none; margin: 0; padding: 10px 0 0 0; overflow-y:auto; }

.filterList li { cursor: pointer; padding-left: 40px; margin-bottom:10px; }
.filterList li:hover { color:#1A1A34; }

.filterList .allProjects
{
    background: url("/static/app/images/icons/AllProjects.svg"); background-repeat:no-repeat; background-position: left 10px center; background-size: 20px 20px;
}

.filterList .allProjects:hover
{
     background: #fff url("/static/app/images/icons/AllProjectFilter_hover.svg"); background-repeat: no-repeat !important; background-position: left 10px center !important; background-size: 20px 20px !important;
}

.filterList .editorProjects
{
    background: url("/static/app/images/icons/Edit.svg"); background-repeat:no-repeat; background-position: left 10px center; background-size: 20px 20px;
}

.filterList .editorProjects:hover
{
     background: #fff url("/static/app/images/icons/Edit_hover.svg"); background-repeat: no-repeat !important; background-position: left 10px center !important; background-size: 20px 20px !important;
}

.filterList .readOnlyProjects
{
    background: url("/static/app/images/icons/ReadOnly.svg"); background-repeat:no-repeat; background-position: left 10px center; background-size: 20px 20px;
}

.filterList .readOnlyProjects:hover
{
     background: #fff url("/static/app/images/icons/ReadOnly_hover.svg"); background-repeat: no-repeat !important; background-position: left 10px center !important; background-size: 20px 20px !important;
}

.filterList .projectDateAsc
{
    background: url("/static/app/images/icons/NumbersAscending.svg"); background-repeat:no-repeat; background-position: left 10px center; background-size: 20px 20px;
}

.filterList .projectDateAsc:hover
{
     background: #fff url("/static/app/images/icons/NumbersAscending_hover.svg"); background-repeat: no-repeat !important; background-position: left 10px center !important; background-size: 20px 20px !important;
}

.filterList .projectDateDesc
{
    background: url("/static/app/images/icons/NumbersDescending.svg"); background-repeat:no-repeat; background-position: left 10px center; background-size: 20px 20px;
}

.filterList .projectDateDesc:hover
{
     background: #fff url("/static/app/images/icons/NumbersDescending_hover.svg"); background-repeat: no-repeat !important; background-position: left 10px center !important; background-size: 20px 20px !important;
}

.filterList .projectNameAsc
{
    background: url("/static/app/images/icons/AlphabetAZ.svg"); background-repeat:no-repeat; background-position: left 10px center; background-size: 20px 20px;
}

.filterList .projectNameAsc:hover
{
     background: #fff url("/static/app/images/icons/AlphabetAZ_hover.svg"); background-repeat: no-repeat !important; background-position: left 10px center !important; background-size: 20px 20px !important;
}

.filterList .projectNameDesc
{
    background: url("/static/app/images/icons/AlphabetZA.svg"); background-repeat:no-repeat; background-position: left 10px center; background-size: 20px 20px;
}

.filterList .projectNameDesc:hover
{
     background: #fff url("/static/app/images/icons/AlphabetZA_hover.svg"); background-repeat: no-repeat !important; background-position: left 10px center !important; background-size: 20px 20px !important;
}



.filterList .projectUser
{
    background: url("/static/app/images/icons/ClientUserGroup.svg"); background-repeat:no-repeat; background-position: left 10px center; background-size: 20px 20px;
}

.filterList .projectUser:hover
{
     background: #fff url("/static/app/images/icons/ClientUserGroup_hover.svg"); background-repeat: no-repeat !important; background-position: left 10px center !important; background-size: 20px 20px !important;
}

.filterList .projectGroup
{
    background: url("/static/app/images/icons/ProjectGroup_Panel.svg"); background-repeat:no-repeat; background-position: left 10px center; background-size: 20px 20px;
}

.filterList .projectGroup:hover
{
     background: #fff url("/static/app/images/icons/ProjectGroup_Panel_hover.svg"); background-repeat: no-repeat !important; background-position: left 10px center !important; background-size: 20px 20px !important;
}





/** Project Info Popup **/
#projectInfoContainer {
    display: none;
    position: absolute;
    width: 258px;
    background: #3D3E53;
    box-shadow: 6px 10px 20px #00000080;
    border: 1px solid #EDAD25;
    z-index: 5;
    padding: 0 15px 10px 15px;
}

#projectInfoArrow {
    display: none;
    background-image: url("/static/app/images/icons/YellowArrow.svg");
    background-repeat: no-repeat;
    position: absolute;
    width: 50px;
    height: 40px;    
}

#projectInfoContainer .infoHeader {
    padding: 10px;
    display:block;
    text-align:center;
}

#projectInfoContainer .form-control {
    background: none;
    border: none;
    outline: none;
    color: #fff;
    background: #1A1A34 0% 0% no-repeat padding-box;
    box-shadow: 6px 10px 20px #00000080;
    border: 1px solid #EDAD25;
}

#projectInfoContainer .form-select {
    background: none;
    /*border: none;*/
    outline: none;
    color: #fff;
    background: #1A1A34 0% 0% no-repeat padding-box;
    box-shadow: 6px 10px 20px #00000080;
    border: 1px solid #EDAD25;
}


#btnProjectInfoSave {
    float: left;
    width: 26px;
    height: 28px;
    margin-top: 8px;
    margin-right: 8px;
    border-radius: 2px;
    background: url('/static/app/images/icons/tick.svg') !important;
}

#btnProjectInfoCancel {
    float: right;
    width: 26px;
    height: 28px;
    margin-top: 8px;
    margin-right: 8px;
    border-radius: 2px;
    background: url('/static/app/images/icons/cancel.svg') !important;
}


#expandCollapseContainer
{
    margin-top:10px;
    cursor:pointer;
}

.expandCollapseBar{
    width:100%;
    height:10px;
    border-radius:2px;
    border:solid 1px #fff;
}

.expandArrow {
    width: 10px;
    height: 10px;
    background: url('/static/app/images/icons/Arrow_Unselect.svg') !important;
    margin: 5px auto;
}

.collapseArrow {
    width: 10px;
    height: 10px;
    background: url('/static/app/images/icons/Arrow_Unselect.svg') !important;
    margin: 5px auto;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

.searchTextBox {
    width: 100%;
    max-width: 100% !important;
}

/** Smaller Screens **/
@media screen and (max-width: 1280px) {
    #emmaProjectOptions {
        width: 35%;
    }
}

/** Small screens */

@media screen and (max-width: 1650px) {
    
    .button {
        height:40px;
        font-size: 15px;
        padding-top: 6px;
    }

    .button .icon {
        width:16px;
        height:18px;
        top:10px;
        left:8px;
    }


    #dashboardRight .launchProjectButton {
        font-size: 17px;
        padding: 5px 0 0 3px;
        height: 44px;

    }

    #dashboardRight .launchProjectButton .icon {
        width:30px;
        height:30px;
        left:5px;
        top:5px;
    }


    /* Left Panel */
    #optionsContainer .button {
        width: 35px;
    }

    #dashboardContainer .createProjectButton .icon {
        top:8px;
    }

    .searchIcon {
        width:25px;
        height:25px;
        top:8px;
    }

    .searchTextBox {
        width: 100%;
    }

    .gridProject .projectTitle {
        font-size: 14px;
    }

    .gridProject .infoProjectOwner {
        left: 5px;
    }

    .gridProject .imgInfoOwnerAvatar, .gridProject .imgInfoClientGroupAvatar, .gridProject .projectUsersIcon, .gridProject .imgProjectUser1, .gridProject .imgProjectUser2, .gridProject .projectUserCount {
        display: none;
    }



    .listProject {
        height:45px;
    }

    .listProject .projectTitle {
        font-size:13px;
        padding:10px 10px;
    }

    .listProject .imgInfoOwnerAvatar {
        width:25px;
        height:25px;
        right:85px;
    }

    .listProject .imgInfoClientGroupAvatar {
        width:25px;
        height:25px;
        right:52px;
    }

    .listProject .imgProjectUser1 {
        width: 25px;
        height: 25px;
    }

    .listProject .imgProjectUser2 {
        width: 25px;
        height: 25px;
    }

    #filterContainer {
        width:205px;
        height:350px;
    }
}


#btnDelete {
    display:none;
}

.disabled-btn {
    color: #ccc;
    pointer-events: none; 
    cursor: default;
    opacity: 50%;
}