/*!
* jQuery ComboTree Plugin 
* Author:  Erhan FIRAT
* Mail:    erhanfirat@gmail.com
* Licensed under the MIT license
* Version: 1.2.1
*/

body {
    font-size: 0.8rem !important;
}

@font-face {
    font-family: 'titillium_maps';
    src: url('../font/tittlium/titillium_maps.eot');
    src: url('../font/tittlium/titillium_maps.eot') format('embedded-opentype'),
        url('../font/tittlium/titillium_maps.woff2') format('woff2'), url('../font/tittlium/titillium_maps.woff') format('woff'),
        url('../font/tittlium/titillium_maps.ttf') format('truetype'),
        url('../font/tittlium/titillium_maps.svg#titillium_maps') format('svg');
}

:root {
    --ct-bg: #fff;
    --ct-btn-hover: #e8e8e8;
    --ct-btn-active: #ddd;
    --ct-btn-color: #555;
    --ct-border-color: #e1e1e1;
    --ct-border-radius: 5px;
    --ct-tree-hover: #efefef;
    --ct-selection: #418eff;
    --ct-padding: 8px;
}

.comboTreeWrapper {
    position: relative;
    text-align: left !important;
}

.comboTreeInputWrapper {
    position: relative;
    width: 415px;
}
.clicon {
    display: block !important;
}
.comboTreeArrowBtn {
    position: absolute;
    right: 0px;
    bottom: 0px;
    top: 0px;
    box-sizing: border-box;
    border: 1px solid var(--ct-border-color);
    border-radius: 0 var(--ct-border-radius) var(--ct-border-radius) 0;
    background: var(--ct-border-color);
    cursor: pointer;
    -webkit-user-select: none;
    /* Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE10+/Edge */
    user-select: none;
    /* Standard */
}

.comboTreeArrowBtn:hover {
    background: var(--ct-btn-hover);
}

.comboTreeArrowBtn:active {
    background: var(--ct-btn-active);
}

.comboTreeInputBox:focus + .comboTreeArrowBtn {
    color: var(--ct-btn-color);
    border-top: 1px solid var(--ct-selection);
    border-right: 1px solid var(--ct-selection);
    border-bottom: 1px solid var(--ct-selection);
}
.toolbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 0 20px;
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, auto);
    align-items: center;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
}
.comboTreeArrowBtnImg {
    font-size: 1.25rem;
}
.image-container {
    position: relative;
    width: calc(100vw - 5em);
    height: calc(100vh - 16em);
    overflow: hidden;
}

.toolbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 0 20px;
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, auto);
    align-items: center;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
}

.comboTreeDropDownContainer {
    display: none;
    background: var(--ct-bg);
    border: 1px solid var(--ct-border-color);
    position: absolute;
    width: 100%;
    box-sizing: border-box;
    z-index: 999;
    max-height: 250px;
    overflow-y: auto;
}

.comboTreeDropDownContainer ul {
    padding: 0px;
    margin: 0;
}

.comboTreeDropDownContainer li {
    list-style-type: none;
    padding-left: 15px;
}

.comboTreeDropDownContainer li .selectable {
    cursor: pointer;
}

.comboTreeDropDownContainer li .not-selectable {
    cursor: not-allowed;
}

.comboTreeDropDownContainer li:hover {
    background-color: var(--ct-tree-hover);
}

.comboTreeDropDownContainer li:hover ul {
    background-color: var(--ct-bg);
}

.comboTreeDropDownContainer li span.comboTreeItemTitle.comboTreeItemHover {
    background-color: var(--ct-selection);
    color: var(--ct-bg);
    border-radius: 2px;
}

span.comboTreeItemTitle {
    display: block;
    padding: 3px var(--ct-padding);
}

.comboTreeDropDownContainer label {
    cursor: pointer;
    width: 100%;
    display: block;
}

.comboTreeDropDownContainer .comboTreeItemTitle input {
    position: relative;
    top: 2px;
    margin: 0px 4px 0px 0px;
}

.comboTreeParentPlus {
    position: relative;
    left: -12px;
    top: 4px;
    width: 4px;
    float: left;
    cursor: pointer;
}

.comboTreeInputBox {
    padding: var(--ct-padding);
    border-radius: var(--ct-border-radius);
    border: 1px solid var(--ct-border-color);
    width: 100%;
    box-sizing: border-box;
    padding-right: 24px;
}

.comboTreeInputBox:focus {
    border: 1px solid var(--ct-selection);
    outline-width: 0;
}

.multiplesFilter {
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid var(--ct-border-color);
}

.no-margin-mobile img {
    max-width: 456px;
    max-height: 537px;
}

/* .pan-element {
    transform: translate3d(479.934px, 19.269px, 0px) !important;
} */

.PanZoomImage {
    width: 500px;
    height: 500px;
    margin: auto;
    border: 2px solid #ccc;
    overflow: hidden;
}
.zoomButton {
    position: fixed;
    top: 28px;
    right: 41px;
    z-index: 9;
    background: #000;
    color: #fff;
    padding: 5px 8px;
    border: none;
    cursor: pointer;
}

.zoom-image {
    width: 100% !important;
    height: 100% !important;
}

/* .zoom-image img {
width: 100% !important;
height: 100% !important;

} */

.cdk-overlay-pane {
    width: 500px !important;
    height: 500px !important;
}

/**** Sunil Css ****/

.box {
    padding: 25px;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 0.35rem;
}

.card-img-top.ng-star-inserted {
    max-width: 25px;
}

.table thead th {
    border-top: 1px solid #dee2e6 !important;
    padding: 10px;
}

.mt-20 {
    margin-top: 20px;
}
.image-design {
    display: flex;
}

.tabs .btn-primary fa-icon {
    width: 18px;
    height: 18px;
    background: #fff;
    display: inline-block;
    border-radius: 50%;
    font-size: 8px;
    line-height: 18px;
    margin-right: 3px;
}

.pagination {
    border: solid 1px #ccc;
}

.pagination li {
    border-right: solid 1px #ccc;
}

.pagination li:last-child {
    border-right: none;
}

.ng-star-inserted .btn.btn-primary.col-2.mx-auto:last-child {
    margin-right: 0px !important;
}

.box .heading {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 25px;
    border-bottom: solid 1px #ddd;
    padding-bottom: 15px;
}

.btn {
    margin: 0px !important;
    padding: 9px 15px !important;
    border-radius: 0.25rem;
}

.content-box-label {
    padding: 19px 0 0 19px !important;
}
.subject-box-label {
    padding-left: 21px !important;
}

label.form-check-label.contact-user-label {
    padding-right: 19px;
}

label.form-check-label.contact-user-label span {
    vertical-align: -webkit-baseline-middle;
    padding-left: 5px;
}

table.table th,
table.table td {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

.pagination .page-item.active .page-link {
    background-color: #454545 !important;
}

.input-group-append.btn.btn-info.btn-attached {
    line-height: 38px;
    box-shadow: none;
}

.input-group-append.btn.btn-danger.btn-attached.ng-star-inserted {
    line-height: 38px;
    box-shadow: none;
}

.btn.btn-primary.w-100.shadow-none {
    height: 46px;
}

.btn {
    box-shadow: none !important;
}

.nav.pills-secondary.white.mb-2 {
    margin: 0px !important;
    border-bottom: solid 1px #ccc;
}

.tab-container .tab-content.card {
    box-shadow: none !important;
    padding-top: 1rem !important;
}

.nav.pills-secondary.white.mb-2 .nav-link.active,
.nav.pills-secondary.white.mb-2 .nav-link.active:hover,
.nav.pills-secondary.white.mb-2 .nav-link:hover {
    box-shadow: none !important;
    border-top: 0px !important;
    color: #000 !important;
}

/* .nav.pills-secondary.white.mb-2 .nav-link {
border-bottom: solid 1px #eee;
} */

.btn.btn-primary {
    background-color: #b9b9b9 !important;
}

.btn.btn-default {
    background: #7e7e7e !important;
}

.login .btn {
    height: 45px;
    font-size: 14px;
}

.login span {
    font-weight: normal;
}

.page-footer {
    background-color: #454545 !important;
}

.card.login {
    padding: 20px 0px;
    max-width: 480px;
    margin: 0 auto;
}

.card.login h5.text-bold {
    margin-top: 20px;
    font-size: 18px;
}

.card.login form .btn {
    margin: 15px 0px !important;
}

.card.login .input-group span i {
    color: #ccc;
}

.card.login .card-img-top {
    width: auto;
    max-width: 230px !important;
}

.card.login .btn.c-black {
    background: #454545 !important;
}

.card.login input[type='checkbox'].filled-in:checked + label::after {
    background-color: white !important;
}

.card.login .row.rsned {
    margin: 10px auto 0px auto;
    text-align: center !important;
    width: 100%;
    display: block;
}

.card.login .form-group.row.lnk {
    margin: 0;
    text-align: center;
}

.card.login .form-group.row.lnk a {
    display: inline-block;
    width: auto;
    margin: 0 auto;
}

.card.login .row.rsned .otp {
    display: inline-block;
}

.btn-group.flex-btn-group-container.pull-left button {
    white-space: nowrap !important;
}

.box .col-sm-12.ng-untouched.ng-pristine.ng-valid {
    padding: 0;
}

.form-check-input[type='checkbox']:checked + label::before,
label.btn input[type='checkbox']:checked + label::before {
    top: -3px;
    left: -5px;
    width: 10px;
    height: 18px;
}

.wallet-management-popup .modal-header h4 {
    font-size: 16px;
}

header .nav-link:hover {
    border-top: unset !important;
    box-shadow: none !important;
}

.navbar .dropdown-menu a.active {
    color: #fff !important;
    background-color: #454545;
}

#page-heading {
    display: none;
}

#page-heading + hr.col-md-12.no-padding {
    display: none;
}

.btn-group.pull-right.dt-btns {
    width: 100%;
    text-align: right;
    float: right;
    justify-content: flex-end;
    border-bottom: solid 1px #ccc;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.dt-btns button.btn {
    min-width: 14%;
}

.form-check-input[type='checkbox']:checked + label::before,
label.btn input[type='checkbox']:checked + label::before {
    top: -2px !important;
    width: 9px !important;
    height: 0.975rem !important;
}

.tree-content-main,
.tree-content {
    border-left: 3px solid #fb9a1d !important;
}

.tree-title::before {
    background-color: #fda600 !important;
}

.tree-content-main .show-btn,
.tree-content-main .hide-btn {
    background-color: #fb9a1d !important;
    color: #fff;
}

.tree-content-main .tree-title {
    color: #000 !important;
}

.treview-spacing {
    margin-left: 150px;
}

.wallet-updates {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    padding: 15px;
    background: #eee;
    border-radius: 10px;
    border: solid 1px #ddd;
    align-items: center;
}

.wallet-updates .wallet-and-btns {
    width: auto;
    display: flex;
    align-items: center;
}

.wallet-updates .wallet-and-btns .input-group {
    margin-left: 25px;
}

.wallet-and-btns h5 {
    font-size: 22px;
}

.payout-request {
    font-size: 16px;
    margin-bottom: 15px;
}

.payout-request strong {
    font-weight: 500;
    padding-left: 15px;
}

.payout-request.disc input {
    margin-top: 10px;
}

.mw-160 {
    min-width: 160px;
    display: inline-block;
}

.tabs.dashboard-btns {
    width: 100%;
    height: auto;
    display: flex;
}

.tabs.dashboard-btns .btn-div {
    width: 100%;
    margin: 0px 3px 5px 3px;
}

.notes-status-section {
    width: 100%;
    height: auto;
    float: left;
    padding: 0 15px 15px 15px;
    border-top: solid 1px #eee;
}

.notes-status-section .card {
    /* box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.16), 0 9px 0px 0 rgba(0, 0, 0, 0.12); */
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0), 0 2px 10px 0 rgba(0, 0, 0, 0);
    margin-top: -1px;
}

.input-group .form-control-label span {
    font-size: 16px;
    line-height: 34px;
}

.um-tabs-btns .nav-item {
    margin: 0px 0px 10px 0px !important;
    box-shadow: none !important;
    font-size: 16px;
}

.um-tabs-btns .nav-item.active {
    border-top: solid 2px #333 !important;
}

.rating li i {
    font-size: 20px;
    margin-right: 5px;
}

.ng-star-inserted label {
    font-size: 14px;
}

.white-skin .btn-info {
    background-color: #454545 !important;
    color: #fff !important;
}

.white-skin .btn-info:hover,
.white-skin .btn-info:focus,
.white-skin .btn-info:active {
    background-color: #525252;
}

.white-skin .btn-info:focus,
.white-skin .btn-info.focus {
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}

#item_title_tag + .btn.btn-rounded {
    margin-left: auto !important;
    margin-right: 9% !important;
    margin-top: 15px !important;
}

.input-group .input-group-append.btn.btn-info + .input-group-append.btn.btn-danger {
    margin-left: 5px !important;
}

.notes-part {
    width: 100%;
    height: auto;
    float: left;
}

.notes-part .notes-user-img {
    width: 45px;
    height: 45px;
    float: left;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    text-transform: uppercase;
    background: #ddd;
}

.notes-part .notes-user-content {
    width: calc(100% - 45px);
    height: auto;
    float: left;
    padding-left: 15px;
}

.notes-user-name {
    width: 100%;
    height: auto;
    float: left;
    margin-bottom: 5px;
    font-size: 14px;
}

.notes-name-and-status {
    width: 100%;
    display: flex;
    justify-content: space-between;
    color: #666;
}

.status-disc {
    width: 100%;
    height: auto;
    float: left;
}

.ng-invalid:not(form),
.ng-valid[required],
.ng-valid.required {
    border-left: 1px solid #ced4da !important;
}

.white-skin input[type='email']:focus:not([readonly]),
.white-skin input[type='text']:focus:not([readonly]),
.white-skin input[type='password']:focus:not([readonly]),
.white-skin input[type='number']:focus:not([readonly]),
.white-skin textarea.md-textarea:focus:not([readonly]) {
    border-left: 1px solid #ced4da !important;
}

.ng-untouched.ng-pristine .input-group.w-50.mt-3 + .col-md-6.mt-3 {
    padding-right: 0px;
}

.box .form-inline.col-sm-12.ng-valid.ng-dirty.ng-touched {
    padding: 0px;
}

.box .form-inline.col-sm-12.ng-valid.ng-dirty.ng-touched .input-group.w-50.mt-3 + .col-md-6.mt-3 {
    padding-right: 0px;
}

button.btn fa-icon {
    display: none;
}

/* .side-nav .collapsible .card.active,
.side-nav .collapsible .card:hover {
    background: #000!important;
} */

.side-nav .collapsible .card .active a h5,
.side-nav .collapsible .card:hover a h5 {
    color: #fff !important;
    background: #000 !important;
    font-weight: 500 !important;
}

input:focus,
input:active,
textarea:focus,
textarea:active {
    border: 1px solid #ced4da !important;
}

.btn.btn-rounded.btn-outline-primary.btn-md {
    border-radius: 0.125rem;
    background: #585858 !important;
    border: none !important;
    color: #fff !important;
}

.modal-footer.justify-content-center .btn.btn-rounded.btn-outline-primary.btn-md {
    margin: 0px 3px !important;
}

.input-group .input-group-append.btn.btn-info + .input-group-append.btn.btn-danger fa-icon {
    display: block;
}

.box.plus-nopadd + .ng-star-inserted .notes-status-section {
    padding: 0px !important;
    margin-top: -2px;
}

.notes-name-and-date {
    width: 100%;
    height: auto;
    display: flex;
    float: left;
    justify-content: space-between;
}

.notes-name-and-date span {
    width: 50%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

form.ng-untouched.ng-pristine.ng-valid .btn.btn-default.btn-attached fa-icon {
    display: block;
}

.sidenav-bg.mask-strong {
    display: none;
}

#slide-out.side-nav.side-nav-light {
    background-color: #fff;
}

.pt-20 {
    padding: 20px;
}

.notes-user-img.wh-30 {
    width: 30px;
    height: 30px;
}

.profile-icon::after {
    position: absolute;
    right: 16px;
    top: 16px;
    display: none;
}

.user-image-nav {
    display: flex;
}

.profile-icon::after {
    display: none !important;
}

.user-nav-name {
    padding-left: 15px;
    color: #fff;
    max-width: 125px;
    margin-right: 25px;
}

.user-nav-name .welcome {
    text-transform: uppercase;
    position: relative;
    width: auto;
    float: left;
}

.user-nav-name .name {
    width: 100%;
    float: left;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-nav-name .welcome:before {
    position: absolute;
    right: -20px;
    top: 6px;
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: '';
    border-top: 0.5em solid;
    border-right: 0.4em solid transparent;
    border-bottom: 0;
    border-left: 0.4em solid transparent;
}

.white-skin .navbar {
    background-color: #424242 !important;
    color: #fff !important;
}

.white-skin .navbar.double-nav a {
    color: #fff !important;
}

.navbar.scrolling-navbar {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

.white-skin .navbar .dropdown-menu a {
    color: #000 !important;
}

.simiaruser {
    font-size: 16px;
    width: 100%;
    max-width: 270px;
    margin-bottom: 20px !important;
}

.c-pointer.mr-1 {
    border-radius: 4px;
    border: solid 1px #ddd !important;
}

.mw-auto {
    max-width: unset !important;
}

.table-mw300 {
    max-width: 300px;
}

/*********** Responsive Css **************/

@media (max-width: 1024px) {
}

@media (max-width: 991px) {
}

@media (max-width: 767px) {
    .treview-spacing {
        margin-left: 50px;
    }
    .tabs.dashboard-btns {
        display: inline-block !important;
    }
    .tabs.dashboard-btns .btn-div {
        width: calc(50% - 6px);
        float: left;
    }
}

/*********** Responsive Css **************/

@media (max-width: 1024px) {
}

@media (max-width: 991px) {
}

@media (max-width: 767px) {
    .treview-spacing {
        margin-left: 50px;
    }
    .tabs.dashboard-btns {
        display: inline-block !important;
    }
    .tabs.dashboard-btns .btn-div {
        width: calc(50% - 6px);
        float: left;
    }
}
.breadcrumb li:before {
    color: white !important;
}
@import '../../../variables';

/* .socialModal {
  .modal-header {
    button {
      position: absolute;
      padding: 6px 0px;
      font-size: 19px;
    }
    h3 {
      margin-top: 0px;
      margin-bottom: 0px;
      font-family: $medium;
      text-align: center;
      padding: 6px 0px;
      font-size: 19px;
    }
    a {
      color: #00a2a8;
      cursor: pointer;
      font-family: $medium;
      font-size: 16px;
      font-size: 19px;
    } */
/* }
} */

* {
    -webkit-tap-highlight-color: transparent;
}
.socialModal {
    position: fixed;
    left: 0px;
    right: 0px;
}
.tile-frame {
    z-index: 2;
}
.tile-frame,
.tile-frame .frame {
    position: absolute;
    top: 0;
    width: 100%;
}
.tile-frame .frame {
    right: 0;
}
.tile-frame .frame.hidden {
    visibility: hidden;
}
.tile-base {
    position: absolute;
    top: 1px;
    left: 5px;
    right: 10px;
    bottom: 14px;
    box-shadow: 4px 18px 15px 0 rgba(0, 0, 0, 0.3), 1px 15px 20px 2px rgba(0, 0, 0, 0.3);
    background-image: linear-gradient(to right bottom, #fff, #fbfbfb, #f8f8f8, #f4f4f4, #f1f1f1);
}
@media (min-width: 960px) {
    .tile-base {
        box-shadow: 8px 18px 15px 0 rgba(0, 0, 0, 0.2), 1px 7px 15px 2px rgba(0, 0, 0, 0.1);
    }
}
.tile-base.transparent {
    background-image: unset;
}
.mixtiles-dialog-paper {
    border-radius: 10px !important;
}
.CloseButton {
    color: #8c8c8c;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    padding: 10px;
}
.done-button {
    color: #ff0073;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    padding: 10px;
}
.tile-cropper {
    background-color: #f5f5f5;
}
.tile-cropper,
.tile-cropper .cropper-content {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.custom-switch input:checked + .slider:after {
    content: '' !important;
}
.custom-switch .slider:after {
    content: '' !important;
}
.custom-switch {
    vertical-align: top;
    width: 43px !important;
    height: 17px !important;
    margin-bottom: 0px !important;
    margin-top: 2px !important;
}
.mb-10 {
    margin-bottom: 10px;
}
.profileImg {
    /* border-radius: 100% !important; */
    border: 1px solid red;
    height: auto;
    margin-right: 2px;
    width: 40px;
    height: 40px;
}
.profileImgService {
    /* border-radius: 100% !important; */
    border: 1px solid yellow;
    height: auto;
    margin-right: 2px;
    width: 40px;
    height: 40px;
}
/* .slider-color {
    background-color: #000 !important;
} */
.custom-switch input:checked + .slider:before {
    -webkit-transform: translateX(24px) !important;
    -ms-transform: translateX(24px) !important;
    transform: translateX(24px) !important;
}
.custom-switch .slider:before {
    height: 16px !important;
    width: 16px !important;
}
.lockText {
    margin-left: 10px;
    font-size: 15px;
}
.tile-cropper .cropper-content {
    position: relative;
    align-items: center;
    margin-top: 10px;
}
@media (min-width: 960px) {
    .tile-cropper .cropper-content {
        min-width: 600px;
        min-height: 500px;
    }
}
.tile-cropper .cropper-content .cropper-text {
    margin-top: 20px;
    text-transform: uppercase;
    font-size: 14px;
    color: #8c8c8c;
    font-weight: 700;
    letter-spacing: 1.6px;
    z-index: 2;
    pointer-events: none;
}
.frame-container {
    width: 300px;
    height: 300px;
    position: absolute;
    margin-top: auto;
    margin-bottom: auto;
    top: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
}
.frame-container .tile-base {
    left: 6px;
    bottom: 15px;
}
.cropper-container-style {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    overflow: hidden;
}
.cropper-area-style {
    z-index: 1;
    color: #f5f5f5 !important;
    border: none !important;
    margin-left: -3px;
    margin-top: -7px;
}
.cropper-image-style {
    transition: opacity 0.3s 0.3s, -webkit-transform 0.1s ease-out;
    transition: transform 0.1s ease-out, opacity 0.3s 0.3s;
    transition: transform 0.1s ease-out, opacity 0.3s 0.3s, -webkit-transform 0.1s ease-out;
    bottom: 16px !important;
    left: -9999px !important;
    right: -9994px !important;
    max-width: unset !important;
    max-height: unset !important;
    z-index: -1;
    cursor: move;
    position: relative;
    transform: translate(-50%, -50%);
}
/*! CSS Used from: Embedded */
.css-1dkwqii {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow: hidden;
    user-select: none;
    touch-action: none;
    cursor: move;
}
.css-nikas5 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-sizing: border-box;
    box-shadow: 0px 0px 0px 9999em;
    color: rgba(0, 0, 0, 0.5);
    overflow: hidden;
}
.css-13pt25 {
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    will-change: transform;
    height: 283px;
    opacity: 1;
}
/*! CSS Used from: Embedded */
.jss42 {
    background-color: #fff;
}
.jss43 {
    border-radius: 4px;
}
.jss68 {
    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
}
/*! CSS Used from: Embedded */
.jss31 {
    display: flex;
    outline: none;
    position: relative;
    overflow-y: auto;
    flex-direction: column;
}
.jss32 {
    flex: 0 1 auto;
    max-height: calc(100% - 96px);
}
.jss35 {
    max-width: 600px;
}

#drag-img {
    cursor: move;
    position: relative;
    width: 100%;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
}

#container {
    overflow: hidden;
    background: red;
    height: 500px;
    width: 500px;
}

.button {
    width: 200px;
    height: 50px;
}

canvas {
    display: block;
    margin: 1em auto;
    background: #fff;
    border: 1px solid #ccc;
    height: 300px;
    width: 300px;
}

#demo-basic {
    width: 300px;
    height: 300px;
    margin: 0 auto;
}

.image-open-tab {
    margin-top: 10px;
}

@media only screen and (max-width: 359px) {
    canvas {
        height: 250px;
        width: 250px;
    }

    #demo-basic {
        width: 250px;
        height: 250px;
    }

    /* .socialModal {
    .btn {
      padding: 0px;
    }
  } */
}
/* .ml-0.mr-0 .no-margin-mobile, .ml-0.mr-0 .no-margin-mobile .jh-card{margin:0px!important; padding:0px!important;} */