// Custom.scss

$link-color: #6f3b93;
$link-hover-color: darken($link-color, 10%);
$link-hover-decoration: none;

@import "bootstrap-src/scss/bootstrap";
@import "switch.scss";

$action-color: #ffe484;
$action-button-color: darken($action-color, 20%);
$ishtar-color: darken($purple, 20%);
$ishtar-secondary-color: $purple;
$ishtar-light-color: lighten($purple, 20%);
$dark-secondary-color: rgba(255,255,255,0.8);

html{
    font-size: 0.8em;
    background-color: $gray-100;
}

body{
    background-color: transparent;
    position: relative;
}

label {
    margin-bottom: .2rem;
    min-height: 1.5rem;
}

.clearfix{
	clear: both;
}

hr.clearfix{
	margin: 0;
	border: 0 solid transparent;
}

dd > pre{
    padding: 0 1em;
}

.form-control.form-row{
    height: auto;
}

.form-group span label {
    display: inline-block;
}

.form-group label{
    display: block;
}

.form-group.full-width input{
    width: calc(100% - 3em);
}

.form-group.no-label{
    margin-top: 1.7rem;
}

.form-group li label {
    display: inline-block;
    min-height: 1rem;
    margin: 0;
}

.form-group .select2-container--default.select2-container--focus .select2-selection--multiple,
.form-control:focus {
  border-color: rgba(82,168,236,.8);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
}

.form-group li .form-control {
    width: auto;
    vertical-align: middle;
}

.form-group li input[type="radio"].form-control,
.form-group li input[type="checkbox"].form-control{
    display: inline;
}

input[type="file"].form-control{
    height: 3em;
}

.form-check-label{
    margin: 0.1em 0.5em;
}

.form-check-label .fa{
    font-size: 1.4em;
    color: $ishtar-color;
}

#global-vars #form > div {
	background: #fff;
	border-color: #bee5eb;
}
#global-vars table {
	border-spacing: 0 0.7em;
	border-collapse: separate;
}

.has-previous-value .form-control,
.has-previous-value .btn,
.has-previous-value .input-group-text{
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.detail-value.form-control {
	border-radius: 0;
	border-top: 0;
	height: auto;
	font-size: 0.9rem;
	line-height: 1;
}

.input-group .input-group.has-previous-value {
	width: 100%;
}

.input-group .input-group {
	width: calc(100% - 32px);
}

.previous-value .form-control,
.previous-value .input-group-text{
	border-top: 0;
}

.previous-value .form-control,
.previous-value .btn,
.previous-value .input-group-text{
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.address{
	font-family: monospace;
}

.address span{
	display: block;
	padding: 0.1em;
}

pre {
    white-space: pre-wrap;
}

.raw-description{
    white-space: pre-line;
}

.form-control.small-input,
.input-group > .form-control.small-input{
    width: 110px;
    flex: none;
}

.input-group > input[type=checkbox]{
    margin: 0.5em 1em;
}

.form-row.odd{
    background-color: $gray-200;
}

.form-row-modal{
    padding: 0.5rem 2rem;
}

.field-tip{
    position: absolute;
    right: 10px;
    top: 5px;
    opacity: 0.7;
}

.form-group .select2-container--default .select2-selection--multiple {
    border: $input-border-width solid $input-border-color;
}

.modal-dialog .select2-selection{
	width: 470px;
}

.modal-dialog #qa-action{
	.select2-selection{
		width: auto;
	}
	.select2.select2-container.select2-container--default{
		width: 90% !important;
	}
}

.page-link.imported-page {
    color: $ishtar-light-color;
}

.page-link.imported-page.current-page,
.page-link.current-page {
    color: black;
    font-weight: bold;
}

#modal-advanced-search .modal-header{
    flex-wrap: wrap;
    padding-bottom: 0;
}

#advanced-search-info {
    margin-bottom: 0;
}

.search-widget
#advanced-search-info .alert{
    margin-bottom: 0.6rem;
}


#modal-advanced-search .modal-header .alert-secondary{
    background-color: $white;
}

.modal-header, .modal-footer{
    background-color: $gray-200;
}

.modal-header .input-group-text{
    background-color: $gray-300;
    border-color: $gray-400;
}

.modal-body.body-scroll{
    max-height: calc(100vh - 270px);
    overflow-y: auto;
}

.window-pop{
    overflow: hidden;
}

.window-pop .modal-body.body-scroll {
    max-height: calc(100vh - 122px);
}

.modal-dialog.full {
  width: 98%;
  height: 98%;
  max-width: none;
  padding: 1%;
}

.modal-dialog.full .display.dataTable {
  width: 100% !important;
}

.modal-dialog.full .modal-content {
  height: auto;
  min-height: 100%;
  border-radius: 0;
}

.table{
    background-color: white;
}


.tab-content{
    padding-top: 0;
}

.input-progress.form-control:focus,
.input-progress{
    background-color: $gray-300;
}

.card-header, .input-progress,
.table-striped tbody tr:nth-of-type(2n+1),
.dt-bootstrap4 table.dataTable.stripe tbody tr.odd,
.dt-bootstrap4 table.dataTable.display tbody tr.odd {
    background-color: $gray-200;
}

.dropdown-item:hover, .dropdown-item:focus,
.dt-bootstrap4 table.dataTable.hover tbody tr:hover,
.dt-bootstrap4 table.dataTable.display tbody tr:hover {
    background-color: #f6f6f6;
    background-color: $gray-300;
}

/* datatable - start */

table.dataTable {
    font-size: 0.8em;
}

.ishtar-gallery-wrapper .ishtar-gallery-info,
.container-fluid .dataTables_wrapper .dataTables_info {
    clear: none;
    font-size: 0.8em;
    padding: 0.5em 2em;
}

.ishtar-gallery-wrapper label select{
    width: 75px;
    display: inline-block;
    font-size: 1em;
}

.ishtar-gallery-wrapper label{
    font-size: 0.8em;
}

.ishtar-gallery .no-data{
    width: 100%;
    font-size: 0.85em;
    text-align: center;
    background-color: $gray-300;
    padding: 0.2em;
    margin: 0.6em 0;
}

.table-modal-lg table.dataTable{
    font-size: 1em;
}

div.dt-buttons{
    float: right;
}

.dt-button{
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;

    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    border: 1px solid transparent;

    @include button-variant($secondary, $secondary);
    @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-line-height, $btn-border-radius);
    @include transition($btn-transition);
}

.dt-button.btn-success {
    @include button-variant($success, $success);
}

.dt-button.disabled{
    background-color: #f8f9fa;
    border-color: #f8f9fa;
    color: $gray-500;
    cursor: not-allowed;
}

a.disabled {
  color: gray;
  pointer-events: none;
}

.small-button{
    padding: 0.1em 0.2em;
}

/* datatable - end */

h3, .h3 {
    font-size: 1.5rem;
}

h4, .h4 {
    font-size: 1.1rem;
}

textarea {
    height: 90px;
}

.sheet {
    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9,
    .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1, .col-sm-2, .col-sm-3,
    .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9,
    .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto, .col-md-1,
    .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8,
    .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto,
    .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
    .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12,
    .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4,
    .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10,
    .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto {
        padding-right: 5px;
        padding-left: 5px;
    }
    ol, ul, dl {
        margin-bottom: 0.5rem;
    }
    dt {
        line-height: 1.4em;
    }
    h4 {
        color: $text-muted;
    }
}


#bookmark-list .input-link{
    width: 100%;
    padding-right: 5px;
}

#window-fixed-menu{
    background-color: $gray-200;
    position: fixed;
    right: 0;
    margin-top: 100px;
    z-index: 50;
    width: 200px;
}

#window-fixed-menu-list li{
    padding-bottom: 0.5em;
}


#window-fixed-menu-list li a.nav-link{
    background-color: white;
}

#window-fixed-menu-list li a.nav-link.active{
    background-color: $nav-pills-link-active-bg;
}

#window-menu-title{
    font-size: 1.3em;
}

#window-menu-control{
    font-size: 0.6em;
    padding-top: 0.2em;
}

#window-fixed-menu.hidden {
    transform: rotate(270deg);
    transform-origin: right bottom 0;
}

#window-fixed-menu.hidden i.fa-times{
    transform: rotate(45deg);
    transform-origin: 10px 10px 0;
    padding-left: 0.1em;
}

#warning-banner{
	font-size: 1.5em;
	background-color: #8c2525;
	color: #fff;
	padding: 0 0.6em;
	text-align: right;
}

#warning-banner a{
	color: #888;
}

#warning-banner a:hover{
	color: #fff;
}

.form h4, .form h3, .collapse-form .card-header, #window h3{
    background-color: $gray-400;
}

.form h4.card-title {
    background-color: transparent;
}

.collapse-form .card,
.collapse-form .card-header{
    border-radius: 0;
    border: 0 solid;
}

.collapse-form .card-header{
    padding: 0;
    text-align: center;
}

.collapse-form .card-header h4{
    margin-bottom: 0;
}

.collapse-form .card-header .btn.btn-link{
    color: #212529;
    width: 100%;
}

.collapse-form .card-body{
    border: 1px solid $gray-400;
}

.collapse-form .fa-expand,
.collapse-form .collapsed .fa-compress{
    display: none;
}

.collapse-form .collapsed .fa-expand,
.collapse-form .fa-compress{
    display: inline-block;
}

.clean-table h4,
.form h4, .form h3, .collapse-form .card-header h4 .btn,
.sheet h4, .sheet h3, .sheet h2{
    text-align: center;
    text-shadow: 2px 2px 2px rgba(150, 150, 150, 0.70);
}

.sheet .subsection{
    background-color: $gray-200;
}

.sheet .row.toolbar{
    padding: 0.5em 0.75em;
}

.sheet .row{
    padding: 0 0.75em;
    margin: 0;
}

.clean-table h4{
    margin-top: 1em;
}

#main-container{
    margin-bottom: 16em;
}

.bg-dark{
    background-color: $ishtar-color !important;
}

.navbar{
    padding: 0 0.5rem;
}

// action menu
.navbar-dark .navbar-nav.action-menu .nav-link{
    color: $action-color;
    border: 1px solid $action-color;
    border-radius: 4px;
    margin: 0.2em;
    padding: 0.3em 0.6em;
}

.navbar-dark .navbar-nav.action-menu .d-none .nav-link{
    border: 0px solid transparent;
}

.navbar-dark .navbar-nav.action-menu .d-none .nav-link:hover{
    background-color: transparent;
    color: $action-color;
}

.navbar-dark .navbar-nav.action-menu .nav-link:hover{
    background-color: $action-color;
    color: $gray-800;
}

.navbar-dark .navbar-nav.action-menu .nav-link.dropdown-toggle::after{
    color: $action-color;
}

.navbar-dark .navbar-nav.action-menu .nav-link.dropdown-toggle:hover::after{
    color: $gray-800;
}

#context-menu,
#reminder,
.confirm-message,
div#validation-bar{
    background-color: $ishtar-secondary-color;
    color: $dark-secondary-color;
}

#reminder {
    padding: 0.6em 1em 0.1em 1em;
}

#alert-list {
    padding: 0.6em 0;
}

#alert-list a{
    font-size: 1.1rem;
}

.confirm-message{
    text-align:center;
    margin: 0;
    padding: 0.5rem;
    font-weight: bold;
}

.is-invalid input{
    border-color: lighten(red, 30%);;
}

.errorlist {
    color: darken(red, 20%);;
}

/* context menu */
#shortcut-menu {
    width: 700px;
    padding: 1em;
}

#context-menu a.nav-link{
    color: $dark-secondary-color;
    padding: 0.8rem 0.5rem 0.7rem 0.5rem
}

#context-menu .breadcrumb{
    margin-bottom: 0;
    background-color: transparent;
}

#current_items{
    width: 100%;
}

div#foot{
    background-color: $ishtar-color;
    color: $navbar-dark-color;
}

div#foot a {
    color: #ddd;
}

div#foot a:hover {
    color: #fff;
}

.breadcrumb button{
    border: 0 transparent;
    background-color: transparent;
}

.breadcrumb a:hover{
    text-decoration: none;
}

.breadcrumb button:hover{
    cursor: pointer;
    color: darken($primary, 10%);
}

.input-group.date input{
	border: 1px solid $border-color;
	border-radius: .25rem;
   	padding: .375rem .75rem;
   	font-size: 1rem;
   	line-height: 1.5;
}

.input-group.date .input-group-text:hover{
    cursor: pointer;
}

.input-group > ul{
    padding: 0.5em;
	border: 1px solid $border-color;
	border-radius: .25rem;
    margin: 0;
    list-style: none;
    height: auto;
}

ul.compact{
    padding: 0;
    margin: 0;
}

.help-text{
    max-height: 250px;
    overflow: auto;
}

.input-link{
    color: $gray-600;
}

.input-link.disabled{
    color: $gray-500;
}

.input-link:hover{
    color: $gray-800;
	cursor: pointer;
}

.input-link.disabled:hover{
    color: $gray-500;
	cursor: not-allowed;
}

.input-sep{
    background-color: #fff;
    padding: 0.3rem;
}

/* search */

.search .form-group {
    font-size: 0.9em;
    margin-bottom: 0;
}
.search .search-widget {
    margin-bottom: 1rem;
}

.search_button{
    display: none;
}

.search-vector{
    width: 100%;
    padding-bottom: 1em;
}

.search-vector .form-group{
    margin-bottom: 0;
}

.ishtar-gallery .card{
    width: 200px;
}

.svg-image{
    display: inline-block;
    position: relative;
    width: 100%;
    vertical-align: middle;
    text-align: center;
    overflow: hidden;
}

.window-main-image {
    height: 300px;
    display: block;
}

.thumb-image{
    height: 200px;
}

.window-main-image, .thumb-image{
    position: relative;
    overflow: hidden;
}

.window-main-image img,
.thumb-image img{
    display: inline-block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    position: absolute;
    left: 50%; /* This sets left top corner of the image to the center of the block... */
    top: 50%; /* This can be set also to bottom: 0; for aligning image to bottom line. Only translateX is used then. */
    -webkit-transform: translate(-50%,-50%); /* ...and this moves the image 50 % of its width and height back. */
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

/* lightgallery */

.lightgallery-captions{
    display: none;
}

.lightgallery-subimage{
    display:inline-block;
    width:80px;
    padding: 0.2em;
}

.lightgallery-subimage img{
    width: 100%;
}

.simple-window{
    position: absolute;
    left: 50%;
    display: none;
}

.simple-window-content{
    position: relative;
    left: -50%;
    top: -470px;
    width: 350px;
    background-color: #fff;
    border: 1px solid $gray-500;
    border-radius: 0.3rem;
}

.simple-window .modal-body{
    max-height: 300px;
    overflow-x: hidden;
    overflow-y: auto;
}

.lg .lg-sub-html{
    text-align: left;
}

.lg .lg-sub-html .close{
    color: #fff;
}

.lg .lg-sub-html .close:hover{
    opacity: 0.9;
}


#basket-manage #foot_pk{
    display: none;
}

#basket-manage
#grid_pk_meta_wrapper{
    width: 50%;
    float: left;
    padding-bottom: 80px;
}

#basket-add-button{
    width: 8%;
    float: left;
    margin: 20vh 1% 0 1%;
}

#basket-content-wrapper{
    width: 40%;
    float: left;
}

#basket-content{
    text-align: left;
    overflow: auto;
    max-height: 60vh;
}

/* ui-autocomplete - start */

.ui-widget-content {
	border: 1px solid $border-color;
	background-color: $body-bg;
}

.ui-menu-item{
    padding: 0.2em 0.4em;
	border: 1px solid $body-bg;
}

.ui-menu-item:hover {
	color: $link-color;
	border: 1px solid $link-color;
	cursor: pointer;
}

.ui-autocomplete {
    font-size: 0.7em;
    z-index: 10000 !important;
    width: 350px;
	border: 5px solid $border-color;
    outline: none;
}

.ui-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
    outline: none;
    font-size: 1.1em;
}

.ui-helper-hidden {
	display: none;
}
.ui-helper-hidden-accessible {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

/* ui-autocomplete - end */


/* map */

.ishtar-table-map, .window-map{
    border: solid 1px $gray-500;
    background: url(../media/images/map-background.jpg) repeat;
}

.window-map{
    width: 100%;
    height: 300px;
    margin-bottom: 0.5em;
}

.sheet .ishtar-table-map{
    display: none;
}

.ishtar-table-map{
    width: 100%;
    height: 200px;
    margin-bottom: 150px;
}

@media screen and (min-height: 640px){
    .ishtar-table-map{
        height: calc(100vh - 440px);
        margin-bottom: 0;
    }
}

.sheet .ishtar-table-map{
    height: 300px;
}

.ishtar-map-top{
    padding: 0.5em;
}

.ishtar-map-popup{
    background-color: #fff;
    padding: 0.5em 1em;
    border-radius: 0.5em;
    border-style: solid;
    border-width: 1px;
    border-color: $gray-500;
    display: none;
}

.simple-window-content ul,
.ishtar-map-popup ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ishtar-map-popup::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: $gray-700 transparent transparent transparent;
}

.window-map .ol-overviewmap {
    bottom: 3em;
}

.ol-rotate {
    top: 2.8em;
}

.track-position{
    left: .5em;
    top: 5em;
}

/* charts */

.resize-handler {
   position: absolute;
   width: 16px;
   height: 16px;
   padding: 4px;
   bottom: 0;
   right: 0;
   cursor: nwse-resize;
   background: url(../media/images/resize-handler.png) no-repeat;
}

.chart-wrapper{
    display: block;
    position:relative;
    height: 400px;
    width: calc(100% - 100px);
}

.chart-content{
    height: 96%;
}

.chart-resize{
    border: 1px #999 dashed;
}

/*
// required
@import "bootstrap-src/scss/functions";
@import "bootstrap-src/scss/variables";
@import "bootstrap-src/scss/mixins";

// optional
@import "bootstrap-src/scss/reboot";
@import "bootstrap-src/scss/type";
@import "bootstrap-src/scss/images";
@import "bootstrap-src/scss/code";
@import "bootstrap-src/scss/grid";
*/