* {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
}

body.editor {
    overflow: hidden;
}

a {
    color: #999;
    font-size: 17px;
    text-decoration: none;
}

button,
button:focus,
button:hover {
    box-shadow: none !important;
    outline: none !important; 
}

a.active,
a:focus,
a:hover {
    color: #f90;
}

iframe {
    border: 1px solid #ccc;
}

#transfer button.btn {
    margin-right: 5px;
    margin-bottom: 5px;
    text-align: left;
}

button.btn-primary {
    background: #fc0;
    border-color: #fc0;
    font-size: 15px;
}

button.btn-primary:hover {
    background: #eb0;
    border-color: #eb0;
}

button.btn-primary:focus {
    background: #eb0;
    border-color: #f90;
}

[contenteditable="true"]:focus {
    caret-shape: block;
}

textarea#editTag{
    min-height: 150px;
}

#login, #logout {
    background: #f3f3f3;
    min-height: 100%;
    display: block;
}

#login .container #login-row #login-column #login-box,
#logout .container #logout-row #logout-column #logout-box {
    margin-top: 120px;
    max-width: 600px;
    height: 320px;
}

#login .container #login-row #login-column #login-box #login-form,
#logout .container #logout-row #logout-column #logout-box #logout-form {
    padding: 20px;
}

#login .container #login-row #login-column #login-box #login-form #register-link,
#logout .container #logout-row #logout-column #logout-box #logout-form #register-link {
    margin-top: -85px;
}

#header {
    height: 70px;
    width: 100%;
    background: #fff;
    display: block;
}

.logo img {
    margin-top: -20px;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 !important;
}

ul.nav-links {
    display: flex;
    padding: 0;
    padding-right: 1.25rem;
}

ul.nav-links li {
    list-style-type: none;
    list-style: none;
    padding: 0 20px;
}

ul.nav-links li a {
    color: #999;
    font-size: 17px;
    text-decoration: none;
    font-weight: 300;
}

ul.nav-links li a.active {
    color: #f90;
}

button.btn-hide-transfer {
    margin-top: 0.5em;
}

.transfer-hide button.btn-hide-transfer {
    margin-left: -0.185em !important;
}

button.btn-hide-transfer span{
    padding-left: 5px;
    font-size: 11px;
}

.transfer-hide button.btn-hide-transfer span{
    padding-left: 5px;
    font-size: 0px;
}

#copywindow {
    width: calc(37% - 40px);
    float: left;
    height: calc(100% - 104px);
    display: block;
    margin: 20px;
}

#editorwindow {
    width: calc(38% - 40px);
    float: left;
    height: calc(100% - 104px);
    display: block;
    margin: 20px;
}

#editorwindow iframe {
    overflow: hidden;
}

#transfer-toolbar {
    position: absolute;
    left: calc(50% - 10px);
    width: calc(27% - 80px);
    height: 30px;
    padding: 0;
    margin-left: 0px;
    margin-top: 22px;
    transform: translateX(-50%);
}

.btn-hide-transfer {
    padding: 0;
    position: absolute;
}

#transfer {
    background: #fafafa;
    float: left;
    width: calc(27% - 80px);
    height: calc(100% - 103px);
    display: block;
    margin: 20px 0;
    padding: 120px 40px 40px 40px;
    overflow-y: auto;
    overflow-x: hidden;
}

@media only screen and (min-width: 2500px){
    #transfer{
        width: calc(26% - 100px);
    }
}

.transfer-hide #transfer {
    background: #fafafa url('data:image/svg+xml,<svg width="20px" height="20px" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 4.4C3.439 4.4 0 9.232 0 10c0 .766 3.439 5.6 10 5.6 6.56 0 10-4.834 10-5.6 0-.768-3.44-5.6-10-5.6zm0 9.907c-2.455 0-4.445-1.928-4.445-4.307S7.545 5.691 10 5.691s4.444 1.93 4.444 4.309-1.989 4.307-4.444 4.307zM10 10c-.407-.447.663-2.154 0-2.154-1.228 0-2.223.965-2.223 2.154s.995 2.154 2.223 2.154c1.227 0 2.223-.965 2.223-2.154 0-.547-1.877.379-2.223 0z"/></svg>');
    background-position: center 13px;
    background-size: 13px auto;
    background-repeat: no-repeat;
}

body.transfer-hide #transfer:hover{
    transition: 0.25s;
    background-color: #ff9900;
} 

#transfer .btn {
    padding: 2px 6px;
    font-size: 13px;
}

#transfer .search {
    padding-bottom: 20px;
    background: #eee;
    width: calc(100% + 80px);
    margin: -120px -40px 0 -40px;
    text-align: center;
    padding: 40px;
    min-width: 100%;
    display: block;
}

#transfer .search input {
    width: 100%;
}

#transfer #transfer-filter small {
    border-bottom: 1px solid #ddd;
    width: 100%;
    color: #ccc;
    display: block;
    padding-bottom: 5px;
    margin-bottom: 10px;
    font-size: 10px;
    text-transform: uppercase;
    width: 100%;
    margin-left: 0rem;
    clear: both;
}

#transfer #transfer-filter small.active.yellow {
    color: #ffcc00;
}

#transfer #transfer-filter small.active.orange {
    color: #ff9900;
}

#transfer #transfer-filter small.active.red {
    color: #d51e40;
}

#transfer #transfer-filter small.active.pink {
    color: #c22a92;
}

#transfer #transfer-filter small.active.lila {
    color: #741fbf;
}

#transfer #transfer-filter small.active.blue {
    color: #0c63e4;
}

#transfer #transfer-filter small.active.petrol {
    color: #27e1ee;
}

#transfer #transfer-filter small.active.green {
    color: #1fc162;
}

#transfer #transfer-filter small.active.grey {
    color: #666666;
}

#transfer #transfer-filter div:hover {
    cursor: pointer;
}

.transfer-hide #transfer-toolbar {
    width: unset;
    left: calc(50% - 17px);
}

.transfer-hide #transfer {
    width: 20px;
    cursor: pointer;
}

.transfer-hide #transfer .wrapper {
    display: none !important;
}

.transfer-hide #copywindow,
.transfer-hide #editorwindow {
    width: calc(49% - 40px);
}

.transfer-hide .btn-hide-transfer {
    padding: 0;
    position: absolute;
    margin-left: 5px !important;
}

.btn {
    position: relative;
}

.btn .remove {
    left: 2px;
    position: absolute;
    visibility: hidden;
    top: -15px;
}

.btn .remove::after {
    content: 'x';
    font-size: 10px;
    border-radius: 3px;
    text-align: center;
    width: 15px;
    height: 15px;
    margin-left: -3px;
    margin-right: 6px;
    position: relative;
    line-height: 14px;
}

.btn:hover .remove {
    visibility: visible;
}

.btn:hover .remove::after {
    display: inline-block;
    background: #d51e40;
    color: #ffffff !important;
}

.btn-yellow {
    color: #ffffff;
    background-color: #ffcc00;
}

.btn-orange {
    color: #ffffff;
    background-color: #ff9900;
}

.btn-red {
    color: #ffffff;
    background-color: #d51e40;
}

.btn-pink {
    color: #ffffff;
    background-color: #c22a92;
}

.btn-lila {
    color: #ffffff;
    background-color: #741fbf;
}

.btn-blue {
    color: #ffffff;
    background-color: #0c63e4;
}

.btn-petrol {
    color: #ffffff;
    background-color: #27e1ee;
}

.btn-green {
    color: #ffffff;
    background-color: #1fc162;
}

.btn-grey {
    color: #ffffff;
    background-color: #666666;
}

button.dropdown-toggle {
    text-transform: capitalize;
}

button.btn-hide-transfer{
    float: right;
    margin-right: 1em !important;
}

button.btn-hide-transfer:hover{
    color: #ff9900 !important;
}

.nav-tabs button.nav-link{
    color: #999 !important;
}

.nav-tabs button.nav-link:focus,
.nav-tabs button.nav-link:hover,
.nav-tabs button.nav-link.active{
    color: #ff9900 !important;
}

.accordion-button:not(.collapsed){
    background-color: #ff990033;
    color: #ff9900;
}

.dropdown-color {
    padding-top: 0;
    padding-bottom: 0;
}

.dropdown-color .dropdown-item {
    opacity: 0.25;
    font-size: 15px;
    padding-right: 50px;
}

.dropdown-color .dropdown-item::before {
    content: ' ';
    margin-right: 10px;
    width: 15px;
    height: 15px;
    display: block;
    float: left;
    margin-top: 5px;
}

.dropdown-color .dropdown-item.yellow {
    color: #ffcc00;
    background-color: #fffae8;
}

.dropdown-color .dropdown-item.yellow::before {
    background-color: #ffcc00;
}

.dropdown-color .dropdown-item.orange {
    color: #ff9900;
    background-color: #fff7e7;
}

.dropdown-color .dropdown-item.orange::before {
    background-color: #ff9900;
}

.dropdown-color .dropdown-item.red {
    color: #d51e40;
    background-color: #ffe7e7;
}

.dropdown-color .dropdown-item.red::before {
    background-color: #d51e40;
}

.dropdown-color .dropdown-item.pink {
    color: #c22a92;
    background-color: #ffe7f3;
}

.dropdown-color .dropdown-item.pink::before {
    background-color: #c22a92;
}

.dropdown-color .dropdown-item.lila {
    color: #741fbf;
    background-color: #f6e7ff;
}

.dropdown-color .dropdown-item.lila::before {
    background-color: #741fbf;
}

.dropdown-color .dropdown-item.blue {
    color: #0c63e4;
    background-color: #e7f1ff;
}

.dropdown-color .dropdown-item.blue::before {
    background-color: #0c63e4;
}

.dropdown-color .dropdown-item.petrol {
    color: #27e1ee;
    background-color: #e8fffb;
}

.dropdown-color .dropdown-item.petrol::before {
    background-color: #27e1ee;
}

.dropdown-color .dropdown-item.green {
    color: #1fc162;
    background-color: #e7ffea;
}

.dropdown-color .dropdown-item.green::before {
    background-color: #1fc162;
}

.dropdown-color .dropdown-item.grey {
    color: #666666;
    background-color: #eeeeee;
}

.dropdown-color .dropdown-item.grey::before {
    background-color: #666666;
}

.dropdown-color .dropdown-item:hover {
    opacity: 1;
}

#selectTextTool .dropdown-menu {
    top: 25px;
}

.text-orange {
    color: #f90;
}

.text-orange:hover {
    color: #f60;
}

table.table tr:nth-child(even) {
    background-color: #f9f9f9;
}

#copytools #selectTextTool {
    position: absolute;
    left: 53px;
    line-height: 26px;
    max-height: 26px;
    min-height: 20px;
    max-width: 28px;
    margin-top: 7px;
}

#copytools #selectTextTool .dropdown-toggle::after {
    display: none !important;
    max-height: 28px;
    overflow: hidden;
}

#copytools #selectTextTool .btn-container {
    overflow: hidden;
    margin: 3px 0;
    border-radius: 2px;
    min-height: 28px;
    margin-top: -4px;
}

#copytools #selectTextTool .btn-container button {
    cursor: default;
    min-height: 28px;
}

#copytools #selectTextTool .btn-container img {
    margin-top: -1px;
    margin-left: -4px;
    position: absolute;
}

#copytools #selectTextTool .btn-container:hover {
    background: #ddd;
    cursor: default;
}

#copytools #selectTextTool .btn-container[data-color="yellow"] {
    background-color: #fffae8;
}

#copytools #selectTextTool .btn-container[data-color="orange"] {
    background-color: #fff7e7;
}

#copytools #selectTextTool .btn-container[data-color="red"] {
    background-color: #ffe7e7;
}

#copytools #selectTextTool .btn-container[data-color="pink"] {
    background-color: #ffe7f3;
}

#copytools #selectTextTool .btn-container[data-color="lila"] {
    background-color: #f6e7ff;
}

#copytools #selectTextTool .btn-container[data-color="blue"] {
    background-color: #e7f1ff;
}

#copytools #selectTextTool .btn-container[data-color="petrol"] {
    background-color: #e8fffb;
}

#copytools #selectTextTool .btn-container[data-color="green"] {
    background-color: #e7ffea;
}

#copytools #selectTextTool .btn-container[data-color="grey"] {
    background-color: #eeeeee;
}

a.pdf-profile-pic {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: auto 55px;
    display: block;
    height: 35px;
    width: 35px;
}

.modal-dialog {
    width: 100%;
    max-width: 1000px;
    min-width: 500px;
}

#cropEditorModal .modal-dialog {
    margin-left: 1.15rem;
    margin-top: 1.25rem;
}

#cropEditorModal .modal-content {
    width: 675px !important;
    height: 675px !important;
    max-width: 675px !important;
    max-height: 675px !important;
}

#cropEditorModal .modal-body {
    background: #fff;
    max-width: 100%;
}

#cropEditorModal .modal-body .img-preview {
    float: left;
    margin-top: 0.5rem;
    margin-left: 0.5rem;
    overflow: hidden;
    width: 4rem !important;
    height: 3rem !important;
    position: absolute;
    z-index: 999;
    border: 1px solid #fff;
}

#cropEditorModal .modal-body .img-preview>img {
    max-width: 100%;
}

#cropEditorModal .modal-footer {
    background: #fff;
}

#cropEditorModal .cropper-container {
    max-width: 100%;
}

#templateList li{
    list-style: none;
    list-style-type: none;
    padding: 0 0 1em 0;
    cursor: pointer;
    opacity: 0.5;
}

#templateList li.selected,
#templateList li:hover{
    cursor: pointer;
    opacity: 1;
}

#templateList h2{
    position: absolute;
    background: #ff9900;
    color: #fff;
    font-weight: bold;;
    padding: 0.5em;
    font-size: 13px;    
}

#templateList img{
    position: relative;
    left: 100%;
    transform: translateX( calc(-100% - 0.5em));
}

#fileUpload {
    display: none !important;
}

#preloader {
    background: #fff;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    z-index: 9999999;
    text-align: center;
    vertical-align: middle;
}

#preloader img {
    transform: translateY(50%);
    margin-top: -20px;
    left: 50%;
    top: 50%;
    position: absolute;
    text-align: center;
}

#emailSubject {
    width: 100%;
}

.page-link {
    color: #ff9900;
}

.page-link:hover {
    background-color: #ffcc00;
    border-color: #ffcc00;
    color: #fff;
}

.page-item.active .page-link {
    background-color: #ff9900;
    border-color: #ff9900;
    color: #fff;
}

.page-item.disabled .page-link {
    background-color: #efefef;
    opacity: 0.5;
}


/*!
 * Cropper.js v1.5.12
 * https://fengyuanchen.github.io/cropperjs
 *
 * Copyright 2015-present Chen Fengyuan
 * Released under the MIT license
 *
 * Date: 2021-06-12T08:00:11.623Z
 */

.cropper-container {
    direction: ltr;
    font-size: 0;
    line-height: 0;
    position: relative;
    -ms-touch-action: none;
    touch-action: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.cropper-container img {
    display: block;
    height: 100%;
    image-orientation: 0deg;
    max-height: none !important;
    max-width: none !important;
    min-height: 0 !important;
    min-width: 0 !important;
    width: 100%;
}

.cropper-wrap-box,
.cropper-canvas,
.cropper-drag-box,
.cropper-crop-box,
.cropper-modal {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.cropper-wrap-box,
.cropper-canvas {
    overflow: hidden;
}

.cropper-drag-box {
    background-color: #fff;
    opacity: 0;
}

.cropper-modal {
    background-color: #000;
    opacity: 0.5;
}

.cropper-view-box {
    display: block;
    height: 100%;
    outline: 1px solid #39f;
    outline-color: rgba(51, 153, 255, 0.75);
    overflow: hidden;
    width: 100%;
}

.cropper-dashed {
    border: 0 dashed #eee;
    display: block;
    opacity: 0.5;
    position: absolute;
}

.cropper-dashed.dashed-h {
    border-bottom-width: 1px;
    border-top-width: 1px;
    height: calc(100% / 3);
    left: 0;
    top: calc(100% / 3);
    width: 100%;
}

.cropper-dashed.dashed-v {
    border-left-width: 1px;
    border-right-width: 1px;
    height: 100%;
    left: calc(100% / 3);
    top: 0;
    width: calc(100% / 3);
}

.cropper-center {
    display: block;
    height: 0;
    left: 50%;
    opacity: 0.75;
    position: absolute;
    top: 50%;
    width: 0;
}

.cropper-center::before,
.cropper-center::after {
    background-color: #eee;
    content: ' ';
    display: block;
    position: absolute;
}

.cropper-center::before {
    height: 1px;
    left: -3px;
    top: 0;
    width: 7px;
}

.cropper-center::after {
    height: 7px;
    left: 0;
    top: -3px;
    width: 1px;
}

.cropper-face,
.cropper-line,
.cropper-point {
    display: block;
    height: 100%;
    opacity: 0.1;
    position: absolute;
    width: 100%;
}

.cropper-face {
    background-color: #fff;
    left: 0;
    top: 0;
}

.cropper-line {
    background-color: #39f;
}

.cropper-line.line-e {
    cursor: ew-resize;
    right: -3px;
    top: 0;
    width: 5px;
}

.cropper-line.line-n {
    cursor: ns-resize;
    height: 5px;
    left: 0;
    top: -3px;
}

.cropper-line.line-w {
    cursor: ew-resize;
    left: -3px;
    top: 0;
    width: 5px;
}

.cropper-line.line-s {
    bottom: -3px;
    cursor: ns-resize;
    height: 5px;
    left: 0;
}

.cropper-point {
    background-color: #39f;
    height: 5px;
    opacity: 0.75;
    width: 5px;
}

.cropper-point.point-e {
    cursor: ew-resize;
    margin-top: -3px;
    right: -3px;
    top: 50%;
}

.cropper-point.point-n {
    cursor: ns-resize;
    left: 50%;
    margin-left: -3px;
    top: -3px;
}

.cropper-point.point-w {
    cursor: ew-resize;
    left: -3px;
    margin-top: -3px;
    top: 50%;
}

.cropper-point.point-s {
    bottom: -3px;
    cursor: s-resize;
    left: 50%;
    margin-left: -3px;
}

.cropper-point.point-ne {
    cursor: nesw-resize;
    right: -3px;
    top: -3px;
}

.cropper-point.point-nw {
    cursor: nwse-resize;
    left: -3px;
    top: -3px;
}

.cropper-point.point-sw {
    bottom: -3px;
    cursor: nesw-resize;
    left: -3px;
}

.cropper-point.point-se {
    bottom: -3px;
    cursor: nwse-resize;
    height: 20px;
    opacity: 1;
    right: -3px;
    width: 20px;
}

@media (min-width: 768px) {
    .cropper-point.point-se {
        height: 15px;
        width: 15px;
    }
}

@media (min-width: 992px) {
    .cropper-point.point-se {
        height: 10px;
        width: 10px;
    }
}

@media (min-width: 1200px) {
    .cropper-point.point-se {
        height: 5px;
        opacity: 0.75;
        width: 5px;
    }
}

.cropper-point.point-se::before {
    background-color: #39f;
    bottom: -50%;
    content: ' ';
    display: block;
    height: 200%;
    opacity: 0;
    position: absolute;
    right: -50%;
    width: 200%;
}

.cropper-invisible {
    opacity: 0;
}

.cropper-bg {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC");
}

.cropper-hide {
    display: block;
    height: 0;
    position: absolute;
    width: 0;
}

.cropper-hidden {
    display: none !important;
}

.cropper-move {
    cursor: move;
}

.cropper-crop {
    cursor: crosshair;
}

.cropper-disabled .cropper-drag-box,
.cropper-disabled .cropper-face,
.cropper-disabled .cropper-line,
.cropper-disabled .cropper-point {
    cursor: not-allowed;
}

@keyframes flickerAnimation {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-o-keyframes flickerAnimation {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-moz-keyframes flickerAnimation {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes flickerAnimation {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

a.clone-profile.loading {
    -webkit-animation: flickerAnimation 1s infinite;
    -moz-animation: flickerAnimation 1s infinite;
    -o-animation: flickerAnimation 1s infinite;
    animation: flickerAnimation 1s infinite;
    color: #0dcaf0 !important;
    background-color: transparent;
}

body.transfer-hide #transfer-toolbar span{
    display: none !important;
}

@media only screen and (min-width: 2600px){
    #windows{
        max-width: 80%;
        margin: 0 auto;
        min-width: 2600px;
    }
    #copytools{
        position: absolute;
        margin-left: -20px;
    }
}