$brand-font-weight: 400;

/** Overriding bootstrap default vars */
$brand-primary: #559745;
$brand-success: lighten($brand-primary, 0.5%);
$brand-info: #004b85;
$brand-warning: #f1aa1e;
$brand-danger: #a62c38;
$link-color: $brand-primary;
$input-border-focus: $brand-primary;
$headings-font-weight: $brand-font-weight;
$form-group-margin-bottom: 3px;
$btn-font-weight: $brand-font-weight;
$border-radius-base: 3px;
$border-radius-large: 4px;
$border-radius-small: 2px;
$modal-backdrop-bg: #fff;
$modal-backdrop-opacity: 0.9;
$color-gray-light: #CCC;
$color-white: #FFF;
$large-spacer: 20px;

$icon-font-path: "../../../../node_modules/bootstrap-sass/assets/fonts/bootstrap/";
@import "../../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
@import "../../../../node_modules/react-datetime/css/react-datetime.css";

body {
    font-weight: $brand-font-weight;
}

h4 {
    color: $gray-light;
    font-weight: 300;
}

button, .btn {
    @include form-control-focus;
}

.navbar-default {
    border-color: $brand-primary;
    border-top: 0;
    background-color: $color-white;
    border-left: 0;
    border-right: 0;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    color: $brand-primary;
    background-color: transparent;
}

.navbar-brand {
    padding-top: 10px;
    padding-bottom: 0px;
    padding-left: 15px;
    padding-right: 15px;
}

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

/**
 * LABEL
 */
.label {
    background-color: $color-white;
    border: 1px solid $gray-base;
    color: $gray-base;
    font-weight: 200;
    border-radius: 2px;
}

.label-primary {
    border: 1px solid $brand-primary;
    color: $brand-primary;
}

.label-success {
    border: 1px solid $brand-success;
    color: $brand-success;
}

.label-info {
    border: 1px solid $brand-info;
    color: $brand-info;
}

.label-warning {
    border: 1px solid $brand-warning;
    color: $brand-warning;
}

.label-danger {
    border: 1px solid $brand-danger;
    color: $brand-danger;
}

.label.clickable:hover {
    background-color: darken($gray-base, 15%);
    color: $color-white;
}

.label.label-success.clickable:hover {
    background-color: darken($brand-success, 15%);
}

.label.label-info.clickable:hover {
    background-color: darken($brand-info, 15%);
}

.label.label-warning.clickable:hover {
    background-color: darken($brand-warning, 15%);
}

.label.label-danger.clickable:hover {
    background-color: darken($brand-danger, 15%);
}

a.label-container:hover {
    text-decoration: none !important;
}

/** TABLE */
.table > thead > tr > th, .table > thead > tr > td {
    font-weight: 400;
    font-size: 12px;
}

.table > tbody > tr > th, .table > tbody > tr > td {
    color: $gray;
    border-top: 1px solid $gray-lighter;
}

.table > tbody > tr:first-child > th, .table > tbody > tr:first-child > td {
    border-top: 0px;
}

.table > thead > tr > th {
    vertical-align: middle;
    border-bottom: 1px solid $gray-lighter;
}

.table-padded-sides > tbody > tr > td:last-child, .table-padded-sides > thead > tr > th:last-child {
    padding-right: $large-spacer;
}

.table-padded-sides > tbody > tr > td:first-child, .table-padded-sides > thead > tr > th:first-child {
    padding-left: $large-spacer;
}

.row-active {
    border: 1px solid $brand-primary;
}

.row-blurred td {
    opacity: 0.5;
}

.modal-dialog.workbench-export-modal {
    width: 80%;
    max-width: 1100px;
}

.dropdown-menu {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/** MODAL */
.modal-content {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/** emphasis */
.em {
    font-style: italic;
}

/** margin left extra small */
.mlxs {
    margin-left: 5px;
}

/** margin right extra small */
.mrxs {
    margin-right: 5px;
}

/** margin bottom extra small */
.mbxs {
    margin-bottom: 5px;
}

/** margin top extra small */
.mtxs {
    margin-top: 5px;
}

/** margin left small */
.mls {
    margin-left: 10px;
}

/** margin right small */
.mrs {
    margin-right: 10px;
}

/** margin bottom small */
.mbs {
    margin-bottom: 10px;
}

/** margin top small */
.mts {
    margin-top: 10px;
}

/** margin left medium */
.mlm {
    margin-left: 15px;
}

/** margin right medium */
.mrm {
    margin-right: 15px;
}

/** margin bottom meidum */
.mbm {
    margin-bottom: 15px;
}

/** margin bottom medium */
.mtm {
    margin-top: 15px;
}

/** margin left large */
.mll {
    margin-left: 20px;
}

/** margin right large */
.mrl {
    margin-right: 20px;
}

/** margin bottom large */
.mbl {
    margin-bottom: 20px;
}

/** margin top large */
.mtl {
    margin-top: 20px;
}

/** margin top xlarge */
.mtxl {
    margin-top: 30px;
}

/** padding bottom medium */
.pbm {
    padding-bottom: 15px;
}

/** padding top medium */
.ptm {
    padding-top: 15px;
}

/** padding right medium */
.prm {
    padding-right: 15px;
}

.ptl {
    padding-top: 20px;
}

.pbl {
    padding-bottom: 20px;
}

.pll {
    padding-left: 20px;
}

.prl {
    padding-right: 20px;
}

/** padding left medium */
.plm {
    padding-left: 15px;
}

/** padding bottom small */
.pbs {
    padding-bottom: 5px;
}

/** padding top small */
.pts {
    padding-top: 5px;
}

/** padding right small */
.prs {
    padding-right: 5px;
}

/** padding left small */
.pls {
    padding-left: 5px;
}

/** padding left x-large */
.plx {
    padding-left: 30px;
}

/** padding left x-large */
.prx {
    padding-right: 30px;
}

.align-rtl {
    direction: rtl;
}

.align-start {
    text-align: left;
    text-align: start; /* Experimental, IE10+ */
}

.align-end {
    text-align: right;
    text-align: end; /* Experimental, IE10+ */
}

.align-center {
    text-align: center;
}

.float-right {
    float: right;
}

.color-info {
    color: $brand-info;
}

.color-gray-light {
    color: $gray-light;
}

.color-gray-light2 {
    color: $color-gray-light;
}

.clickable {
    cursor: pointer;
}

.glyphicon.spinning {
    opacity: 0.7;
    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);
    }
}

/**
 * WORKBENCH
 */

/* override    bootstrap css so that status dropdown options do not wrap in the workbench */
div.statusDropdown {
    min-width: 200px;
}

.textunit {
    position: initial;
    border-bottom: 1px solid $color-gray-light;
    border-left: 2px solid $color-white;
    outline: none;
}

.textunit:hover {
    background: rgba($brand-primary, 0.03);
}

div.textunit.textunit-selected {
    background-color: rgba($brand-primary, 0.1);
}

div.textunit.textunit-active {
    border-left: 2px solid $brand-primary;
}

div.textunit label {
    font-weight: normal;
    margin-left: 10px;
}

.textunit-string {
    width: 100%;
    white-space: pre-wrap;
}

.textunit:hover .textunit-assetpath, .textunit:hover .textunit-gitInfo {
    visibility: visible;
}

.textunit-name .textunit-assetpath, .textunit-name .textunit-gitInfo {
    visibility: hidden;
    color: $brand-success;
}

.textunit:hover .textunit-assetpath, .textunit:hover .textunit-translation-history {
    visibility: visible;
}

.textunit-name .textunit-assetpath, .textunit-name .textunit-translation-history {
    visibility: hidden;
    color: $brand-success;
}

.textunit:hover .textunit-assetpath, .textunit:hover .textunit-ai-review {
    visibility: visible;
}

.textunit-name .textunit-assetpath, .textunit-name .textunit-ai-review {
    visibility: hidden;
    color: $brand-success;
}

.textunit:hover .textunit-screenshot {
    visibility: visible;
}

.textunit-name .textunit-screenshot {
    visibility: hidden;
    color: $brand-success;
}

.textunit-returnline {
    color: $brand-primary;
    font-size: 10px;
}

.textunit-whitespaces {
    color: $brand-primary;
    font-size: 10px;
}

.textunit-string.textunit-target {
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 5px;
}

.textunit-string.textunit-target:hover {
    border: 1px dotted gray;
}

.textunit-comment {
    white-space: pre-wrap;
}

.ai-review-modal {
}

.ai-review-modal .modal-dialog {
    max-width: 100%;
    width: 90%;
}

// Screenshot preview modal sizing
.screenshot-modal .modal-dialog {
    max-width: 100%;
    width: 90%;
}

.screenshot-modal .modal-body {
    max-height: 85vh;
    overflow-y: auto;
}


.ai-review-root2 {

}

.ai-review-root2 .section-title {
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
}

.ai-review-root2 .text-unit {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "header header"
        "left right";
}

.ai-review-root2 .text-unit .right {
    align-self: center;
    display: grid;
    grid-template-columns: 1fr min-content 10px;
    grid-template-areas:
        "target status ."
}

.ai-review-root2 .grid-2c {
    display: grid;
    grid-template-columns: 1fr 11fr;
    grid-template-areas: "left right";
}

.ai-review-root2 .grid-2c .left {
    grid-area: left;
    text-align: center;
}

.ai-review-root2 .grid-2c .right {
    grid-area: right;
}



//////


.ai-review-root {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: min-content 2fr 1fr;
    grid-template:
            "header     header-right"
            "source     target"
            "comment    target"
            "ratings ratings"
            "comment-rating target-rating"
            "suggestions suggestions"
            "suggestion1 suggestion2"

}

.ai-review-root .locale {
    grid-area: locale;
}

.ai-review-root .header {
    grid-area: header;
    display: flex;
    gap: 10px;
}

.ai-review-root .header-right {
    grid-area: header-right;
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    align-content: space-around;
}

.ai-review-root .source {
    grid-area: source;
}

.ai-review-root .target {
    grid-area: target;
    align-content: center;
}

.ai-review-root .target-status {
    grid-area: target-status;
    text-align: right;
    align-content: center;
}


.ai-review-root .comment {
    grid-area: comment;
}

.ai-review-root .comment-rating {
    grid-area: comment-rating;
    align-content: center;
}

.ai-review-root .target-rating {
    grid-area: target-rating;
    align-content: center;
}

.ai-review-root .ratings {
    grid-area: ratings;
    align-content: center;
    font-weight: bold;
    text-align: center;
    margin-top: 10px;
}

.ai-review-root .rating {
    display: grid;
    grid-template-columns: 1fr 11fr;
    grid-gap: 5px;
}


.ai-review-root .suggestions {
    display: grid;
    grid-area: suggestions;
    margin-top: 10px;
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
}

.ai-review-root .suggestion1 {
    grid-area: suggestion1;
}

.ai-review-root .suggestion2 {
    grid-area: suggestion2;
}


.ai-review-modal .loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 75px;
}

.text-unit-root {
    display: grid;
    align-items: center;
    width: 100%;
    gap: 15px;

    grid-template-columns: 1fr 1fr;
    grid-template-rows: min-content;
}

.text-unit-root .left {
    flex-grow: 1;
    height: 100%;
    display: grid;
    gap: 7px;
    align-items: center;

    grid-template-columns: min-content min-content min-content fit-content(100%) 1fr min-content min-content;
    grid-template-rows: min-content 1fr min-content min-content 1fr;
    grid-template-areas:
        "cb locale  labels  name    .        res      repo"
        "cb .       .       .       .        .        ."
        "cb source  source  source  source   source   ."
        "cb comment comment comment .        .        ."
        "cb .       .       .       .        .        ."
    ;
}

.text-unit-root .right {
    flex-grow: 1;
    display: grid;
    align-items: center;
    justify-items: stretch;

    grid-template-columns: 1fr 33px min-content;
    grid-template-rows: min-content;
    grid-template-areas:
        "target . review"
    ;
}

div.textunit div.targetstring-container {
    float: left;
    width: 90%;
}

div.targetstring-container textarea {
    max-width: 100%;
    outline: invert;
}

.git-blame-label {
    text-align: right;
}

.git-blame-info {
    word-wrap: break-word;
    white-space: pre-wrap;
}

.git-blame-unused {
    color: $gray-light;
}

.git-blame-modal .modal-dialog {
    width: 60%;
}

.history-none {
    color: $gray-light;
    font-style: italic;
}

.history-header {
    font-weight: 400;
    padding: 8px;
}

.history-source {
    color: $brand-primary;
    font-style: italic;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 20px;
}

.history-current-variant {
    background-color: rgba($brand-primary, 0.1);
}

/**
 * LOGIN
 */
.login-container {
    padding-top: 200px;
    font-weight: $brand-font-weight;
}

.login-logo-container {
    width: 391px;
    padding-left: 30px;
}

.login-form-container {
    width: 391px;
}

.login-container .form-control {
    height: 50px;
}

/**
 * REPOSITORY
 */
.repo-name {
    word-break: break-all;
    word-wrap: break-word;
    width: 300px;
}

.repo-counts {
    font-weight: bold;
    color: $brand-primary;
}

.show-details-button {
    transition: margin 0.2s;
    color: $brand-primary;
    float: right;
}

.show-details-button:hover {
    opacity: 0.9;
}

.repo-table > thead > tr > th, .repo-table > tbody > tr > th, .repo-table > tfoot > tr > th, .repo-table > thead > tr > td, .repo-table > tbody > tr > td, .repo-table > tfoot > tr > td {
    vertical-align: middle;
}

.repo-table a {
    color: $gray-dark;
}

/**
 * REPOSITORY STATS
 */

.repo-stats-table > tbody > tr > td {
    vertical-align: middle;
}

.repo-stats-table a {
    color: $gray-dark;
}

.repo-stats-row-blured {
    opacity: 0.5;
}

/**
 * Bootstrap CSS makes text in all labels bold. Apply this class to get the default label rendered by the browser.
 */
.default-label {
    font-weight: normal;
}

label.current-pageNumber {
    width: 17px;
    text-align: center;
}

.textunits-container {
    position: absolute;
    top: 170px;
    bottom: 0px;
    width: 98%;
    overflow-y: auto;
}

.textunit-toolbar-clear {
    clear: both;
}

@media (max-width: 780px) {
    .textunits-container {
        top: 320px;
    }
}

.drop-table > thead > tr > th, .drop-table > tbody > tr > th, .drop-table > tfoot > tr > th, .drop-table > thead > tr > td, .drop-table > tbody > tr > td, .drop-table > tfoot > tr > td {
    line-height: 2.7;
}

.drop-table > tbody > tr > td {
    position: relative;
}

.drop-table .btn-toolbar {
    position: absolute;
    right: 10px;
    display: inline-block;
    visibility: hidden;
}

.drop-table > tbody > tr:hover .btn-toolbar {
    visibility: visible;
}

.drop-title-bar {
    position: relative;
}

.drop-alert {
    width: 50%;
    position: absolute;
    top: -10px;
    left: 25%;
}

.drop-alert .alert {
    display: inline-block;
}

@media (max-width: 780px) {
    .drop-alert {
        top: -80px;
        left: 5%;
    }
}

.drop-pagination {
    float: left;
}

.side-bar-root-container {
    top: 51px !important;
}

.side-bar-root-container-screenshot {
    top: 120px !important;
}

@media (max-width: 780px) {
    .side-bar-root-container {
        position: absolute !important;
        top: 186px !important;
    }

    .side-bar-root-container-screenshot {
        position: absolute !important;
        top: 280px !important;
    }
}

.side-bar-main-content-container {
    padding-top: 10px;
}

.side-bar-main-content-container-screenshot {
    padding-left: 10px;
}

.side-bar-container {
    min-width: 30%;
    padding-top: 10px;
}

.side-bar-container-screenshot {
    width: 300px;
    padding-right: 10px;
}

.side-bar-content-container {
    flex: 1 1;
    overflow: scroll;
}

.locale-dropdown ul {
    max-height: 400px;
    overflow: scroll;
}

.repository-dropdown li > a {
    max-width: 500px;
    text-overflow: ellipsis;
    overflow: hidden;
}

.repository-dropdown ul {
    max-height: 400px;
    overflow: scroll;
}

.empty-search-container {
    width: 600px;
    height: 300px;
    opacity: 0.5;
    margin-top: 80px;
}

.empty-search-container-img {
    margin-top: 20px;
    width: 125px;
}

.search-text .glyphicon-refresh.spinning {
    color: $brand-primary;
    position: absolute;
    z-index: 3;
    right: 10px;
    top: 9px;
}

.screenshot-textunit {
    margin-bottom: 5px;
    padding-left: 5px;
    padding-bottom: 5px;
    border-bottom: solid 1px $color-gray-light;
}

.screenshot-paginator {
    float: right;
}

.screenshot {
    float: left;
    padding-top: 3px;
    padding-bottom: 3px;
    margin: 5px;
    border-radius: 5px;
    border: 1px solid #559745;
    outline: none
}

.screenshot-placeholder {
    display: flex;
    justify-content: center;
    width: 300px;
    height: 500px;
}

.screenshot-placeholder img {
    max-width: 100%;
    max-height: 100%;
}

.screenshot-description {
    background-color: #fff;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 4px;
    display: inline-block
}

.screenshot-glyph {
    float: right;
}

.screenshot-selected {
    box-shadow: 3px 3px 3px #559745;
}

.branches-branchstatistic a {
    color: $gray-dark;
}

.branches-branchstatistic-header {
    font-size: 12px;
    font-weight: 400;
    margin-bottom: 15px;
    margin-top: 15px;
}

.branches-branchstatistic-summary {
    border-top: 1px solid $gray-lighter;
    margin-top: 5px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.branches-branchstatistic-summary:hover .branches-branchstatistic-screenshotpreview {
    display: inline;
}

.branches-branchstatistic-screenshotpreview {
    display: none;
    color: $brand-primary
}

.branches-branchstatistic-textunit {
    border-top: 1px solid $gray-lighter;
    padding-top: 5px;
    padding-bottom: 5px;
}

.branches-branchstatistic-col1 {
    padding-left: 0px;
}

.branches-branchstatistic-col1-row {
    min-height: 30px;
}

.branches-branchstatistic-textunit-open {
    border-left: 2px solid $brand-primary;
}

.branches-branchstatistic-textunit-check {
    padding-left: 5px;
    padding-right: 5px;
    float: left;
}

.branches-branchstatistic-textunit-content {
    padding-left: 23px;
    color: $gray-light;
    font-size: 11px;
}

.branches-screenshotviewer-modal {
    height: 100%;
    width: 100%;
    margin: 0;
}

.branches-screenshotviewer-modal .modal-content {
    height: 100%;
    border: none;
}

.branches-screenshotviewer-modal .modal-body {
    height: 96%;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 30px;
    padding-right: 30px;
}

.branches-screenshotviewer-modal .modal-header {
    background-color: $color-white;
    height: 4%;
    min-height: 25px;
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;
}

.branches-screenshotviewer-modal .modal-title {
    font-size: 14px;
}

.branches-screenshotviewer-modal-cols {
    height: 100%;
}

.branches-screenshotviewer-modal-textunits-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.branches-screenshotviewer-modal-textunits {
    display: block;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    font-size: 11px;
}

.branches-screenshotviewer-modal-delete-container {
    display: block;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    justify-content: center;
    display: flex;
}

#remove-screenshot-popover>.popover-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#remove-screenshot-confirm-btn {
  font-size: 11px;
  margin: auto;
}

.branches-screenshotviewer-modal-image-container {
    display: flex;
    height: 100%;
    background-color: rgb(246, 246, 246);
}

.branches-screenshotviewer-modal-image {
    display: block;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    height: auto;
    padding-right: 20px;
    padding-left: 10px;
}

.branches-screenshotviewer-modal-gotoprevious {
    top: 45%;
    left: 1px;
    position: fixed;
    height: 38px;
    width: 21px;
    font-size: 30px;
    color: $color-gray-light;
}

.branches-screenshotviewer-modal-gotoprevious.enabled:hover {
    color: $gray-light;
}

.branches-screenshotviewer-modal-gotonext {
    top: 45%;
    right: 10px;
    position: fixed;
    height: 38px;
    width: 21px;
    font-size: 30px;
    color: $color-gray-light;
}

.branches-screenshotviewer-modal-gotonext.enabled:hover {
    color: $gray-light;
}

.users-root {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: min-content min-content min-content;
    grid-template-areas:
        "count   .       pages"
        "main    main    main"
        "newUser .       ."
    ;
}

.users-locale-select-root {
    display: grid;
    grid-template-columns: 2fr 1fr min-content;
    grid-template-rows: min-content;
    grid-template-areas: "locales new-select new-btn";
    gap: 7px;
}

.users-locale-select-root .locales-list {
    grid-area: locales;
    overflow-y: scroll;
    height: 128px;
    display: grid;
    grid-template-columns: 48px 1fr 48px 1fr;
    grid-auto-rows: min-content;
    grid-auto-flow: row;
    row-gap: 7px;
    column-gap: 10px;
    padding: 5px;
}

.users-locale-select-root .locales-list span {
    justify-self: start;
    align-self: center;
}

.users-locale-select-root .locales-list button {
    justify-self: start;
}
