/* BEGIN LAYOUT STYLE */

body > div.tracer-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

a.navbar-brand > img {
    height: 30px;
}

/* END LAYOUT STYLE */


.requirement-panel {
    position: absolute;
    z-index: 1;
    top: 50px;
    width: 760px;
    height: 700px;
    background-color: white;
    overflow-y: scroll;
}
.requirement-panel-hidden {
    left: -770px;
}
.requirement-panel-visible {
    transition-property: left;
    transition-duration: 0.3s;
    transition-delay: 0s;
    left: 0;
    /*border-right: 1px solid lightgrey;*/
}
.requirement-panel .requirement-panel-container {
    position: relative;
}
.input-panel-container {
    z-index: 2;
    background-color: white;
    height: calc(100vh - 121px);
    overflow-y: scroll;
    position: relative;
}
.input-control-panel-bottom {
    position: absolute;
    bottom: 0;
}
.requirements-list-panel-container {
    position: relative;
}
.requirements-list-panel {
    position: absolute;
    z-index: 1;
    top: 10px;
    right: 0;
    width: 100%;
    height: 700px;
    background-color: white;
    overflow-y: auto;
}
.requirements-list-panel-expanded {

}
.requirements-list-panel-compact {
    transition-property: width;
    transition-duration: 0.3s;
    transition-delay: 0s;
    width: 200px;
}

.requirements-list-panel button.selected {
    background-color: #333333;
    color: black;
}

.requirement-panel .top-zone {
    position: relative;
}

.requirement-panel .top-zone .close-requirement {
    padding: 5px 15px 0 0;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
}


/* INPUT HEADERS */

.input-headers-list table tr td {
    padding: .25rem .75rem;
}

.badge-yellow {
    background: #ffd31a;
}

.fixed-color-col {
    background: #343a40;
}

.fixed-col {
    z-index: -1;
    min-height: calc(100vh - 58px);
    top: 0;
    left: 0;
    overflow-y: visible;
}

.table-striped .estimation-task-column {
    white-space: nowrap;
    min-width: 200px;
}

.modal-fit .modal-dialog {
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    padding: 10px;
}

.modal-fit .modal-body {
    max-height: calc(100vh - 200px);
    overflow: auto;
}

.content-panel {
    padding: 15px 16px 0 25px;
}

.help-panel {
    color: white;
    padding: 10px 20px 0 20px;
}
.help-panel-breadcrumb{
    color: white;
    padding: 50px 25px 0 16px;
}

.help-panel-breadcrumb h2{
    padding-bottom: 15px;
}

.help-panel-breadcrumb p{
    font-size: 12px;
}

.help-panel h2 {
    padding-bottom: 15px;
}

.help-panel p {
    font-size: 12px;
}

.table-head {
    background: #343a40;
    color:white
}

.table-matrix {
    table-layout: fixed;
    width: 100%;
}
.table-matrix th {
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
}

span.integer {
    font-weight: bold;
    font-size: 16px;
}
span span.decimals, span.separator {
    font-weight: normal;
    font-size: 12px;
}

.link-briefing {
    text-decoration: none;
    text-underline: none;
    color: #212529;
}
.link-briefing:hover{
    text-decoration: none;
    text-underline: none;
    color: #212529;
}

.text-help {
    text-align: justify;
}

.landing {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.logo {
    width: 160px;
}

.name-element {
    /*max-width: 200px;*/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.no-overflow {
    overflow: hidden;
}

.action-button {
    padding: 1px 6px;
}
/*
.form-group {
    margin: 0;
}
*/
.button-right {
    text-align: right;
}

.btn-right {
    float: right;
}

.search-panel {
    margin-left: auto;
}

.no-padding-right {
    padding-right: 0;
}

.no-padding {
    padding: 0;
}

table.calendar {
    font-size: 12px;
}
table.calendar .weekend {
    background-color: rgb(238, 238, 238);
    color: rgb(126, 126, 126);
}

table.calendar .today {
    background: repeating-linear-gradient(
            -45deg,
            #999,
            #999 10px,
            transparent 10px,
            transparent 20px
    );
}
table.calendar td.date span {
    background-color: white;
    padding: 5px;
}

.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
    background-color: #fffbf0;
}

table .actions button, table .actions a {
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 0;
}
.modal-dialog {
    color:black;
    font-weight:normal;
}

.overflow-cell-ellipsis {
    max-width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flow-step-number {
    max-width: 8%;
}

.checkbox-margin {
    margin-left: 5%;
}

.edit-flow-step {
    margin-left: 50%;
}

.scroll-y {
    max-height: 200px;
    overflow-y: scroll;
}

.use-case-name,
.business-rule-name {
    width: 20%;
    max-width: 20px;
}

.use-case-description,
.business-rule-description {
    width: 40%;
    text-align: justify;
}

.flow-step-description {
    width: 80%;
    max-width: 80%;
    text-align: justify;
}

.flow-step-edit {
    width: 10%;
    max-width: 10%;
}

.flow-step-delete {
    margin-left: 25%;
}

.flow-step-textarea {
    width: 100%;
    max-width: 100%;
}

.flow-cell-description {
    width: 70%;
}

.flow-cell-buttons {
    width: 15%;
}

.flow-step-sytem-step {
    margin-left: 3%;
}

.move-use-case-flow-step-form {
    display: inline-block;
}

/* -- BEGIN USER REQUIREMENT LIST --*/
.user-requirement-list {
    margin-top: 20px;
}
.user-requirement-list table tr td {
    padding: .25rem .75rem;
    white-space: nowrap;
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-requirement-list td {
    width: 8%;
}

td.user-requirement-list-name-element {
    width: 30%;
}

#technical-requirement-column {
    width: 13%;
}
.user-requirement-name-element {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* -- END USER REQUIREMENT LIST --*/

/* -- BEGIN SPRINTS -- */

.sprint-state {
    text-align: center;
    font-size: 0.8em;
    line-height: 25px;
    -moz-box-shadow:    inset 0 0 5px #000000;
    -webkit-box-shadow: inset 0 0 5px #000000;
    box-shadow:         inset 0 0 5px #000000;
}

.sprint-state-draft { background-color: #eb97ff; }
.sprint-state-defined { background-color: #ff8d92; }
.sprint-state-estimated { background-color: #ffc27d; }
.sprint-state-accepted { background-color: #fff86d; }
.sprint-state-planned { background-color: #96ff74; }
.sprint-state-started { background-color: #89fffa; }
.sprint-state-finished { background-color: #719eff; }
.sprint-state-bugged { background: repeating-linear-gradient( -45deg, #ffe684, #ffe684 5px, #bbb 5px, #bbb 10px ); }
.sprint-state-cancelled { background-color: #aaa; }
.sprint-state-discarded { background-color: #aaa; }

/* -- END SPRINTS -- */

/* -- BEGIN ANGULAR DIRECTIVES -- */

span.custom-name { font-size: 0.9em; }
span.custom-name > span.prefix { color: #777; }
span.custom-name > span.name { font-size: 0.9em; }

/* -- END ANGULAR DIRECTIVES -- */

/* -- BEGIN ALERTS -- */
.alert-messages-container {
    position: absolute;
    display: block;
    width: 100%;
    top: 50px;
    left: 0;
    z-index: 10000;
}
/* -- END ALERTS -- */

@media screen and (max-width: 1366px) {
    /* -- BEGIN USER REQUIREMENT LIST --*/
    .user-requirement-list {
        margin-top: 20px;
    }
    .user-requirement-list table tr td {
        padding: .25rem .75rem;
        max-width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* -- END USER REQUIREMENT LIST --*/
}

#view-estimation-container input {
    margin: 5px 0;
}

#image-row > td {
    vertical-align: middle;
}

#image-row > td:first-child {
    width: 100px;
}

#image-row > td:first-child  > img{
    width: auto;
    height: 60px;
}

.checkbox-search {
    width: 20px;
    height: 20px;
    vertical-align:top;
    margin-left: 10px;
}

.navbar-position {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;
}

.navbar-black {
    background-color: #000;
}

.content-component {
    width: 100%;
    margin-left: 17.5%;
}

.breadcrumb-position {
    margin-top: 58px;
    padding: 0;
}

.btn-logout {
    padding-left: 1.5rem;
    text-align: left;
}

.btn-logout:active {
    background-color: #007bff !important;
    color: white;
}

.btn-search-estimations {
    margin-top: 3%;
}

.form-user-profile button.form-control.btn.btn-transparent.btn-logout {
    margin-top: 5px;
    margin-bottom: 2%;
    text-align: center;
    background-color: #007bff;
    color: white;
}

.form-user-profile button.form-control.btn.btn-transparent.btn-logout:hover,
.form-user-profile button.form-control.btn.btn-transparent.btn-logout:active {
    background-color: #0062cc;
}

@media (min-width: 1400px){
    .content-component {
        width: 100%;
        margin-left: 12.5%;
    }

    .btn-search-estimations {
        margin-top: 2%;
    }
}

.result-uat-instance {
    padding-top: 2px;
    text-align: center;
    border-radius: 1rem;
}

.result-uat-instance-test {
    width: 100px;
    border-radius: 1rem;
    text-align: center;
    padding-top: 2px;
}

.uat-instance-test-result-passed-radio-button,
.uat-instance-test-result-failed-radio-button,
.uat-instance-test-result-skipped-radio-button,
.uat-instance-test-result-pending-radio-button {
    font-size: 1.5em;
    border: 2px solid #e3e3e3;
    color: lightgray;
    min-width: 150px;
}

.uat-instance-test-result-passed-radio-button.active,
.result-uat-instance-passed,
.result-uat-instance-test-passed {
    border: 2px solid #28a745;
    color: #28a745;
    font-weight: bold;
}
.uat-instance-test-result-failed-radio-button.active,
.result-uat-instance-failed,
.result-uat-instance-test-failed {
    border: 2px solid #dc3545;
    color: #dc3545;
    font-weight: bold;
}
.uat-instance-test-result-skipped-radio-button.active,
.result-uat-instance-skipped,
.result-uat-instance-test-skipped {
    border: 2px solid #999900;
    color: #999900;
    font-weight: bold;
}
.uat-instance-test-result-pending-radio-button.active,
.result-uat-instance-pending,
.result-uat-instance-test-pending {
    border: 2px solid #666666;
    color: #666666;
    font-weight: bold;
}

.result-uat-instance {
    display: inline-block;
    width: auto;
    min-width: 30px;
}

.dropdown-multicol{
    display: grid;
    width: 30em;
    grid-template-columns: 1fr 2fr;
    grid-column-gap: 3%;
    background:linear-gradient(#ccd2db,#ccd2db) center/1px 100% no-repeat;
    background-position:33% 0;
}

.dropdown-col-links{
    grid-column-start: 1;
    display:inline-block;
    margin-top: 10px;
}

.dropdown-col-search{
    grid-column-start: 2;
    display:inline-block;
    margin-top: 10px;
}

.submenu-search {
    width: 95%;
}

.dropdown-result-route {
    white-space: nowrap;
    width: 200px;
    font-size: 0.90rem;
    color: grey;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-result-img {
    width: 50px;
    margin-right: 15px;
}

.dropdown-result-link {
    color: black;
    text-decoration: none;
}

.dropdown-results-scrollbar {
    position: relative;
    height: 290px;
    overflow: auto;
}
.dropdown-results-table-wrapper-scroll-y {
    display: block;
}

.dropdown-search-message {
    color: grey;
}

.edit-test-result-container .btn-group {
    position: fixed;
    bottom: 0;
    left: 12.5%;
    right: 0;
    margin: 0 auto;
    max-width: 700px;
    background-color: #ffff;
    border-radius: 8px;
}
.edit-test-overview {
    margin-right: 5%;
    margin-top: 40px;
}
.edit-test-menu {
    margin: 20px 5%;
    border-top: 2px solid #343a40;
    border-bottom: 2px solid #343a40;
    font-weight: bold;
    padding: 20px 5px;
}
.edit-test-user-requirement-name {
    margin: 0 5%;
}
.edit-test-name {
    margin: 0 7.5%;
}
.edit-test-container {
    margin: 0 10%;
    margin-bottom: 20px;
}
.view-test-container {
    margin-bottom: 20px;
}
.edit-test-container .edit-test-header,
.view-test-container .view-test-header {
    color: #ffffff;;
    background-color: #343a40;
    font-weight: bold;
    padding: 10px 20px;
}
.edit-test-container .edit-test-content,
.view-test-container .view-test-content {
    padding: 10px;
}
.cursor-pointer {
    cursor: pointer;
}