﻿/*color scheme form suadeo designer*/
:root {
    --sd-green: #059C98;
    --sd-white: #FFFFFF;
    --sd-grey: #EFEFEF;
    --sd-red: #FF0000;
    --grey-100: #fafafa;
    --grey-179: #B3B3B3;
    --grey-200: #F1F1F1;
    --grey-230: #efefef;
    --grey-250: #c6c6c6;
    --slate-1100: #52768C;
    --black: #000000;
    --teal-1000: #009E9A;
    --teal-950: #059C98;
    --grey-270: #CCCCCC;
    --grey-650: #4D4D4D;
    --grey-640: #666666;
    --blue-350: #b8e3fb;
    --suadeo-base-color: #52768C;
    --suadeo-base-color-40: #52768c40;
    --teal-400: #26a69a;
    --e9: #e9e9e9;
    --suadeo-primary-color: #03314d;
    --suadeo-primary-color-light: #8198A6;
}

/*START custom fonts*/
@font-face {
    font-family: "Calibri";
    src: url("../global_assets/fonts/Calibri/Calibri.eot");
    src: url("../global_assets/fonts/Calibri/Calibri.ttf") format('truetype');
    src: url("../global_assets/fonts/Calibri/Calibri.woff") format("woff"), url("../global_assets/fonts/Calibri/Calibri.woff2") format("woff2"), url("../global_assets/fonts/Calibri/Calibri.svg#Calibri") format("svg");
}

@font-face {
    font-family: "Calibri-Bold";
    src: url("../global_assets/fonts/Calibri/Calibri-Bold.eot");
    src: url("../global_assets/fonts/Calibri/Calibri-Bold.ttf") format('truetype');
    src: url("../global_assets/fonts/Calibri/Calibri-Bold.woff") format("woff"), url("../global_assets/fonts/Calibri/Calibri-Bold.woff2") format("woff2"), url("../global_assets/fonts/Calibri/Calibri-Bold.svg#Calibri-Bold") format("svg");
}

@font-face {
    font-family: "Marianne";
    src: url("../global_assets/fonts/marianne/beibiceg.png");
    src: url("../global_assets/fonts/marianne/efedcbdf.png");
    src: url("../global_assets/fonts/marianne/MARIANNE-BOLD.OTF") format("opentype"), url("../global_assets/fonts/marianne/MARIANNE-BOLDITALIC.OTF") format("opentype"), url("../global_assets/fonts/marianne/MARIANNE-EXTRABOLD.OTF") format("opentype"), url("../global_assets/fonts/marianne/MARIANNE-EXTRABOLDITALIC.OTF") format("opentype"), url("../global_assets/fonts/marianne/MARIANNE-LIGHT.OTF") format("opentype"), url("../global_assets/fonts/marianne/MARIANNE-LIGHTITALIC.OTF") format("opentype"), url("../global_assets/fonts/marianne/MARIANNE-MEDIUM.OTF") format("opentype"), url("../global_assets/fonts/marianne/MARIANNE-MEDIUMITALIC.OTF") format("opentype"), url("../global_assets/fonts/marianne/MARIANNE-REGULAR.OTF") format("opentype"), url("../global_assets/fonts/marianne/MARIANNE-REGULARITALIC.OTF") format("opentype"), url("../global_assets/fonts/marianne/MARIANNE-THIN.OTF") format("opentype"), url("../global_assets/fonts/marianne/MARIANNE-THINITALIC.OTF") format("opentype"), url("../global_assets/fonts/marianne/beibiceg.png") format("png"), url("../global_assets/fonts/marianne/efedcbdf.png") format("png");
}

/*END custom fonts*/

* {
    scrollbar-width: thin;
    scrollbar-color: var(--sd-green) var(--sd-grey);
}

/*Start of Suadeo Apps Module*/

img {
    max-width: 100%;
}

#AppMenu.sidebar {
    width: 209px !important;
    border-right: solid 1px #F5F5F5 !important;
    color: #000000;
    font-family: "Calibri" !important;
}

#AppMenu.sidebar .nav-item-header {
    font-weight: bold;
    font-family: "Calibri-bold" !important;
}

.nav-item.app {
    min-height: 102px;
    -ms-flex-align: center !important;
    align-items: center !important;
    display: flex;
    justify-content: center;
    padding: 1px;
}

.nav-item.app:hover {
    background-color: #f5f5f5;
}

.nav-item.app a:hover {
    text-decoration: none;
}

.nav-item .app-name {
    font-size: 15px;
    width: 100px;
    display: block;
    height: auto;
    margin: auto;
    text-overflow: clip;
    word-break: break-word;
}

.nav-item .app-icon {
    max-width: 40px;
}




.suadeo-apps label {
    font-family: "Calibri" !important;
    font-size: 16px;
}

.app-card {
    width: 350px;
    margin: 10px;
    height: 280px;
    font-family: "Calibri" !important;
    overflow: hidden;
}

.app-card .app-icon {
    max-height: 74px;
    margin-bottom: 10px;
    margin-top: 20px;
}

.app-card .app-name {
    font-size: 25px;
}

.app-card .app-slide-info {
    width: 100%;
    height: 100%;
    max-height: 0;
    transition: max-height 0.15s ease-out;
    background: #52768C 0% 0% no-repeat padding-box;
    display: block;
    position: absolute;
    left: 0;
    bottom: -30px;
    color: #FFFFFF;
    padding: 15px;
}

.app-card:hover .app-slide-info {
    max-height: 129px;
    transition: max-height 0.15s ease-out;
    bottom: 0px;
    padding: 23px 15px;
}

.nav-item.icons-suadeo-apps img {
    width: 16px;
}

.nav-item.icons-suadeo-apps {
    display: none;
}

img.icon {
    width: 15px;
    height: 15px;
}




.sidebar-apps-hidden .sidebar-expand-md.sidebar-apps {
    display: none;
}

.cls-1 {
    fill: #FFFFFF;
}

.appList .app-tile {
    width: 349px;
    height: 279px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 0.25px solid #000000;
    opacity: 1;
}

.app-icon-placeholder {
    width: 115px;
    height: 115px;
    -ms-flex-align: center !important;
    align-items: center !important;
    display: flex;
    justify-content: center;
    padding: 1px;
    border: .25px solid;
}

.app-icon-placeholder img {
    max-height: 60px;
    max-width: 60px;
}

/*.align-middle {
    -ms-flex-align: center !important;
    align-items: center !important;
    display: flex;
}*/


.align-bottom {
    -ms-flex-align: baseline !important;
    align-items: baseline !important;
    display: flex;
}

.switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 0px;
    bottom: 1px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked+.slider {
    background: transparent linear-gradient(90deg, #52768C 0%, #009E9A 40%) 0% 0% no-repeat padding-box;
}

input:focus+.slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

.navbar-brand .logo {
    height: 25px;
    margin-top: 6px;
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}


.btn .icon-plus-cirlcle {
    height: 16px;
}

.btn.icon-plus-cirlcle,
.btn.icon-plus-cirlcle:hover {
    border-width: 0.25px;
}

.btn.guide {
    border-color: #707070;
}

.btn-green {
    background-color: var(--sd-green) !important;
    color: var(--sd-white) !important;
}

.btn-grey {
    background-color: var(--sd-grey) !important;
}

.custom-file-input~.custom-file-label::after {
    content: "Parcourir";
}

.custom-file-label::after {
    border-radius: 5px .1875rem .1875rem 5px !important;
}

.color-sd-green {
    color: var(--sd-green) !important;
}

/*******FILE UPLOADER CUSTOMIZATION CSS*******/

.suadeo-app-upload .dx-fileuploader-files-container {
    padding-top: 0px !important;
    position: absolute;
    margin-top: -42px;
    padding-left: 4px !important;
    width: 70%;
}

.suadeo-app-upload .dx-button {
    background-color: var(--sd-grey);
}

.suadeo-app-upload .dx-fileuploader-wrapper {
    /*  width: 70% !important;
    float: left;*/
    /*border: 1px solid var(--sd-grey);
    border-right-color: var(--sd-white);
    height: 55px !important;*/
    padding-top: 0em !important;
    padding-left: 0em !important;
}

.suadeo-app-upload .display-uploaded-file {
    border: 1px solid var(--sd-grey);
    height: 55px;
    border-left-color: #fff;
}

.suadeo-app-upload .dx-fileuploader-input-wrapper .dx-button {
    float: right;
}

/*End of Suadeo Apps Module*/


.card.intent .new {
    position: absolute;
    top: -9px;
    right: -6px;
    color: red;
}

/*
   start  Chatbot Customization
*/
#chatbot {
    font-family: "Calibri" !important;
}

#chatbot .media-chat-scrollable {
    /*height: 340px !important;*/
}

#chatbot .dx-overlay-content {
    overflow: visible;
}

#chatbot button.chat-close div {
    border: 2px solid;
    border-radius: 25px;
    height: 25px;
    width: 25px;
    margin: auto;
    font-weight: bold;
}

#chatbot .btn {
    border: 1px solid transparent !important;
    border-radius: .1875rem !important;
}

#chatbot button.chat-close {
    position: absolute;
    right: 0px;
    bottom: 0px;
    margin: -25px;
    color: var(--sd-white) !important;
    background: var(--sd-green) !important;
    z-index: 36;
    height: 50px;
    width: 50px;
    border-radius: 25px !important;
    padding: 0;
}

#chatbot .dx-popup-title {
    background-color: var(--sd-green) !important;
    color: var(--sd-white) !important;
}

#chatbot .dx-toolbar .dx-button-mode-text .dx-icon {
    color: var(--sd-white) !important;
}

#chatbot .dx-popup-title.dx-toolbar .dx-toolbar-label {
    font-size: 16px !important;
    font-family: "Calibri-Bold";
}

#chatbot .dx-overlay-wrapper input,
.dx-overlay-wrapper textarea {
    resize: none;
}



#chatbot .media-chat-item-reverse .media-chat-item::before {
    position: absolute;
    right: -4px;
    left: auto;
    /* border-color: #52768C transparent !important;
        transform: rotate( 30deg);*/
}

#chatbot .media {
    margin-top: .25rem;
}

#chatbot .media-list {}

#chatbot .dx-overlay-content {
    background: url(../images/chat-bg-op.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 289px;
    background-color: #ffff;
    /*  padding-right: 40px;
        padding-left: 40px;*/
}


#chatbot .media-chat .media {
    margin-right: auto;
}

#chatbot .dx-toolbar.dx-widget.dx-visibility-change-handler.dx-collection.dx-popup-title {
    padding: 2px 10px;
}

#chatbot .card-footer button {
    padding: 0px;
    width: 36px;
    height: 36px;
}

#chatbot .card-footer input,
#chatbot .card-footer button {
    border-radius: 25px !important;
}

#chatbot .media-chat .media.media-chat-item-reverse {
    margin-left: auto !important;
}

#chatbot .border-top {
    border-top: 1px solid var(--sd-grey) !important;
}

#chatbot.fullscreen .dx-overlay-content {
    border: 0px !important;
}

#chatbot.fullscreen .chat-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

#chatbot.fullscreen .dx-popup-wrapper>.dx-overlay-content {
    border-top: 0px !important;
}

#chatbot.fullscreen .chat-close {
    display: none;
}

#chatbot.fullscreen .dx-overlay-content {
    background-image: url(../images//icons/icon-chatbot-grey.svg);
}

#icon-chatbot {
    position: fixed;
    /*  bottom: 37px;*/
    /*  right: 56px;*/
    bottom: 1.0em;
    right: 1.0em;
    left: auto;
    cursor: pointer;
    display: none;
    z-index: 100000;
}


#icon-chatbot .msg {
    display: none;
    float: left;
    /* height: 50px; */
    /* line-height: 50px; */
    margin-right: 15px;
    margin-top: 16px;
    background: var(--sd-grey);
    border-radius: 10px;
    padding: 2px 10px;
    min-width: 175px;
    /* display: inline-flex;*/
}

#icon-chatbot .msg::before {
    content: "";
    position: absolute;
    top: 0px;
    right: 61px;
    border-width: 0 6px 14px;
    border-style: solid;
    border-color: var(--sd-grey) transparent;
    display: block;
    width: 0;
    margin-top: 11px;
    transform: rotate(30deg);
}

#icon-chatbot .icon {
    width: 50px;
    height: 50px;
    float: right;
    display: flex;
    border-radius: 50px;
    background: var(--sd-green);
}

#icon-chatbot .icon img {
    width: 25px;
    margin: auto;
}

#chatbot .chat-messages {
    height: 400px;
    overflow-x: hidden;
    overflow-y: auto;
}

#chatbot .dx-scrollable-scroll,
.dx-scrollable-scroll {
    padding: 0px;
    border: 0px;
    background-color: transparent !important;
}

#chatbot .dx-scrollable-scroll-content {
    background-color: var(--sd-green);
    /*border-radius: 30em;*/
}


#chatbot .dx-scrollbar-hoverable.dx-scrollable-scrollbar-active,
#chatbot .dx-scrollbar-hoverable.dx-state-hover {
    color: var(--sd-white) !important;
    font-weight: 600;
}


#chatbot .dx-scrollbar-hoverable.dx-scrollable-scrollbar-active .dx-scrollable-scroll-content {
    background-color: var(--sd-green);
}

#chatbot .media-chat-feedback-response-positive {
    background-color: #36893c !important;
    color: white !important;
}

#chatbot .media-chat-feedback-response-positive::before {
    border-color: #36893c transparent !important;
}

#chatbot .media-chat-feedback-response-negative {
    background-color: #d93f33 !important;
    color: white !important;
}

#chatbot .media-chat-feedback-response-negative::before {
    border-color: #d93f33 transparent !important;
}

#chatbot .dx-button-text {
    color: var(--sd-white) !important;
}

#chatbot .chat-conversation,
#chatbot .chat-message-list {
    /* height: calc(100vh - 200px);
    height: calc(100vh - 200px);*/
    height: 100%;
}

#chatbot.fullscreen .chat-conversation .conversation-list.media-body {
    max-width: 50%;
}

/*
   END  Chatbot Customization
*/
/* width */
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

/* Track */
::-webkit-scrollbar-track {
    background: var(--sd-grey);
}

.dx-scrollable-scroll-content {
    background-color: var(--sd-green) !important;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--sd-green);
    border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--sd-green);
}

.vertical-divider {
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 50%;
    margin: 0;
    padding: 0;
    width: auto;
    height: 50%;
    line-height: 0;
    text-align: center;
    text-transform: uppercase;
    transform: translateX(-50%);
}

.vertical-divider:before,
.vertical-divider:after {
    position: absolute;
    left: 50%;
    content: '';
    z-index: 9;
    border-left: 1px solid rgba(34, 36, 38, .15);
    border-right: 1px solid rgba(255, 255, 255, .1);
    width: 0;
    height: calc(100% - 1rem);
}

.vertical-divider:before {
    top: -100%;
}

.vertical-divider:after {
    top: auto;
    bottom: 0;
}

.nodata-container {
    height: 100%;
    width: 100%;
    color: #929292;
    font-size: 10px;
    text-align: center;
    text-transform: uppercase;
    vertical-align: middle;
    justify-content: center;
    flex-direction: column;
    display: none;
}

.splitContentHalf {
    min-height: calc(32vh);
}

.remaining-height {
    min-height: 76vh;
}

.card.connection .description {
    height: 130px;
}




/*updates for connections page*/
.card.statistics,
.card.informations,
.card.translation {
    /*min-height: 366px;*/
    /*min-height:calc(100vh - 45em);*/
    height: 100%;
    min-height: calc(32vh);
}

.card.translation {
    border: none;
    box-shadow: none;
}

.card.informations .card-body .row {}


.nav-tabs.p-sm .nav-link {
    padding-top: 0.125rem;
    padding-right: 0.5rem;
    padding-bottom: 0.125rem;
    padding-left: 0.5rem;
    /*margin-right: 25px;*/
}

.nav-tabs.p-sm {
    margin-bottom: 0px;
}

.connnection-wrapper .nav-tabs {
    border-bottom: 0px;
    margin-bottom: 0px;
}

.schema-container-left,
.schema-container-right {
    /*min-height: 600px;*/
}

ul#tableList,
ul.tableList {
    list-style: none;
    padding: 0px;
    overflow: hidden;
    overflow-y: auto;
}

ul#tableList li:hover .icon i,
ul#tableList li.active .icon i,
ul.tableList li:hover .icon i,
ul.tableList li.active .icon i {
    display: block;
}

.connnection-wrapper #dbTable .data-type,
.tableList .data-type {
    background: #D8E1F8;
    padding: 5px;
    color: #3F64DB;
}

.tableList .data-type {
    border-radius: 25px;
    padding: 1px 5px;
    font-size: .8em;
}

.connnection-wrapper .icon-placeholder {
    width: 30px;
    height: 30px;
    vertical-align: middle;
    padding: 5px;
    text-align: center;
    line-height: 20px;
}

.connnection-wrapper .icon-placeholder,
ul#tableList li.active,
ul#tableList li:hover,
ul.tableList li.active,
ul.tableList li:hover {
    background: rgba(82, 118, 140, .05);
}

ul#tableList li .icon i,
ul.tableList li .icon i {
    display: none;
}

ul#tableList li,
ul.tableList li {
    height: 25px;
    line-height: 25px;
    overflow: hidden;
    margin-bottom: 10px;
    white-space: nowrap;
}

.connnection-wrapper .list-icons .list-icons-item .action-icon,
.connnection-wrapper .list-icons .list-icons-item.selected .back-icon {
    display: inline-block;
}

.connnection-wrapper .list-icons .list-icons-item .back-icon,
.connnection-wrapper .list-icons .list-icons-item.selected .action-icon {
    display: none;
}

.page-header {
    padding-top: 15px;
}

.page-header .icon-datasources {
    width: 30px;
    height: 30px;
    text-align: center;
}

.connnection-wrapper .provider-logo-placeholder img {
    max-width: 150px;
    max-height: 90px;
}

.connnection-wrapper .provider-logo-placeholder {
    text-align: center;
    width: 100%;
    height: 100px;
    /*margin: auto;*/
}


.connnection-wrapper .search-table input {
    border-right: 0px;
}

.connnection-wrapper .search-table .input-group-text {
    background: transparent !important;
    border-left: 0px;
    color: var(--sd-red);
}

td:hover .text-highlight-hover {
    background: rgba(0, 158, 154, 0.4);
    border-radius: 3px;
    padding: 5px;
    min-width: 20px;
    min-height: 20px;
}

.action-cotainer .action-icon i {
    margin: auto;
}

.action-cotainer .action-icon {
    width: 28px;
    height: 28px;
    line-height: 28px;
    border-radius: 0.3em;
    cursor: pointer;
}

.action-cotainer .action-icon.action-icon-lg {
    width: 2.5em;
    height: 2.5em;
}

.action-cotainer .hover-bg:hover,
.action-cotainer.active .hover-bg {
    background-color: var(--suadeo-base-color-40);
}

.sd-cell-dropdown {}

.sd-cell-dropdown .dropdown {
    display: none;
}

.sd-cell-dropdown .dropdown ul li {
    text-align: left;
    padding-left: 10px;
    padding-right: 10px;
}

.sd-cell-dropdown .dropdown ul li:hover {
    background: #F2F2F2 0% 0% no-repeat padding-box;
}

.sd-cell-dropdown.show .dropdown {
    display: block;
    position: absolute;
    background: white;
    margin-left: 15px;
    z-index: 999;
}

.sd-cell-dropdown.show .dropdown ul {
    list-style: none;
    border-width: 1px;
    border-style: solid;
    border-radius: 3px;
    border-color: #e8eaeb;
    /* margin-left: 15px; */
    margin: 0px;
    padding: 0px;
}




.connnection-wrapper .dataTables_scroll .dataTables_scrollBody td,
.connnection-wrapper .dataTables_scroll .dataTables_scrollBody th {
    white-space: normal !important;
}

.connnection-wrapper .datatable-scroll,
.connnection-wrapper .datatable-scroll-lg,
.connnection-wrapper .datatable-scroll-sm {
    /* height: 530px;
        overflow:auto;*/
}






/*Translation Editor*/
.translation.display .display,
.translation.edit .cancel,
.translation.edit .save,
.translation.edit .editor {
    display: initial;
}

.translation.edit .display,
.translation.display .cancel,
.translation.display .save,
.translation.display .import {
    display: none;
}

.translation .content.active {
    display: block;
}

.translation .content {
    display: none;
    /*height:200px;*/
}

.translation .list-icons a:last-child {
    margin-right: auto;
}

.translation .list-icons a {
    margin-right: 20px;
}

/*summernote editor customization*/
.note-toolbar:not([class*=bg-]):not([class*=alpha-]) {
    background: transparent !important;
}

.note-editor.note-airframe .note-statusbar,
.note-editor.note-frame .note-statusbar {
    display: none;
}

.note-editor.note-airframe,
.note-editor.note-frame {
    border: 0px !important;
}

.note-editor.note-airframe .note-editing-area .note-editable,
.note-editor.note-frame .note-editing-area .note-editable {
    border: 1px solid rgba(0, 0, 0, .2);
}

.note-toolbar:not([class*=bg-]):not([class*=alpha-]) {
    border-bottom: 0px !important;
    padding: 0px !important;
    padding-bottom: 0.9375rem !important;
}

/*card update as per design*/
.card .card-footer {
    background: transparent !important;
    border-top: 0px;
}


/*Language Flags*/
.flag {
    width: 30px;
    height: 20px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: 0.35;
    cursor: pointer;
    z-index: 9999;
}

.flag:hover {
    opacity: 1;
}

.flag.active {
    opacity: 1;
}

.flag.circle {
    border-radius: 10px;
    width: 20px !important;
}

.flag.gb {
    background-image: url("../global_assets/images/lang/gb.png");
}

.flag.fr {
    background-image: url("../global_assets/images/lang/fr.png");
}

.flag.de {
    background-image: url("../global_assets/images/lang/de.png");
}

.flag.es {
    background-image: url("../global_assets/images/lang/es.png");
}

.flag.ru {
    background-image: url("../global_assets/images/lang/ru.png");
}

.flag.ua {
    background-image: url("../global_assets/images/lang/ua.png");
}

/*Fix stop remove horizental scroll bar*/
.content-wrapper {
    overflow-x: hidden !important;
}

.editor-flags-container {
    /*z-index: 99999999999999999999999;*/
    position: absolute;
    top: 3%;
    right: 0.8%;
}

/*
.editor-flag-list-icons {
    transform: translate(0, 3em);
}

.editor-container .note-editor {
    transform: translate(0, -2.6em);
}*/


/*summernote editor customization*/
.note-toolbar:not([class*=bg-]):not([class*=alpha-]) {
    background: transparent !important;
}


.note-editor.note-airframe .note-statusbar,
.note-editor.note-frame .note-statusbar {
    display: none;
}

.note-editor.note-airframe,
.note-editor.note-frame {
    border: 0px !important;
}

.note-editor.note-airframe .note-editing-area .note-editable,
.note-editor.note-frame .note-editing-area .note-editable {
    border: 1px solid rgba(0, 0, 0, .2);
}

.note-toolbar:not([class*=bg-]):not([class*=alpha-]) {
    border-bottom: 0px !important;
    padding: 0px !important;
    padding-bottom: 0.9375rem !important;
}


.btn-slate-1100:hover {
    background-color: var(--slate-1100);
    color: white !important;
}

.hover-outline:hover,
.outline-hover:hover {
    /* box-shadow: 0px 0.5px 0.05px 0.5px lightgrey !important;*/
    border: 1px var(--suadeo-base-color-40) solid !important;
}


.search-input-box {
    border: 1px white solid !important;
}

.breadcrumb-line-light {
    border-bottom: 1px solid var(--e9);
}

ul.filters {
    list-style: none;
    padding: 0px;
    margin: 0;
}

ul.filters li {
    /*padding: 0 1.5rem;*/
    line-height: 30px;
}

ul.filters li .search {
    height: 30px;
    margin-right: 0.5rem;
    margin-left: 0.5rem;
}

ul.filters li .form-control-feedback {
    line-height: 30px;
}

ul.filters li a {
    margin-right: 0.5rem;
    margin-left: 0.5rem;
    padding: 0.3rem;
    border-radius: 4px;
    cursor: pointer;
}

ul.filters li a:hover {}


ul.filters.separator li::after {
    content: "|"
}

ul.filters.separator li:last-child::after {
    content: ""
}

a.hover-text:hover,
ul.filters li a.active {
    background: rgba(82, 118, 140, .2);
}

ul.providers {
    list-style: none;
    padding: 0;
    margin: 0;
    column-count: 6;
    max-width: 1200px;
}

ul.providers li {
    width: 160px;
    height: 130px;
    margin: 20px;
    cursor: pointer;
}

ul.providers li:hover {
    font-weight: bold;
}

.selected-provider ul.providers li {
    margin: 0px !important;
}

ul.providers li .provider-logo-placeholder img.animate {
    transform: scale(1);
    transition: 0.5s;
}

ul.providers li:hover .provider-logo-placeholder img.animate {}

ul.providers li .provider-logo-placeholder img {
    max-width: 150px;
    max-height: 90px;
    margin: 0;
    transform: scale(0);
    transition: 0.5s;
}

ul.providers li .provider-logo-placeholder {
    width: 160px;
    height: 104px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.btn-xs {
    height: 30px !important;
    line-height: 1rem !important;
    padding: 0.4375rem 0.875rem !important;
}

.toolbar {
    height: 45px;
}

.translationEditor .note-frame {
    margin-top: -60px !important;
}

/*Green color select2 -- start*/
.select2-selection.green .select2-selection__choice,
.select2-selection.green .select2-selection__choice:hover {
    background-color: var(--sd-green);
}

.select2-dropdown.green .select2-results__option[aria-selected=true] {
    background-color: var(--sd-green);
}

/*Green color select2 -- end*/

.page-header-light.fixed-top {
    top: 45px;
    z-index: 80;
}

.user-data-search-bar.fixed-top {
    top: 98px;
    z-index: 80;
}

.main-page-search-bar {
    transition: 0.5s;
    overflow: hidden;
}

.main-page-search-bar.show {
    transform: scale(1);
    /*height: auto !important;*/
    transition: 0.5s;
}


#home-page .search-results {
    display: none;
}

#home-page.search #search-result-container {
    /*    max-height: 750px;
    overflow: auto;*/
    /*  margin-top:10px;*/
}

#home-page.search #search-result-container tr.dx-row.dx-freespace-row.dx-column-lines {
    display: none;
}

#home-page.search .search-results,
#home-page #illustration {
    display: block;
}

#home-page .card.search-result .icon-container i {
    margin: auto !important;
}

#home-page .card.search-result .icon-container {
    height: 44px;
    width: 44px;
}


@media (min-width: 992px) {
    .navbar-expand-lg .navbar-brand {
        min-width: 4rem !important;
    }
}

.div-container-connection-list-suadeo-dx-datagrid .dx-datagrid-rowsview.dx-datagrid-nowrap dx-scrollable {
    overflow: visible !important;
}

.div-container-connection-list-suadeo-dx-datagrid .dx-scrollable-container {
    overflow: auto !important;
}

.div-container-connection-list-suadeo-dx-datagrid .dx-datagrid-rowsview.dx-datagrid-nowrap {
    overflow: auto !important;
}

.dx-header-row {
    font-weight: bold;
}

.query-editor .ace_editor {
    height: 225px !important;
}

.tab-pane .navbar {
    z-index: auto;
}

.div-container-suadeo-dx-treelist .dx-row.dx-freespace-row.dx-column-lines:hover {
    background-color: white !important;
}

.div-container-suadeo-dx-datagrid .dx-row.dx-freespace-row.dx-column-lines:hover {
    background-color: white !important;
}

.sd-dxcustomization-popup-template-body .dx-fileuploader-input-label {
    display: none !important;
}

.sd-dxcustomization-popup-template-body .dx-fileuploader-button {
    border: none;
    background-color: white;
    margin-left: -10px;
}

.sd-dxcustomization-popup-template-body .mail-row {
    margin-top: -12px;
}

.sd-dxcustomization-popup-template-body .dx-fileuploader {
    height: 30px;
    margin-top: -10px;
}

.sd-dxcustomization-popup-template-body .suadeo-app-upload .dx-fileuploader-input-wrapper .dx-button {
    float: left;
}

.dx-datagrid-filter-panel .dx-datagrid-filter-panel-clear-filter {
    margin-right: 3%;
}

.dx-datagrid-filter-panel .dx-datagrid-filter-panel-left {
    margin-left: 3%;
}

.bg-suadeo-base-color,
.bg-suadeo-base-color:hover {
    background-color: var(--suadeo-primary-color);
    color: #FFFFFF !important;
}


/*Colors customization --- Start*/


/*Custom borders start*/
.border-grey-100 {
    border-color: var(--grey-100) !important;
}

.border-grey-200 {
    border-color: var(--grey-200) !important;
}

.border-grey-230 {
    border-color: var(--grey-230) !important;
}

.border-grey-250 {
    border-color: var(--grey-250) !important;
}

.border-grey-270 {
    border-color: var(--grey-270) !important;
}

.border-grey-650 {
    border-color: var(--grey-650) !important;
}

.border-grey-640 {
    border-color: var(--grey-640) !important;
}

.border-slate-1100 {
    border-color: var(--slate-1100) !important;
}

.border-teal-1000 {
    border-color: var(--teal-1000) !important;
}

.border-teal-950 {
    border-color: var(--teal-950) !important;
}

.border-blue-350 {
    border-color: var(--blue-350) !important;
}

.border-lightgray {
    border-color: lightgray !important;
}

/*end of Custom borders start*/


/*Custom background*/

.bg-grey-100 {
    background-color: var(--grey-100) !important;
}

.bg-grey-200 {
    background-color: var(--grey-200) !important;
    color: black !important;
}

.bg-grey-230 {
    background-color: var(--grey-230) !important;
    color: black !important;
}

.bg-grey-250 {
    background-color: var(--grey-250) !important;
    color: black !important;
}

.bg-grey-270 {
    background-color: var(--grey-270) !important;
    color: black !important;
}

.bg-grey-650 {
    background-color: var(--grey-650) !important;
    color: black !important;
}

.bg-grey-640 {
    background-color: var(--grey-640) !important;
    color: black !important;
}

.bg-slate-1100 {
    background-color: var(--slate-1100) !important;
}

.bg-slate-clear-1100 {
    background-color: white;
    color: var(--slate-1100) !important;
}

.bg-teal-950 {
    background-color: var(--teal-950) !important;
}

.bg-teal-1000 {
    background-color: var(--teal-1000) !important;
}

.bg-blue-350 {
    background-color: var(--blue-350) !important;
}



/*Custom text*/

.text-grey-100 {
    color: var(--grey-100);
}

.text-grey-200 {
    color: var(--grey-200);
}

.text-grey-230 {
    color: var(--grey-230);
}

.text-grey-250 {
    color: var(--grey-250);
}

.text-grey-270 {
    color: var(--grey-270);
}

.text-grey-650 {
    color: var(--grey-650);
}

.text-grey-640 {
    color: var(--grey-640);
}

.text-slate-1100 {
    color: var(--slate-1100);
}

.text-teal-1000 {
    color: var(--teal-1000);
}

.text-teal-950 {
    color: var(--teal-950);
}

.text-blue-350 {
    color: var(--blue-350);
}

.text-suadeo-base-color {
    color: var(--suadeo-base-color);
}

.bg-suadeo-base-color {
    background-color: var(--suadeo-primary-color) !important;
    color: #FFFFFF;
}


.text-grey-179 {
    color: var(--grey-179);
}

.bg-teal-400 {
    background-color: var(--teal-400) !important;
}

[class*=bg-]:not(.bg-transparent):not(.bg-light):not(.bg-white):not(.btn-outline):not(body) {
    color: #fff;
}

/*Colors customization --- End*/


/*Default Chart Item Customization*/


.suadeoChartItem_FilterSelect:focus {
    outline: none !important;
    border-color: #858585 !important;
}

.suadeoChartItem_FilterSelect {
    border-color: #858585 !important;
    min-width: 20% !important;
}

/*By default the z-index of PNotify is 1070 which is causing it to go below the dx-popup overlay*/
body>div.ui-pnotify {
    z-index: 2000 !important;
}

/*suadeo theme */
.suadeo-button-primary {
    background-color: var(--suadeo-primary-color) !important;
    border-color: var(--suadeo-primary-color) !important;
}

.suadeo-button-primary-light {
    background-color: var(--suadeo-primary-color-light) !important;
    color: var(--suadeo-primary-color) !important;
    border-color: var(--suadeo-primary-color) !important;
}

.suadeo-button-primary-light:active,
.suadeo-button-primary-light:focus,
.suadeo-button-primary-light:hover {
    color: #fff !important;
    background-color: var(--suadeo-primary-color) !important;
}

.container-fluid .btn:focus,
.modal-content .btn:focus {
    -webkit-box-shadow: 0px 0px 3px 0px var(--suadeo-primary-color) !important;
    -moz-box-shadow: 0px 0px 3px 0px var(--suadeo-primary-color) !important;
    box-shadow: 0px 0px 3px 0px var(--suadeo-primary-color) !important;
}

.connectionslist-lookup {
    height: 35px !important;
}

.connectionslist-lookup>dx-lookup-field-wrapper {
    border-radius: 0.25rem;
}


.connectionslist-lookup .dx-lookup-arrow:before {
    content: '\f001' !important
}

.user-sub-title {
    color: rgba(255, 255, 255, 0.7) !important;
}


/* Vertical Menu Mobile Responsiveness */
@media (max-width: 992px) {
    .vertical-menu {
        z-index:1000 !important
    }
}

#page-topbar #horizontal-menu .navbar-light {
    border: 0px !important;
}

/* Horizontal Menu Mobile Responsiveness */
@media (max-width: 639.98px) {
    #page-topbar .navbar-header .navbar-brand-box {
        margin-left: 0px !important;
        margin-right: 0px !important;
        padding-left: 8px !important;
        padding-right: 4px !important;
    }

    #page-topbar .navbar-header .navbar-brand-box .logo {
        max-width: 100px !important;
    }

    #page-topbar .navbar-header .header-item.vertical-menu-btn {
        padding-right: 8px !important;
        padding-left: 8px !important;
    }

    #page-topbar .navbar-header .dropdown .btn {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    #page-topbar .navbar-header .dropdown .btn.user i {
         padding-left: 12px !important;
    }

    #page-topbar .navbar-header .dropdown .btn .icon-sm {
         width: 17px !important;
         height: 17px !important;
    }

    #page-topbar .navbar-header .header-item.user .d-sm-block .user-name {
        font-size: 12px !important;
    }

    #page-topbar .navbar-header .header-item.user .suadeo-custom-logout-btn {
        border-left: 1px solid rgba(255, 255, 255, 0.7) !important;
    }
}

@media (max-width: 395px) {
    #page-topbar .navbar-header .navbar-brand-box {
        padding-left: 4px !important;
    }

    #page-topbar .navbar-header .navbar-brand-box .logo {
        max-width: 80px !important;
    }

   #page-topbar .navbar-header .dropdown .btn.user i {
        padding-left: 10px !important;
   }

   #page-topbar .navbar-header .dropdown .btn .icon-sm {
        width: 16px !important;
        height: 16px !important;
   }

    .dashboard-dropdown-menu .dropdown-submenu .dropdown-menu #dashboard-modal-favorites-button {
        padding-left:8px !important;
        padding-right:8px !important;
    }
}

@media (max-width: 576px) {
    #page-topbar .navbar-header .header-item.user .suadeo-custom-logout-btn {
        display: block !important;
    }
}

@media (max-width: 768px) {
    .main-content .dashboard-header .breadcrumb {
        margin-top:0px !important;
        margin-bottom:0px !important;
    }
    .breadcrumb-line-light .header-elements {
        border-top: none !important;
    }
    .breadcrumb-line-light .icon-more {
        top:-2px !important;
    }
    .dashboard-dropdown-menu .dropdown-submenu .dropdown-menu {
        left:unset !important;
        right:100% !important;
    }
}