/*! MYP_SCRIPT: scripts/assets/css/json-viewer.css*/
/* Root element */
.json-document {
    padding: 1em 2em;
  }
  
  /* Syntax highlighting for JSON objects */
  ul.json-dict, ol.json-array {
    list-style-type: none;
    margin: 0 0 0 1px;
    border-left: 1px dotted #ccc;
    padding-left: 2em;
  }
  .json-string {
    color: #0B7500;
  }
  .json-literal {
    color: #1A01CC;
    font-weight: bold;
  }
  
  /* Toggle button */
  a.json-toggle {
    position: relative;
    color: inherit;
    text-decoration: none;
  }
  a.json-toggle:focus {
    outline: none;
  }
  a.json-toggle:before {
    font-size: 1.1em;
    color: #c0c0c0;
    content: "\25BC"; /* down arrow */
    position: absolute;
    display: inline-block;
    width: 1em;
    text-align: center;
    line-height: 1em;
    left: -1.2em;
  }
  a.json-toggle:hover:before {
    color: #aaa;
  }
  a.json-toggle.collapsed:before {
    /* Use rotated down arrow, prevents right arrow appearing smaller than down arrow in some browsers */
    transform: rotate(-90deg);
  }
  
  /* Collapsable placeholder links */
  a.json-placeholder {
    color: #aaa;
    padding: 0 1em;
    text-decoration: none;
  }
  a.json-placeholder:hover {
    text-decoration: underline;
  }

/*! MYP_SCRIPT: scripts/assets/css/color-picker.css*/
.sp-container{position:absolute;top:0;left:0;display:inline-block;z-index:9999994;overflow:hidden}.sp-container.sp-flat{position:relative}.sp-container,.sp-container *{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.sp-top{position:relative;width:100%;display:inline-block}.sp-top-inner{position:absolute;top:0;left:0;bottom:0;right:0}.sp-color{position:absolute;top:0;left:0;bottom:0;right:20%}.sp-hue{position:absolute;top:0;right:0;bottom:0;left:84%;height:100%}.sp-clear-enabled .sp-hue{top:33px;height:77.5%}.sp-fill{padding-top:80%}.sp-sat,.sp-val{position:absolute;top:0;left:0;right:0;bottom:0}.sp-alpha-enabled .sp-top{margin-bottom:18px}.sp-alpha-enabled .sp-alpha{display:block}.sp-alpha-handle{position:absolute;top:-4px;bottom:-4px;width:6px;left:50%;cursor:pointer;border:1px solid #000;background:#fff;opacity:.8}.sp-alpha{display:none;position:absolute;bottom:-14px;right:0;left:0;height:8px}.sp-alpha-inner{border:solid 1px #333}.sp-clear{display:none}.sp-clear.sp-clear-display{background-position:center}.sp-clear-enabled .sp-clear{display:block;position:absolute;top:0;right:0;bottom:0;left:84%;height:28px}.sp-alpha,.sp-alpha-handle,.sp-clear,.sp-container,.sp-container button,.sp-container.sp-dragging .sp-input,.sp-dragger,.sp-preview,.sp-replacer,.sp-slider{-webkit-user-select:none;-moz-user-select:-moz-none;-o-user-select:none;user-select:none}.sp-container.sp-input-disabled .sp-input-container{display:none}.sp-container.sp-buttons-disabled .sp-button-container{display:none}.sp-container.sp-palette-buttons-disabled .sp-palette-button-container{display:none}.sp-palette-only .sp-picker-container{display:none}.sp-palette-disabled .sp-palette-container{display:none}.sp-initial-disabled .sp-initial{display:none}.sp-sat{background-image:-webkit-gradient(linear,0 0,100% 0,from(#fff),to(rgba(204,154,129,0)));background-image:-webkit-linear-gradient(left,#fff,rgba(204,154,129,0));background-image:-moz-linear-gradient(left,#fff,rgba(204,154,129,0));background-image:-o-linear-gradient(left,#fff,rgba(204,154,129,0));background-image:-ms-linear-gradient(left,#fff,rgba(204,154,129,0));background-image:linear-gradient(to right,#fff,rgba(204,154,129,0))}.sp-val{background-image:-webkit-gradient(linear,0 100%,0 0,from(#000),to(rgba(204,154,129,0)));background-image:-webkit-linear-gradient(bottom,#000,rgba(204,154,129,0));background-image:-moz-linear-gradient(bottom,#000,rgba(204,154,129,0));background-image:-o-linear-gradient(bottom,#000,rgba(204,154,129,0));background-image:-ms-linear-gradient(bottom,#000,rgba(204,154,129,0));background-image:linear-gradient(to top,#000,rgba(204,154,129,0))}.sp-hue{background:-moz-linear-gradient(top,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%);background:-ms-linear-gradient(top,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%);background:-o-linear-gradient(top,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%);background:-webkit-gradient(linear,left top,left bottom,from(red),color-stop(.17,#ff0),color-stop(.33,#0f0),color-stop(.5,#0ff),color-stop(.67,#00f),color-stop(.83,#f0f),to(red));background:-webkit-linear-gradient(top,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%);background:linear-gradient(to bottom,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}.sp-1{height:17%}.sp-2{height:16%}.sp-3{height:17%}.sp-4{height:17%}.sp-5{height:16%}.sp-6{height:17%}.sp-hidden{display:none!important}.sp-cf:after,.sp-cf:before{content:"";display:table}.sp-cf:after{clear:both}@media (max-device-width:480px){.sp-color{right:40%}.sp-hue{left:63%}.sp-fill{padding-top:60%}}.sp-dragger{border-radius:5px;height:5px;width:5px;border:1px solid #fff;background:#000;cursor:pointer;position:absolute;top:0;left:0}.sp-slider{position:absolute;top:0;cursor:pointer;height:3px;left:-1px;right:-1px;border:1px solid #000;background:#fff;opacity:.8}.sp-container{border-radius:0;background-color:#ececec;border:solid 1px #f0c49b;padding:0}.sp-clear,.sp-color,.sp-container,.sp-container button,.sp-container input,.sp-hue{font:normal 12px "Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Verdana,sans-serif;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.sp-top{margin-bottom:3px}.sp-clear,.sp-color,.sp-hue{border:solid 1px #666}.sp-input-container{float:right;width:100px;margin-bottom:4px}.sp-initial-disabled .sp-input-container{width:100%}.sp-input{font-size:12px!important;border:1px inset;padding:4px 5px;margin:0;width:100%;background:0 0;border-radius:3px;color:#222}.sp-input:focus{border:1px solid orange}.sp-input.sp-validation-error{border:1px solid red;background:#fdd}.sp-palette-container,.sp-picker-container{float:left;position:relative;padding:10px;padding-bottom:300px;margin-bottom:-290px}.sp-picker-container{width:172px;border-left:solid 1px #fff}.sp-palette-container{border-right:solid 1px #ccc}.sp-palette-only .sp-palette-container{border:0}.sp-palette .sp-thumb-el{display:block;position:relative;float:left;width:24px;height:15px;margin:3px;cursor:pointer;border:solid 2px transparent}.sp-palette .sp-thumb-el.sp-thumb-active,.sp-palette .sp-thumb-el:hover{border-color:orange}.sp-thumb-el{position:relative}.sp-initial{float:left;border:solid 1px #333}.sp-initial span{width:30px;height:25px;border:none;display:block;float:left;margin:0}.sp-initial .sp-clear-display{background-position:center}.sp-button-container,.sp-palette-button-container{float:right}.sp-replacer{margin:0;overflow:hidden;cursor:pointer;padding:4px;display:inline-block;border:solid 1px #91765d;background:#eee;color:#333;vertical-align:middle}.sp-replacer.sp-active,.sp-replacer:hover{border-color:#f0c49b;color:#111}.sp-replacer.sp-disabled{cursor:default;border-color:silver;color:silver}.sp-dd{padding:2px 0;height:16px;line-height:16px;float:left;font-size:10px}.sp-preview{position:relative;width:25px;height:20px;border:solid 1px #222;margin-right:5px;float:left;z-index:0}.sp-palette{max-width:220px}.sp-palette .sp-thumb-el{width:16px;height:16px;margin:2px 1px;border:solid 1px #d0d0d0}.sp-container{padding-bottom:0}.sp-container button{background-color:#eee;background-image:-webkit-linear-gradient(top,#eee,#ccc);background-image:-moz-linear-gradient(top,#eee,#ccc);background-image:-ms-linear-gradient(top,#eee,#ccc);background-image:-o-linear-gradient(top,#eee,#ccc);background-image:linear-gradient(to bottom,#eee,#ccc);border:1px solid #ccc;border-bottom:1px solid #bbb;border-radius:3px;color:#333;font-size:14px;line-height:1;padding:5px 4px;text-align:center;text-shadow:0 1px 0 #eee;vertical-align:middle}.sp-container button:hover{background-color:#ddd;background-image:-webkit-linear-gradient(top,#ddd,#bbb);background-image:-moz-linear-gradient(top,#ddd,#bbb);background-image:-ms-linear-gradient(top,#ddd,#bbb);background-image:-o-linear-gradient(top,#ddd,#bbb);background-image:linear-gradient(to bottom,#ddd,#bbb);border:1px solid #bbb;border-bottom:1px solid #999;cursor:pointer;text-shadow:0 1px 0 #ddd}.sp-container button:active{border:1px solid #aaa;border-bottom:1px solid #888;-webkit-box-shadow:inset 0 0 5px 2px #aaa,0 1px 0 0 #eee;-moz-box-shadow:inset 0 0 5px 2px #aaa,0 1px 0 0 #eee;-ms-box-shadow:inset 0 0 5px 2px #aaa,0 1px 0 0 #eee;-o-box-shadow:inset 0 0 5px 2px #aaa,0 1px 0 0 #eee;box-shadow:inset 0 0 5px 2px #aaa,0 1px 0 0 #eee}.sp-cancel{font-size:11px;color:#d93f3f!important;margin:0;padding:2px;margin-right:5px;vertical-align:middle;text-decoration:none}.sp-cancel:hover{color:#d93f3f!important;text-decoration:underline}.sp-palette span.sp-thumb-active,.sp-palette span:hover{border-color:#000}.sp-alpha,.sp-preview,.sp-thumb-el{position:relative;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)}.sp-alpha-inner,.sp-preview-inner,.sp-thumb-inner{display:block;position:absolute;top:0;left:0;bottom:0;right:0}.sp-palette .sp-thumb-inner{background-position:50% 50%;background-repeat:no-repeat}.sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=)}.sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=)}.sp-clear-display{background-repeat:no-repeat;background-position:center;background-image:url(data:image/gif;base64,R0lGODlhFAAUAPcAAAAAAJmZmZ2dnZ6enqKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq/Hx8fLy8vT09PX19ff39/j4+Pn5+fr6+vv7+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAAUABQAAAihAP9FoPCvoMGDBy08+EdhQAIJCCMybCDAAYUEARBAlFiQQoMABQhKUJBxY0SPICEYHBnggEmDKAuoPMjS5cGYMxHW3IiT478JJA8M/CjTZ0GgLRekNGpwAsYABHIypcAgQMsITDtWJYBR6NSqMico9cqR6tKfY7GeBCuVwlipDNmefAtTrkSzB1RaIAoXodsABiZAEFB06gIBWC1mLVgBa0AAOw==)}

/*! MYP_SCRIPT: scripts/templates/page-maker/css/style.css*/
.page-maker-wrapper {
    height: calc(100vh - 100px);
    overflow: auto;
}

.cp-title {
    width: 30%;
}


.cp-tabs-wrapper {}

.cp-tab {
    margin-right: 10px;
    size: 22px;
    cursor: pointer;
}

.cp-tab:hover {
    color: var(--aqua-blue);
    opacity: 0.8;
}

.cp-tab-active {
    color: var(--aqua-blue);
}

form-maker .ui-widget {
    margin-bottom: 5px;
    padding: 0 20px;
    min-height: 55px;
}

form-maker .ui-widget:hover {
    background-color: rgba(0, 182, 224, 0.1);
}


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

/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: transparent;
    box-shadow: inset 0 0 5px 5px transparent;
    border: solid 5px transparent;
    border-left: solid 0px transparent;
    border-radius: 20px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 5px 5px #ddd;
    border: solid 5px transparent;
    border-left: solid 0px transparent;
    border-radius: 20px;

}

/*CLICK */
::-webkit-scrollbar-thumb:active {
    box-shadow: inset 0 0 5px 5px #888 !important;
    border: solid 5px transparent;
    border-left: solid 0px transparent;
    border-radius: 20px;

}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    box-shadow: inset 0 0 5px 5px #ccc;
    border: solid 5px transparent;
    border-left: solid 0px transparent;
    border-radius: 20px;

}

a[aria-expanded="true"].page-maker-collaspe-arrow i::before {
    transform: rotate(180deg);
}

.all-tabs-wrapper {
    padding: 5px 20px 0px 20px;
    height: 100%
}

.tabs-wrapper {
    height: 100%;
    width: 100%;
}

.has-title .all-tabs-wrapper {
    height: calc(100% - 42px);
}

.tm-tab-header-tm {
    padding: 5px 10px;
    font-size: 14px;
    border-radius: 5px 5px 0 0;
    border: 1px solid var(--aqua-blue);
    color: var(--aqua-blue);
    font-weight: bold;
    margin-right: 3px;
    border-bottom: 0;
    transform: translate(0px, 1px)
}

.tm-tab-header-tm:hover {
    color: whitesmoke;
    background-color: var(--aqua-blue);
    opacity: 0.8;
}

.tm-body {
    border: 1px solid var(--aqua-blue);
    border-radius: 0 5px 5px 5px;
    width: 100%;
    height: calc(100% - 50px);
    overflow: auto;
    min-height: 200px;
    box-shadow: 5px 2px 10px #aaaaaa;
}

form-maker .input-loader {
    position: absolute;
    top: 10px;
    right: 25px;
    width: 15px;
    height: 15px;
    background-color: white;
}

form-maker .alert {
    margin-bottom: 0;
    padding: 2px 5px;
}

form-maker error-messages .row {
    margin: 0;
}

.tm-tab-active {
    background-color: var(--aqua-blue);
    color: whitesmoke;
}

body.modal-open,
.modal-open .navbar-fixed-top,
.modal-open .navbar-fixed-bottom {
    margin-right: 0;
}

.modal {
    left: 50%;
    bottom: auto;
    right: auto;
    padding: 0;
    width: 1000px;
    margin-left: -250px;
    background-color: #ffffff;
    border: 1px solid #999999;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
    background-clip: padding-box;
}

.modal.container {
    max-width: none;
}

.justify-content-end {
    justify-content: flex-end;
}

.flex-direction-col {
    flex-direction: column;
}

.justify-content-around {
    justify-content: space-around;
}

.asset-grid-wrapper {
    width: 100%;
    margin-top: 20px;
    height: 100%;
    display: grid;
    grid-template-columns: 318px 10px 516px;
    grid-template-rows: calc(100% - 50px);
    padding: 0 2%;
}

.asset-grid-wrapper .asset-list-selector {
    grid-column: 1 / span 1;
    grid-row: 2 / span 1;
}

.asset-grid-wrapper .ms-title {
    font-family: Ubuntu;
    font-size: 21px;
    color: var(--aqua-blue);
}

.asset-grid-wrapper .ms-item-wrapper {
    height: 60px;
    cursor: pointer;
    position: relative;
}

.asset-grid-wrapper .ms-link {
    font-family: Ubuntu;
    color: var(--aqua-blue);
    text-decoration: underline;
    margin-right: 5px;
    font-weight: 500 !important;
}

.asset-grid-wrapper .ms-item-wrapper:hover {
    background-color: var(--ice-blue);
}

.asset-grid-wrapper .ms-text-wrapper {
    padding-left: 8px;
}

.asset-grid-wrapper .ms-text-name {
    font-family: Ubuntu;
    font-size: 14px;
    font-weight: 500;
    color: var(--greyish-brown);
}

.asset-grid-wrapper .ms-delete-item {
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translate(0, -50%);
}

.asset-grid-wrapper .ms-close-search {
    fill: var(--warm-grey);
}

.asset-grid-wrapper .assets-form-wrapper {
    grid-column: 3 / span 2;
    grid-row: 1;
    height: calc(100%);
}

.asset-grid-wrapper .assets-form-wrapper .fm-wrapper {
    max-width: 400px;
}

.fm-wrapper-title {
    height: calc(90% - 25px) !important;
}

.asset-grid-wrapper .panel-default>.panel-heading+.panel-collapse>.panel-body {
    padding: 0 5px;
}

.asset-grid-wrapper .assets-form-wrapper .fm-main-wrapper {
    background-color: var(--white);
    border: solid 1px var(--white-seven);
    border-radius: 10px;
    padding: 0 20px;
    height: 100%;
}

.asset-grid-wrapper .assets-form-wrapper .fm-btn-wrapper {
    flex-direction: row-reverse;
}

.asset-grid-wrapper .ms-item-active {
    background-color: var(--ice-blue);
}

.asset-grid-wrapper .ms-item-active .ms-active-line {
    visibility: visible !important;
}

.asset-grid-wrapper .ms-item-active .ms-text-wrapper .ms-text-name {
    color: var(--aqua-blue);
}

.asset-grid-wrapper .ms-active-line {
    width: 6px;
    height: 100%;
    background-color: var(--aqua-blue);
    margin-right: 12px;
    visibility: hidden;
}

.asset-grid-wrapper p.validation {
    font-size: 12px;
    padding: 1px 5px
}

.ms-clear-all {
    margin-top: 18px;
    font-family: Ubuntu;
    font-size: 12px;
    color: var(--pink-red);
    text-decoration: underline;
}

.ms-hr {
    width: 100%;
    background-color: var(--white-six);
    height: 1px;
    margin-top: 10px;
}


.asset-grid-wrapper .assets-filters .ms-filter-sub-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--aqua-blue);
    margin: 5px 0;
}

.asset-grid-wrapper .short-input {
    width: 120px !important;
}

.control-panel-wrapper .fm-wrapper {
    padding: 10px;
}

.control-panel-wrapper .fm-btn-wrapper {
    border-top: solid 1px var(--aqua-blue);
    padding: 10px;
}

.control-panel-wrapper .fm-item-wrapper .cp-title {
    width: 30%;
    max-width: 300px;
}

.password-eye {
    position: absolute;
    transform: translate(0, -50%);
    right: 10px;
    top: 50%;
}

input::-ms-reveal,
pagemaker input::-ms-clear {
    display: none;
}

.page-maker-radio-row {
    display: flex;
}
.page-maker-radio-row .page-maker-option {
    display: flex;
    margin-right: 10px;
}
.page-maker-radio-row .page-maker-option input {
    margin-right: 3px;
}

.height-100-im {
    height: 100% !important;
}

.fm-img:hover .fm-img-wrapper {
    display: flex;
}

.fm-img-wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    transition: all 1s ease-in;
    pointer-events: none;
}

[form-maker] .fm-btn,
form-maker .fm-btn {
    background-color: var(--aqua-blue);
    font-size: 18px;
    color: white;
}

[form-maker] .fm-btn:hover,
[form-maker] .fm-btn:focus,
form-maker .fm-btn:hover,
form-maker .fm-btn:focus {
    color: white;
    opacity: 0.8;
}

[form-maker] .fm-base-input,
.fm-base-input.select2-container,
[form-maker] .fm-base-input:focus,
form-maker .fm-base-input,
form-maker .fm-base-input:focus {
    width: 100%;
    background-color: var(--modal-white) !important;
    outline: none;
    border-color: var(--dark-white);
    min-height: 36px;
    border-radius: 4px;
}

.fm-base-input .select2-choices {
    background-color: var(--modal-white) !important;
}

.fm-base-input .select2-arrow {
    display: none !important;
}

.fm-base-input.select2-container .select2-choice,
.fm-base-input.select2-container .select2-choice {
    height: 36px !important;
    padding: 0 !important;
}

.flex-full {
    flex-grow: 1;
}

grid-maker .absolute.glyphicon.glyphicon-refresh {
    top: 50%;
    transform: translate(0, -50%);
    right: 5px;
}

grid-maker p.validation {
    padding: 0px 9px 1px 10px;
    width: 100%;
}

grid-maker ::-webkit-scrollbar-thumb:hover {
    box-shadow: inset 0 0 5px 5px #ccc;
    border: solid 5px transparent;
    border-left: solid 0px transparent;
    border-radius: 20px;
}

grid-maker ::-webkit-scrollbar-thumb:active {
    box-shadow: inset 0 0 5px 5px #888 !important;
    border: solid 5px transparent;
    border-left: solid 0px transparent;
    border-radius: 20px;

}

grid-maker .tab-wrapper {
    margin: 0 0 10px 0;
    font-size: 16px;
}

grid-maker .tab-item {
    cursor: pointer;
    width: 50%;
    display: flex;
    justify-content: center;
    border-bottom: 2px solid;
    padding-bottom: 5px;
}

grid-maker .tab-item.active {
    color: var(--aqua-blue);
    border-bottom: 2px solid var(--aqua-blue);
}

grid-maker .tab-item:hover:not(.active) {
    color: rgba(0, 182, 224, 0.5);
    border-bottom: 2px solid rgba(0, 182, 224, 0.5);
}

grid-maker .bot-stage-wrapper {
    max-height: 300px;
    overflow-y: auto;
    padding-right: 10px;
    min-height: 300px;
}

.add-stage {
    font-size: 25px;
    color: var(--aqua-blue);
}

.bot-stage-item {
    padding: 20px 25px 0 25px;
    margin: 10px 0;
    position: relative;
    border: 2px solid var(--white-two);
    border-radius: 25px;
}

.ca-delete-trash {
    position: absolute;
    right: 5px;
    fill: var(--warm-grey);
    top: 50%;
    transform: translate(0, -50%);
}

.ca-delete-trash:hover {
    fill: var(--aqua-blue);
}

grid-maker .bot-stage-input-wrapper {
    margin-bottom: 20px;
}

grid-maker .bot-stage-input .select2-choice,
grid-maker .bot-stage-input select,
.select-form-gen {
    background-color: var(--modal-white) !important;
    height: 36px !important;
    padding-left: 12px;
    box-shadow: none;
    border: 1px solid var(--form-white);
    outline: none;
    border-radius: 4px !important;
}

grid-maker .bot-stage-input .select2-choice {
    padding: 0 !important;
}

grid-maker .select2-container .select2-arrow b {
    display: none !important;
}

grid-maker .select-wrapper:after {
    content: '>';
    font: 19px "Consolas", monospace;
    color: #aaa;
    transform: rotate(90deg);
    right: 10px;
    top: 6px;
    position: absolute;
    pointer-events: none;
}

grid-maker ::-webkit-scrollbar {
    width: 10px;
}

/* Track */
grid-maker ::-webkit-scrollbar-track {
    background: transparent;
    box-shadow: inset 0 0 5px 5px transparent;
    border: solid 5px transparent;
    border-left: solid 0px transparent;
    border-radius: 20px;
}

/* Handle */
grid-maker ::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 5px 5px #ddd;
    border: solid 5px transparent;
    border-left: solid 0px transparent;
    border-radius: 20px;
}

.grid-sp {
    border-bottom: 1px solid var(--form-white) !important;
    padding-bottom: 5px;
}
 .tippy-menu-container {
    z-index: 1000;
    min-width: 10rem;
    padding: 0.5rem 0;
    margin: 0;
    font-size: 16px;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.25rem;
}
 .tippy-menu-item:hover {
    cursor: pointer;
    background: rgb(240, 240, 240);
}

 .tippy-menu-item {
    display: block;
    padding: 0.25rem 1rem;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    border: 0;
}

.tippy-content{
    padding: 0 !important;
}

.h-full{
    height: 100%;
}

.input-arrow {
    right: 5px;
    top: 50%;
    transform: translate(0, -50%);
}

.rtl .input-arrow {
    left: 5px;
    right: initial;
}

.ag-body .ag-row-footer,
.ag-floating-bottom-container .ag-row{
    font-weight: bold;
    background-color: var(--ag-header-background-color);
}


ag-action-buttons .agr-export-options,
ag-grid-ribbon .agr-export-options,
.agr-export-options {
    padding: 3px 7px;
    color: black;
    cursor: pointer;
}

ag-action-buttons .agr-export-options:hover,
ag-grid-ribbon .agr-export-options:hover,
.agr-export-options:hover {
    color: white;
    background-color: var(--aqua-blue);
}

ag-input .remove-input-design:disabled,
ag-input .remove-input-design{
    border: none !important;
    background-color: transparent !important;
    outline: none !important;
    color: #212529 !important;
    opacity: 1 !important;
    cursor: initial !important;
    padding: 0;
    pointer-events: none;
}

.jspanel-hide-header .jsPanel-hdr{
    display: none;
}


/* new without childs */

[ag-input] .remove-input-design:disabled,
[ag-input] .remove-input-design{
    pointer-events: none;
    border: none !important;
    background-color: transparent !important;
    outline: none !important;
    color: #212529 !important;
    opacity: 1 !important;
    cursor: initial !important;
    padding: 0;
}

[ag-action-buttons] .agr-export-options:hover,
[ag-grid-ribbon] .agr-export-options:hover,
.agr-export-options:hover {
    color: white;
    background-color: var(--aqua-blue);
}

.ag-body .ag-row-footer,
.ag-floating-bottom-container .ag-row{
    font-weight: bold;
    background-color: var(--ag-header-background-color);
}

/* a:active{
    font-size: inherit;
} */

/*! MYP_SCRIPT: scripts/templates/page-maker/css/style2.css*/

/*! MYP_SCRIPT: /scripts/templates/page-maker/css/flags.css*/
.flag{float:left;padding:0 !important;margin:0 5px 0 0;width:16px;height:11px;background:url("../scripts/templates/page-maker/app/assets/flags.png") no-repeat;}.flag.ad{background-position:0 0}.flag.ae{background-position:0 -11px}.flag.af{background-position:0 -22px}.flag.ag{background-position:0 -33px}.flag.ai{background-position:0 -44px}.flag.al{background-position:0 -55px}.flag.am{background-position:0 -66px}.flag.an{background-position:0 -77px}.flag.ao{background-position:0 -88px}.flag.ar{background-position:0 -99px}.flag.as{background-position:0 -110px}.flag.at{background-position:0 -121px}.flag.au{background-position:0 -132px}.flag.aw{background-position:0 -143px}.flag.ax{background-position:0 -154px}.flag.az{background-position:0 -165px}.flag.ba{background-position:0 -176px}.flag.bb{background-position:0 -187px}.flag.bd{background-position:0 -198px}.flag.be{background-position:0 -209px}.flag.bf{background-position:0 -220px}.flag.bg{background-position:0 -231px}.flag.bh{background-position:0 -242px}.flag.bi{background-position:0 -253px}.flag.bj{background-position:0 -264px}.flag.bm{background-position:0 -275px}.flag.bn{background-position:0 -286px}.flag.bo{background-position:0 -297px}.flag.br{background-position:0 -308px}.flag.bs{background-position:0 -319px}.flag.bt{background-position:0 -330px}.flag.bv{background-position:0 -341px}.flag.bw{background-position:0 -352px}.flag.by{background-position:0 -363px}.flag.bz{background-position:0 -374px}.flag.ca{background-position:0 -385px}.flag.catalonia{background-position:0 -396px}.flag.cc{background-position:0 -407px}.flag.cd{background-position:0 -418px}.flag.cf{background-position:0 -429px}.flag.cg{background-position:0 -440px}.flag.ch{background-position:0 -451px}.flag.ci{background-position:0 -462px}.flag.ck{background-position:0 -473px}.flag.cl{background-position:0 -484px}.flag.cm{background-position:0 -495px}.flag.cn{background-position:0 -506px}.flag.co{background-position:0 -517px}.flag.cu{background-position:0 -528px}.flag.cr{background-position:0 -539px}.flag.cs{background-position:0 -550px}.flag.cv{background-position:0 -561px}.flag.cx{background-position:0 -572px}.flag.cy{background-position:-16px 0}.flag.cz{background-position:-16px -11px}.flag.de{background-position:-16px -22px}.flag.dj{background-position:-16px -33px}.flag.dk{background-position:-16px -44px}.flag.dm{background-position:-16px -55px}.flag.do{background-position:-16px -66px}.flag.dz{background-position:-16px -77px}.flag.ec{background-position:-16px -88px}.flag.ee{background-position:-16px -99px}.flag.eg{background-position:-16px -110px}.flag.eh{background-position:-16px -121px}.flag.england{background-position:-16px -132px}.flag.er{background-position:-16px -143px}.flag.es{background-position:-16px -154px}.flag.et{background-position:-16px -165px}.flag.eu{background-position:-16px -176px}.flag.fam{background-position:-16px -187px}.flag.fi{background-position:-16px -198px}.flag.fj{background-position:-16px -209px}.flag.fk{background-position:-16px -220px}.flag.fm{background-position:-16px -231px}.flag.fo{background-position:-16px -242px}.flag.fr{background-position:-16px -253px}.flag.ga{background-position:-16px -264px}.flag.gb{background-position:-16px -275px}.flag.gd{background-position:-16px -286px}.flag.ge{background-position:-16px -297px}.flag.gf{background-position:-16px -308px}.flag.gh{background-position:-16px -319px}.flag.gi{background-position:-16px -330px}.flag.gl{background-position:-16px -341px}.flag.gm{background-position:-16px -352px}.flag.gn{background-position:-16px -363px}.flag.gp{background-position:-16px -374px}.flag.gq{background-position:-16px -385px}.flag.gr{background-position:-16px -396px}.flag.gs{background-position:-16px -407px}.flag.gt{background-position:-16px -418px}.flag.gu{background-position:-16px -429px}.flag.gw{background-position:-16px -440px}.flag.gy{background-position:-16px -451px}.flag.hk{background-position:-16px -462px}.flag.hm{background-position:-16px -473px}.flag.hn{background-position:-16px -484px}.flag.hr{background-position:-16px -495px}.flag.ht{background-position:-16px -506px}.flag.hu{background-position:-16px -517px}.flag.id{background-position:-16px -528px}.flag.ie{background-position:-16px -539px}.flag.il{background-position:-16px -550px}.flag.in{background-position:-16px -561px}.flag.io{background-position:-16px -572px}.flag.iq{background-position:-32px 0}.flag.ir{background-position:-32px -11px}.flag.is{background-position:-32px -22px}.flag.it{background-position:-32px -33px}.flag.jm{background-position:-32px -44px}.flag.jo{background-position:-32px -55px}.flag.jp{background-position:-32px -66px}.flag.ke{background-position:-32px -77px}.flag.kg{background-position:-32px -88px}.flag.kh{background-position:-32px -99px}.flag.ki{background-position:-32px -110px}.flag.km{background-position:-32px -121px}.flag.kn{background-position:-32px -132px}.flag.kp{background-position:-32px -143px}.flag.kr{background-position:-32px -154px}.flag.kw{background-position:-32px -165px}.flag.ky{background-position:-32px -176px}.flag.kz{background-position:-32px -187px}.flag.la{background-position:-32px -198px}.flag.lb{background-position:-32px -209px}.flag.lc{background-position:-32px -220px}.flag.li{background-position:-32px -231px}.flag.lr{background-position:-32px -242px}.flag.lk{background-position:-32px -253px}.flag.ls{background-position:-32px -264px}.flag.lt{background-position:-32px -275px}.flag.lu{background-position:-32px -286px}.flag.lv{background-position:-32px -297px}.flag.ly{background-position:-32px -308px}.flag.ma{background-position:-32px -319px}.flag.mc{background-position:-32px -330px}.flag.md{background-position:-32px -341px}.flag.me{background-position:-32px -352px}.flag.mg{background-position:-32px -363px}.flag.mh{background-position:-32px -374px}.flag.mk{background-position:-32px -385px}.flag.ml{background-position:-32px -396px}.flag.mm{background-position:-32px -407px}.flag.mn{background-position:-32px -418px}.flag.mo{background-position:-32px -429px}.flag.mp{background-position:-32px -440px}.flag.mq{background-position:-32px -451px}.flag.mr{background-position:-32px -462px}.flag.ms{background-position:-32px -473px}.flag.mt{background-position:-32px -484px}.flag.mu{background-position:-32px -495px}.flag.mv{background-position:-32px -506px}.flag.mw{background-position:-32px -517px}.flag.mx{background-position:-32px -528px}.flag.my{background-position:-32px -539px}.flag.mz{background-position:-32px -550px}.flag.na{background-position:-32px -561px}.flag.nc{background-position:-32px -572px}.flag.ne{background-position:-48px 0}.flag.nf{background-position:-48px -11px}.flag.ng{background-position:-48px -22px}.flag.ni{background-position:-48px -33px}.flag.nl{background-position:-48px -44px}.flag.no{background-position:-48px -55px}.flag.np{background-position:-48px -66px}.flag.nr{background-position:-48px -77px}.flag.nu{background-position:-48px -88px}.flag.nz{background-position:-48px -99px}.flag.om{background-position:-48px -110px}.flag.pa{background-position:-48px -121px}.flag.pe{background-position:-48px -132px}.flag.pf{background-position:-48px -143px}.flag.pg{background-position:-48px -154px}.flag.ph{background-position:-48px -165px}.flag.pk{background-position:-48px -176px}.flag.pl{background-position:-48px -187px}.flag.pm{background-position:-48px -198px}.flag.pn{background-position:-48px -209px}.flag.pr{background-position:-48px -220px}.flag.ps{background-position:-48px -231px}.flag.pt{background-position:-48px -242px}.flag.pw{background-position:-48px -253px}.flag.py{background-position:-48px -264px}.flag.qa{background-position:-48px -275px}.flag.re{background-position:-48px -286px}.flag.ro{background-position:-48px -297px}.flag.rs{background-position:-48px -308px}.flag.ru{background-position:-48px -319px}.flag.rw{background-position:-48px -330px}.flag.sa{background-position:-48px -341px}.flag.sb{background-position:-48px -352px}.flag.sc{background-position:-48px -363px}.flag.scotland{background-position:-48px -374px}.flag.sd{background-position:-48px -385px}.flag.se{background-position:-48px -396px}.flag.sg{background-position:-48px -407px}.flag.sh{background-position:-48px -418px}.flag.si{background-position:-48px -429px}.flag.sj{background-position:-48px -440px}.flag.sk{background-position:-48px -451px}.flag.sl{background-position:-48px -462px}.flag.sm{background-position:-48px -473px}.flag.sn{background-position:-48px -484px}.flag.so{background-position:-48px -495px}.flag.sr{background-position:-48px -506px}.flag.st{background-position:-48px -517px}.flag.sv{background-position:-48px -528px}.flag.sy{background-position:-48px -539px}.flag.sz{background-position:-48px -550px}.flag.tc{background-position:-48px -561px}.flag.td{background-position:-48px -572px}.flag.tf{background-position:-64px 0}.flag.tg{background-position:-64px -11px}.flag.th{background-position:-64px -22px}.flag.tj{background-position:-64px -33px}.flag.tk{background-position:-64px -44px}.flag.tl{background-position:-64px -55px}.flag.tm{background-position:-64px -66px}.flag.tn{background-position:-64px -77px}.flag.to{background-position:-64px -88px}.flag.tr{background-position:-64px -99px}.flag.tt{background-position:-64px -110px}.flag.tv{background-position:-64px -121px}.flag.tw{background-position:-64px -132px}.flag.tz{background-position:-64px -143px}.flag.ua{background-position:-64px -154px}.flag.ug{background-position:-64px -165px}.flag.um{background-position:-64px -176px}.flag.us{background-position:-64px -187px}.flag.uy{background-position:-64px -198px}.flag.uz{background-position:-64px -209px}.flag.va{background-position:-64px -220px}.flag.vc{background-position:-64px -231px}.flag.ve{background-position:-64px -242px}.flag.vg{background-position:-64px -253px}.flag.vi{background-position:-64px -264px}.flag.vn{background-position:-64px -275px}.flag.vu{background-position:-64px -286px}.flag.wales{background-position:-64px -297px}.flag.wf{background-position:-64px -308px}.flag.ws{background-position:-64px -319px}.flag.ye{background-position:-64px -330px}.flag.yt{background-position:-64px -341px}.flag.za{background-position:-64px -352px}.flag.zm{background-position:-64px -363px}.flag.zw{background-position:-64px -374px}

/*! MYP_SCRIPT: /scripts/templates/page-maker/css/media-queries.css*/
@media only screen and (min-width: 768px) {

    .sort-lable-container {
        align-items: center;
    }

    #ribbon-select-sort-label select {
        width: 268px;
    }

    .filters-icons {
        margin: 0 20px 0 0;
    }

    .dropdown-content {
        left: 0;
    }

    .text-in-card-preview {
        position: relative;
    }

    .modal {
        min-width: 500px;
        width: 500px;
    }

    .my-acc-details-table {
        margin: 0 16px 0 18px;
    }

    .banks-container .bank-item {
        margin: 0 20px 0 0;
    }

    .bank-item button {
        width: 130px;
    }

}

@media only screen and (min-width: 767px) {
    .navbar-content {
        position: fixed;
    }
}

@media only screen and (min-width: 992px) {
    .ex-icon {
        display: none !important;
    }

    .trans-found-container {
        display: unset;
    }

    .modal-open {
        overflow: auto;
    }

    .navbar-content {
        position: fixed;
    }

    .alerts-container {
        margin-left: 10px;
        padding-right: 0;
    }

    .credit-date-container {
        max-width: 85%;
    }

    .alert-warning {
        border-color: var(--yellow);
    }

    /*.modal-lg { width: 1000px !important; }*/
    .btn_left {
        padding-right: 6px;
    }

    .btn_right {
        padding-left: 6px;
    }

    .btn_left .selectwrap:after {
        line-height: 32px;
        top: 28px;
        right: 10px;
    }

    .btn_right .selectwrap:after {
        top: 32px;
        right: 20px;
    }

    .form-control.selectwrap:after {
        top: 3px;
        left: auto;
        right: 0;
    }

    body.rtl .form-control.selectwrap:after {
        left: 10px;
        right: auto;
    }

    .modal-dialog {
        width: 100%;
        margin: 0;
        padding: 15px;
    }

    filters .modal-dialog {
        padding: 0;
    }

    .form-group.has-search input {
        background: var(--white) !important;
        border-color: var(--form-white);
    }

    .popover.right {
        margin-left: -100px;
    }

    .selectwrapTF:after {
        top: 2px;
        right: 0px;
        pointer-events: none;
        z-index: 2;
    }

    .modal {
        bottom: auto;
        padding: 0;
        background-color: var(--white);
        border: 1px solid #f0f0f0 !important;
        border-radius: 6px;
        box-shadow: none !important;
        background-clip: padding-box;
    }

    .modal button.close-info-modal {
        position: absolute;
        -webkit-appearance: none;
        right: -130px;
        width: 51px;
        height: 51px;
        opacity: 1 !important;
    }

    .modal button.close-action-modal {
        position: inherit;
        right: 0;
        opacity: 1 !important;
    }

    .modal .close-info-modal svg {
        width: 51px;
        height: 51px;
        fill: var(--light-grey);
        stroke: var(--light-grey);
    }

    .modal .close-action-modal svg {
        width: 39px;
        height: 39px;
    }

    .modal-action-close {
        width: auto !important;
        height: auto !important;
    }

    .margin-form-group {
        margin-right: 20px;
    }

    .popover.right {
        position: absolute;
        left: 0;
        margin-left: 0px;
        width: 430px !important;
    }

    .popover.top {
        position: absolute;
        margin-top: -10px;
        left: 0;
        width: 300px !important;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1022px) {
    .trans-found-container {
        display: flex;
        flex-direction: column;
        width: 100% !important;
        margin: 0 auto;
    }

    .trans-found-container > div {
        display: flex;
        flex-direction: column;
        width: 100% !important;
        margin: 0 auto !important;

    }
}


@media only screen and (min-width: 1200px) {
    .banks-container .bank-item:not(:nth-child(3n)) {
        margin: 0 20px 0 0;
    }
}

@media only screen and (min-width: 1023px) {

}

@media only screen and (min-width: 1400px) {
}

@media only screen and (min-width: 1500px) {
}

@media only screen and (min-width: 1600px) {
    .table-order-list > tbody > tr > td, .table-order-list > tbody > tr > th, .table-order-list > tfoot > tr > td, .table-order-list > tfoot > tr > th, .table-order-list > thead > tr > td,
    .table-order-list > thead > tr > th {
        padding: 8px 25px 8px 8px;
    }
}

@media only screen and (min-width: 1800px) {
    .table-order-list > tbody > tr > td, .table-order-list > tbody > tr > th, .table-order-list > tfoot > tr > td, .table-order-list > tfoot > tr > th, .table-order-list > thead > tr > td,
    .table-order-list > thead > tr > th {
        padding: 8px 35px 8px 8px;
    }

    .table-open-order > tbody > tr > td, .table-open-order > tbody > tr > th, .table-open-order > tfoot > tr > td, .table-open-order > tfoot > tr > th, .table-open-order > thead > tr > td,
    .table-open-order > thead > tr > th {
        padding: 8px 29px 8px 8px;
    }

    .table-request td, .table-request th {
        padding: 8px 29px 8px 8px !important;
    }
}

/* between */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .table-open-order > tbody > tr > td, .table-open-order > tbody > tr > th, .table-open-order > tfoot > tr > td, .table-open-order > tfoot > tr > th, .table-open-order > thead > tr > td,
    .table-open-order > thead > tr > th {
        padding: 8px 60px 8px 8px;
    }
}

@media only screen and (min-width: 1023px) and (max-width: 1400px) {
    .trans-found-container {
        display: flex;
        flex-direction: column;
        width: 100% !important;
        margin: 0 auto;
    }

    .trans-found-container > div {
        display: flex;
        flex-direction: column;
        width: 100% !important;
        margin: 0 auto !important;

    }

    .my-profile-container {
        display: flex;
    }

    .my-profile-sub-container {
        margin: 0 auto;
    }

    .my-profile-sub-container > div {
        width: 100%;
    }
}

@media only screen and (min-width: 1023px) and (max-width: 1300px) {
    .dashboard-container, .dashboard-card-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .dashboard-container > div {
        width: 80%;
    }

    .dashboard-card-container > div {
        width: 100%;
    }

}


@media only screen and (min-width: 1300px) and (max-width: 1650px) {
    .dashboard-container, .dashboard-card-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .dashboard-container > div {
        width: 60%;
    }

    .dashboard-card-container > div {
        width: 100%;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
}

@media only screen and (min-width: 991px) and (max-width: 1600px) {
    .market-amounts {
        display: flex;
        flex-wrap: wrap;
    }

    .market-amounts > div {
        width: 100%;
        padding: 0 15px;

    }

    .list-row .form-group:not(:last-child) {
        width: 33%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .selectwrap:after {
        top: 2px;
        right: 16px;
    }
}

@media only screen and (min-width: 600px) and (max-width: 768px) {
}

/* max-width */
@media only screen and (max-width: 1400px) {
    .trans-found-main-container {
        width: 100%;
        margin: 0;
    }

    .trans-found-main-item {
        width: 50%;
    }

    .sort-by {
        margin: 0 0 10px 0;
    }
}

@media only screen and (max-width: 1200px) {
}

@media only screen and (max-width: 991px) {

    .modal {
        background-color: var(--white);
        border: 1px solid #f0f0f0 !important;
        border-radius: 6px;
        box-shadow: none !important;
        background-clip: padding-box;
    }

    .exchange-icon {
        display: block;
        position: absolute;
        top: 4px;
        right: 15px;
    }

    .modal button.close-info-modal {
        position: absolute;
        -webkit-appearance: none;
        top: -60px;
        right: 0;
        width: 30px !important;
        height: 30px !important;
        opacity: 1 !important;
    }

    .modal button.close-info-modal svg {
        width: 30px;
        height: 30px;
        fill: var(--light-grey);
        stroke: var(--light-grey);
    }

    .popover-content {
        padding: 9px 14px;
        width: 95%;
        margin: 0 15px;
        position: fixed;
        left: 0 !important;
        background: var(--white);
        border-radius: 4px;
        border: 1px solid var(--form-white);
    }
}

@media only screen and (max-width: 991px) and (min-width: 768px) {

    .logout-icon {
        margin-left: 10px;
        margin-top: 50%;
        transform: translate(0, -50%);
    }

    .btn-save-mobile {
        font-size: 14px;
        color: var(--white);
    }

    .btnPop.saved {
        position: absolute;
        bottom: 15px;
        width: 30%;
        left: 50%;
        background: var(--aqua-blue) !important;
        border: 0;
        border-radius: 4px !important;
        padding: 14px 4px;
        margin-bottom: 0;
        white-space: nowrap;
        vertical-align: middle;
        transform: translateX(-50%);
    }

    .form-area-profile {
        padding-top: 10px;
    }

    .btnPop.closed {
        position: absolute;
        top: 10px;
        width: 30px;
        right: 32px;
        background: transparent !important;
        border: 0;
        border-radius: 0 !important;
        padding: 7px 4px;
        margin-bottom: 0;
        white-space: nowrap;
        vertical-align: middle;
    }

    .btnPop.closed svg {
        fill: var(--dark-grey);
        width: 30px;
        height: 30px;
    }

    .popovericons .fa-check-circle, .popovericons .fa-times-circle {
        font-size: 30px;
        color: var(--white);
    }

    .popover-content {
        top: 30%;
        height: 25%;
    }

}

@media only screen and (max-width: 767px) {

    body.login .main-login {
        padding: 20px;
    }

    .header-logo {
        max-width: calc(100% - 160px);
        overflow: hidden;
    }

    .icons-header {
        margin-right: 5px !important;
        min-width: 40px;
    }

    services-ip-filters .form-horizontal .form-group,
    services-api-authentication .form-horizontal .form-group {
        margin: 0;
    }

    services-ip-filters .form-horizontal .btn-blue {
        margin-left: 15px;
    }

    #filters-modal .modal-dialog {
        overflow: auto;
    }

    .navbar-header {
        background-color: var(--white);
        border-bottom: 1px solid var(--form-white);
        width: 100%;
    }

    .navbar-toggle {
        padding: 16px 10px;
        background-color: var(--white);
        color: var(--black-text);
    }

    .navbar-inverse .navbar-toggle:hover,
    .navbar-inverse .navbar-toggle:focus {
        background-color: var(--white);
        -moz-box-shadow: none;
        box-shadow: none;
    }

    .clip-list-2 {
        height: 60px;
    }

    .clip-list-2:before {
        font-family: FontAwesome;
        content: "\f0c9";
        color: var(--black-text);
        font-size: 30px;
    }

    .main-navigation {
        top: 72px;
        background-color: var(--white) !important;
    }

    ul.main-navigation-menu > li {
        border: 0 none;
    }

    ul.main-navigation-menu > li a {
        border-bottom-color: transparent;
        border-top-color: transparent;
        border-bottom: 1px solid var(--form-white) !important;
        padding: 10px 10px;
    }

    .main-container {
        margin-top: 72px !important;
    }

    .top-padding {
        padding-top: 20px;
    }

    .table-responsive {
        width: 100%;
        margin-bottom: 15px;
        overflow-y: hidden;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        border: 1px solid transparent;
    }

    .btnTransFunds {
        width: 100% !important;
        height: 140px !important;
    }

    .selectwrap:after {
        top: 2px;
        right: 5px;
    }

    .popover-content {
        overflow-x: hidden;
        padding: 20px 14px 50px 14px;
        width: 100%;
        height: 100%;
        margin: 0;
        position: fixed;
        bottom: 0;
        left: 0 !important;
        background: rgba(251, 251, 251, 0.94);
        border-radius: 0;
        border: 1px solid var(--dark-grey);
        transition: .3s ease-in-out;
    }

    .btn-save-mobile {
        font-size: 14px;
        color: var(--white);
    }

    .btnPop.saved {
        position: absolute;
        bottom: 15px;
        width: 90%;
        left: 5%;
        right: 5%;
        background: var(--aqua-blue) !important;
        border: 0;
        border-radius: 4px !important;
        padding: 14px 4px;
        margin-bottom: 0;
        white-space: nowrap;
        vertical-align: middle;
    }

    .btnPop.closed {
        position: absolute;
        top: 10px;
        width: 30px;
        right: 32px;
        background: transparent !important;
        border: 0;
        border-radius: 0 !important;
        padding: 7px 4px;
        margin-bottom: 0;
        white-space: nowrap;
        vertical-align: middle;
    }

    .btnPop.closed svg {
        fill: var(--dark-grey);
        width: 30px;
        height: 30px;
    }

    .popovericons .fa-check-circle, .popovericons .fa-times-circle {
        font-size: 30px;
        color: var(--white);
    }

    .editFormTitle {
        font-size: 20px;
    }

    #myProfile .form-control {
        width: 100%;
        height: 50px;
        background-color: var(--white) !important;
        border: 1px solid var(--form-white) !important;
    }

    body.rtl #myProfile .form-control {
        text-align: right;
    }

    .from-collapse-2 {
        background: var(--modal-white);
        position: relative;
        padding-top: 10px;
        border-radius: 4px;
        border: 1px solid var(--form-white);
        width: 100%;
    }

    .dropdown-menu.list {
        position: fixed;
        top: 0;
        padding: 0;
        margin: 0;
        text-align: left;
        background-color: var(--modal-white);
        background-clip: padding-box;
        border: 1px solid var(--form-white);
        border: 1px solid transparent;
        border-radius: 0;
        box-shadow: none;
        width: 100%;
        height: 100%;
        overflow-y: scroll;
    }

    .modal-backdrop.fade.in {
        opacity: 0.94;
        filter: alpha(opacity=94);
        background: var(--modal-white);
    }

    .modal.verifyPhone {
        top: 0 !important;
        left: 0;
        width: 100%;
        background: transparent !important;
    }

    .modal-content {
        position: relative;
        background-color: transparent;
        background-clip: padding-box;
        border: none !important;
        border-radius: 6px;
        outline: 0;
        box-shadow: none !important;
    }

    .modal button.close-info-modal {
        position: absolute;
        -webkit-appearance: none;
        top: 0;
        right: 0;
        width: 30px !important;
        height: 30px !important;
        opacity: 1 !important;
        z-index: 999;
    }

    .uib-datepicker-popup.dropdown-menu {
        position: fixed;
        top: 58px !important;
        width: 100vw;
        left: 0 !important;
        border: 1px solid transparent;
        border-radius: 0;
        box-shadow: none;
    }

    .uib-datepicker-popup.dropdown-menu table {
        width: 100%;
        font-size: 10pt;
    }

    .uib-datepicker-popup.dropdown-menu table thead {
        display: table-header-group;
        vertical-align: middle;
        border-color: transparent;
        border: 0;
        font-size: 16px;
        color: var(--aqua-blue) !important;
    }

    .uib-datepicker-popup.dropdown-menu table thead tr th small {
        color: var(--aqua-blue) !important;
    }

    .table.line tr {
        border-bottom: 1px solid transparent !important;
    }

    .uib-datepicker .btn-default strong {
        color: var(--aqua-blue);
        font-size: 16px;
    }

    .uib-datepicker button i {
        color: var(--aqua-blue);
    }

    .modal.fade.in {
        top: 10px;
        background: rgba(255, 255, 255, 0.9);
        border: 0 !important;
        width: 95% !important;
        left: 10px;
        position: fixed;
        overflow: auto !important;
    }

    #userDocsModal {
        left: 10px !important;
    }

    .user-modal-data.fade.in {
        width: 100% !important;
    }

    .progress {
        width: 100%;
        height: 20px;
    }

    .exchange-icon {
        display: block;
        position: absolute;
        top: 4px;
        right: 15px;
    }

    .logout-icon {
        display: block;
        position: absolute;
        top: 21px;
        left: 50px;
    }

    #profile .col-md-6 .col-sm-12 {
        padding: 0;
    }

    .banks-container .bank-item, .banks-container .bank-item:nth-child(3n) {
        margin: 0 20px 0 0 !important;
    }

    .my-account-warp {
        white-space: pre-wrap;
        max-width: 200px;
    }

    /*my account*/
    .my-acc-details-table {
        padding: 0 16px 0 18px;
    }

    .my-acc-details-table tr:not(.table-hr) {
        display: flex;
        justify-content: space-between;
    }

    .my-account-ellipsis {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        max-width: 190px;
    }
}

@media only screen and (max-width: 599px) {
}

@media only screen and (max-width: 479px) {
}

@media only screen and (max-width: 400px) {
}

@media only screen and (max-width: 360px) {
    .banks-container .bank-item, .banks-container .bank-item:nth-child(3n) {
        margin: 0 10px 0 0 !important;
    }
}


/*! MYP_SCRIPT: /scripts/templates/page-maker/css/dropdown.css*/
.dropdown-menu.custom-coins {
    padding: 5px 10px;
    background-color: var(--modal-white);
    border: 1px solid var(--form-white);
    border-radius: 4px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

.dropdown > button {
    padding: 6px 12px;
}

.dropdown-menu.custom-coins .dropdown-title {
    color: var(--black-text);
    font-weight: 600;
}

.dropdown-menu.custom-coins .dropdown-choice a {
    cursor: pointer;
    color: var(--black-text);
    text-decoration: none;
}

.dropdown-menu.custom-coins .dropdown-title,
.dropdown-menu.custom-coins .dropdown-choice {
    padding: 0 10px;
}

.dropdown-menu.custom-coins .dropdown-choice:hover {
    background: var(--aqua-blue) !important;
}

.dropdown-menu.custom-coins .dropdown-choice:hover a {
    color: var(--white);
}

.dropdown-menu {
    padding: 5px 0;
    margin: 2px 0 0;
    text-align: left;
    background-color: var(--modal-white);
    background-clip: padding-box;
    border: 1px solid var(--form-white);
    border-radius: 4px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    width: 100%;
}

.dropdown-menu.list {
    width: auto;
    height: 300px;
    overflow-y: scroll;
}

.drop-down-checkbox-list-box .dropdown-menu.list {
    width: 100%;
}

.dropdown-header {
    display: block;
    padding: 3px 20px;
    font-size: 12px;
    line-height: 1.42857143;
    color: #777;
    white-space: nowrap;
}

.dropdown-menu .divider {
    height: 1px;
    margin: 9px 0;
    overflow: hidden;
    background-color: #e5e5e5;
}

.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover,
.dropdown-menu > .active > a, .dropdown-menu > .active > a:focus, .dropdown-menu > .active > a:hover {
    color: var(--white);
    filter: none;
    background: var(--aqua-blue) none repeat-x;
}

.navbar-inverse .nav li.dropdown.open > .dropdown-toggle,
.navbar-inverse .nav li.dropdown.active > .dropdown-toggle,
.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle {
    background: var(--white) !important;
    color: #333 !important;
    text-shadow: none !important;
    transition: .3s !important;
}

.searchIcon {
    background-image: url('/images/search.svg');
    height: 12px;
    width: 12px;
    z-index: 9999;
    position: absolute;
    top: 12px;
    left: 24px;
}


/*! MYP_SCRIPT: /scripts/templates/page-maker/css/alerts.css*/
.alert-warning {
    background-image: none !important;
    filter: none !important;
    background-repeat: repeat-x;
    border-color: var(--yellow);
}

.alert-warning svg#close-popup {
    width: 20px;
    height: 20px;
    fill: var(--yellow);
}

.alert-warning .close {
    float: right;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    color: var(--yellow);
    text-shadow: 0 1px 0 var(--white);
    filter: none !important;
    opacity: 1;
}

.alert-warning-yellow {
    font-weight: 400;
    color: var(--poop);
    background-color: var(--off-white);
    border-color: var(--yellow-orange) !important;
    font-style: italic;
}

.alert-warning-yellow * {
    color: var(--poop) !important;
    padding: 0 !important;
    margin: 0;
}

#myProfile .alert {
    margin-top: 0;
}

h4.alert-heading {
    font-family: var(--main-font);
    font-weight: 500;
    font-size: 20px;
    color: var(--alert-yellow);
}

h4.alert-heading i {
    display: none;
}

.alert-container {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}

.alert-container span {
    max-width: 100%;
    word-break: break-word;
}

.alert {
    padding: 8px 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.alert-platform-green {
    font-weight: 400;
    font-style: italic;
    color: var(--greenish-teal) !important;
    background-color: #e6fff1 !important;
    border-color: var(--greenish-teal) !important;
}

.alert-platform-red {
    font-weight: 400;
    font-style: italic;
    color: #ff4d8b !important;
    background-color: #ffedf3 !important;
    border-color: #ff4d8b !important;
}

.alert-platform-green .close,
.alert-platform-red .close {
    float: right;
    font-size: 14px;
    font-weight: 700;
    text-shadow: none;
    filter: none !important;
    opacity: 1 !important;
    color: inherit;
}

.alert-dismissable .close, .alert-dismissible .close {
    position: relative;
    top: 3px !important;
    right: 0 !important;
    color: inherit;
}

.alert-platform-yellow {
    background-image: none;
    background: var(--aqua-yellow-alert);
    filter: none;
    border-left: 4px solid #f5b300;
    border-right: 1px solid #f5b300;
    border-top: 1px solid #f5b300;
    border-bottom: 1px solid #f5b300;
    color: #f5b300;
}

.alert-platform-yellow .close {
    float: right;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: 1;
}

.alert-platform-yellow svg#close-popup {
    width: 14px;
    height: 14px;
    fill: #f5b300;
    opacity: 1;
}

.messages-alert {
    word-break: break-word;
}

.alert-platform-yellow .messages-alert {
    /*padding-top: 20px;*/
    padding-right: 20px;
}

.messages-alert p {
    word-break: break-word;
}

.modal button.close.alert {
    position: absolute;
    -webkit-appearance: none;
    padding: 0;
    cursor: pointer;
    background: 0 0;
    border: 0;
    right: -130px;
    width: 51px !important;
    height: 32px !important;
    opacity: 1 !important;
}

/*! MYP_SCRIPT: /scripts/templates/page-maker/css/card.css*/
.cards-list {
    padding: 5px 0;
}

.card-view {
    padding-top: 15px;
}

.card-view .row {
    margin-right: 0;
    margin-left: 0;
}

.card {
    position: relative;
}

.register-user {
    font-family: Ubuntu;
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    color: #ffffff;
    line-height: 2.14;
    letter-spacing: normal;
    text-align: center;
    width: 150px;
    height: 36px;
    border-radius: 4px;
    background-color: var(--greenish-teal);
    border: none;
}

.errorFix {
    margin-left: 42%;
}

.validation {
    width: max-content !important;
    font-size: 13px;
    font-style: italic;
    color: var(--white);
    background: var(--red);
    padding: 2px 10px 6px 10px;
    border-bottom-left-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
}

.defaultRole {
    height: 20px !important;
    padding-left: 30px;
}

input[type=checkbox].modal-cb,
input[type=checkbox].modal-cb-op {
    display: none;
}

input[type=checkbox].modal-cb + label,
input[type=checkbox].modal-cb-op:checked + label {
    background: url('/images/checkbox_before.svg') no-repeat;
    height: 20px;
    width: 30px;
}

input[type=checkbox].modal-cb:checked + label,
input[type=checkbox].modal-cb-op + label {
    background: url('/images/checkbox_after.svg') no-repeat;
    height: 20px;
    width: 30px;
}

input[type=checkbox].modal-cb:disabled + label,
input[type=checkbox].modal-cb-op:disabled + label {
    background: url('/images/checkbox_after.svg') no-repeat;
    height: 20px;
    width: 30px;
}

.card-container {
    padding: 5px 0;
}

.card:hover {
    background-color: var(--ice-blue);
}

.card .card-more-options,
.card:hover .card-balance {
    display: none;
}

.dropdown,
.card-action-box,
.card:hover .card-more-options {
    display: inline-block;
}

.card-preview {
    display: flex;

    height: 40px;
    margin: 0 0 20px;
}

.text-in-card-preview {
    display: flex;
}

.card-preview:not(.collapsed) {

}

.card-preview:not(.collapsed) .text-in-card-preview {

}

.textual-data-in-details {
    padding-bottom: 5px;
}

svg.card-more-options {
    fill: var(--warm-grey);
    height: 16px;
    width: 22px;
}

svg.card-more-options:hover,
svg.card-more-options:focus {
    fill: var(--aqua-blue);
}

.credit-type {
    border: solid 1px var(--white-six);
    background-color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

.credit-type-medium {
    width: 54px;
    height: 36px;
    border-radius: 4px;
    margin: 0 5px 0 0;
}

.credit-type img {
    max-width: 100%;
    max-height: 100%;
}

.credit-type-small img:before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: var(--white) url("../images/noCard_s.jpg") no-repeat center;
}

.credit-type-small {
    width: 40px;
    height: 24px;
    border-radius: 2px;
    position: absolute;
    right: 13px;
}

.credit-form > div.form-group {
    display: flex;
    flex-direction: column;
    align-self: baseline;
}

.loading-cards-list {
    opacity: 0.9;
}

.loadingOpacity {
    opacity: 0.5 !important;
}

.margin-top-30 {
    margin-top: 30px;
}

.action-success-container {
    background-color: rgba(237, 255, 246, 0.9) !important;
    color: var(--dark-green-blue);
}

.action-failed-container {
    background-color: rgba(255, 242, 247, 0.9) !important;
    color: var(--ruby);
}

.card-alert-action {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-weight: normal;
    transition: opacity 0.5s linear;
    z-index: 2;
}

.card-alert-action.ng-enter {
    opacity: 0;
}

.card-alert-action.ng-enter.ng-enter-active {
    opacity: 1 !important;
}

.card-alert-action.ng-leave {
    opacity: 1;
}

.card-alert-action.ng-leave.ng-leave-active {
    opacity: 0;
}


.dropdown, .dropdown-mob {
    position: relative;
}

.dropdown-content, .dropdown-mob-content {
    display: none;
    position: absolute;
    left: calc(100% - 158px);
    top: 100%;
    min-width: 180px;
    background-color: var(--white);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
    z-index: 1;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.more-options-item {
    cursor: pointer;
    font-family: Ubuntu;
    font-size: 14px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 2.14;
    letter-spacing: normal;
    text-align: left;
    color: var(--greyish-brown);
    padding: 0 8px;
}

.more-options-item:hover {
    background-color: var(--aqua-blue);
    color: var(--white)
}

.top-border {
    border-top: 1px solid var(--form-white);
}

.bottom-border {
    border-bottom: 1px solid var(--form-white);
}

.drop-down-checkbox-list-box,
.filter-type-date {
    width: 42% !important;
}

.date-filter-box .uib-datepicker-popup {
    width: initial;
}

#filters-modal {
    display: inline-table;
    padding: 0 !important;
}

#filters-modal .modal-dialog {
    height: 70vh;
}

.filter-dates-inputs-box {
    display: flex;
    align-items: center;
}

.filter-dates-inputs-box #from-date {
    margin-right: 40px;
}

.choose-filter-box {
    padding: 0 15px;
}

.choose-filter-box:hover {
    background-color: var(--ice-blue);
    border-bottom: 1px solid var(--white-six);
}

.main-filter-box {
    padding: 20px 0;
}

.choose-filter-box {
    border-bottom: 1px solid var(--white-six);
}

.pagination-row {
    height: 60px;
    display: flex;
    align-items: center;
}

.optional-filters-box {
    border-bottom: 1px solid var(--white-six) !important;
    border-left: none !important;
    padding-bottom: 10px;
}

.optional-filter {
    color: var(--aqua-blue);
    cursor: pointer;
    margin: 0 5px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.search-icon-input {
    background: url(../images/search.svg) no-repeat scroll 7px 7px;
    padding-left: 30px;
}

.filter-text-label {
    width: 94%;
}

.filter-text-input {
    background: url(../images/delete_file.png) no-repeat 415px 12px, url(../images/search.svg) no-repeat 5px 10px;
}

.search-input {
    background: url(../images/search.svg) no-repeat 5px 10px;
}

.search-filter {
    background: url(../images/delete_file.png) no-repeat 150px 12px, url(../images/search.svg) no-repeat 5px 10px;
}

.search-filter,
.filter-text-input,
.search-input {
    background-size: 12px 12px, 16px 16px;
    padding: 6px 0 6px 30px !important;
}

.date-icon-input {
    background: url(../images/calendar.svg) no-repeat 5px 10px;
    background-size: 16px 16px;
    padding: 6px 0 6px 30px !important;
}

.filters-modal-box {
    position: initial;
    overflow: auto;
    height: 78%;
    padding: 0;
}

.filters-modal-box::-webkit-scrollbar {
    width: 5px;
    background-color: transparent;
}

.filters-modal-box::-webkit-scrollbar-track {
    width: 5px;
    background-color: transparent;
}

.filters-modal-box::-webkit-scrollbar-thumb {
    width: 5px;
    border-radius: 10px;
    background-color: var(--light-grey);
}

.filter-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.filter-type-title {
    text-transform: capitalize;
}

.remove-filter {
    background: url(../images/trash.svg) no-repeat;
    height: 13px;
    width: 14px;
    float: right;
    cursor: pointer;
}

.remove-filter:hover { /* todo replace to svg usage */
    background: url(../images/trash.svg) no-repeat;
    fill: var(--aqua-blue);
}

.clear-all-filters-box {
    padding-bottom: 15px;
    text-align: left;
}

.clear-all-filters {
    color: var(--pink-red);
    cursor: pointer;
    text-decoration: underline;
}

.drop-down-checkbox-item {
    display: flex;
    cursor: pointer;
    align-items: center;
    margin: 10px 10px;
    padding: 2px;
}

.loading-cards-list {
    opacity: 0.2;
}

.loadingOpacity {
    opacity: 0.5 !important;
}

.select-number-of-results-for-page {
    border-radius: 4px !important;
    width: 60px !important;
    float: right;
    padding: 6px 12px;
    outline: none;
    background: url(../images/arrow.png) no-repeat right;
    -webkit-appearance: none;
    background-position-x: 38px;
    background-position-y: 13px;
}

.select-number-of-results-for-page option {
    color: var(--dark-grey) !important;
    background: var(--white) !important;
}

.number-of-results-for-page-box {
    position: relative;
}

.go-to-page-text {
    margin: 0 12px;
}

.go-to-page {
    width: 60px;
}

.submit-go-to-page {
    color: inherit;
    font-size: 22px;
    margin-left: 10px;
}

.no-results-box {
    text-align: center;
    margin: 40px 0;
}

.white-tooltip + .tooltip > .tooltip-inner {
    background-color: white;
    color: #444;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
}

.tooltip > .tooltip-arrow {
    border-top-color: white !important; /* black */

}

.header-div-actions:hover {
    background-color: var(--ice-blue);
}

.selected-option-underscore {
    border-bottom: 2px solid var(--aqua-blue);
    padding: 0;
    text-align: center;
}

.not-selected-option-underscore {
    border-bottom: 2px solid #888888;
    padding: 0;
    text-align: center;
}

.not-selected-label {
    color: var(--grey-blue);
    cursor: pointer;
}

.tab-title {
    font-size: 14px;
    padding: 5px;
}

.header-sub-left-box {
    cursor: pointer;
    text-align: center;
    margin-left: 5px;
    padding: 0 5px !important;
}

.selected-charts-label {
    color: var(--aqua-blue) !important;
}


.header-div-actions:hover {
    background-color: var(--ice-blue);
}

.scrollable-modules {
    height: 524px;
    overflow-y: scroll;
    overflow-x: hidden;
}

/*! MYP_SCRIPT: /scripts/templates/page-maker/css/ribbon.css*/
.exchange-main-page-title {
    color: var(--aqua-blue);
    font-size: 21px;
    padding-bottom: 20px;
}

.ribbon-sort-icon {
    fill: var(--form-white);
    height: 22px;
    width: 22px;
    margin: 0 0 0 10px;
}

.ribbon-sort-icon#down {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.ribbon-active-icon {
    fill: var(--aqua-blue) !important;
}

.ribbon-collapse-icon {
    fill: var(--light-grey);
    height: 18px;
    width: 18px;
    margin: 0 5px;
}

.ribbon-sort-icon,
.ribbon-collapse-icon {
    cursor: pointer;
    vertical-align: middle;
}

#ribbon-export-img {
    background-image: url('/images/export_data.svg');
    background-repeat: no-repeat;
    cursor: pointer;
    height: 30px;
    width: 31px;
    margin-right: 20px;
}

#ribbon-export-img-mobile {
    background-image: url('/images/export_data.svg');
    background-repeat: no-repeat;
    cursor: pointer;
    height: 23px;
    width: 25px;
    margin-right: 20px;
}

#ribbon-export-img .export-main-option {
    cursor: default !important;
    line-height: 2.14;
    text-align: left;
    padding: 0 8px;
}

#ribbon-select-sort-label select {
    background: url('../images/arrow.png') no-repeat right;
    -webkit-appearance: none;
    background-position-x: 244px;
}

#ribbon-add-filter {
    color: var(--aqua-blue);
    cursor: pointer;
}

#ribbon-container {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--form-white) !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

.ribbon-row {
    display: flex;
    align-items: center;
    padding: 5px 0 10px 0;
}

#edit-existing-filters {
    height: 16px;
    width: 16px;
    fill: var(--aqua-blue);
    cursor: pointer;
}

.applied-filter {
    background-color: var(--aqua-blue);
    color: var(--white);
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 12px;
    margin-right: 10px;
    margin-bottom: 5px;
}

.delete-ribbon-filter {
    height: 12px;
    width: 12px;
    cursor: pointer;
    fill: white;
}

.sort-by {
    display: flex;
    align-items: baseline;
}

.filters-icons {
    margin: 0 0 5px;
}

.sort-lable-container {
    align-items: baseline;
}

.sort-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}


.delete-search {
    position: absolute;
    height: 100%;
    right: 1px;
}

.delete-search,
.delete-search:hover {
    color: var(--opacity-white);
}

/*! MYP_SCRIPT: /scripts/templates/page-maker/css/panels.css*/
/* panel */
.panel-group .panel {
    margin-bottom: 30px;
    border-radius: 10px;
    box-shadow: none;
    border-color: var(--white-seven);

}

.panel-group .panel:hover {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.16);
}

.panel-group .panel.subpanel:hover {
    margin-bottom: 0;
    background-color: var(--white);
    border: 0 solid transparent;
    border-radius: 4px;
    box-shadow: none;
}

.panel-group .panel.subpaneltable:hover {
    background-color: var(--white);
    border-radius: 0;
    box-shadow: none;
}

.panel-default > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: transparent;
    padding: 0 15px;
}

.panel-default > .panel-heading {
    color: #333;
    background-color: var(--white);
    border-color: transparent;
    border-radius: 10px;
}

.panel-heading {
    background-color: transparent;
    background-image: none !important;
    background-repeat: repeat-x;
    border-bottom: 0 solid transparent;
    border-radius: 0;
    box-shadow: none;
    height: auto;
    min-height: 36px;
    padding-left: 15px;
    position: relative;
    font-size: 21px;
    color: var(--aqua-blue);
    text-decoration: none;
}

.panel-heading h4,
.panel-heading a {
    font-size: 21px;
    font-weight: 400;
    color: var(--aqua-blue);
    text-decoration: none;
}

.panel-body p {
    font-size: 14px;
    color: var(--greyish-brown);
    padding: 0 20px 0 10px;
}

.panel-body p span {
    font-size: 14px;
    font-weight: 500;
    color: var(--aqua-blue);
}

p span.greyish-brown {
    color: var(--greyish-brown);
}

.panel-title a i.fa-exclamation-circle {
    font-size: 14px;
    padding-right: 6px;
    color: var(--opacity-white);
    transform: rotate(180deg);
}

.panel-title a i.fa-angle-up {
    float: right;
    font-size: 26px;
    padding-right: 15px;
}

/*my account -strech width*/
.my-account-container {
    width: 100%;
}

.my-account-container p {
    padding: 0;
}

/*end my account -strech width*/
body.rtl .panel-title a i.fa {
    float: left;
    font-size: 26px;
    padding-left: 15px;
}

.panel-heading a.collapsed i.fa-angle-up {
    padding-left: 15px;
}

.collapsed i.fa-angle-up {
    transform: rotate(180deg) !important;
}

.collapsed .arrow-up {
    transform: rotate(90deg) !important;
}

.arrow-up {
    transform: rotate(-90deg) !important;
}

.documents-preview {
    display: none;
}

.collapsed .documents-preview {
    display: block;
}

.collapsed .documents-list {
    display: none;
}

/* panel */

/* subpanel */
.panel-default.subpanel > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: transparent;
}

.panel.subpanel {
    margin-bottom: 0;
    background-color: var(--white);
    border: 0 solid transparent;
    border-radius: 4px;
    box-shadow: none;
}

.row-selected {
    background-color: lightgrey !important;
}

.panel-heading.subpanel {
    font-family: var(--main-font);
    font-weight: 700;
    background-color: transparent;
    background-image: none !important;
    background-repeat: repeat-x;
    border-top: 0 solid transparent !important;
    border-bottom: 0 solid transparent;
    border-radius: 0;
    box-shadow: none;
    height: auto;
    min-height: 10px;
    padding: 0 15px !important;
    position: relative;
    font-size: 14px;
    color: var(--greyish-brown);
    text-decoration: none;
}

.panel-heading.subpanel h5 {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: var(--greyish-brown);
    width: auto;
    float: left;
    margin-right: 20px;
    min-width: 80px;
}

body.rtl .panel-heading.subpanel h5 {
    float: right;
}

.panel-heading.subpanel h5:before {
    font-family: FontAwesome;
    font-size: 14px;
    color: var(--opacity-white);
    content: "\f056" !important;
    padding-right: 6px;
}

.panel-default.subpanel .collapsed h5:before {
    font-family: FontAwesome;
    color: var(--opacity-white);
    font-size: 14px;
    content: "\f055" !important;
    padding-right: 6px;
}

.panel-heading.subpanel p.titleItem {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    margin-bottom: 0;
    color: var(--light-grey);
    width: auto;
    float: left;
}

body.rtl .panel-heading.subpanel p.titleItem {
    float: right;
}

.panel-heading.subpanel p.titlePrice {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    margin-bottom: 0;
    color: var(--greyish-brown);
    width: auto;
    float: right;
}

body.rtl .panel-heading.subpanel p.titlePrice {
    float: left;
}

.panel-default.subpanel > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: transparent;
    padding: 10px 15px;
}

.panel-default.subpanel > .panel-heading + .panel-collapse > .panel-heading.subpanel,
.panel-default.subpanel > .panel-heading + .panel-collapse > .panel-body {
    background: #fafafa !important;
    background-color: #fafafa !important;
}

/*.panel-body .table > tbody > tr > td {*/
/*font-size: 14px;*/
/*color: var(--greyish-brown);*/
/*padding: 0 0 6px 0;*/
/*line-height: 20px;*/
/*vertical-align: top;*/
/*border-top: 0 solid transparent;*/
/*}*/
.panel-default.subpanel > .panel-heading + .panel-collapse > .panel-body .table > tbody > tr > td {
    font-size: 14px;
    color: var(--greyish-brown);
    padding: 0 0 6px 0;
    line-height: 20px;
    vertical-align: top;
    border-top: 0 solid transparent;
}

/* end subpanel */

/* subpanel table */
.panel-default.subpaneltable > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: transparent;
}

.panel.subpaneltable {
    margin-bottom: 0;
    background-color: var(--white);
    border: 0 solid transparent;
    border-radius: 0;
    box-shadow: none;
}

.panel.subpaneltable.subpaneltable_line {
    border-bottom: 1px solid var(--form-white);
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.panel.subpaneltable.subpaneltable_line:last-child {
    border-bottom: 1px solid transparent;
    padding-bottom: 10px;
    margin-bottom: 0;
    border-radius: 0 0 10px 10px;
}

.panel-heading.subpaneltable {
    font-family: var(--main-font);
    font-weight: 700;
    background-color: transparent;
    background-image: none !important;
    background-repeat: repeat-x;
    border-top: 0 solid transparent !important;
    border-bottom: 0 solid transparent;
    border-radius: 0;
    box-shadow: none;
    height: auto;
    min-height: 10px;
    padding: 0 15px !important;
    position: relative;
    font-size: 14px;
    color: var(--greyish-brown);
    text-decoration: none;
}

.panel-heading.subpaneltable h4 {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: var(--greyish-brown);
    width: auto;
    float: left;
    margin-left: 0;
    margin-right: 20px;
}

body.rtl .panel-heading.subpaneltable h4 {
    float: right;
}

.panel-heading.subpaneltable p.titleItem {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    margin-bottom: 0;
    color: var(--light-grey);
    width: auto;
    float: left;
}

.panel-heading.subpaneltable p.titlePrice {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    margin-bottom: 0;
    color: var(--greyish-brown);
    width: auto;
    float: right;
}

.panel-default.subpaneltable > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: transparent;
    padding: 10px 15px 0 12px;
}

.panel-default.subpaneltable > .panel-heading + .panel-collapse > .panel-heading.subpanel,
.panel-default.subpaneltable > .panel-heading + .panel-collapse > .panel-body {
    background: transparent !important;
    background-color: transparent !important;
}

.panel-default a svg {
    fill: var(--white);
    width: 30px;
    height: 22px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
}

.panel-group .panel.marketsindicators {
    min-height: 60px;
    border: 2px solid var(--aqua-blue);
    margin-bottom: 30px;
    border-radius: 4px;
}

.panel-group .panel.marketsindicators .panel-body {
    padding: 6px;
}

.panel-group .panel.indicators.up {
    min-height: 70px;
    background: var(--green);
    border: 2px solid var(--green);
    margin-bottom: 30px;
    border-radius: 4px;
    transition: 1s;
}

.panel-group .panel.indicators.down {
    min-height: 70px;
    background: var(--red);
    border: 2px solid var(--red);
    margin-bottom: 30px;
    border-radius: 4px;
    transition: 1s;
}

.panel-group .panel.indicators .panel-body {
    padding: 6px;
}

.request-container {
    width: 100%;
    position: unset;
}

/*! MYP_SCRIPT: /scripts/templates/page-maker/css/menu.css*/
/* menu transfunds */
#menuTransFunds .list-group {
    border-radius: 4px;
    box-shadow: none;
}

#menuTransFunds .list-group-item {
    position: relative;
    display: block;
    cursor: pointer;
    padding: 10px 15px;
    margin-bottom: 0;
    background-color: var(--white);
    border-radius: 4px;
    border: 1px solid var(--aqua-blue);
    color: var(--aqua-blue);
    margin: 20px !important;
    font-family: Ubuntu;
    font-weight: 600;
    text-transform: uppercase;
}

#menuTransFunds .list-group-item:hover {
    position: relative;
    display: block;
    padding: 10px 15px;
    margin-bottom: 0;
    background-color: var(--aqua-blue);
    border-radius: 4px;
    border: 1px solid var(--aqua-blue);
    margin: 20px !important;
    color: var(--white);
    font-family: Ubuntu;
    font-weight: 600;
    text-transform: uppercase;
}

#menuTransFunds .list-group-item svg {
    display: inline-block;
    vertical-align: middle;
    width: 26px;
    height: 23px;
    fill: var(--aqua-blue);
    margin-right: 10px;
    float: left;
}

#menuTransFunds .list-group-item:hover svg {
    fill: var(--white);
}

#menuTransFunds i.clip-info {
    display: none;
}


/*main menu*/
ul.main-navigation-menu li > ul.sub-menu,
ul.main-navigation-menu li > menu-item > ul.sub-menu {
    clear: both;
    list-style: none;
    margin: -1px;
    display: none;
    padding: 0 1px 0 1px;
}

ul.main-navigation-menu li > menu-item > ul.sub-menu-new {
    clear: both;
    list-style: none;
    margin: -1px;
    padding: 0 1px 0 1px;
}

ul.main-navigation-menu li > ul.sub-menu > li > a,
ul.main-navigation-menu li > menu-item > ul.sub-menu-new > li > a {
    background: none;
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin: 0;
    padding-bottom: 10px;
    padding-left: 40px;
    padding-right: 0;
    padding-top: 10px;
    text-decoration: none;
}

ul.main-navigation-menu li > ul.sub-menu > li.active > a,
ul.main-navigation-menu li > menu-item > ul.sub-menu-new > li.active > a {
    color: #ffffff !important;
    background: var(--aqua-blue) !important;
}


ul.main-navigation-menu li > ul.sub-menu > li > a:hover,
ul.main-navigation-menu li > menu-item > ul.sub-menu-new > li > a:hover {
    color: var(--select-grey) !important;
    background: var(--form-white) !important;
}

body ul.main-navigation-menu li a .icon-arrow {
    float: right;
    /*transform: rotate(180deg);*/
}

body.rtl ul.main-navigation-menu li a .icon-arrow {
    float: left;
    transform: rotate(180deg);
}

body.rtl ul.main-navigation-menu li.open > a > .icon-arrow:before {
    transform: rotate(180deg);
}

ul.main-navigation-menu li > a > .icon-arrow:before {
    content: "\f105";
    font-family: FontAwesome, Ubuntu;
    font-size: 1.9rem;
}

ul.main-navigation-menu li.open > a > .icon-arrow:before {
    content: "\f106";
}


ul.main-navigation-menu > li a {
    font-family: var(--main-font);
    font-size: 14px;
    font-weight: 500;
    border-bottom-color: var(--layout-background);
    border-top-color: var(--layout-background);
    border: 0 !important;
    padding: 20px 10px;
    color: var(--select-grey);
}

body.rtl ul.main-navigation-menu > li a {
    font-family: Rubik;
    font-size: 16px;
    font-weight: 400;
}

ul.main-navigation-menu > li a > i {
    color: var(--select-grey);
    font-weight: normal;
}

ul.main-navigation-menu > li.active > a {
    background: var(--nav-blue) !important;
    border-top: none !important;
    color: var(--white) !important;
}

ul.main-navigation-menu > li.active > a .selected:before {
    color: transparent !important;
}

ul.main-navigation-menu > li > a:hover,
ul.main-navigation-menu > li:hover > a {
    background-color: var(--aqua-blue);
    color: var(--white) !important;
}

ul.main-navigation-menu > li > a:hover i {
    color: var(--white);
}

/*end main menu*/

body .myp .navbar-tools > ul {
    position: absolute;
    background: #f5f5f5;
    right: 0;
    left: auto;
    min-height: 80px;
    margin: 0 !important;
    padding: 0 !important;
    border-left: 1px solid #aaaaaa;
}

body.rtl .myp .navbar-tools > ul {
    right: auto;
    left: 0;
}

.myp .navbar-tools > ul > li.dropdown {
    min-width: 165px;
    min-height: 80px;
    margin: 0 !important;
    padding: 0 !important;
}

.navbar-inverse .nav > li.current-user > a {
    margin-top: 0 !important;
    padding: 20px 10px 20px 10px;
    min-height: 80px;
    color: #333 !important;
    text-shadow: none !important;
    transition: .3s !important;
    background: initial;
}


.active-item {
    background-color: rebeccapurple !important;

}


.navbar-inverse .nav > li:active > a {
    background-color: transparent;
}

.navbar-inverse .nav > li.current-user > a img {
    margin-right: 6px;
}

.navbar-inverse .nav > li.current-user > a i {
    display: inline-block;
    text-align: center;
    width: 1.25em;
    color: #333 !important;
    font-size: 12px;
}

.list-group-item.active, .list-group-item.active:focus,
.list-group-item.active:hover {
    text-shadow: none;
    background-image: none;
    background: var(--aqua-blue);
    filter: none;
    color: var(--white);
    border-color: var(--aqua-blue);
}


.list-collapse .form-group li {
}

.list-group-item:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.list-group-item:last-child {
    margin-bottom: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.nav-contact-us {
    height: 12px;
    width: 12px;
}



/*! MYP_SCRIPT: /scripts/templates/page-maker/css/currency-list.css*/
.list-group.currency-list {
    padding: 0;
    margin-bottom: 0;
    box-shadow: none;
}

body .list-group-item.currency-list {
    position: relative;
    display: block;
    padding: 0 15px;
    margin-bottom: -1px;
    background-color: transparent;
    border: 1px solid transparent;
    text-align: left;
}

body.rtl .list-group-item.currency-list {
    position: relative;
    display: block;
    padding: 0 15px;
    margin-bottom: -1px;
    background-color: transparent;
    border: 1px solid transparent;
    text-align: right;
}

.list-group-item.currency-list ul li.currency-list {
    position: relative;
    display: block;
    padding: 0;
    margin-bottom: -1px;
    background-color: transparent;
    border: 1px solid transparent;
    cursor: pointer;
}

.list-group-item.currency-list ul li.currency-list a {
    font-size: 14px;
    color: var(--black-text);
}


.dropdown-menu.currency {
    width: 100%;
    height: auto;
    overflow-y: auto;
    max-height: 340px;
}

/*
.fixCurrHeight {
    height: 450px !important;
}
*/

hr {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
    color: #dddddd !important;
}

/*! MYP_SCRIPT: /scripts/templates/page-maker/css/buttons.css*/
/*general*/

button {
    outline: none !important;
}

.btn {
    padding: 7px 12px;
    border: 1px solid transparent;
    font-family: var(--main-font);
    transition: 0.3s !important;
}

.btn-white {
    text-shadow: none;
    background: var(--white);
    background-image: none;
    filter: none;
    color: var(--greyish-brown);
    border-color: var(--greyish-brown);
}

.btn-default {
    text-shadow: none;
    background: var(--aqua-blue);
    background-image: none;
    filter: none;
    color: var(--white);
    border-color: var(--aqua-blue);
}

.btn-default:hover {
    text-shadow: none;
    background: var(--label-blue);
    background-image: none;
    filter: none;
    color: var(--white);
    border-color: var(--label-blue);
}

.btn-blue,
.btn-blue:focus {
    color: var(--white);
    background-color: var(--aqua-blue);
    border-color: var(--aqua-blue);
    margin-bottom: 15px;
    transition: 0.3s;
}

.btn-blue:hover {
    background-color: var(--nav-blue);
    border-color: var(--nav-blue);
    transition: 0.3s;
}

.btn-yellow,
.btn-yellow:focus {
    color: var(--white);
    background-color: var(--btn-yellow);
    border-color: var(--btn-yellow);
    transition: 1s;
    padding: 0 10px;
}

.btn-yellow:hover {
    color: var(--white);
    background-color: var(--btn-dark-yellow);
    border-color: var(--btn-dark-yellow);
    transition: 0.3s;
}

.btn-green,
.btn-green:focus {
    color: var(--white);
    background-color: var(--green);
    border-color: var(--green);
    transition: 0.3s;;
    margin-bottom: 15px;
}

.btn-green:hover {
    color: var(--white);
    background-color: var(--dark-green);
    border-color: var(--dark-green);
    transition: 0.3s;
}

.btn-red,
.btn-red:focus {
    color: var(--white);
    background-color: var(--red);
    border-color: var(--red);
    transition: 0.3s;
    margin-bottom: 15px;
}

.btn-red:hover {
    color: var(--white);
    background-color: var(--dark-red);
    border-color: var(--dark-red);
    transition: 0.3s;
}

.btn-link,
.btn-link:focus {
    font-weight: 400;
    /*color: var(--aqua-blue);*/
    transition: 0.3s;
    text-decoration: underline;
    white-space: nowrap;
}

.btn-link:hover {
    color: var(--dark-blue);
    transition: 0.3s;
}

.btn-link[disabled], .btn-link[disabled]:hover, .btn-link[disabled]:focus {
    text-decoration: underline;
    opacity: 0.3;
    cursor: not-allowed;
}

.btnTransFunds {
    width: 140px !important;
    height: 140px !important;
    padding: 0;
    margin-bottom: 7rem !important;
    text-transform: uppercase;
}

.btn-aml {
    margin-right: 6px;
    margin-bottom: 0;
    padding: 0 12px;
    transition: 0.3s;
    color: var(--white);
    font-size: 12px;
    font-family: var(--main-font);
    display: inline-block;
    max-width: 120px;
}

.btn-aml:hover {
    color: var(--white);
    text-decoration: none;
}

.btn-blue-aml,
.btn-blue-aml:focus {
    background-color: var(--aqua-blue);
    border-color: var(--aqua-blue);
}

.btn-blue-aml:hover:enabled {
    background-color: var(--dark-blue);
    border-color: var(--dark-blue);
    color: var(--white);

}

.btn-blue-aml .fa-times-circle {
    font-size: 12px;
    color: var(--white);
    padding-left: 6px;
}

.btn-red-aml,
.btn-red-aml:focus {
    background-color: var(--red);
    border-color: var(--red);
}

.btn-red-aml:hover {
    background-color: var(--dark-red);
    border-color: var(--dark-red);
}

.btn-purple-aml,
.btn-purple-aml:focus {
    background-color: var(--purple);
    border-color: var(--purple);
}

.btn-purple-aml:hover {
    background-color: var(--purple);
    border-color: var(--purple);
}

.btn-green-aml,
.btn-green-aml:focus {
    background-color: var(--green);
    border-color: var(--green);
}

.btn-green-aml:hover {
    background-color: var(--dark-green);
    border-color: var(--dark-green);
}

.btn-blue-aml:after,
.btn-yellow-aml:after,
.btn-green-aml:after {
    display: none !important;
}

.btn-yellow-aml,
.btn-yellow-aml:focus {
    background-color: var(--btn-yellow);
    border-color: var(--btn-yellow);
}

.btn-yellow-aml:hover {
    background-color: var(--dark-yellow);
    border-color: var(--dark-yellow);

}

/*after the file is up*/
.btn-aml-upload {
    position: absolute;
    color: var(--white);
    right: 8px;
    bottom: 1px;
    width: 100%;
    text-align: right;
    font-size: 11px;
    padding: 0;
}

.btn-aml-upload:focus {
    color: var(--white);
}

.upload-container .btn-blue-aml {
    padding: 0 20px 0 5px;

}

.no-pointer.btn-blue-aml,
.no-pointer.btn-red-aml,
.no-pointer.btn-purple-aml,
.no-pointer.btn-green-aml,
.no-pointer.btn-yellow-aml {
    cursor: default !important;
}

.no-pointer.btn-blue-aml:hover,
.no-pointer.btn-red-aml:hover,
.no-pointer.btn-purple-aml:hover,
.no-pointer.btn-green-aml:hover,
.no-pointer.btn-yellow-aml:hover {
    cursor: default !important;
}

.btn-blueTrans,
.btn-blueTrans:focus {
    color: var(--white);
    height: 36px !important;
    background-color: var(--aqua-blue);
    border-color: var(--aqua-blue);
    margin-bottom: 15px;
    transition: 0.3s;
}

.btn-blueTrans:hover {
    color: var(--white);
    transition: 0.3s;
}

/*end general*/

.btn-login {
    background: var(--aqua-blue);
    border-color: var(--aqua-blue);
    color: var(--white);
    text-transform: uppercase;
    height: 46px;
}

.btn-login:hover, .btn-login:focus {
    background: var(--nav-blue);
    border-color: var(--nav-blue);
    color: var(--white);
}

.btn-group {
    text-shadow: none;
    background: var(--modal-white);
    background-image: none;
    filter: none;
    color: var(--aqua-blue);
    border-color: var(--form-white);
    border-left: 1px solid transparent !important;
}

.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .btn-group {
    margin-right: -1px;
}

.btnPop {
    display: inline-block;
    padding: 7px 4px;
    margin-bottom: 0;
    font-size: 22px;
    font-weight: 400;
    line-height: 22px;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 25px;
}

.btn-popover {
    background-image: none;
    background-repeat: repeat-x;
    background: transparent;
    border-color: transparent;
}

/* popup calendar */
.uib-datepicker .btn-default {
    text-shadow: none;
    background: transparent;
    background-image: none;
    filter: none;
    color: #333;
    border-color: transparent;
    box-shadow: none;
}

.uib-datepicker .btn-default:hover {
    background-color: var(--datePicker-hover);
}

.uib-datepicker .btn-default.active {
    background: var(--aqua-blue);
    color: var(--white);
    border-color: transparent;
}

.uib-datepicker .btn-default.active .text-info {
    color: var(--white);
}

button.btnTransFunds svg {
    fill: var(--white);
    width: 53px;
    height: 47px;
    display: inline-block !important;
    vertical-align: middle;
    margin-top: 12px;
    margin-right: 6px;
    text-align: center !important;

}

button.avatar-update .img-circle {
    transition: 1s;
}

button.avatar-update:hover .img-circle {
    filter: grayscale(90%);
    transition: 0.3s;
}

button.avatar-update:hover > svg#camera {
    display: block;
    top: 40%;
    left: 50%;
    vertical-align: middle;
    transition: 0.3s;
}

.modal-action-close {
    right: 0 !important;
    opacity: 1;
    position: relative !important;
    margin-right: -15px;
}

/* switch */
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 20px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--form-white);
    transition: .4s;
    border-radius: 100px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 15px;
    width: 15px;
    left: 3px;
    bottom: 3px;
    background-color: var(--switch-circle);
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 100%;
}

input.switch-checkBox:checked + .slider {
    background-color: var(--green);
}

input.switch-checkBox:checked + .slider:before {
    left: 6px;
}

input.switch-checkBox:checked + .slider:before {
    transform: translateX(26px);
    left: 6px;
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

/* end switch */

.btn[disabled].btn-opacity-full {
    opacity: 1 !important;
}

/*.btn[disabled] {*/
/*opacity: 1 !important;*/
/*background-color: var(--opacity-white) !important;*/
/*border-color: var(--opacity-white) !important;*/
/*}*/

.button-clean,
.button-clean:active,
.button-clean:hover {
    background: transparent !important;
    border: transparent;
    box-shadow: none;
}

/*! MYP_SCRIPT: /scripts/templates/page-maker/css/modals.css*/

.modal.fade {
    top: 10%;
}

.modal {
    min-width: 0;
    width: 100%;
    position: fixed;
}

.popovericons .fa-check-circle,
.popovericons .fa-times-circle {
    font-size: 30px;
    color: var(--opacity-white);
}

.popovericons:hover .fa-check-circle {
    color: var(--green);
}

.popovericons:hover .fa-times-circle {
    color: var(--red);
}

#popover-data-span {
    white-space: pre;
    color: inherit !important;
}

.popover {
    border: none !important;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 6px;
}

.popover {
    width: 100% !important;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1060;
    display: none;
    max-width: max-content;
    padding: 0;
    font-family: Ubuntu;
}

.popover .form-group {
    margin: 8px 0;
}

.popover .selectwrap:after {
    font-family: FontAwesome;
    content: "\f078";
    text-align: center;
    line-height: 32px;
    position: absolute;
    width: 32px;
    height: 32px;
    top: 8px;
    right: 25px;
    pointer-events: none;
}

.popover > .arrow, .popover > .arrow:after {
    position: absolute;
    width: 0;
    height: 0;
    border-top-color: #fffffffa !important;
    border-style: solid;
}

.popover-list-item {
    background: var(--modal-white);
    padding: 4px;
}

.popover-list-item:not(:last-child) {
    margin: 0 0 1px;
}

.popover-list-selected-item {
    background-color: var(--aqua-blue);
    color: white;
}

.popover-list-item:hover {
    background: var(--nav-blue);
    color: var(--white);
}

.popover-list-title .fa-chevron-down {
    float: right;
    font-size: 18px !important;
    padding-top: 2px;
    color: var(--select-grey);
    padding-left: 10px;
}

.popover-title {
    padding: 8px 14px;
    margin: 0;
    font-size: 14px;
    background-color: var(--white);
    border-bottom: 1px solid transparent;
    border-radius: 5px 5px 0 0;
}

.inside-popover-title {
    padding: 8px 0;
}

.popover-content {
    padding: 0 14px 14px 14px;
    width: 100%;
}

.popover-content .list-order-popOver span {
    margin: 0 30px 0 0;
}

/* modal */
.modal-content {
    position: relative;
    background-color: var(--white);
    background-clip: padding-box;
    border: none !important;
    border-radius: 6px;
    outline: 0;
    box-shadow: none !important;
}

.modal.fade.in {
    top: 10%;
    max-height: 100vh;
    overflow: auto;
}

.modal-backdrop.fade.in {
    opacity: 0.8;
    filter: alpha(opacity=80);
    background: var(--modal-white);
}

.loader-modal {
    opacity: 0.8;
    filter: alpha(opacity=80);
    background: var(--modal-white);
    height: 100%;
    position: absolute;
    z-index: 1000;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.titleModal {
    font-family: var(--main-font);
    font-size: 21px;
    font-weight: 400;
    color: var(--aqua-blue);
    margin: 0 0 10px 0;
}

.modal .form-horizontal .control-label {
    padding-top: 7px;
    margin-bottom: 0;
    text-align: left;
}

.modal-header {
    min-height: 16.43px;
    padding: 0;
    border-bottom: 0 solid transparent;
}


.modal-open .modal.custom-close-header {
    overflow: inherit;
}

.modal-footer {
    background: transparent;
    border-radius: 0;
    border-top: 0;
}

.modal-title {
    padding: 15px;
    color: var(--aqua-blue);
    margin: 0;
    line-height: 1.42857143;
}

.modal-black {
    background: var(--black) !important;
    opacity: 0.3 !important;
}

.modal-directive {
    /*position: absolute;*/
    /*display: none;*/
    /*transform: translate(0,-50%);*/
}

.modal button.close {
    opacity: 1;
}

.modal button.close svg {
    fill: var(--light-grey);
    stroke: var(--light-grey);
}

.modal .close-action-modal svg {
    width: 39px;
    height: 39px;
}

.modal-action-close {
    width: auto !important;
    height: auto !important;
}


.modal-header-action {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
}

.modal.info-animation {
    transition: all 0.3s linear;
}

.modal.info-animation.fade.in {
    transform: translateY(0);
}

.modal.info-animation.fade {
    transform: translateY(100%);

}

/* end modal */


/*! MYP_SCRIPT: /scripts/templates/page-maker/css/helpers.css*/
:root {
    --main:#00b6e0;
    --span-opacity: 0.5;
    --black: #000000;
    --black-text: #333333;
    --black-opacity: rgba(0, 0, 0, 0.6);
    --white: #ffffff;
    --dark-white: #D5D5D5;
    --opacity-white: #cccccc;
    --form-white: #dddddd;
    --modal-white: #fbfbfb;
    --panel-white: #fafafa;
    --light-grey: #888888;
    --dark-grey: #858585;
    --select-grey: #707070;
    --btn-grey: #efefef;
    --aqua-blue: var(--main);
    --dark-blue: #005c7d;
    --white-six: #dddddd;
    --label-blue: #00688c;
    --nav-blue: #00d8fc;
    --green: #2fbf76;
    --dark-green: #217d45;
    --red: #ff0058;
    --dark-red: #7d002c;
    --yellow: #c79200;
    --dark-yellow: #674b00;
    --alert-yellow: #a67a00;
    --btn-yellow: #f5b300;
    --btn-dark-yellow: #af8800;
    --purple: #cd4ced;
    --aqua-blue-alert: #f7fdff;
    --aqua-green-alert: #f7fffb;
    --aqua-red-alert: #fffcfd;
    --layout-background: #f5f5f5;
    --main-font: Ubuntu;
    --aqua-yellow-alert: #fffefc;
    --grey-black: #333333;
    --white-two: #f5f5f5;
    --grey-blue: #667695;
    --warm-grey: #888888;
    --grey-blue-transparent-20: rgba(102, 118, 149, 0.2);
    --grey-light: #667695;
    --neon-blue: #00d8fc;
    --neon-blue-transparent-20: rgba(0, 216, 252, 0.2);
    --neon-blue-transparent-10: rgba(0, 216, 252, 0.1);
    --blue: blue;
    --greyish: #aaaaaa;
    --gunmetal: #4d6057;
    --ice: #f2fff8;
    --ice-blue: #effdff;
    --shamrock-green: #00d050;
    --shamrock-green-transparent-20: rgba(0, 208, 80, 0.2);
    --pink-red: #ff0058;
    --dark-indigo-two: #0b1833;
    --soft-blue: #729ae6;
    --dark-indigo: #081327;
    --dark-blue-grey: #1c2d4d;
    --red-pink: #ef3c70;
    --white-four: #fafafa;
    --white-seven: #f0f0f0;
    --tealish: #2fbfbf;
    --darkish-pink: #db459b;
    --heliotrope: #cd4ced;
    --yellow-orange: #f5b300;
    --greenish-teal: #2fbf76;
    --greyish-brown: #444444;
    --datePicker-hover: #e0e0e0;
    --off-white: #fffbf0;
    --poop: #805e00;
    --ruby: #cc0047;
    --dark-green-blue: #1a6640;
    --switch-circle: #f4f4f4;
    --dark-periwinkle: #7188d7;
    --white-five: #fbfbfb;
    --warm-grey-two: #707070;
}

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

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

.flex-align-baseline {
    display: flex;
    align-items: baseline;
}

.text-deco-underline {
    text-decoration: underline;
}

.break-word {
    word-break: break-word;
}

.flex {
    display: flex;
}

.flex-wrap {
    display: flex;
    flex-wrap: wrap;
}

.justify-space-between {
    justify-content: space-between;
}

.justify-center {
    justify-content: center;
}

.column {
    flex-direction: column;
}

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

.self-baseline {
    align-self: baseline;
}

.self-end {
    align-self: end;
}

.self-flex-end {
    align-self: flex-end;
}

.flex-item-center {
    display: flex !important;
    align-items: center;
}

.item-center {
    align-items: center;
}

.margin-right-10 {
    margin: 0 10px 0 0;
}

.margin-right-8 {
    margin: 0 8px 0 0;
}

.margin-right-5 {
    margin: 0 5px 0 0;
}

.margin-right-4 {
    margin: 0 4px 0 0;
}

.margin-top-20 {
    margin-top: 20px !important;
}

.margin-left-10 {
    margin-left: 10px !important;
}

.margin-left-5 {
    margin-left: 5px !important;
}

.margin-left-5 {
    margin: 0 0 0 5px;
}

.relative {
    position: relative;
}

.position-unset {
    position: unset;
}

.strech {
    width: 100%;
}

.size-full {
    width: 100% !important;
}

.max-width-80pr {
    max-width: 80% !important;
}

.width-20pr {
    width: 20% !important;
}

.width-30pr {
    width: 30% !important;
}

.width-40pr {
    width: 40% !important;
}

.width-45pr {
    width: 45% !important;
}

.min-width-80 {
    min-width: 80px;
}

.margin-auto-center {
    margin: 0 auto;
}

.width-auto {
    width: auto;
}

.min-height-20 {
    min-height: 20px;
}

.width-max-content {
    width: max-content !important;
}

.clean-btn {
    background: 0 0;
    border: 0;
}

.buy {
    color: var(--shamrock-green);
}

.sell,
.color-pink-red {
    color: var(--pink-red);
}

.no-action {
    color: var(--grey-blue);
}

.clean-padding-margin {
    margin: 0 !important;
    padding: 0 !important;
}

.padding-side-10 {
    padding: 0 10px;
}

.padding-side-15 {
    padding: 0 15px;
}

.pointer {
    cursor: pointer;
}

.cursor-default {
    cursor: default;
}

.margin-bottom-2rem {
    margin: 0 0 2rem;
}

.margin-bottom5 {
    margin-bottom: 5px !important;
}

.margin-bottom10 {
    margin-bottom: 10px !important;
}

.margin-bottom-15 {
    margin-bottom: 15px !important;
}

.inline {
    display: inline;
}

.white-space-normal {
    white-space: normal;
}

.margin-auto {
    margin: 0 auto;
}

.margin-none {
    margin: 0 !important;
}

.margin-top-0 {
    margin-top: 0 !important;
}

.aqua-blue-bg {
    background-color: var(--aqua-blue);
}

.tealish-bg {
    background-color: var(--tealish);
}

.darkish-pink-bg {
    background-color: var(--darkish-pink);
}

.greenish-teal-bg {
    background-color: var(--greenish-teal);
}

.greenish-teal-color {
    color: var(--greenish-teal);
}

.yellow-orange-bg {
    background-color: var(--yellow-orange);
}

.yellow-orange-color {
    color: var(--yellow-orange);
}

.purple-bg {
    background-color: var(--purple);
}

.pink-red-bg {
    background-color: var(--pink-red);
}

.pink-red-color {
    color: var(--pink-red);
}

.greyish-brown-bg {
    background-color: var(--greyish-brown);
}

.greyish-brown-color {
    color: var(--greyish-brown);
}

.bold {
    font-weight: bold;
}

.font-12 {
    font-size: 12px;
}

.top-padding {
    padding-top: 30px;
}

.padding-15 {
    padding: 15px;
}

.padding-15-bottom-0 {
    padding: 15px 15px 0 !important;
}

.no-background-color {
    background: transparent !important;
}

.padding-0 {
    padding: 0 !important;
}

.padding-10-15 {
    padding: 10px 15px;
}

.padding-5 {
    padding: 5px;
}

.padding-left-15 {
    padding-left: 15px;
}

.padding-left-5 {
    padding-left: 5px;
}

.padding-top10 {
    padding: 10px 0 0;
}

.padding-0-5 {
    padding: 0 5px !important;
}

.padding-0-2-percent {
    padding: 0 2%;
}

.white-bg {
    background-color: var(--white);
}

.white-four-bg {
    background-color: var(--white-four);
}

.warm-grey-color {
    color: var(--warm-grey);
}

.weight-500 {
    font-weight: 500;
}

.weight-400 {
    font-weight: 400 !important;
}

.aqua-blue-color {
    color: var(--aqua-blue) !important;
}

.font-size-12 {
    font-size: 12px;
}

.float-left {
    float: left !important;
}

.float-right {
    float: right !important;
}

.full-width {
    width: 100%;
}

.width-50per {
    width: 50%;
}

.hover-bg-aqua-blue:hover {
    background-color: var(--aqua-blue);
}

.capitalize {
    text-transform: capitalize;
}

.opacity-0 {
    opacity: 0;
}

.padding-bottom-10 {
    padding-bottom: 10px;
}

.grid {
    display: grid;
}

.grid-column-1-2 {
    grid-column: 1/2;
}

.grid-column-2-2 {
    grid-column: 2/2;
}


.m-r-10 {
    margin-right: 10px;
}

.m-l-10 {
    margin-left: 10px;
}

.m-r-5 {
    margin-right: 5px;
}

.m-r-15 {
    margin-right: 15px;
}

.m-b-20 {
    margin-bottom: 20px;
}

.m-l-25 {
    margin-left: 25px;
}

.absolute {
    position: absolute;
}

.text-no-space {
    white-space: nowrap !important;
}

.margin-bottom-0 {
    margin-bottom: 0 !important;
}

.margin-top-15 {
    margin-top: 15px;
}














.blue-svg.arrow-up {
    display: inline-block;
    width: 12px;
    height: 12px;
}

.span-zero {
    color: #667695;
}

.width-0 {
    width: 0;
}

.flex-1 {
    flex: 1;
}

.greyish-brown {
    color: var(--greyish-brown);
}

.ui-jqgrid .ui-jqgrid-htable .ui-th-div {
    height: auto;
}

/* reset online focus*/
.uib-datepicker-popup {
    min-width: 320px;
}

.padding-left-30 {
    padding-left: 30px;
}

li:focus,
.uib-datepicker:focus,
.uib-datepicker div:focus {
    outline: 0 !important;
    box-shadow: none;
}

.navbar-collapse.collapse {
    height: 90vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.navbar-collapse.collapse::-webkit-scrollbar {
    width: 5px;
    background-color: transparent;
}

.navbar-collapse.collapse::-webkit-scrollbar-track {
    width: 5px;
    background-color: transparent;
}

.navbar-collapse.collapse::-webkit-scrollbar-thumb {
    width: 5px;
    border-radius: 10px;
    background-color: var(--light-grey);
}

menu-wrapper ::-webkit-scrollbar {
    width: 5px;
    background-color: transparent;
}

menu-wrapper ::-webkit-scrollbar-track {
    width: 5px;
    background-color: transparent;
}

menu-wrapper ::-webkit-scrollbar-thumb {
    width: 5px;
    border-radius: 10px;
    background-color: var(--light-grey);
}

.events-none {
    pointer-events: none;
}

.form-control:focus {
    border-color: transparent;
    outline: 0;
    box-shadow: none;
}

textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"] {
    background-color: var(--white);
    border: 1px solid var(--dark-white);
    border-radius: 4px !important;
    color: var(--grey-black);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.2;
    padding: 6px 12px;
    transition-duration: 0.1s;
    box-shadow: none !important;
}

.opacity-0 {
    opacity: 0;
}

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

body h1,
h2,
h3 {
    font-family: var(--main-font);
    font-size: 36px;
    color: var(--aqua-blue);
    margin: 20px 0 30px 0;
}

body.rtl h1,
h2,
h3 {
    font-family: Rubik, var(--main-font);
}

body {
    font-family: var(--main-font), 'Arial', sans-serif;
    font-size: 14px;
    color: var(--light-grey);
    background-color: var(--modal-white) !important;
}

body.rtl {
    font-family: Rubik, var(--main-font) !important;
    font-size: 16px;
}

/* end loader */
.glyphicon-ok:before {
    font-family: fontawesome, var(--main-font);
    content: "\f058" !important;
    color: var(--opacity-white);
}

.glyphicon-ok:hover:before {
    color: var(--green);
}

.glyphicon-remove:before {
    font-family: fontawesome, var(--main-font);
    content: "\f057" !important;
    color: var(--opacity-white);
}

.glyphicon-remove:hover:before {
    color: var(--red);
}

select {
    -webkit-appearance: none;
}

.form-control,
.form-control:focus,
select.form-control {
    display: block;
    width: 100%;
    height: 36px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    text-align: left;
    color: var(--grey-black);
    background-color: var(--modal-white) !important;
    border: 1px solid var(--form-white);
    border-radius: 4px !important;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

body.rtl .form-control,
body.rtl .form-control:focus {
    text-align: right;
}

.select2-container .select2-choice {
    background-clip: padding-box !important;
    background: var(--modal-white) none no-repeat !important;
    border: 1px solid var(--form-white) !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    color: var(--grey-black) !important;
    display: block !important;
    height: 46px !important;
    line-height: 29px !important;
    margin-top: 0 !important;
    overflow: hidden !important;
    padding: 6px 12px 0 8px !important;
    position: relative !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.select2-container .select2-choice .select2-arrow {
    display: inline-block;
    width: 18px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    padding-top: 6px;
    border-left: 0 transparent;
    border-radius: 0 4px 4px 0;
    background-clip: padding-box;
    background: transparent none !important;
    filter: none !important;
}

.white-four {
    background-color: var(--white-four) !important;
}

.select2-container .select2-choice .select2-arrow b:before {
    content: "\f078";
    display: inline;
    font-family: FontAwesome, var(--main-font);
    font-weight: 300;
    font-size: 16px;
    color: var(--select-grey);
    padding-right: 10px;
    height: auto;
    text-shadow: none;
}

.select2-drop-active {
    border-color: transparent;
    background: var(--modal-white) !important;
    box-shadow: none;
    top: 0;
    margin-top: -4px;
    border-left: 1px solid var(--form-white);
    border-right: 1px solid var(--form-white);
    border-bottom: 1px solid var(--form-white);
}

.select2-results .select2-highlighted {
    color: white;
    background-color: var(--aqua-blue);
}

.select2-search input {
    width: 100%;
    height: 36px !important;
    min-height: 26px;
    padding: 4px 20px 4px 5px;
    margin: 0;
    outline: 0;
    font-family: var(--main-font), Rubik, sans-serif;
    font-size: 1em;
    border: 1px solid #aaa;
    border-radius: 0;
    box-shadow: none !important;
    background: var(--white) !important;
}

.selectwrap {
    position: relative;
}

.selectwrap:after,
.selectwrapTF:after,
.selectWrapSeparated:after {
    font-family: FontAwesome, var(--main-font);
    content: "\f078";
    text-align: center;
    line-height: 32px;
    position: absolute;
    width: 32px;
    height: 32px;
    top: 32px;
    right: 25px;
    pointer-events: none;
    color: var(--select-grey) !important;
    opacity: 0.3 !important;
}

.selectwrapTF:after,
.selectWrapSeparated:after {
    top: 8%;
    right: 18px;
    z-index: 2;
}

.input-group .form-control.group-button {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: 1px solid transparent !important;
}

.navigation-toggler {
    display: none !important;
}

/* container */
.navbar-inverse {
    background: var(--layout-background);
    border-color: transparent;
    min-height: 80px;
}

.main-container {
    margin-top: 80px !important;
}

.breadcrumb {
    display: none;
}

body,
.main-container,
.footer,
.main-navigation,
ul.main-navigation-menu>li>ul.sub-menu,
.navigation-small ul.main-navigation-menu>li>ul.sub-menu {
    background-color: var(--layout-background) !important;
}

.main-content .container:first-of-type {
    background: var(--modal-white);
    border: none;
}


.payRequest-labels p {
    color: var(--light-grey);
    text-transform: capitalize;
}

.icon-close {
    width: 10px !important;
    font-size: 14px;
}

.icon-close a {
    color: var(--red) !important;
    transition: 1s;
}

.icon-close a:hover {
    color: var(--dark-red) !important;
    transition: 1s;
}

.icon-delete a {
    color: var(--light-grey) !important;
    transition: 1s;
}

.icon-delete a:hover {
    color: var(--greyish-brown) !important;
    transition: 1s;
}

.green {
    color: var(--green);
}

.border-0 {
    border: 0 !important;
}

.red {
    color: var(--red);
}

.pending {
    color: var(--yellow) !important;
}

.cancelled {
    color: var(--pink-red) !important;
}

.rejected {
    color: var(--pink-red) !important;
}

.Completed {
    color: var(--greenish-teal) !important;
}

/*back color*/
.Not_submitted-bg {
    background-color: var(--heliotrope) !important;
}

.Approved-bg {
    background-color: var(--greenish-teal) !important;
    ;
}

.pending-bg {
    background-color: var(--btn-yellow) !important;
}

.Rejected-bg {
    background-color: var(--pink-red) !important;

}

hr.separator {
    margin-top: 0;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid var(--form-white);
}

hr.separator-2 {
    margin: 0 0 10px 0;
    border: 0;
    border-top: 1px solid var(--form-white);
}

tr.identity-table td:first-child,
tr.identity-table th:first-child {
    padding-left: 15px !important;
}

tr.identity-table td:last-child,
tr.identity-table th:last-child {
    padding-right: 15px !important;
}

.justify-content-between {
    justify-content: space-between !important;
}

.resend-request {
    width: 210px;
    height: 36px;
    opacity: 0.9;
    background-color: #00b6e0;
    border-radius: 4px;
    color: white;
    border: 0;
}

hr.separator-3 {
    margin: 0 15px 10px 15px;
    border: 0;
    border-top: 1px solid var(--form-white);
}

.update-clearance {
    color: #2fbf76;
    text-decoration: underline;
    cursor: pointer;
    font-size: 13px;
}

.identity-header {
    font-family: Ubuntu;
    color: #888888;
    font-size: 14px;
}

.into-identity {
    width: 70%;
    font-family: Ubuntu;
    font-size: 14px;
    font-weight: 500 !important;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: normal;
    text-align: left;
    color: var(--aqua-blue);
    margin: 0;
    padding: 0px 0px 0px 15px;
}

hr.separator-4 {
    margin: 20px 15px 10px 15px;
    border: 0;
    border-top: 1px solid var(--form-white);
}

.userMngUserBalances {
    display: flex;
    justify-content: center;
    height: 40%;
    padding-bottom: 2%;
}

.notificationPref:last-child hr.separator-2 {
    border-top: 0 solid transparent;
}

.marketsindicators {
    margin-bottom: 5px !important;
}

markets-card-directive .btn-blue {
    margin-bottom: 5px !important;
}

.marketsindicators p {
    padding: 0;
    margin: 0;
}

.marketsindicators p.titlebox {
    font-size: 13px;
    line-height: 13px;
    font-weight: 700;
    color: var(--aqua-blue);
    margin: 0;
}

.main-color {
    color: var(--aqua-blue);
}

.divider {
    height: 1px;
    width: 100%;
    background-color: rgba(211, 211, 211, 0.71);
}

.marketsindicators p.amount {
    font-size: 32px;
    line-height: 32px;
    font-weight: 700;
    color: var(--aqua-blue);
    padding: 0;
    margin: 0;
}

.marketsindicators p.amount span {
    font-size: 18px;
    line-height: 18px;
    font-weight: 700;
    color: var(--aqua-blue);
    padding: 0;
    margin: 0;
}

.indicators p {
    padding: 0;
    margin: 0;
}

.indicators p.titlebox {
    font-size: 13px;
    line-height: 13px;
    font-weight: 700;
    color: var(--white);
    padding-top: 6px;
    margin: 0;
}

.indicators p.amount {
    font-size: 32px;
    line-height: 32px;
    font-weight: 700;
    color: var(--white);
    padding: 0;
    margin: 0;
}

.indicators p.amount span {
    font-size: 18px;
    line-height: 18px;
    font-weight: 700;
    color: var(--white);
    padding: 0;
    margin: 0;
}


.data-title {
    font-weight: 400 !important;
    line-height: 20px !important;
    color: var(--light-grey) !important;
}

.data-title.margin {
    margin-bottom: 20px;
}

.data-title span {
    line-height: 20px !important;
}

.data-content {
    font-weight: 500 !important;
    line-height: 20px !important;
    color: #444 !important;
}

.edit {
    font-family: FontAwesome, var(--main-font);
    content: "\f040";
    font-size: 16px;
    font-weight: 400 !important;
    color: var(--aqua-blue) !important;
    padding-left: 20px;
}

.data-content a.edit {
    display: none;
}

.data-content:hover a.edit {
    display: inline-block;
}

.showEditOption a:after {
    font-family: FontAwesome, var(--main-font);
    font-size: 14px;
    content: "\f040";
    color: var(--aqua-blue);
    float: right;
    padding-left: 10px;
    padding-right: 10px;
    opacity: 0;
    transition: 0.15s;
}

.showEditOption:hover a:after {
    opacity: 1;
}

.change-fix {
    color: var(--aqua-blue) !important;
}

.showEditOption a:after {
    font-family: FontAwesome, var(--main-font);
    font-size: 18px;
    content: "\f040";
    color: var(--aqua-blue);
    float: right;
    padding-left: 10px;
    padding-right: 10px;
    opacity: 0;
    transition: 0.15s;
}

.edit-pen-icon:after {
    font-family: FontAwesome, var(--main-font);
    font-size: 18px;
    content: "\f040";
    color: var(--aqua-blue);
    float: right;
    padding-left: 10px;
    padding-right: 10px;
    position: absolute;
    top: -3px;
}

body.rtl .showEditOption:hover a:after {
    float: left;

}

.showEditOption a.link-verify {
    font-size: 12px;
    color: var(--aqua-blue);
    margin-right: 20px;
}

.showEditOption a.btn-yellow-aml {
    font-size: 12px;
    margin: 0;
    padding: 0 12px;
}

.link-verify {
    color: var(--aqua-blue);
    margin: 0 10px 0 0;
}

.showEditOption:hover a.link-verify:after {
    display: none;
}

.showEditOption:hover a.btn-yellow-aml:after {
    display: none;
}

.showEditOption:hover a.btn-yellow-aml:hover,
.showEditOption:hover a.btn-yellow-aml:focus {
    margin: 0;
    padding: 0 12px;
}

.modal.verifyPhone {
    left: 50%;
    width: 500px;
}

form {
    margin-bottom: 0 !important;
}

.form-horizontal .control-label.transFunds {
    padding-top: 7px;
    margin-bottom: 0;
    text-align: left;
    /*margin-left: 15px !important;*/
}

p.validation {
    width: max-content !important;
    font-size: 13px;
    font-style: italic;
    color: var(--white);
    background: var(--red);
    padding: 2px 10px 6px 10px;
    border-bottom-left-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
}

.addAccount {
    margin-bottom: 10px;
}

#transferFunds h5 {
    font-family: var(--main-font);
    font-size: 36px;
    font-weight: 400;
    color: #444;
}

.balancesNameText {
    width: 70px;
}

label.amount {
    font-weight: 500;
    padding: 6px 0 0 0;
    margin: 0;
    color: var(--grey-black);
}

label.calculate {
    padding: 6px 0 0 0;
    margin: 0;
    color: var(--grey-black);
}

.font-black {
    color: black;
}

label.amountBlack {
    font-weight: 600;
    padding: 6px 0 0 0;
    margin: 0;
    color: var(--grey-black);
}

p.msgTrans {
    color: var(--grey-black);
}

p.code {
    font-weight: 500;
    color: var(--light-grey);
}

.form-control {
    text-align: left;
    padding-left: 10px;
    padding-right: 15px;
    box-shadow: none;
}

.clean-btn {
    padding-right: 3px !important;
}

.alert-platform-member-chips {
    padding: 0 0 0 3px !important;
    font-weight: 400;
    font-style: italic;
    color: #5a4f53 !important;
    background-color: #efefef !important;
    border-color: #c5c5c5 !important;

}

.form-control::placeholder {
    text-align: left;
    color: var(--opacity-white);
    font-style: italic;
}

.form-control.amount {
    padding-left: 15px;
    padding-right: 15px;
}

.form-control.amount::placeholder {
    padding-left: 0;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

.banner-trading-arena {
    font-weight: bold;
    width: 200px !important;
}

body.rtl .banner-trading-arena {
    right: auto;
    left: 190px !important;
    width: 250px !important;
}

.banner-trading-arena a span {
    color: var(--aqua-blue);
    text-transform: uppercase;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid var(--aqua-blue);
    transition: 1s;
}

.banner-trading-arena a:hover {
    color: var(--white);
    text-decoration: none !important;
    transition: 1s;
}

.banner-trading-arena a:hover span {
    color: var(--white);
    background: var(--aqua-blue);
    text-decoration: none !important;
    transition: 1s;
}

.form-control.inputError {
    border: 1px solid var(--red) !important;
    border-bottom-left-radius: 0 !important;
}

.form-control.inputSuccess {
    border: 1px solid var(--green) !important;
    border-bottom-left-radius: 0 !important;
}

.no-borders {
    border: 0 !important;
    box-shadow: none !important;
}

.editFormTitle {
    color: var(--aqua-blue);
    text-transform: capitalize;
    font-weight: 500;
}

.btn-blue .notification-btn {
    width: 16px;
    height: 16px;
    position: absolute;
    background: var(--red);
    top: -7px;
    right: -7px;
    border-radius: 25px;
    border: 3px solid var(--white);
    content: "";
}

svg#avatar {
    width: 100px;
    height: 100px;
}

svg#camera {
    position: absolute;
    display: none;
    fill: var(--nav-blue);
    width: 24px;
    height: 21px;
    transition: 1s;
}

.dropdown.open button>svg {
    transform: rotate(180deg);
    margin-top: 7px !important;
}

.list-labels-weight {
    font-size: min(1.5vh, 15px);
}

.flex-nowrap {
    flex-wrap: nowrap !important;
}

.my-acc-arrow {
    margin-top: 3px;
    fill: var(--warm-grey);
    position: relative;
    margin-left: 5px;
}

.my-acc-wls-button:hover {
    color: var(--warm-grey);
}

.my-acc-dash-height {
    height: calc(100% - 30px) !important;
}

.my-acc-um-height {
    height: max-content !important;
}

#compare-with {
    padding: 0 15px 15px 15px;
    display: flex;
    align-items: center;
    width: 100%;
    flex-direction: row-reverse;
}

.my-acc-wls-button {
    background-color: transparent;
    color: #888888 !important;
    font-weight: 500;
}

.scrollable-modules-sm {
    height: calc(100% - 80px);
}

.disabled-buy-btn {
    pointer-events: none !important;
    /* background-color: gainsboro; */
}

.grey {
    color: grey !important;
}

.scrollable-modules-panel-sm {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    margin-bottom: 0 !important;
}

.full-report {
    font-family: Ubuntu;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    color: #00b6e0;
    text-decoration: underline;
    cursor: pointer;
    position: absolute;
    bottom: 3%;
    width: max-content;
    left: 50%;
    transform: translateX(-50%);
}


.arrow-up {
    transform: rotate(-90deg);
    height: 11px;
    width: 13px;
}


.blue-svg {
    fill: var(--aqua-blue) !important;
}


.submit-loader-svg {
    height: 24px;
    width: 24px;
    fill: var(--white);
}

.submit-loader-svg-container {
    position: absolute;
    top: 5px;
    left: 0;
    background-color: inherit;
    width: 100%;
}

p.user-profile-info {
    padding-top: 30px;
}

span.user-id {
    color: var(--greyish-brown) !important;
}

.data-title i.fa-exclamation-circle {
    color: var(--btn-yellow);
    transform: rotate(180deg);
}

.from-collapse-2 {
    background: var(--modal-white);
    position: absolute;
    padding-top: 10px;
    border-radius: 4px;
    border: 1px solid var(--form-white);
}

.list-collapse.collapse.in>.from-collapse-2 {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.16);
}

input[type="text"].search-popover-list {
    background: var(--white) !important;
}

.list-collapse {
    min-height: 270px;
    max-height: 270px;
    height: 270px;
    overflow-y: auto;
}

.list-collapse .form-group {
    padding: 0;
    margin: 0;
}

svg#calendar-alt {
    width: 14px;
    height: 16px;
    fill: var(--black-text);
}

svg#ic-download {
    width: 10px;
    height: 10px;
    fill: var(--white);
}

select.input-sm {
    height: 42px;
    line-height: 30px;
}

#transactions1 .popover>.arrow,
.popover>.arrow:after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border: solid transparent;
}

.form-group.api {
    margin-bottom: 0 !important;
}

a .icon-information-aml {
    color: var(--aqua-blue) !important;
    text-decoration: none;
}

a .icon-information-aml:hover,
a .icon-information-aml:focus {
    text-decoration: none;
}

.sub-info {
    color: var(--yellow-orange);
    margin: 2px 0 0 5px;
}

/* end custom */

/* navtabs buy & sell */
.nav-tabs.buysell {
    border-color: transparent;
    top: 0;
}

.nav-tabs.buysell>li {
    float: left;
    margin-right: 10px;
    margin-bottom: 0;
}

.nav-tabs.buysell>li>a,
.nav-tabs.buysell>li>a:focus {
    background-color: transparent;
    border-color: var(--light-grey);
    border-top: 1px solid transparent;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-bottom: 2px solid var(--light-grey) !important;
    border-radius: 0 0 0 0 !important;
    color: var(--light-grey);
    font-weight: 500;
    line-height: 16px;
    margin-right: -1px;
    position: relative;
}

.nav-tabs.buysell>li.active>a,
.nav-tabs.buysell>li.active>a:hover,
.nav-tabs.buysell>li.active>a:focus {
    background-color: transparent;
    border-color: transparent;
    border-top: 2px solid transparent;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-bottom: 2px solid var(--aqua-blue) !important;
    color: var(--aqua-blue);
    font-weight: 500;
    line-height: 16px;
    margin-top: -1px;
    z-index: 12;
}

.tab-content.buysell {
    border: 0 solid transparent;
    padding: 16px 12px;
    position: relative;
}

.form-horizontal.buysell .control-label {
    padding-top: 7px;
    margin-bottom: 0;
    text-align: left;
}

.input-group-addon {
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: #555;
    text-align: center;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 4px 0 0 4px;
}

input[type="number"].limit {
    border-radius: 0 4px 4px 0;
}

.labelHyper {
    text-decoration: underline;
    cursor: pointer;
}

/* tables */
rows-per-page .fa-times-circle.table-action-close {
    color: var(--red);
}

.form-inline .input-group>.form-control.custom-input-tables {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    width: 100%;
}

.rows-per-page {
    color: var(--white) !important;
    background-color: var(--aqua-blue) !important;
    border: 1px solid var(--aqua-blue) !important;
    border-radius: 4px !important;
    width: 60px !important;
    float: right;
    padding: 6px 12px;
    outline: none;
}

.rows-per-page option {
    color: var(--dark-grey) !important;
    background: var(--white) !important;
}

.selectwrap-2 {
    width: auto;
    float: right;
    margin-left: 10px;
}

.selectwrap-2:after {
    font-family: FontAwesome, var(--main-font);
    color: var(--white);
    content: "\f078";
    text-align: center;
    line-height: 32px;
    position: absolute;
    width: 32px;
    height: 32px;
    top: 1px !important;
    right: 17px !important;
    pointer-events: none;
}

.merchent-row {
    padding: 0 0 10px;
}

.merchent-row:after {
    color: var(--select-grey);
    position: relative;
    left: 67% !important;
}

.pagination {
    padding-left: 0;
    margin: 0;
    border-radius: 4px;
}

label.page-row {
    padding-top: 6px;
}

.pagination>li>a,
.pagination>li>span {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin: 0 1px;
    line-height: 1.42857143;
    color: var(--light-grey);
    text-decoration: none;
    background-color: #fff;
    border: 1px solid transparent !important;
    min-width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover,
.pagination>.active>span,
.pagination>.active>span:focus,
.pagination>.active>span:hover {
    z-index: 2;
    color: #fff;
    cursor: default;
    background-color: var(--aqua-blue);
    border-color: var(--aqua-blue);
    border-radius: 4px;
}

.pagination>li>a:focus,
.pagination>li>a:hover,
.pagination>li>span:focus,
.pagination>li>span:hover {
    z-index: 3;
    color: var(--white);
    background-color: var(--light-grey);
    border-color: var(--light-grey);
    border-radius: 4px;
}

/* end tables */

/* progres bar */
.form-control.pw-borders {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.progress {
    width: 100%;
    height: 20px;
    margin-bottom: 0;
    overflow: hidden;
    background: #dedede none;
    border-radius: 0 0 4px 4px;
    box-shadow: none;
}

.progress-bar-strongest {
    background-image: linear-gradient(to right, #ff0058, #f5b300, #00b6e0, #2fbf76) !important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0058', endColorstr='#2fbf76', GradientType=0);
    background-repeat: repeat-x;
    width: 100%;
}

.progress-bar-strong {
    background-image: linear-gradient(to right, #ff0058, #f5b300, #00b6e0, #2fbf76) !important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0058', endColorstr='#2fbf76', GradientType=0);
    background-repeat: repeat-x;
    width: 60%;
}

.progress-bar-good {
    background-image: linear-gradient(to right, #ff0058, #f5b300, #00b6e0) !important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0058', endColorstr='#00b6e0', GradientType=0);
    background-repeat: repeat-x;
    width: 40%;
}

.progress-bar-moderate {
    background-image: linear-gradient(to right, #ff0058, #f5b300) !important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0058', endColorstr='#00b6e0', GradientType=0);
    background-repeat: repeat-x;
    width: 20%;
}

/* end progres bar */

#clear-selected-currencies {
    font-size: 12px;
    margin: 10px 15px 0 0;
    padding-bottom: 10px;
    position: absolute;
    z-index: 9999;
    right: 14px;
    top: 4px;
    width: 10px;

}

#clear-selected-currencies a {
    color: var(--aqua-blue);
    text-decoration: underline;
}

.msg-no-data {
    padding-top: 100px;
    padding-bottom: 80px;
    font-size: 18px !important;
    color: var(--light-grey) !important;
}

.msg-no-data a {
    font-size: 18px !important;
    color: var(--aqua-blue) !important;
    text-decoration: underline;
}

.msg-no-data a:hover {
    font-size: 18px !important;
    color: var(--light-grey) !important;
    text-decoration: underline;
}

/* end popup calendar */

.has-search,
#buy .has-search,
#sell .has-search,
#deposit-main .has-search,
#withdrawal-main .has-search {
    position: relative;
    padding: 0 15px;
    margin: 0;
}

.list-group {
    box-shadow: none;
}

#clear-selected-currencies a i {
    color: var(--opacity-white);
}

/* icon exchange */
.exchange-icon svg {
    height: 55px;
}

/* end icon exchange */
img#currencies-data-loader {
    height: 20px;
    margin-right: 6px;
}

.searchImg {
    width: 16px !important;
    height: 16px !important;
    position: absolute;
    top: 10px;
    left: 27px;
}

.inputSuccess2 {
    text-indent: 20px;
}

.user-request img {
    margin: 0 auto 10px;
    display: block;
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control,
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn,
.wait-for-response-state {
    opacity: 0.3 !important;
}

.swicth-container[disabled] {
    opacity: 0.3 !important;

}

.div-bank-status-inside {
    width: 10px;
    height: 10px;
    border-radius: 100%;
}

.div-bank-status-outSide {
    background-color: var(--white);
    width: fit-content;
    padding: 3px;
    border-radius: 100%;
    position: absolute;
    top: -7px;
    right: -7px;
}

.banks-container {
    padding: 0 15px;
}

.bank-item button {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 120px;
    min-height: 36px;
}

.BS-container {
    display: flex;
    align-items: baseline;
}

.align-items-btm {
    align-items: baseline;
}

markets-card-directive .market-details:hover .text-over-flow {
    overflow: initial;
    text-overflow: initial;
    white-space: initial;
    word-break: break-word;
}

markets-card-directive .text-over-flow {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.checkbox-image {
    height: 20px;
    width: 20px;
    border-radius: 2px;
    border: solid 1px var(--dark-blue);
    cursor: pointer;
    margin: 0;
}

.credit-card-input-container {
    display: flex !important;
}

.credit-card-input-container>input:focus,
.credit-card-input-container>input:hover,
.credit-card-input-container>input {
    outline: none;
    background-color: #f0f8ff00;
    border-color: transparent;
    width: 40px;
    padding: 0;

}

.span-place-holder {
    padding: 1px 12px 0 3px;
    font-size: 14px;
}

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

.checkbox-image-not-selected {
    height: 18px;
    width: 18px;
    border-radius: 2px;
    border: solid 1px var(--white-six);
    cursor: pointer;
    margin: 0;
}

.credit-card-input-container> ::-webkit-input-placeholder {
    color: var(--grey-black) !important;
}

.checkbox-image-selected {
    background: url(/images/checkbox_checked.svg) no-repeat;
    border: 0;
    fill: var(--white-six);
}

.chart-indicator-text {
    margin-left: 5px;
    display: inline-block;
    vertical-align: top;
    line-height: 15px;
}

.chart-indicator-text:hover {
    color: white !important;
}

.grid-row {
    display: grid;
    grid-gap: 10px;
    padding: 0 15px;
}

.grid-row.collapse {
    display: none;

}

.grid-row.collapse.in {
    display: grid;
}

.selected-blue-row-header,
table.selected-blue-row-header * {
    color: #00b6e0 !important;
}

.wl-url {

    font-size: 15px;
    cursor: pointer;
    font-family: Ubuntu;
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    line-height: 2.14;
    letter-spacing: normal;
    text-align: left;
    color: var(--aqua-blue);
}

.collapsedRow {
    color: var(--aqua-blue) !important;
}

.not-selected-comparison {
    width: 100px;
    height: 36px;
    background-color: #ffffff;
    border: 1px solid #DDDDDD;
    color: #cccccc;
}

.selected-comparison {
    width: 100px;
    height: 36px;
    background-color: #fbfbfb;
    border: 1px solid #DDDDDD;
    color: black;
    font-weight: 500;
}

.border-index-0 {
    border-radius: 4px 0 0 4px;
}

.border-index-4 {
    border-radius: 0 4px 4px 0;
}

/*******************************************************
Slider B-flat
*******************************************************/
.checkbox-slider--b-flat {
    position: relative;
}

.checkbox-slider--b-flat input {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 0%;
    margin: 0 0;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

.checkbox-slider--b-flat input+span {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.depositAndStart {
    padding-top: 10%;
}

.checkbox-slider--b-flat input+span:before {
    position: absolute;
    left: 0px;
    display: inline-block;
}

.checkbox-slider--b-flat input+span>h4 {
    display: inline;
}

.checkbox-slider--b-flat input+span:before {
    content: "";
    height: 20px;
    width: 55px !important;
    background: var(--white-six);
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.8);
    transition: background 0.2s ease-out;
}

.checkbox-slider--b-flat input+span:after {
    width: 20px;
    height: 20px;
    position: absolute;
    left: 0px;
    top: 0;
    display: block;
    background: #ffffff;
    transition: margin-left 0.1s ease-in-out;
    text-align: center;
    font-weight: bold;
    content: "";
}

/* ******** START APPLE SLIDE IOS  */
.checkbox-slider--b-flat input:checked+span:after {
    margin-left: 20px;
    content: "";
}

.checkbox-slider--b-flat input:checked+span:before {
    transition: background 0.2s ease-in;
}

.checkbox-slider--b-flat input+span:before {
    border-radius: 20px;
    width: 50px;
}

.checkbox-slider--b-flat input+span:after {
    background: #f4f4f4;
    content: "";
    width: 20px;
    border: solid transparent 2px;
    background-clip: padding-box;
    border-radius: 20px;
}

.checkbox-slider--b-flat input:not(:checked)+span:after {
    -webkit-animation: popOut ease-in 0.3s normal;
    animation: popOut ease-in 0.3s normal;
}

.checkbox-slider--b-flat input:checked+span:after {
    content: "";
    margin-left: 35px;
    border: solid transparent 2px;
    background-clip: padding-box;
    -webkit-animation: popIn ease-in 0.3s normal;
    animation: popIn ease-in 0.3s normal;
}

.checkbox-slider--b-flat input:checked+span:before {
    background: #2fbf76;
}

.checkbox-slider--b-flat input+span:before {
    box-shadow: none;
}

/* ******** END APPLE SLIDE IOS  */

.switchIOS {
    position: relative !important;
    display: inline-block !important;
    margin-top: 0 !important;
    margin-bottom: 5px !important;
}

.greyish-brown {
    color: var(--greyish-brown) !important;
}

.seperator {
    height: 1px;
    background-color: var(--white-six);
    width: 93%;
    margin-bottom: 10px !important;
    margin-left: 15px;
}

.padding-top-0 {
    padding-top: 0 !important;
}

.buttons-confirm-modal {
    display: flex;
    justify-content: space-around;
    width: 100%;
    text-align: center;
    padding-top: 20px;
}

.padding-bottom-0 {
    padding-bottom: 0 !important;
}

.padding-right-5 {
    padding-right: 5px;
}

.reload {
    color: var(--aqua-blue);
    text-decoration: underline;
    cursor: pointer;
}

.no-currs {
    font-family: Ubuntu;
    font-size: 18px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.67;
    letter-spacing: normal;
    text-align: center;
    color: var(--warm-grey);
}

/*buy/sell/withrwal*/
.balance-container .red-class {
    transition: none !important;
    margin: 2px 0 0 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-size: 12px;
}

.circle-empty-balances {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.circle-empty {
    height: 100%;
    border: 1px solid #333333;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    text-align: center;
}

.total-balance-0 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    align-items: center;
    color: #333333;
    font-size: 2vh;
    padding: 15px;
}

.balance-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.padding-bottom-15 {
    padding-bottom: 15px;
}

.new-scroll-bar::-webkit-scrollbar {
    width: 14px;
}

.new-scroll-bar::-webkit-scrollbar-thumb {
    height: 100px;
    border: 4px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
    border-radius: 10px;
    background-color: var(--white-six);
    -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05);
}

.flex-align-center {
    align-items: center;
}

.flex-align-end {
    align-items: flex-end;
}

.flex-align-start {
    align-items: flex-start;
}

account-status .wrapper {
    -webkit-transition: width 4s;
    transition: width 4s;
    min-height: 100px;
    background-color: #ffffff;
    padding-left: 20px;
    padding-top: 20px;
    border-radius: 10px;
    margin-bottom: 40px;
    border: 1px solid #f0f0f0;
    width: 100%;
}

account-status .wrapper .header,
account-status .mobile-wrapper .header {
    background-color: white;
    font-family: Ubuntu;
    font-size: 21px;
    color: var(--aqua-blue);
    display: inline-block;
}

account-status .wrapper .content-wrapper,
account-status .mobile-wrapper .content-wrapper {
    padding-left: 16px;
    padding-right: 30px;
    margin-top: 17px;
}

account-status .wrapper .content-item,
account-status .mobile-wrapper .content-item {
    font-family: Ubuntu;
    font-size: 14px;
    color: #cccccc;
    margin-left: 6px;
}

account-status .wrapper .section-verified .content-item,
account-status .mobile-wrapper .section-verified .content-item {
    color: var(--greenish-teal) !important;
}

account-status .wrapper .section-verified .account-status-img,
account-status .mobile-wrapper .section-verified .account-status-img {
    fill: var(--greenish-teal) !important;
}

account-status .wrapper .account-status-img,
account-status .mobile-wrapper .account-status-img {
    width: 20px;
    height: 15px;
    object-fit: contain;
    fill: var(--white-six);
}

account-status .all-verified {
    white-space: nowrap;
    overflow: hidden;
}

/*mobile version*/
account-status .mobile-wrapper {
    display: none;
}

account-status .mobile-wrapper .content-wrapper-mobile {
    height: 40px;
    display: flex;
    align-items: center;
}

account-status .separator {
    height: 1px;
    background-color: var(--white-six);
    width: 98%;
}

account-status .mobile-label {
    font-family: Ubuntu;
    font-size: 14px;
    color: var(--warm-grey);
}

account-status .mobile-percentage {
    font-family: Ubuntu;
    font-size: 17px;
    font-weight: 500;
    color: var(--aqua-blue);
}

account-status .show-more-less {
    font-family: Ubuntu;
    font-size: 12px;
    text-decoration: underline;
    color: var(--aqua-blue);
}

account-status .green {
    color: var(--green) !important;
}

@media screen and (max-width: 630px) {
    account-status .wrapper {
        display: none;
    }

    account-status .mobile-wrapper {
        display: block;
    }
}

.lower-mg {
    height: 70%;
}

.upper-mg {}

#marketsCard {
    overflow-y: scroll;
    height: calc(100% - 43px);
}


.wl-fees {
    width: 100%;
    height: 100%;
    margin-left: 15px;
    margin-right: 15px;
}


.my-acc-wls {
    position: absolute;
    top: calc(100% - 2px);
    right: 0;
    z-index: 1000;
    min-width: 0 !important;
    margin: 0;
    padding: 0;
}

.my-acc-dd {
    transform: translateX(-35%);
}

.height-100 {
    height: 100%;
}

.noCreditCard {
    border-radius: 0 !important;
    border-right: 1px solid var(--dark-white) !important;
}

.no-reports-fix #markets-grid {
    overflow-y: hidden;
    grid-row-start: 2;
    grid-row-end: span 1;
    grid-column-start: 3;
    grid-column-end: span 1;
}

.no-reports-fix #charts-grid {

    grid-column-end: -1;
}

.orders-flex {
    flex: 1;
}

#collapseMyActivities {
    height: 90%;
    overflow: scroll;
}

.margin-top-40 {
    margin-top: 40px
}

/*HANDLE PIE HEIGHT*/
.highcharts-root,
#piemyacc,
.highcharts-container {
    height: 100% !important;
}

@media only screen and (min-width: 1580px) and (max-width: 1750px) {
    .btn_right {
        padding-right: 5.5% !important
    }
}

@media only screen and (max-width: 1395px) {
    .circle-empty-balances {
        height: 200px;
        width: 200px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .circle-empty {
        height: initial !important;
        border: 1px solid #333333;
        border-radius: 50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        text-align: center;
    }

    /*HANDLE PIE HEIGHT*/
    #piemyacc .highcharts-root,
    #piemyacc,
    #piemyacc .highcharts-container {
        height: 265px !important;
    }
}

/* highcharts desktop platform responsiveness */
@media only screen and (min-width: 720px) and (max-width: 1395px) {}

@media only screen and (min-width: 992px) and (max-width: 1395px) {
    #markets {
        height: 100% !important;
    }

}

@media only screen and (min-width: 767px) and (max-width: 979px) {
    dashboard-pairs #dashboardPairs {
        transform: translate(50%);
    }
}

@media only screen and (max-width: 1750px) {

    .pairsGridWrapper {
        padding-bottom: 20px
    }

    #selectPairGrid {
        height: 100% !important;
        display: grid !important;
        grid-column-gap: 10px !important;
        grid-template-columns: 50% 50% !important;
        grid-template-rows: 20% 30% 20% 30% !important;
        /* 17% 22% 17% 30%;*/
    }

    .pg-quick {
        grid-column: 1 / span 1 !important;
        grid-row: 3 / 3 !important;
    }

    .pg-select-pair {
        grid-column: 1 / span 1 !important;
        grid-row: 1 / 1 !important;
    }

    .pg-pairs-btn {
        grid-column: 1 / -1 !important;
        grid-row: 2 / 2 !important;
    }

    .pg-actions-1 {
        grid-column: 1 / span 1 !important;
        grid-row: 4 / 4 !important;
    }

    .pg-actions-2 {
        grid-column: 2 / span 1 !important;
        grid-row: 4 / 4 !important;
    }
}

.list-buy-padding-zeros {
    color: #95e6bd !important;
}

.list-sell-padding-zeros {
    color: #ffbfd6 !important;
}

.list-grey-padding-zeros {
    color: #cccccc !important;
}

/*HANDLE PIE HEIGHT*/

/*currencies list*/
.currPiece {
    padding: 8px;
    border-left: 6px solid transparent;
    cursor: pointer !important;
}

.dd-reports {
    position: absolute;
    top: 2%;
    right: 3%;
}

.currPiece:hover {
    border-left: 6px solid transparent;
    background-color: var(--ice-blue);
}

.selected-curr {
    border-left: 6px solid var(--aqua-blue) !important;
    font-weight: 500 !important;
    background-color: var(--ice-blue);
}

.curr {
    font-family: Ubuntu;
    font-size: 14px;
    font-weight: 500 !important;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: normal;
    text-align: left;
    color: var(--greyish-brown);
}

.curr-desc {
    font-size: 12px;
    padding-top: 5px;
    padding-bottom: 3px;
}

.selected-item {
    color: var(--aqua-blue);
}

.seperator-of-currs {
    width: 15px;
    background-color: var(--white-four);
    border-left: 1px solid var(--white-six);
}

#report-by-user-table {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.display-none {
    display: none !important;
}

.flex-direction-column {
    flex-direction: column;
}

.disabled-permission {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

#selectPairGrid {
    padding-left: 15px;
    width: 100%;
    height: 70%;
    display: grid;
    grid-column-gap: 10px;
    grid-template-columns: 51% 24% 25%;
    grid-template-rows: 50% 50%;
}

.pairsGridWrapper {
    width: 93.5%;
}

.pg-quick {
    grid-column: 2 / span 1;
    grid-row: 1 / 1;
}

.pg-select-pair {
    grid-column: 1 / span 1;
    grid-row: 1 / 1;
}

.pg-pairs-btn {
    grid-column: 1 / span 1;
    grid-row: 2 / 2;
}

.pg-actions-1 {
    grid-column: 2 / span 1;
    grid-row: 2 / 2;
}

.pg-actions-2 {
    grid-column: 3 / span 1;
    grid-row: 2 / 2;
}

#trans-headers {
    padding: 10px;
}

.popDocView {
    cursor: pointer;
}

.align-pagi-center {
    width: 100%;
    justify-content: center;
}

#recent-transactions {
    height: calc(100% - 35px);
    overflow-y: auto;
}

.loginAlert {
    width: auto;
    position: absolute;
    left: 2%;
    top: 2%;
    color: white;
}

@media only screen and (max-height: 700px) {
    .loginAlert {
        display: none !important;
    }
}

@media only screen and (max-width: 970px) {
    .loginAlert {
        position: fixed;
        height: auto;
        top: initial;
        transform: translate(-50%);
        left: 50%;
        z-index: 99999999;
        bottom: 10%;
    }
}

@media only screen and (max-width: 1580px) {

    .pairsGridWrapper {
        padding-bottom: 20px
    }

    #selectPairGrid {
        height: 100%;
        display: grid;
        grid-column-gap: 10px;
        grid-template-columns: 50% 50%;
        grid-template-rows: 20% 30% 20% 30%;
        /* 17% 22% 17% 30%;*/
    }

    .pg-quick {
        grid-column: 1 / span 1;
        grid-row: 3 / 3;
    }

    .pg-select-pair {
        grid-column: 1 / span 1;
        grid-row: 1 / 1;
    }

    .pg-pairs-btn {
        grid-column: 1 / -1;
        grid-row: 2 / 2;
    }

    .pg-actions-1 {
        grid-column: 1 / span 1;
        grid-row: 4 / 4;
    }

    .pg-actions-2 {
        grid-column: 2 / span 1;
        grid-row: 4 / 4;
    }
}

/* 719-745 */
@media only screen and (min-width: 719px) and (max-width: 745px) {
    .panel-group .panel.marketsindicators .panel-body {
        padding: 3px !important;
    }
}

@media only screen and (min-width: 719px) and (max-width: 979px) and (max-height: 890px) {
    .lower-mg {
        height: 60% !important;
    }
}

@media only screen and (max-width: 979px) {
    .lower-mg {
        height: 60%;
    }

    balances-report-directive #balancesReport {
        transform: translateX(0%) !important;
    }

    markets-card-directive #dashboardPairs {
        transform: translateX(30%) !important;
    }

    fees-report #feesReport {
        transform: translateX(0%) !important;
        margin: 0 !important;
    }
}

balances-report-directive #balancesReport .modal-header {
    min-height: 0 !important;
    padding: 0 !important;
}

balances-report-directive #balancesReport {
    transform: translateX(-50%);
    margin: 0 !important;
}

fees-report #feesReport .modal-header {
    min-height: 0 !important;
    padding: 0 !important;
}

identity-verification-modal #identityVerificationModal {
    transform: translateX(-50%) !important;
    margin: 0 !important;
}

fees-report #feesReport {
    transform: translateX(-50%);
    margin: 0 !important;
}

/*  */
/* MARKETS GRID */

/* MARKETS GRID */

.googleQR {
    display: flex;
    justify-content: center;
    padding-top: 20px;
}

/*currencies list*/

/* WITHDRAWAL CONFIRMATION */
.width-50 {
    width: 50%;
}

#wc-grid {
    height: 60%;
    width: 100%;
    justify-content: center;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 10% 20% 60% 10%;
}

.wc-recipients {
    overflow-y: auto;
    height: calc(100% - 115px);
}

.wc-fiat-def {
    position: absolute;
    right: 43%;
    top: 22%;
}

.wc-success-indicator {
    width: 100%;
    background-color: #edfff6;
    border: 1px solid #2fbf76;
    color: #1a6640;
    font-weight: 500;
    border-radius: 5px;
    height: 36px;
}

.wc-failed-indicator {
    width: 100%;
    background-color: #fff2f7;
    border: 1px solid #ff0058;
    color: #cc0047;
    font-weight: 500;
    border-radius: 5px;
    height: 36px;
}

.wc-parts-warning {
    width: 345px;
    background-color: #fffbf0;
    border: 1px solid #f5b300;
    color: #805e00;
    font-weight: 500;
    display: flex;
    align-items: center;
    height: 35px;
    border-radius: 5px;
}

.wc-hyper {
    color: var(--aqua-blue);
    text-decoration: underline;
    cursor: pointer;
}

.width-30 {
    width: 30%;
}

.width-25 {
    width: 25%;
}

.width-15 {
    width: 15%;
}

.tc-short-select-item {
    width: 109px;
    height: 36px;
    border: solid 1px var(--white-six);
    background-color: #ffffff;
}

.tc-short-select-item span {
    font-family: Ubuntu;
    font-size: 14px;
    color: #cccccc;
}

withdrawal-confirmation .panel-body {
    padding: 0 !important;
}

.tc-short-select-item.active-select {
    background-color: var(--white-five);
}

.tc-short-select-item.active-select span {
    color: var(--black);
}

withdrawal-confirmation .wc-dd {
    width: 60%;
}

.opacity-1.showEditOption a:after {
    opacity: 1 !important;
}

.wc-dd {
    text-indent: 10px;
    width: 100%;
    height: 35px;
    border-radius: 5px;
    border: 1px solid #ddd;
    color: #333;
    background: url(../images/arrow.png) no-repeat;
    background-position-x: 95%;
    background-position-y: 50%;
    background-color: #fbfbfb;
}

.wc-disabled-label {
    pointer-events: none;
    opacity: 0.5;
}

.status-btn {
    text-align: center;
    width: 70px;
    border-radius: 5px;
    color: white !important;
}

.wc-label {
    color: var(--warm-grey);
}

.wc-part-flex {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.wc-separator {
    width: 100%;
    background-color: #ddd;
    height: 1px;
}

.wc-active {
    padding: 0 15px;
    height: 100%;
    grid-column: 1 / -1;
    grid-row: 1 / span 1;
}

.wc-confirmation {
    padding: 0 15px;
    height: 100%;
    grid-column: 1 / -1;
    grid-row: 2 / span 1;
}

.wc-participants {

    height: 100%;
    grid-column: 1 / -1;
    grid-row: 3 / span 1;
}

.wc-part-trash {
    cursor: pointer;
    width: 10%;
    text-align: right;
    display: none;
}

.wc-parts:hover .wc-part-trash {
    display: block;
}

.wc-parts:hover {
    background-color: var(--ice-blue);
}

.wc-save {
    padding: 0 15px;
    height: 100%;
    grid-column: 1 / -1;
    grid-row: 4 / span 1;
}

#twoFAMethod {
    cursor: pointer;
    border-bottom: 1px dotted var(--aqua-blue);
    color: black;
}

/* TWOSTEPSLIDER */

.enabled-disabled {
    opacity: 0.7;
    pointer-events: none;
}

#twoFAMethodSelect {
    cursor: pointer;
    color: var(--aqua-blue);
    text-decoration: underline;
    font-size: 12px;
}

.two-label-disabled {
    opacity: 0.5;
    pointer-events: none;
}

.menuItemTitle {
    white-space: pre-wrap;
}

/* TWOSTEPSLIDER */
.pair-select-group {
    color: var(--aqua-blue);
    font-weight: 600;
}

dashboard-pairs .blue-svg.arrow-up {
    transform: rotate(90deg)
}

dashboard-pairs .selected {
    background-color: var(--ice-blue) !important;
}

dashboard-pairs .pair-item {
    cursor: pointer;
    font-weight: 500;
    width: 85%;
    padding-bottom: 5px;
    padding-top: 5px;
    padding-left: 20px
}

#twoFaProfile .modal-body {
    width: 100% !important;
}

.disabled-button {
    opacity: 0.3;
    pointer-events: none;
    cursor: default;
}

.warm-grey-color {
    color: var(--warm-grey);
}

.my-account-container {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding-left: 15px;
    padding-right: 15px;
}

.padding-right-10 {
    padding-right: 10px;
}

my-account-card .panel-body {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.dashPairs {
    height: 400px;
    overflow: scroll
}

@media screen and (max-width: 992px) {
    .dashPairs {
        height: 400px;
        overflow: scroll
    }
}

@media screen and (min-width: 1395px) and (max-width: 1580px) {
    #selectPairGrid {
        grid-template-rows: 17% 35% 17% 30%;
    }
}

@media screen and (max-height: 890px) {
    .pg-quick {
        display: none;
    }

    .pg-select-pair {
        display: none;
    }

    .lower-mg {
        height: 50%
    }
}


@media only screen and (max-width: 470px) {
    .pairsGridWrapper {
        width: 94%;
    }
}

@media screen and (min-width: 719px) and (max-width: 1110px) {
    .pairsGridWrapper {
        width: 92.5%;
    }
}

@media screen and (min-width: 1110px) and (max-width: 1395px) {
    .pairsGridWrapper {
        width: 94.5%;
    }
}

@media screen and (min-width: 1580px) and (max-width: 1800px) {
    .pairsGridWrapper {
        width: 92%;
    }
}

.locked_balance_desk {}

.locked_balance_mob {
    display: none;
}

@media screen and (max-width: 340px) {
    .locked_balance_desk {
        display: none !important;
    }

    .locked_balance_mob {
        display: block;
    }

}

/* HANDLE DASHBOARD CHARTS CARD RESPONSIVE */
@media screen and (max-width: 405px) {
    .desktop-charts-headers {
        display: none !important;
    }

    .mobile-charts-headers {
        display: block !important;
    }
}

.mobile-charts-headers {
    display: none;
}

/* HANDLE DASHBOARD CHARTS CARD RESPONSIVE */
.justify-content-center {
    justify-content: center;
}

#myProfile .form-control.border-red-error {
    border: 1px solid var(--pink-red) !important;
}

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

.text-right {
    text-align: right !important;
}

td.bold.amountField {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.padding-right-0 {
    padding-right: 0 !important;
}

.popover-error-wrapper {
    height: 20px;
    background-color: var(--pink-red);
    text-align: center;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.popover-error-wrapper span {
    font-family: Ubuntu;
    font-size: 13px;
    font-weight: 500;
    color: #ffffff;
}

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

.pointer-events-none {
    pointer-events: none !important;
}

.justify-content-center {
    justify-content: center;
}

.bg-color-white-five {
    background-color: var(--white-five) !important;
}

@media only screen and (min-width: 991px) {
    .popover-single-width {
        width: 320px;
    }

    .popover-close-fix {
        display: none !important;
    }

    .btn-save {
        display: none !important;
    }
}

.buttons-popover {
    display: flex;
}

@media only screen and (min-width: 767px) and (max-width: 991px) {
    .popover-close-fix {
        position: absolute;
        z-index: 99999999;
        top: 0;
        right: 3%;
    }

    .user-pref-fixed {
        position: initial !important;
    }

    .save-fix {
        padding-right: 50px;
    }

    .buttons-popover {
        display: none !important;
    }
}

@media only screen and (max-width: 767px) {
    .user-pref-fixed {
        position: fixed !important;
    }

    .main-navigation {
        min-height: calc(100% - 70px) !important;
    }

    open-orders-card-directive .popover-content {
        display: none !important;
    }
}


transaction-cancel-modal .item-wrapper,
transaction-confirm-modal .item-wrapper {
    margin-bottom: 24px;
}

transaction-cancel-modal .item-text,
transaction-confirm-modal .item-text {
    width: 50%;
    font-family: Ubuntu;
    font-size: 14px;
    color: var(--warm-grey);
}

transaction-cancel-modal .item-const-text,
transaction-quick-modal .item-const-text,
transaction-confirm-modal .item-const-text {
    font-family: Ubuntu;
    font-size: 14px;
    color: var(--black);
}

transaction-cancel-modal .tcm-basic-input,
transaction-quick-modal .tcm-basic-input,
transaction-confirm-modal .tcm-basic-input {
    width: 215px;
    height: 36px;
    border-radius: 4px !important;
    border: solid 1px var(--white-six) !important;
    background-color: var(--white-five) !important;
    box-shadow: none;
}

transaction-quick-modal .tcm-basic-input {
    width: 200px;
}

transaction-quick-modal .tcm-basic-input::placeholder {
    font-family: Ubuntu;
    font-size: 14px;
    color: #cccccc;
}

transaction-cancel-modal .tcm-basic-input:focus {
    outline: none !important;
}

transaction-cancel-modal button.btn-pink-red,
transaction-cancel-modal button.btn-blue {
    margin: 44px 0 0 50%;
    width: 215px;
    height: 36px;
}

transaction-cancel-modal button.btn-pink-red {
    background-color: var(--pink-red) !important;
}

transaction-cancel-modal button.btn-pink-red span,
transaction-cancel-modal button.btn-blue span {
    font-family: Ubuntu;
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
}

.margin-top-14 {
    margin-top: 14px;
}

transaction-cancel-modal select.tcm-basic-input,
transaction-confirm-modal select.tcm-basic-input {
    background: url(../images/arrow.png) no-repeat;
    background-position-x: 95%;
    background-position-y: 50%;
    padding-left: 10px;
    color: #333333;
    padding-right: 30px;
}

transaction-cancel-modal modal .custom-close-header,
transaction-confirm-modal modal .custom-close-header {
    min-width: 640px;
}

transaction-quick-modal modal .custom-close-header {
    min-width: 480px;
    min-height: 220px;
    border-radius: 10px;
    border: solid 1px var(--white-seven);
}

transaction-quick-modal button.btn-basic {
    margin-top: 44px;
    width: 200px;
    height: 36px;
}

transaction-quick-modal button.btn-blue,
transaction-confirm-modal button.btn-blue {
    background-color: var(--aqua-blue);
}

transaction-quick-modal button.btn-blue span,
transaction-confirm-modal button.btn-blue span,
transaction-confirm-modal button.btn-green span {
    font-family: Ubuntu;
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
}

transaction-confirm-modal .error-msg,
transaction-quick-modal .error-msg {
    position: absolute;
    left: 50%;
    bottom: -14px;
    top: 40px;
    color: var(--pink-red);
}

transaction-quick-modal button.btn-white {
    border: solid 2px var(--warm-grey-two);
    background-color: #ffffff;
}

.weight-500 {
    font-weight: 500;
}

.width-40pr {
    width: 40%;
}

transaction-quick-modal button.btn-white span {
    font-family: Ubuntu;
    font-size: 14px;
    font-weight: 500;
    color: var(--warm-grey-two);
}

transaction-confirm-modal .input-coin,
tab-context .input-coin {
    position: absolute;
    top: 25%;
    right: 10px;
}

transaction-confirm-modal .fee-percentage {
    width: 65px;
    padding-right: 23px;
}

transaction-confirm-modal .fee-number {
    width: 145px;
    padding-right: 40px;
}

.margin-right-5 {
    margin-right: 5px;
}

.margin-left-half {
    margin-left: 50%;
}

.margin-bottom-11 {
    margin-bottom: 11px;
}

transaction-confirm-modal button.btn-green {
    background-color: var(--greenish-teal);
}

transaction-confirm-modal .tcm-button {
    width: 103px;
}

transaction-confirm-modal .tcm-show-more {
    background-color: var(--white-four);
    width: calc(100% + 60px);
    transform: translateX(-30px);
    padding: 0 30px;
    align-items: initial !important;
}

.margin-bottom-10 {
    margin-bottom: 10px !important;
}

user-docs-modal #userDocsHeight {
    margin-top: 20px;
}

.panel-group .panel:hover {
    box-shadow: none !important;
}

.error-msg-margin {
    margin: 0 15px;
}

.margin-top-20 {
    margin-top: 20px;
}

transactions-deposit-requests .popover.top,
transactions-withdrawal-requests .popover.top,
transactions-transfer-requests .popover.top,
my-request .popover.top {
    width: auto !important;
}

.block {
    display: block;
}


redirect-to .wrapper {
    position: fixed;
    display: flex;
    justify-content: center;
    padding-top: 200px;
    height: 100vh;
    width: 100vw;
    background: rgba(0, 0, 0, 0.31) !important;
    top: 0;
    left: 0;
    z-index: 9999;
}

redirect-to .wrapper .msg-box {
    width: auto;
    height: 200px;
    color: whitesmoke;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding: 0 15px;
    background-color: var(--white);
    border: 1px solid #f0f0f0 !important;
    border-radius: 6px;
}

redirect-to .wrapper .msg-box .msg-text {
    font-family: Ubuntu;
    font-size: 14px;
    color: var(--greyish-brown);
    text-align: center;
    margin-top: 10px;
}

.user-mgmnt-wrapper .userRolesWrapper {
    overflow-y: initial !important;
    height: initial !important;
}

.white-space-nowrap {
    white-space: nowrap;
}

.blue-onclick:active {
    color: var(--aqua-blue);
}


@media screen and (max-height: 800px) {
    .transaction-mgmnt-main-style .modal.fade {
        height: 80%;
    }

    .transaction-mgmnt-main-style .modal-body {
        overflow: auto;
        height: 90%;
    }

    .transaction-mgmnt-main-style .modal-body::-webkit-scrollbar {
        width: 5px;
        background-color: transparent;
    }

    .transaction-mgmnt-main-style .modal-body::-webkit-scrollbar-track {
        width: 5px;
        background-color: transparent;
    }

    .transaction-mgmnt-main-style .modal-body::-webkit-scrollbar-thumb {
        width: 5px;
        border-radius: 10px;
        background-color: var(--light-grey);
    }

}

filters .modal-footer {
    padding: 15px 15px 0 15px;
}

filters #filters-modal.modal {
    padding-bottom: 15px !important;
}

.bigger-action-icon {
    width: 19px !important;
    height: 19px !important;
}

.remove-filter-date-selector {
    position: absolute;
    right: 0;
    top: 50%;
}

.margin-right-10 {
    margin-right: 10px !important;
}

.link-empty-msg {
    text-decoration: underline;
    color: var(--aqua-blue);
    cursor: pointer;
}

trades-buy .trd-select-wrapper,
trades-buy .trd-your-balance,
trades-buy .trd-input-titles,
trades-sell .trd-select-wrapper,
trades-sell .trd-your-balance,
trades-sell .trd-input-titles,
deposit-trade .trd-select-wrapper,
deposit-trade .trd-your-balance,
deposit-trade .trd-input-titles,
buy-crypto .trd-select-wrapper,
buy-crypto .trd-your-balance,
buy-crypto .trd-input-titles {
    margin-bottom: 11px;
}

trades-buy .trd-select-wrapper .trd-select-btn,
trades-sell .trd-select-wrapper .trd-select-btn,
deposit-trade .trd-select-wrapper .trd-select-btn,
buy-crypto .trd-select-wrapper .trd-select-btn {
    width: 215px;
    height: 36px;
    margin-bottom: 0 !important;
}

trades-buy .trd-select-wrapper label,
trades-buy .trd-your-balance label,
trades-sell .trd-select-wrapper label,
trades-sell .trd-your-balance label,
deposit-trade .trd-select-wrapper label,
deposit-trade .trd-your-balance label,
buy-crypto .trd-select-wrapper label,
buy-crypto .trd-your-balance label {
    width: 30%;
}

trades-buy .trd-your-balance div,
trades-buy .trd-fee-wrapper div,
trades-buy .trd-bold,
trades-sell .trd-your-balance div,
trades-sell .trd-fee-wrapper div,
trades-sell .trd-bold,
deposit-trade .trd-your-balance div,
deposit-trade .trd-fee-wrapper div,
deposit-trade .trd-bold,
buy-crypto .trd-your-balance div,
buy-crypto .trd-fee-wrapper div,
buy-crypto .trd-bold {
    font-family: Ubuntu;
    font-size: 14px;
    color: var(--black);
}

trades-buy .trd-basic-label,
deposit-trade .trd-basic-label,
buy-crypto .trd-basic-label,
trades-sell .trd-basic-label {
    font-family: Ubuntu;
    font-size: 14px;
    color: var(--warm-grey);
    margin: 0 !important;
}

trades-buy .trd-wrapper,
buy-crypto .trd-wrapper,
deposit-trade .trd-wrapper,
trades-sell .trd-wrapper {
    margin: 0 15px;
}

trades-buy .trd-hr,
buy-crypto .trd-hr,
deposit-trade .trd-hr,
trades-sell .trd-hr {
    height: 1px;
    background-color: var(--white-six);
    width: 100%;
}

.margin-left-4 {
    margin-left: 4px;
}

trades-buy .trd-per-wrapper,
buy-crypto .trd-per-wrapper,
deposit-trade .trd-per-wrapper,
trades-sell .trd-per-wrapper {
    margin: 0 0 20px 30%;
    width: 215px;
    display: flex;
    justify-content: center;
    font-family: Ubuntu !important;
    color: var(--aqua-blue) !important;
}

trades-buy .trd-input-titles,
buy-crypto .trd-input-titles,
deposit-trade .trd-input-titles,
trades-sell .trd-input-titles {
    margin-top: 25px;
}


trades-buy .trd-input-wrapper,
buy-crypto .trd-input-wrapper,
deposit-trade .trd-input-wrapper,
trades-sell .trd-input-wrapper {
    margin-bottom: 30px;
    align-items: flex-end;
}

trades-buy .trd-input-wrapper input,
trades-sell .trd-input-wrapper input,
buy-crypto .trd-input-wrapper input,
deposit-trade .trd-input-wrapper input,
deposit-trade .wrapper-input select,
deposit-trade .wrapper-input select.form-control:focus,
withdrawal-currency .trd-input-wrapper input {
    width: 215px;
    height: 36px;
    border-radius: 4px;
    border: solid 1px var(--white-six);
    background-color: var(--white-five);
    outline: none;
    padding-right: 40px;
}

withdrawal-currency .trd-input-wrapper input {
    width: 100%;
}

withdrawal-currency .trd-input-wrapper input::placeholder {
    color: var(--black);
    opacity: 0.35;
}

trades-buy .trd-input-wrapper span,
buy-crypto .trd-input-wrapper span,
deposit-trade .trd-input-wrapper span,
trades-sell .trd-input-wrapper span {
    position: absolute;
    right: 12px;
    top: 25%;
}

trades-buy .trd-input-wrapper .trd-input-img,
deposit-trade .trd-input-wrapper .trd-input-img,
buy-crypto .trd-input-wrapper .trd-input-img,
trades-sell .trd-input-wrapper .trd-input-img {
    width: 36px;
    height: 36px;
    margin: 0 8px;
}

trades-buy .trd-fee-wrapper,
buy-crypto .trd-fee-wrapper,
deposit-trade .trd-fee-wrapper,
trades-sell .trd-fee-wrapper {
    margin-bottom: 30px;
}

trades-buy .trd-sum-wrapper,
buy-crypto .trd-sum-wrapper,
deposit-trade .trd-sum-wrapper,
trades-sell .trd-sum-wrapper {
    margin: 30px 0 70px 0;
}

trades-buy .trd-btn,
buy-crypto .trd-btn,
deposit-trade .trd-btn,
trades-sell .trd-btn {
    width: 215px;
    margin-left: 30%;
}

trades-buy .trd-btn button-submit button,
deposit-trade .trd-btn button-submit button,
buy-crypto .trd-btn button-submit button,
trades-sell .trd-btn button-submit button {
    background-color: var(--greenish-teal) !important;
    border-color: var(--greenish-teal) !important;
}

trades-buy .trd-enter-amount,
buy-crypto .trd-enter-amount,
deposit-trade .trd-enter-amount,
trades-sell .trd-enter-amount {
    position: absolute;
    top: 100%;
}

trades-buy .trd-insufficientBalance,
buy-crypto .trd-insufficientBalance,
deposit-trade .trd-insufficientBalance,
trades-sell .trd-insufficientBalance {
    margin-left: 7px;
}

trades-buy .trd-sum-wrapper .icon-information-aml,
buy-crypto .trd-sum-wrapper .icon-information-aml,
deposit-trade .trd-sum-wrapper .icon-information-aml,
trades-sell .trd-sum-wrapper .icon-information-aml {
    color: #cccccc !important;
}

trades-buy button-submit span,
buy-crypto button-submit span,
deposit-trade button-submit span,
trades-sell button-submit span {
    font-family: Ubuntu;
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
}

@media only screen and (min-width: 1200px) and (max-width: 1535px) {

    trades-buy .trd-input-wrapper,
    deposit-trade .trd-input-wrapper,
    trades-sell .trd-input-wrapper {
        flex-direction: column;
        align-items: flex-start;
        margin-left: 30%;
        position: relative;
    }

    trades-buy .trd-fee-wrapper div,
    deposit-trade .trd-fee-wrapper div,
    trades-sell .trd-fee-wrapper div {
        margin-left: calc(30% - 20px);
        padding: 0 !important;
    }

    trades-buy .trd-input-titles,
    deposit-trade .trd-input-titles,
    trades-sell .trd-input-titles {
        margin-top: 10px;
    }

    trades-buy .trd-input-wrapper .trd-input-img,
    deposit-trade .trd-input-wrapper .trd-input-img,
    trades-sell .trd-input-wrapper .trd-input-img {
        width: 215px;
        display: flex;
        justify-content: center;
        margin: 0 !important;
    }

    trades-buy .trd-insufficientBalance,
    deposit-trade .trd-insufficientBalance,
    trades-sell .trd-insufficientBalance {
        position: absolute;
        bottom: -9px;
        right: 0;
    }

    trades-buy .trd-your-balance,
    deposit-trade .trd-your-balance,
    trades-sell .trd-your-balance {
        position: relative;
    }

    trades-buy .trd-input-res,
    deposit-trade .trd-input-res,
    trades-sell .trd-input-res {
        margin-bottom: 21px;
    }
}

@media only screen and (max-width: 600px) {

    trades-buy .trd-input-wrapper,
    buy-crypto .trd-input-wrapper,
    deposit-trade .trd-input-wrapper,
    trades-sell .trd-input-wrapper {
        flex-direction: column;
        align-items: flex-end;
        margin-left: 30%;
        position: relative;
    }

    buy-crypto .trd-input-total-fix,
    deposit-trade .trd-input-total-fix {
        align-items: flex-start;
        margin-left: 0;
    }

    trades-buy .trd-fee-wrapper div,
    buy-crypto .trd-fee-wrapper div,
    deposit-trade .trd-fee-wrapper div,
    trades-sell .trd-fee-wrapper div {
        margin-left: calc(30% - 20px);
        padding: 0 !important;
    }

    trades-buy .trd-input-titles,
    buy-crypto .trd-input-titles,
    deposit-trade .trd-input-titles,
    trades-sell .trd-input-titles {
        margin-top: 10px;
    }

    trades-buy .trd-input-wrapper .trd-input-img,
    buy-crypto .trd-input-wrapper .trd-input-img,
    deposit-trade .trd-input-wrapper .trd-input-img,
    trades-sell .trd-input-wrapper .trd-input-img {
        width: 215px;
        display: flex;
        justify-content: center;
        margin: 0 !important;
    }

    trades-buy .trd-insufficientBalance,
    buy-crypto .trd-insufficientBalance,
    deposit-trade .trd-insufficientBalance,
    trades-sell .trd-insufficientBalance {
        position: absolute;
        bottom: -9px;
        right: 0;
    }

    trades-buy .trd-your-balance,
    buy-crypto .trd-your-balance,
    deposit-trade .trd-your-balance,
    trades-sell .trd-your-balance {
        position: relative;
    }

    trades-buy .trd-input-res,
    buy-crypto .trd-input-res,
    deposit-trade .trd-input-res,
    trades-sell .trd-input-res {
        margin-bottom: 21px;
    }

    trades-buy .trd-btn,
    buy-crypto .trd-btn,
    deposit-trade .trd-btn,
    trades-sell .trd-btn {
        margin: 0;
    }

    trades-buy .trd-select-wrapper,
    trades-buy .trd-your-balance,
    buy-crypto .trd-select-wrapper,
    buy-crypto .trd-your-balance,
    deposit-trade .trd-select-wrapper,
    deposit-trade .trd-your-balance,
    trades-sell .trd-select-wrapper,
    trades-sell .trd-your-balance {
        flex-wrap: wrap;
    }

    trades-buy .trd-select-wrapper label,
    trades-buy .trd-your-balance label,
    buy-crypto .trd-select-wrapper label,
    buy-crypto .trd-your-balance label,
    deposit-trade .trd-select-wrapper label,
    deposit-trade .trd-your-balance label,
    trades-sell .trd-select-wrapper label,
    trades-sell .trd-your-balance label {
        width: 100%;
    }

    trades-buy .trd-per-wrapper,
    buy-crypto.trd-per-wrapper,
    deposit-trade.trd-per-wrapper,
    trades-sell .trd-per-wrapper {
        margin-left: 0;
    }
}

.margin-left-50 {
    padding-left: 50px !important;
}

.filterDateRadio {
    position: absolute;
    left: -15px;
}

body .banner-go-deposit {
    font-weight: bold;
}

body .banner-go-deposit span {
    font-family: Ubuntu;
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
}

body .banner-go-deposit a {
    text-decoration: none;
}

#mainContainer ._container {
    min-height: calc(100% - 100px);
}

.no-trades-ohlc {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 18px;
    flex-direction: column;
}

#Availbleroles {
    height: calc(100% - 50px);
    overflow-y: auto;
}

.resEmail-back-to-login {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.resEmail-back-to-login label {
    color: var(--aqua-blue) !important;
    cursor: pointer;
}

.pay-msg-wrapper {
    width: 100%;
    height: auto;
    flex-direction: column;
    align-items: center;
}

.pay-msg-wrapper .pay-user-msg {
    width: 100%;
    padding: 0 10%;
    min-height: 400;
    border: 1px solid #f0f0f0;
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-direction: column;

}

.pay-msg-wrapper .pay-error {
    margin-top: 10px;
}

.pay-msg-wrapper .pay-action-buttons {
    max-width: 540px;
    width: 100%;
    padding: 10px 40px;
}

.pay-msg-wrapper .pay-action-buttons button {
    width: 40%;
}

.pay-msg-wrapper .pay-tpl-text {
    color: #7F7F7F !important;
}

.pay-error .row {
    margin: 0 !important;
}

.jus-con-end {
    justify-content: flex-end;
}

.red-bg {
    background-color: #ffedf3 !important;
}

.green-bg {
    background-color: #e6fff1 !important;
}

/* HERE */

.dis-none {
    display: none !important;
}

.disabled-dd {
    pointer-events: none !important;
}

.opacity-5 {
    opacity: 0.5 !important;
}

ribbon action-item .dropdown.white-tooltip {
    width: 100%;
    height: 100%;
}

new-pagination .new-pag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--form-white);
    padding: 5px 0;
}

new-pagination .pag-btn {
    cursor: pointer;
    font-size: 18px;
    color: var(--greyish-brown);
    opacity: 0.7;
}

new-pagination .pag-btn:hover {
    color: var(--aqua-blue);
    opacity: 1;
    transition: all 0.2s linear;
}

new-pagination .sep {
    font-size: 18px;
    color: var(--form-white);
}

.def-select-wrap:after {
    content: '>';
    font: 19px "Consolas", monospace;
    color: #aaa;
    right: 10px;
    top: 50%;
    transform: translate(0, -50%) rotate(90deg);
    position: absolute;
    pointer-events: none;
}

.p-x-15 {
    padding: 0 15px;
}

.modal-backdrop.fade {
    background-color: var(--modal-white);
}


@media (min-width: 768px) and (max-width: 979px) {
    .main-navigation menu-item .title {
        display: none;
    }

    .main-navigation menu-item a {
        padding-left: 7px !important;
    }

    .main-navigation menu-item menu-item {
        display: none;
    }
}


.not-visible {
    visibility: hidden !important;
}

.pagination-container .pagination-prev.disabled,
.pagination-container .pagination-next.disabled {
    display: inline;
}

.jsPanel .foldable-card,
page-maker .foldable-card {
    padding: 10px;
    border-radius: 10px;
    border: 2px #f0f0f0 solid;
    background-color: #fff;
}


.jsPanel .cursor-initial,
page-maker .cursor-initial {
    cursor: initial;
}

.filters-form-style .fm-wrapper,
.filters-form .fm-wrapper {
    overflow-y: initial !important;
    overflow-x: initial !important;
}

.filters-form .m-b-fm {
    margin-bottom: 0;
}

[uib-datepicker-popup-wrap] .uib-datepicker-popup.dropdown-menu {
    width: initial;
    z-index: 20000;
    right: initial;
}

[uib-datepicker-popup-wrap] .uib-datepicker-popup.dropdown-menu .btn-group.pull-left {
    top: 0;
}


.pointer-none {
    pointer-events: none;
}


.jsPanel .ltr,
page-maker .ltr {
    direction: ltr;
}

.jsPanel .child-maker-input-wrapper,
page-maker .child-maker-input-wrapper {
    position: relative;
}

.jsPanel .search-icon-cm,
page-maker .search-icon-cm,
page-maker .child-maker-input-wrapper.ltr .search-icon-cm {
    position: absolute;
    top: 50%;
    right: 5;
    left: initial;
    transform: translate(0, -50%);
    width: 18px;
    height: 18px;
    cursor: pointer;

}

.jsPanel .search-icon-input,
page-maker .search-icon-input,
page-maker .child-maker-input-wrapper.ltr .search-icon-input {
    padding-right: 20px;
    padding-left: 12px;

}

.child-maker-input-wrapper.ltr input::placeholder {
    direction: ltr !important;
    text-align: left !important;
}

.rtl .jsPanel .search-icon-input,
.rtl page-maker .search-icon-input {
    padding-right: 12px;
    padding-left: 20px;
}



.rtl .jsPanel .search-icon-cm,
.rtl page-maker .search-icon-cm {
    right: initial;
    left: 5;
}

.over-flow-visible {
    overflow: visible !important;
}

.over-flow-visible .fm-wrapper {
    overflow: visible !important;
}

.over-flow-visible .grid-style-child {
    overflow: visible !important;
}

.form-labels-intial .jsPanel .cp-title,
.form-labels-intial page-maker .cp-title {
    width: initial;
    margin-right: 10px;
}

.rtl .form-labels-intial .jsPanel .cp-title,
.rtl .form-labels-intial page-maker .cp-title {
    margin-right: 0;
    margin-left: 10px;
}

.rtl .glyphicon-chevron-left:before {
    content: "\e080";
}

.rtl .glyphicon-chevron-right:before {
    content: "\e079";
}


.jsPanel select.fm-base-input,
page-maker select.fm-base-input {
    padding-left: 7px;
    padding-right: 25px;
}

.rtl .jsPanel select.fm-base-input,
.rtl page-maker select.fm-base-input {
    padding-right: 7px;
    padding-left: 25px;
}

.jsPanel .pos-inital,
page-maker .pos-inital {
    position: initial !important;
}

.rtl :-moz-placeholder {
    text-align: right;
}

.rtl :-ms-input-placeholder {
    text-align: right;
}

.rtl ::-webkit-input-placeholder {
    text-align: right;
}


.pme-debug-class .ag-header-cell,
.pme-debug-class .ag-header-group-cell,
.pme-debug-class .ag-cell {
    border: 1px solid red;
}

.flex-1 {
    flex: 1;
}

.rtl form-maker .fm-btn-wrapper .btn {
    margin-right: 10px;
}


body:not(.rtl) form-maker .fm-btn-wrapper .btn {
    margin-left: 10px;
}

[ag-grid-maker-wrapper] .ag-header-cell,
[ag-grid-maker-wrapper] .ag-header-group-cell,
[ag-grid-maker-wrapper] .ag-cell,
ag-grid-maker-wrapper .ag-header-cell,
ag-grid-maker-wrapper .ag-header-group-cell,
ag-grid-maker-wrapper .ag-cell {
    border-right: 1px solid #D9DDDF;
}

.ml-5 {
    margin-left: 5;
}


[panel] .border_pm_panel .border-label,
panel .border_pm_panel .border-label {
    border-right: 2px #f0f0f0 solid;
    border-left: 2px #f0f0f0 solid;
    padding: 0 3px 0 4px;
    height: 16px;
}

[ag-grid-maker-wrapper] .ag_grid_a,
ag-grid-maker-wrapper .ag_grid_a {
    text-decoration: underline;
    color: #337ab7;
}

.jsPanel {
    z-index: 20000 !important;
}

.jsPanel .jsPanel-titlebar,
.jsPanel .jsPanel-title {
    font-size: 18px;
}

.jsPanel .jsPanel-hdr-toolbar,
.jsPanel .jsPanel-ftr {
    font-size: 16px;
}

.jsPanel .jsPanel-content {
    position: initial;
    font-size: 16px;
    padding: 5px 10px;
}

.select2-search,
.select2-drop {
    z-index: 20002 !important;
}


.jsPanel .dir-auto,
page-maker .dir-auto {
    unicode-bidi: plaintext;
}

.jsPanel .dir-rtl,
.jsPanel .dir-right,
page-maker .dir-rtl,
page-maker .dir-right {
    direction: rtl;
}

.jsPanel .dir-ltr,
.jsPanel .dir-left,
page-maker .dir-ltr,
page-maker .dir-left {
    direction: ltr;
}

.jsPanel .ag-grid-icon-pme,
page-maker .ag-grid-icon-pme {
    width: 28px;
    height: 28px;
    fill: white;
}

.jsPanel .ag-grid-disable-download,
page-maker .ag-grid-disable-download {
    pointer-events: none;
}

.jsPanel .ag-grid-infi-active,
page-maker .ag-grid-infi-active {
    fill: var(--main);
}

.jsPanel .ag-paging-page-size.events-none .ag-wrapper,
page-maker .ag-paging-page-size.events-none .ag-wrapper {
    background: lightgray;
}

.jsPanel .ag-pagi-wrapper>*,
page-maker .ag-pagi-wrapper>* {
    margin: 0 var(--ag-cell-horizontal-padding);
}

.jsPanel .ag-pagi-wrapper>.ag-paging-page-size .ag-wrapper,
page-maker .ag-pagi-wrapper>.ag-paging-page-size .ag-wrapper {
    min-width: calc(var(--ag-grid-size)* 10);
}

.jsPanel .ag-grid-unlimit-btn:focus,
.jsPanel .ag-grid-unlimit-btn,
page-maker .ag-grid-unlimit-btn:focus,
page-maker .ag-grid-unlimit-btn {
    position: relative;
    font-family: "Open Sans";
    text-decoration: none;
    font-size: 25px;
    border: 1px solid #c4c4c4;
    border-radius: 5px;
    height: 20px;
    bottom: 2px;
    box-shadow: 0px 3px 0px #c4c4c4;
    text-shadow: 1px 1px 1px #fff;
    transition: All 250ms ease;
}

.jsPanel .ag-grid-unlimit-btn:hover,
page-maker .ag-grid-unlimit-btn:hover {
    filter: brightness(0.92);
}

.jsPanel .ag-grid-unlimit-btn.events-none:focus,
.jsPanel .ag-grid-unlimit-btn.events-none,
.jsPanel .ag-grid-unlimit-btn:active,
page-maker .ag-grid-unlimit-btn.events-none:focus,
page-maker .ag-grid-unlimit-btn.events-none,
page-maker .ag-grid-unlimit-btn:active {
    bottom: 0;
    filter: brightness(0.86);
    box-shadow: none !important;
}

.jsPanel .ag-grid-unlimit-btn svg,
page-maker .ag-grid-unlimit-btn svg {
    width: 18px;
    height: 18px;
    fill: white;
}

.jsPanel .ag-grid-export-btn,
page-maker .ag-grid-export-btn {
    height: 38px;
    width: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    cursor: pointer;
}

.jsPanel .ag-grid-export-btn:hover,
page-maker .ag-grid-export-btn:hover {
    filter: brightness(0.86);
}

.jsPanel .ag-grid-export-btn:focus,
page-maker .ag-grid-export-btn:focus {
    box-shadow: 0 0 2px 1px var(--main);
}

.jsPanel .ag-grid-export-btn.ag-grid-disable-download,
page-maker .ag-grid-export-btn.ag-grid-disable-download {
    opacity: 0.5;
    cursor: not-allowed !important;
}

.jsPanel-controlbar {
    align-self: center !important;
}

.jsPanel-headerbar .jsPanel-controlbar .jsPanel-btn.jsPanel-btn-md span:not(.material-icons),
.jsPanel-headerbar .jsPanel-controlbar .jsPanel-btn.jsPanel-btn-md svg:not(.svg-inline--fa) {
    width: 20px;
    height: 20px;
}

.jsPanel .pme-link,
page-maker .pme-link {
    text-decoration: underline;
}

.jsPanel .pm-icon-btn,
page-maker .pm-icon-btn {
    font-size: 12px;
    margin-right: 7px;
    margin-left: 0;
}

.pm-svg-btn {
    width: 16px;
    height: 16px;
    fill: white;
}

.rtl .jsPanel .pm-icon-btn,
.rtl page-maker .pm-icon-btn {
    margin-right: 0px;
    margin-left: 7px;
}

.display-none {
    display: none !important;
}

.jsPanel .ag-button-selected,
page-maker .ag-button-selected {
    /* color: #00b6e0 !important; */
    border-bottom: 3px solid #337ab7 !important;
}


.jsPanel input[type=checkbox],
.jsPanel input[type=radio],
page-maker input[type=checkbox],
page-maker input[type=radio] {
    margin: 0;
}


body:not(.rtl) .base-margin {
    margin-left: 5px;
}

.base-margin {
    margin-right: 5px;
}

.validation-label-padding {
    padding-bottom: 28px;
}

.page-maker-def-validation {
    width: 100%;
    font-size: 14px;
    color: var(--white);
    background: var(--red);
    padding: 2px 10px 6px 10px;
    border-bottom-left-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
}

.jsPanel .foldable-card.border_pm_panel,
page-maker .foldable-card.border_pm_panel {
    padding-top: 13px;
}

.border_pm_panel {
    margin-top: 5px;

}

ag-date .dropdown-menu,
[ag-date] .dropdown-menu {
    margin: 0 !important;
}

ag-date-between .dropdown-menu,
[ag-date-between] .dropdown-menu {
    margin: 0 !important;
}

/* .fm-main-wrapper {
    height: 100%;
} */

.fm-main-wrapper .fm-disable-mode {
    .select2-container {
        background-color: transparent !important;

        .select2-choice {
            background-color: transparent !important;
            border: none !important;
            font-size: 16px !important;

            &.select2-default {
                display: none !important;
            }

            & .select2-chosen {
                padding: 0;
            }
        }
    }

    input,
    input[disabled],
    .country-dropdown-main {
        border: none;
        background-color: transparent !important;
        color: inherit;
        font-size: 16px;
        padding: 0;
        margin: 0;
        appearance: none;
        outline: none;
        pointer-events: none;
        cursor: default;
        opacity: 1 !important;
        box-shadow: none !important;
        /* Remove any reduced opacity */
    }

    .input-arrow {
        display: none;
    }

    &fieldset[disabled] .form-control {
        opacity: 1 !important;
    }
}

page-maker,
.jsPanel-content {

    .pme-before-icon-wrapper {
        .pme-before-icon {
            position: absolute;
            z-index: 10;
            top: 50%;
            font-size: 14px;
            transform: translateY(-50%);
        }

        &.pme-input-ltr {
            .pme-before-icon {
                left: 12px;
            }

            &>input,
            &>select,
            .select2-choices {
                padding-left: 32px !important;
            }
            
            .select2-input{
                padding-left: 0 !important;
            }
        }

        &.pme-input-rtl {
            .pme-before-icon {
                right: 12px;
            }

            &>input,
            &>select,
            .select2-choices {
                padding-right: 32px !important;
            }
            .select2-input{
                padding-right: 0 !important;
            }
        }
    }

    .main-color-text {
        color: var(--main);
    }

    [ag-grid-agura] {
        .ag-grid-multi-line-wrapper {
            height: 100%;
            overflow: auto;
            display: flex;
            flex-direction: column;
            justify-content: safe center;
        }
    }

    [ag-tpl-template] {
        .tpl-template-container {
            position: relative;
            min-height: 20px;
            min-width: 20px;
            color: var(--greyish-brown);
        }

        .tpl-template-editable {
            position: relative;
        }

        .tpl-template-editable-wrapper {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .tpl-template-editable:hover .edit-pen:after {
            font-family: FontAwesome;
            font-size: 16px;
            content: "\f040";
            color: var(--aqua-blue);
            position: absolute;
            right: 5px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
        }

        .tpl-template-editable:hover .edit-pen-line:after {
            font-family: FontAwesome;
            font-size: 16px;
            content: "\f040";
            color: var(--aqua-blue);
            float: right;
            cursor: pointer;
        }

        .tpl-template-edit-input {
            width: 100%;
            border: 1px solid var(--aqua-blue);
            padding: 5px;
            font-size: inherit;
            font-family: inherit;
            flex: 1;
        }

        .tpl-template-buttons {
            display: flex;
            gap: 5px;

            .glyphicon {
                font-size: 30px;
            }
        }

        .tpl-template-field {
            margin-bottom: 10px;
            padding: 5px;
            border-bottom: 1px solid #eee;
        }

        .tpl-template-field:last-child {
            border-bottom: none;
        }

        .tpl-template-label {
            font-weight: bold;
            color: #666;
            margin-right: 5px;
        }

        .tpl-template-value {
            min-height: 23px;
            overflow: hidden;
            text-overflow: ellipsis;
            word-wrap: break-word;
        }

        .tpl-template-string {
            overflow: hidden;
            text-overflow: ellipsis;

            .tpl-template-loading {
                display: flex;
                align-items: center;
                justify-content: space-between;
            }
        }

        .input-loader {
            height: 16px;
            width: 16px;
        }

    }

    .ribbon-grid.ribbon-filters-actions .ribbon-grid-lower-wrapper {
        justify-content: initial !important;

        .ribbon-grid-export-wrapper {
            width: 100%;
        }

        .cmk-insert-grid-actions {
            flex: 1;
        }
    }

    .cmk-insert-input {
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        z-index: 1000;

        &.cmk-insert-input-ltr {
            right: 5;
        }

        &.cmk-insert-input-rtl {
            left: 5;
        }
    }

    .blue-svg.arrow-up:not(.pme-card-no) {
        transform: rotate(90deg) !important;
    }

    .blue-svg.arrow-up.arrow-down {
        transform: rotate(-90deg) !important;
    }

    .btn.btn-primary:focus.pme-success-btn,
    .pme-success-btn {
        color: white !important;
        background-color: var(--main) !important;
        border-color: var(--main) !important;
        font-size: 18px;
        border-radius: 20px;
        justify-content: center;

        &:active,
        &:focus,
        &:hover {
            background-color: var(--main) !important;
            border-color: var(--main);
        }
    }

    .page-maker-wrapper {
        position: relative;
    }

    [ag-grid-filters] {
        [ag-select] {
            select {
                width: 100%;
            }
        }
    }

    .pme-not-edit-mode,
    .pme-not-edit-mode-date input {
        appearance: none;
        border: none !important;
        background: none;
        background-color: transparent !important;
        padding: 0 7px;
        margin: 0;
        box-shadow: none;
        resize: none;
        outline: none;
        opacity: 1 !important;
    }

    .pme-not-edit-mode-date {
        .input-group-addon {
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            width: auto !important;
            background-color: transparent;
            border: none;
        }
    }

    .pme-not-edit-mode-between {
        .pme-date-between-wrapper {
            border: none;
            background-color: transparent !important;

            .input-group-addon {
                background-color: transparent !important;
                padding: 0;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            input {
                background-color: transparent !important;
            }
        }
    }

    .pme-not-edit-mode-doc {
        opacity: 1 !important;
        cursor: not-allowed;
    }

    .btn-primary[disabled]:hover {
        background-color: var(--main);
    }

    .select2-container .select2-choice .select2-arrow:dir(ltr) {
        left: initial;
        right: 0;
    }

    .btn-aml {
        max-width: initial;
    }

    .form-control:dir(ltr),
    .form-control:dir(ltr):focus {
        text-align: initial;
    }

    ag-phone,
    [ag-phone],
    ag-country,
    [ag-country] {

        .child-maker-input-wrapper.ltr,
        .country-dropdown.ltr {
            .input-arrow {
                right: 5px;
                left: initial;
            }
        }
    }

    [ag-select2],
    ag-select2,
    [ag-select],
    ag-select {
        .child-maker-input-wrapper.ltr {
            .input-arrow {
                right: 5px;
                left: initial;
            }

            select.fm-base-input {
                padding-left: 7px;
                padding-right: 25px;
            }
        }

        .child-maker-input-wrapper.rtl {
            .input-arrow {
                right: inital;
                left: 5px;
            }
        }
    }

    .input-pme-disabled {
        opacity: 0.3;
    }

    .panel-group .panel {
        margin-bottom: 0;
    }

    .panel-group {
        margin-bottom: 0;
    }

    .child-maker-input-wrapper {
        .pme-input-text-mode-enable {

            .fm-base-input,
            .country-dropdown-main {
                pointer-events: none !important;
                border: none !important;
                background-color: transparent !important;
                appearance: none !important;
                padding: 0 !important;
                margin: 0;
                outline: none !important;
                cursor: default !important;
                opacity: 1 !important;
                box-shadow: none !important;
            }

            .fa.fa-angle-down.input-arrow {
                display: none;
            }
        }
    }

    .pme-input-no-edit-text {
        min-height: 36px;
        display: flex;
        align-items: center;
        padding: 0px 6px;
        cursor: not-allowed;
    }

    .select2-search-field input {
        transition: none;
    }

    [form-maker] {
        .fm-wrapper {
            padding-left: 5px;
            padding-right: 5px;
        }

        fieldset[disabled] .pme-out-btn {
            background-color: transparent;
        }

        .pme-out-btn {
            color: var(--aqua-blue) !important;
            background-color: transparent;
            border-radius: 4px;
            border: solid 1px var(--aqua-blue);
        }

        .pme-out-btn:active,
        .pme-out-btn:focus {
            background-color: transparent !important;
            border-color: var(--aqua-blue);
        }

        .pme-out-btn:hover {
            border-color: var(--aqua-blue);
        }

        .child-maker-input-wrapper .country-dropdown-main:focus-within,
        input.fm-base-input:focus,
        textarea.fm-base-input:focus,
        .pme-date-between-wrapper input:focus,
        .child-maker-input-wrapper input:focus,
        .child-maker-input-wrapper .country-dropdown-main:focus,
        select.fm-base-input:focus {
            border-color: var(--main);
        }

        .pme-input-line-design {
            .pme-input-text-mode-enable {
                select {
                    padding: 0 !important;

                }
            }

            .pme-date-between-wrapper {
                border: none;
                border-bottom: 1px solid var(--dark-white);
                border-radius: 0;
                background-color: transparent !important;
            }

            .input-group-addon {
                background-color: transparent;
                border: none;
                border-bottom: 1px solid #ccc;
                border-radius: 0;
                border-top-left-radius: 0px;
                border-top-right-radius: 0px;
                border-bottom-right-radius: 0px;
                border-bottom-left-radius: 0px;
                display: flex;
                align-items: center;
            }

            input.fm-base-input,
            .select2-container.fm-base-input,
            .pme-date-between-wrapper input,
            .child-maker-input-wrapper input,
            .child-maker-input-wrapper .country-dropdown-main,
            select.fm-base-input {
                background-color: transparent !important;
                border: none;
                border-radius: 0 !important;
                border-bottom: 1px solid var(--dark-white);
                padding: 0px 6px;

                &.pm-phone-number {
                    border-bottom: 0;
                }

                .select2-choices {
                    background-color: transparent !important;
                    border: none;
                    box-shadow: none;

                    .select2-search-field input {
                        border-bottom: 0;
                    }
                }
            }

            textarea.fm-base-input {
                background-color: transparent !important;
            }

            select.fm-base-input {
                cursor: pointer;
            }

            .child-maker-input-wrapper .country-dropdown-main:focus-within,
            input.fm-base-input:focus,
            textarea.fm-base-input:focus,
            .pme-date-between-wrapper input:focus,
            .child-maker-input-wrapper input:focus,
            .child-maker-input-wrapper .country-dropdown-main:focus,
            select.fm-base-input:focus {
                border-color: var(--main);
            }

            .page-maker-def-validation {
                background-color: transparent;
                color: var(--red);
                border-top: 1px solid var(--red);
            }
        }


        .pme-no-space-design {
            background-color: var(--white-five);
            border: 1px solid #D9DDDF;
            border-radius: 5px;

            .pme-mf-wrapper {
                padding-bottom: 10px;
            }

            input.fm-base-input,
            .select2-container.fm-base-input,
            .pme-date-between-wrapper input,
            .child-maker-input-wrapper input,
            .child-maker-input-wrapper .country-dropdown-main,
            select.fm-base-input {
                background-color: transparent !important;
                border: none !important;
                border-radius: 0 !important;
                padding: 0px 6px;

                .select2-choice {
                    display: flex !important;
                    align-items: center;
                }

                .select2-choices,
                .select2-choice {
                    background-color: transparent !important;
                    border: none !important;
                    box-shadow: none !important;

                    .select2-search-field input {
                        border-bottom: 0;
                    }

                    .select2-chosen {
                        padding: 0;
                    }
                }

                /* color: var(--main) !important; */
                &.pm-phone-number {
                    border-bottom: 0;
                }
            }

            .ag-prop-editor-wrapper {
                gap: 0 !important;
            }

            [ag-date] .child-maker-input-wrapper:focus-within>.flex-1 {
                background-color: white;
            }

            [ag-date] .child-maker-input-wrapper input,
            [ag-phone] .child-maker-input-wrapper input {
                padding: 0 !important;
            }

            [ag-phone] .child-maker-input-wrapper .country-dropdown-main>.relative {
                width: 35px !important;
            }

            .child-maker-input-wrapper .country-dropdown-main:focus-within,
            .child-maker-input-wrapper>div.flex-1:focus-within,
            input.fm-base-input:focus,
            textarea.fm-base-input:focus,
            .pme-date-between-wrapper input:focus,
            .child-maker-input-wrapper input:focus,
            .child-maker-input-wrapper .country-dropdown-main:focus,
            select.fm-base-input:focus {
                background-color: var(--white) !important;
            }

            .child-maker-input-wrapper .select2-container input:focus {
                background-color: transparent !important;
            }

            .cmk-insert>div,
            .cmk-insert-panel>div:not(:last-child),
            .cmk-insert-container>div,
            .pme-ape-row {
                margin-bottom: 0 !important;
                border-bottom: 2px dotted #D9DDDF;
            }

            .child-maker-input-wrapper {

                &>div.flex-1,
                .pme-ns-input {
                    border-left: 1px solid #D9DDDF !important;
                    box-shadow: -1px 0 3px rgba(0, 0, 0, 0.1) !important;
                }
            }

            [ag-switch] .child-maker-input-wrapper,
            [ag-color-button] .child-maker-input-wrapper,
            [ag-checkbox] .child-maker-input-wrapper {
                .switch {
                    margin-bottom: 0;
                }

                &>div.flex-1,
                .cm-checkbox-wrapper {
                    height: 36px;
                    display: flex;
                    align-items: center;
                    padding: 0 10px;
                }
            }

            [ag-select] .cmk-insert-select>div {
                margin-top: 0px;
                border-top: 2px dotted #D9DDDF;

                .cmk-insert-container>div:not(:last-child) {
                    border-bottom: 2px dotted #D9DDDF;
                }
            }

            [ag-checkbox] .child-maker-input-wrapper .cm-checkbox-wrapper>input {
                width: 16px;
                height: 16px;
            }

            .input-group-addon {
                background-color: transparent !important;
                border: none !important;
                width: 27px !important;
                display: flex;
                align-items: center;
                padding: 0px 6px;
            }

            .fm-btn-wrapper {
                margin: 0px 5px;
            }

            .pme-mf-wrapper:not(.mf-disable-style) {
                .pme-mf-item-wrapper {
                    gap: 0;
                    border-radius: 0px;
                    box-shadow: none;
                    border: 1px solid var(--white-seven);
                    padding: 0px;
                    margin: 0px 10px;
                    background-color: transparent;
                }

                .ms-close-search {
                    margin: 0 5px;
                }

                .pme-mf-title-wrapper {
                    padding: 0 10px;
                }

                .pme-mf-item-wrapper:not(:last-child) {
                    margin-bottom: 20px;
                }

                .pme-mf-item-wrapper {
                    .child-maker-input-wrapper {
                        margin-bottom: 0;
                        border-bottom: 2px dotted #D9DDDF;
                    }
                }
            }

            .cp-title {
                padding: 0px 10px;
                color: black;
            }
        }

        [multi-form] {
            .pme-mf-wrapper {
                padding-bottom: 10px;
            }
        }
    }

    .inline-grid-pme-line {
        display: inline-grid;
        width: 100%;
        grid-template-columns: repeat(11, 1fr);
    }
}


ag-cvv img,
[ag-cvv] img {
    height: 24px;
}

.pme-ag-grid-select2-editor-wrapper {
    & .select2-container {
        width: 100%;
        border-color: var(--dark-white);
        height: 30px;
        border-radius: 4px;

        & .select2-choice {
            border-radius: 4px !important;
            height: 100% !important;
            padding-top: 0 !important;

            & .select2-chosen {
                padding: 0 2px;
                text-align: initial;
            }

            & .select2-arrow {
                padding-top: 0;

                & b:before {
                    font-size: 12px;
                    padding-right: 0px;
                }
            }
        }
    }
}

.pme-debug-mode {

    [page-maker-card],
    [container],
    [form-maker],
    [panel] {
        border: 2px solid;
    }

    [container] {
        border-color: red;
    }

    [form-maker] {
        border-color: blue;
    }

    [panel] {
        border-color: pink;
    }

    .pme-debug-widget-name {
        display: block;
    }
}

.pme-debug-widget-name {
    position: absolute;
    left: 5;
    top: -21;
    z-index: 200;
    display: none;
}