@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');


    .btn:focus,
    .btn:active,
    .btn:active:focus {
        box-shadow: none !important;
        outline: none;
    }

    a {
        color: var(--primary);
        font-weight: 500;
        transition: all .5s;
        -webkit-transition: all .5s;
        -o-transition: all .5s;
    }

    h1, h2, h3, h4, h5, h6 {
        color: #191d21;
    }

    a:not(.btn-social-icon):not(.btn-social):not(.page-link) .ion,
    a:not(.btn-social-icon):not(.btn-social):not(.page-link) .fas,
    a:not(.btn-social-icon):not(.btn-social):not(.page-link) .far,
    a:not(.btn-social-icon):not(.btn-social):not(.page-link) .fal,
    a:not(.btn-social-icon):not(.btn-social):not(.page-link) .fab {
        margin-left: 4px;
    }

    .bg-primary {
        background-color: var(--primary) !important;
    }

    .bg-secondary {
        background-color: #554994 !important;
    }

    .bg-success {
        background-color: #059669 !important;
    }

    .bg-info {
        background-color: #0891b2 !important;
    }

    .bg-warning {
        background-color: #d97706 !important;
    }

    .bg-danger {
        background-color: #dc2626 !important;
    }

    .bg-light {
        background-color: #e3eaef !important;
    }

    .bg-dark {
        background-color: #191d21 !important;
    }

    .text-primary,
    .text-primary-all *,
    .text-primary-all *:before,
    .text-primary-all *:after {
        color: var(--primary) !important;
    }

    .text-secondary,
    .text-secondary-all *,
    .text-secondary-all *:before,
    .text-secondary-all *:after {
        color: #cdd3d8 !important;
    }

    .text-success,
    .text-success-all *,
    .text-success-all *:before,
    .text-success-all *:after {
        color: #059669 !important;
    }

    .text-info,
    .text-info-all *,
    .text-info-all *:before,
    .text-info-all *:after {
        color: #0891b2 !important;
    }

    .text-warning,
    .text-warning-all *,
    .text-warning-all *:before,
    .text-warning-all *:after {
        color: #d97706 !important;
    }

    .text-danger,
    .text-danger-all *,
    .text-danger-all *:before,
    .text-danger-all *:after {
        color: #dc2626 !important;
    }

    .text-light,
    .text-light-all *,
    .text-light-all *:before,
    .text-light-all *:after {
        color: #e3eaef !important;
    }

    .text-white,
    .text-white-all *,
    .text-white-all *:before,
    .text-white-all *:after {
        color: #ffffff !important;
    }

    .text-dark,
    .text-dark-all *,
    .text-dark-all *:before,
    .text-dark-all *:after {
        color: #191d21 !important;
    }

    .font-weight-normal {
        font-weight: 500 !important;
    }

    .lead {
        line-height: 34px;
    }

    @media (max-width: 575.98px) {
        .lead {
            font-size: 17px;
            line-height: 30px;
        }
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-weight: 700;
        text-transform: capitalize;
    }

    p,
    ul:not(.list-unstyled),
    ol {
        line-height: 28px;
    }

    .shadow {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03);
    }

    .text-muted {
        color: #98a6ad !important;
    }
    /* 3.2 Form */

    textarea{
        height: 256px !important;
    }

    .form-control,
    .input-group-text,
    .custom-select,
    .custom-file-label {
        background-color: #fdfdff;
        border-color: #e4e6fc;
    }

    .form-control:focus,
    .input-group-text:focus,
    .custom-select:focus,
    .custom-file-label:focus {
        background-color: #fefeff;
        border-color: #95a0f4;
        box-shadow: 0 3px 8px #95a0f44f;
    }

    .input-group-text,
    select.form-control:not([size]):not([multiple]),
    .form-control:not(.form-control-sm):not(.form-control-lg) {
        font-size: 14px;
        padding: 10px 15px;
        height: 52px;
    }

    
    .custom-imp{
        padding: 10px 6px !important;
        margin-top:-1px !important;
    }

    .custom-control {
        line-height: 1.6rem;
    }

    .custom-file,
    .custom-file-label,
    .custom-select,
    .custom-file-label:after,
    .form-control[type="color"],
    select.form-control:not([size]):not([multiple]) {
        height: calc(2.25rem + 6px);
    }

    .form-control.creditcard {
        background-position: 98%;
        background-repeat: no-repeat;
        background-size: 40px;
        padding-right: 60px;
    }

    .form-control.creditcard.paypal {
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAoCAYAAABOzvzpAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo4Q0JDOEEwQkQ5QkJFMjExOEZFQUIwMEM5MDY5Rjk1OCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4MzhDMkFERDA5N0ExMUUzOEU3NkI3REVBNTBBQTM3QyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4MzhDMkFEQzA5N0ExMUUzOEU3NkI3REVBNTBBQTM3QyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjNFQjYzNzExNzYwOUUzMTE5MjFFQjVEQjRBN0YxNUQwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjhDQkM4QTBCRDlCQkUyMTE4RkVBQjAwQzkwNjlGOTU4Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+pzjbbwAABEdJREFUeNrsWGtsk1UYfnpd13Yd68boXOmAgnO4VSfLUBIhRhYIGkPMDHHGCJloNOIPL9EYkKB4SURiovBnRn+QQaZchUgQp8KcDlh2MawwV7YJG1u3sVtvWy9fPef9sMt0Gp1JQ/KdNzl9z7Xt85znfd9+VdlLKx0APmVtFWt6KMPCrJ1h7WmNJfeeg6xTxpoGyjGO1clasZq9rIRy7X61gmQ/oxLUULgJAgQBggBBgCBAECAIEAQIAgQBCjXtbA8+UlaKPTufmXrADkdx+UoPtu3aj6aLnbN7MtGnILPABZVKJU/E44hFwgj0X0doePBvz/H98jk1Btuak6OAVffeSZ6D/qymFgM3RuEqWIAPt22ieb1eiwX2bOQ7c5GZkUZzOp0W9pws9gg29bGGFD3NmU2p0JnTCIwUiyI46EUkGCBSLI6FUOt0HCnzemhTjeQTt2g00T4pFkmeAkpci8nvrvoKJ79vgrvjGnZt3Uhglxffjpq9r0wDeqK2EQ1N7dj56hP48kQ9Xnr7cwJde2AHbptnirZY3q/Cd20t7J4ZvwNf7G4HKWnqXrA4GODO/CGrt1FeOToQw4rkEndFM40jAnirwCrHPMWOSYR32fP4TSu5fgqcceoHF942Xyr7+3D13XvKQCTszDD5bg0Nc/0VpRQR75Fzc9ROCb2zpx7JvzsOYX0rwUjdAtm7Jz5DELAykaRWCgD9FQkFRimb8QWkMq22eCzvQHAYHkELCsaHGif+CTlxP9C60d2PpBNZHjuiMP5evuQ67NSmtXewdxydNDfafDBmeeDZsfL2NhHqe8AaYWDoibOcdOjVssHMZYt4cnBKg1Ghjn2pgy9AklxCZDUwoIJkkBJS4neX7DR0+dw/CoHy3uLrS0dWH9muX4+K3NtFZ95CyRUbF+JS784kFv/zD8wQmYjQbsfedZaLUa1Bz/Ea3ubugt6XLekyQW//0snmNM4kFEfONQ8+TI5M9zQHDIi7BvDGm5DlIGJ5ATEqf9oWQRICugav9p7Dv8w7S18nUryH9xvB5HTjXgo+2VNG5s9ZBvv9LLFOTE0iXz4Q+E8P6eQ3LSNMqJcnJsBP6+nmnvaUjPgIrd/uT4KILePhizbXLlYTH/f25/1lXAdTOGf2ZJ7c92sf0q+deefxSnq3eguHARjRua5b2/dl5P7OUJdGjEJ1cIlsllUL6/vGeEKYFbimUO5hYWw2DNkuf94/947t+Yyl5aGf+vh3KyMyBJcXiHRmesySuW5VN5O9fSgYx0E1WD7p4BWn/jhXI89+RaeLr7UFaxHdGYJN8Ei2mVWsNifnJmqbKkqEkxIMpuPR6XqAxyyfO8wPsx1ufhkBQCZmtp5lTUHXyXSmXFlt2oO+9W1k/hyg2rCfzhkw23BPikK0A8DAkCBAGCAEGAIEAQIAgQBniriBIQVjD/GCTirYALqOAH8H4tvFaaEyE3MG38XYABCjHjqM0/uowAAAABJRU5ErkJggg==");
    }

    .form-control.creditcard.visa {
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAoCAYAAABOzvzpAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo4Q0JDOEEwQkQ5QkJFMjExOEZFQUIwMEM5MDY5Rjk1OCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo2N0ZCMEUyQjA5N0ExMUUzQThCQUUwNkRBQTdGOUQzMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo2N0ZCMEUyQTA5N0ExMUUzQThCQUUwNkRBQTdGOUQzMSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjNFQjYzNzExNzYwOUUzMTE5MjFFQjVEQjRBN0YxNUQwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjhDQkM4QTBCRDlCQkUyMTE4RkVBQjAwQzkwNjlGOTU4Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+NGpUrQAABKJJREFUeNrsWHtMW1UY/3ELFAq0tCuDQjtbnm7SjbkBA3lMN4LO6QwxzmWSmKiJfyiJMWaJ/0m2mCzTaJYZXTYN6kKi0z/cDIsyF0eGcxuMOXkMxvv9KOXVVvr0nHPpbe8kMUpS/uj9ktN77ndPzznf73zf7/vujSg6WL8JwBnSykmLRniIk7RfSXs1kvycJW0vwkvoQVeQVseRnzKEr5RyYeT2q4mMQ5iLBIAEgASABIAEgASABIAEQNhK5H8ZrI+zotLQiQr9PWjkNqbz+DhcGDTjk/ZS0dgXnsrGk6VG1u8ZnMP7n93AB0fKoFbFMN2Jz1vQcd/C+rqkODxfmYWduclITY4n9SmH2XkHmm6N4uMvb4vmfbN6O7blaMFxEey+5ugVLNldoQFgxKbG2a5i1HUXoiqjE4czbyCWs2Pfpj9xuuMxuH28Q9HNHdr/MJI3KNj9dz/1IFYeiV15qYjg9w2L1cGu5fl6vFdThOgomWit1I3xeChNKdLt2qbDoadzRLockwYt7ZOhDQG3V4bzvWaM53+BUc6MaM4Do9Ii2qjf+LnFZTQ2DzFj/MbbHC5MWuwMlCOv5QvG3+maZid+6lwbLv82hPYei2jdlw5s/sdecrM2hC4EgsXr9WFmwYu8/R9i8Md3ka2awv35JPbswJ4MYdzFK31Ydnpg0gdOc2BkgV03Z2iQqJQL+tpT1zE+bVt1vWyjGo9u2cj6M8R7tOpY1n9kjQCsiQR/vzMOjSoWun3HkJ7kZTq6seLtqTw/eHzM/amY9Crhf30j8+w6v+QUzXeCcETJjrRV16qqyBT61EPo3FS2ZK4rABPsqklUwFRWzfrPPpEOmYz39ebbY5icsbN+ukEV5AE8AL1Dc/jhcq+gpyAdf6cUp2v3wpCSIOgTE+SoXCHUuYVl/HJ9mBCrlV+bkCol0XUBYGrWjr5h3piCnTlI0cbhmccD7v9NQ7fQN6YFAOhfCQEqx8/cwsmv27BoC3hDbrYWn9bugSqBD4/nyOnLo3me+Ll5EC63F3e7Z4TxawmDNdcBNAzYpxVy6jXVeUjWKgQjWzt4dqZkl5KkCAAwOh/gEp8P9Re7UPXGBXx7KQCYWhmD8gI9mzfY/ScIR+Sbk+F0eYOIUBt6EhQA+GOCpTwquwsNgp7Gvo8PU5YBuJUUYHe4WVj4T5QSpD8zfFTXisoSI5Txga90uwsMAuH564AHhZLpugHQ1jnNjPAbRGWJuHPD1f6g2FYGuT9/+ltJMXPsrRJcaxlF94CVnWgZqQn8xrs9Xtwk4NbWFP/rHnJMakRFciw0Qg6A0+Uhrj6FojydoGtoGoDjL7eI3B4EgOriFVGM3PwEF5xiT37VRsg1RohvCsjhtxtYXSGkTVJAFZKag9YRWSRN+ivLkAJApZEQkzoon5+/1CN6LiOVYVffLO8xpNihcq/fikZS7JgJ4SURF6ceMG21M4/6noQPff76i1sxNrXExt+8O4nhiUXRvNdax2DQ8dlCT0ro/wNARNHBep/0NigBIAEgASABIAEgASABIAEgARCeADjD2H4PBeBqGAPQRAF4hb7QhZknuFZsfvlvAQYAHheK9jMfKWkAAAAASUVORK5CYII=");
    }

    .form-control.creditcard.americanexpress {
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAoCAYAAABOzvzpAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo4Q0JDOEEwQkQ5QkJFMjExOEZFQUIwMEM5MDY5Rjk1OCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo5RkI5MDAxRjA5N0ExMUUzOUQ4QkU1OTZBNzYxMzREQiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo5RkI5MDAxRTA5N0ExMUUzOUQ4QkU1OTZBNzYxMzREQiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjNFQjYzNzExNzYwOUUzMTE5MjFFQjVEQjRBN0YxNUQwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjhDQkM4QTBCRDlCQkUyMTE4RkVBQjAwQzkwNjlGOTU4Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+jutENgAAB2FJREFUeNrsWGlQlWUUfi7cy2VfZFdAFkUQUVxAwz3TLM3d1DQEpRzN1GaymHEdl6yxcVyyUcfQynBJUxx1zNBEMERRSBkUEdkR2ZEdLtzOebn3E4p+hEN/7j0zL5fvvd/33vc855znPO8n6xMR4wbgMI2xNIygG9ZEI5ZGuJz+fEfjDeiWcaAn0vjegP6Mge7aaAMdSvvOzNAAOm56APQA6AHQA6AHQJdNrv2np7Uxrn4aDLmhTFw3NLfi0v3nmDXUWbq5plGFcV/dRC8bE0R/HNSlH6xvbkHG81r0cTCDqZGhmKusa8bVh6UY420Le4vOZclPt/KxcISLdN3Sqsa+q1lYM9FTmvv610wcvJ7dNQDeD3bF9fRSRJxOE9e7F/jj7YGOuJxajPW/PBRz+xYOxOKRbnCxMcbppEJ8eSlDzB8ODRD38Vx72zbLFym5VR3mFSQ9RnjZYNtMX4QfTZGeZ9iXRCbjWVWDmLsRMQqTd91CXZMKkwc4Yv073lIA2EJpH8vHu+NJcS3mH0gSv9XlDLA0lmNeYE8sOZICbydzFL9oxAFC8tgHQ9CsakVVvYoio8Q3hPiBkIEwkhtgyu5bMFPKUVjZABVFo54yRk7O7ZrnJy3e19EcCZkV0jzfdyW1BCfvFJBTDqhtbBH33c97gYgzaZjY3x7LxrmTPJPh5O0CFFc3YlqAE87cK8SK191hQfvkvfQwM8K3v2fjTVqjVa0Wc7zPLnPAu+Q8I8nRWkRpFkLZkPi0AmmF1dKNoSNdcTurAulFNYh7XIacsnosHe3WYbE6cugEbVw72AE2djy3vB75NEpqGkXq+/WykJ6Lf1IO8gNbZ/qguaUVk/zscfRmnnBw7WQvyg4ZfvwjT7o/fIwbbM0VWEeZyc+9EglySoaQc4dicyCjPIzLKEcKRYSN57T2lr8D3GxNRN3x5kZTvfbvafE3YS2Daw8TaZgoDCRgOKKn7hQi4UmFeM7OXCk9p9Z4wZniZW8muIczq6K2CXtjsmBtKhfPvmhQifvMCMAtM3yQTAE7lpD/aiQ4dZAjmlRqXCMSCu7TA3JyQk4/MMzdWtS1r7O55Fz46N7YeO6RuOby+LspyeGRtIbWLIwV4pOJ7ezKIJTVNCG1oFrU/t3sSum+IA8b8bmJ1p7k54CDBHxvAru3ramY5zXPJRcJELQ23scOU4ijTiUVvBoAYaNccSIxH3a0yb3v+YuNGVEkPOxNMX3fbUSnFMHKRA4DSg/uCJHxuXC2UmK4p40oGf6OQeNoqyh9V0U96ECCPM+1y7b9YgbCKNv4GY65mbKtCwR6WGPz9H6ibOIzHomM2Ditn+gUXGrj+tniOfESZwY/yxxUQBmygYiRs6CWyFEh71pHl6nVL6uIa56d5mhfWxssWmN7K6GaZjJkq6htho2Z4j/92OrjqdizYMA/5quoDcYSr7xG3cHW3EiAzbuatCsB2aV1wlHmpfYWRW3R0coYE3ztXqkNyvpExKihw6ZXgt21cMaOCf/6HbfSBQfvYgoR8JbpPqL7tLdG6umc+nZUDlwS7a2aOgF/5+9i2enadU0tyKN2y91Eq2rZ8ivqRftlDfG/AMA2dU8iijTK7mXRybCZCO7MikDYEvHOIxXHLa+huaWDWhxAOmE7kega4o34jDLpOxZfM4c4C5LWqkKtBbhZYedcP+y8/KStlWvobeUET0Go2y48RqlGm7BdWD2iewHgaLFemDuspzTH7eyzn9NIavvh89O5guU3TfMWBPnJJC8EuFqKdrmW7jlCHaeWIupoaYx1U/uSSFLjBxJE+69lkUJ0FAqQyVFLhnirtTpHKjE0vwxezfWGubHOvn5OZWN+QwN8686VktiJ9Ie/uGksrrBHtjc2PBNAO2hgD89GxB6KlHftwKLSJygLH0kQhNL8QSFJJtAglqSIA+ODkYWcqpTK37RJNVHl97gwiun8+F+XDgiyI2qwDda97OVW4SK2UgRpM2WIsN+x+ACzJSd5EmyBSCu3OeqFnirBlAQS2XpTLbriuZlP4kfClS3BLDRrlh/dlH5GCTUJL8WEZxDeYH9RKtmo1bcfv1Zwx2Ih0jQxIBwxkSGZcjOGE3tV8ORC5lXBZxCB/QmGO6HQA+ObZXh1zTiU8rcWjxIJHKoXQC3Eqylo01wjhSeHzUZaKTa5xk6czKs4Yy5xRtnGt8OR2a2DyJ7LTrc2SZTxjAQFKXvE5CZjkp3VZBvC50jOfhaKkUZx0+d3QrALwhPjjxkPouObV/kT+lqhIHQwYhLDIFm8+ntylKIr9N0elC5LAdXzZUlAVrNVaCUYkFcCeJzKdXThp+Jjr5mRhaEpxDfLPh7EMpwzyJLFfQsZnPNVoyNVYYYjap2pF9e3QvABdWD+90nk+Vc/YniUPY+VUdX6z8llbS4Xq3RjlyZNnYwTkaUk3aOLbT9fmorX1pUlTVSGRoKK2jfbHDL2VWRaXqlaD+pageAD0AegD0AOgB0HEAmnTY/xYG4IYOAxDHACylEaNjmdCs8Tn0LwEGANFzD+vUOoKUAAAAAElFTkSuQmCC");
    }

    .form-control.creditcard.dinersclub {
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAoCAYAAABOzvzpAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo4Q0JDOEEwQkQ5QkJFMjExOEZFQUIwMEM5MDY5Rjk1OCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo3QzZFN0NDMjA5N0ExMUUzQTlFREIzQkJBNTFDMUVBOSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3QzZFN0NDMTA5N0ExMUUzQTlFREIzQkJBNTFDMUVBOSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjNFQjYzNzExNzYwOUUzMTE5MjFFQjVEQjRBN0YxNUQwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjhDQkM4QTBCRDlCQkUyMTE4RkVBQjAwQzkwNjlGOTU4Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+DhLVaQAABA5JREFUeNrsmHlIFFEcx7+r5qqb95GWeaRWpBamhhZ2UFKupZ2S1h9Z0QkdEFF0KR0UEf1RWFAWREFaJF1GEZgWphGdVt6laZalrpjttofbe2s7u9OYGbQxy8wP3rIz83tv9/eZ3/WeBPITAQBOkzGFDHsIQ9RkFJOx0hZhsy+TL4lk2EI4Qm0NISPKhnirMhnAlwUZAbt+nJ9hA4CICEAGIAEQAgha7//EjwzxlWDZjFBKj/DHE3Ql6vR5eLg7wdnVkdLpVWjS3daOioR1Xy94i/34dVGqdxf+bhLTCekstLh1ki+ylMVg4KQQ5NysMRjV96Waeuw+WQh4bgI0pkYgd6cOa+6G9G1vPlOFCUY11AnCV2aMwW4437xXYcPIBvn3X/j4OJRJsTI3E4RXxpDORsJ7l3qnE6mPF0PVY5j3RvUDWP48r0l/d2JOE4pct2HyqFBpdT7/61LSyyk94Vt+GtIQQAxCjjA/xgp+HDNcfNVgPgC0LxpEYd8S6nBIWlPBAd7QqlMy9Eb4uBjhqbS+gqmYFVBqdIVeYS3SoN2pbOvHyXTv/qwB1/fWzI7DmeAlJdr33PJ0dcO9gCrYtimLpzowejoqcNIwN9mTuHbnyHK8bOzjrHl4eD0d7O/4DyJgahmtl7/C5U8nEd8GumZg0xrdP/UAfZ9zemwwft96KQGP9QP4Tjp6fhxMWJYzgPwB5TAAuPahjrhdPCUVCuF+/c3xJady5OJq5vkoAarTcvDFnQhD/AVB3flr3hbleQjxiYJ4TCmPu+6rUoJrkg18lJsyb/wAGOwxCFzHAKKOHuw1oHs0TPmaN0ccOZZ9hwHsAKg273uv/onybq37X6PrsF3gPgLa0TlJTtn7VOLDSRcujeYn095JxdFo6vvEfQCXp/CZHmJLeQFvZC/dMeh7OUtIzeHB0yqs+8R/ADdKxzZsYzFzTilD0ornfObUfOrH/oqn0pcYFc1piKgWlb/kP4HxRNaaP8zeUNmMOmL/vDu4+a/qt8Ul7CtHWpWI6xu1pUVzPalIQmPXWsRlaNWsMUuICMSf7FpMEaQILG+aKqiYFqwmica9UmxLn7vRosoOM5STS5KxC3HrcaB0HIqduvya1XItDmXHMvR5ihbnirVBpau1jGzyehszsjhrPejnPlFjHeYgDoG8s8WoTgIS44u3ka3GTSfvXt7XrdPm9bIiv26Tr7857g4KWn1nkgQt1+09xIrJWHk9xQgyul9awdHS11NOFtSo1E6FBX1ly6IdqS+9Bib/6/ADAKPf5KJ3uClLggwxaYgqGbH/N+gR6YNH7+isc1rYZsf628Ado/nCNYDQA+i3gsLgIQAYgARABCB6AWsP06CqBEwADuUwAryLgrME/Q/LR52Q8BBgBm3GJpfFCpogAAAABJRU5ErkJggg==");
    }

    .form-control.creditcard.discover {
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAoCAYAAABOzvzpAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo4Q0JDOEEwQkQ5QkJFMjExOEZFQUIwMEM5MDY5Rjk1OCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4MTYxNkM1QzA5N0ExMUUzODkyODk5REFFMENGQ0I0MiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4MTYxNkM1QjA5N0ExMUUzODkyODk5REFFMENGQ0I0MiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjNFQjYzNzExNzYwOUUzMTE5MjFFQjVEQjRBN0YxNUQwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjhDQkM4QTBCRDlCQkUyMTE4RkVBQjAwQzkwNjlGOTU4Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Nbpv+wAABOVJREFUeNrsmnlQVVUcx79gGWtvGCuteBgOSykiISQaO5GgwWtKZlJkMfpDrZQmBNOCxqJF0UlsEaPYbAMCCp1JnjFsZSKyiRA8FkGCARyBx9Lb7judexzuSKMNIU7Lu7+Z39x7f++sn/P7/c59d44RIcQGQDpVH6rzYRiioVpO9QUjCkBOb56AYUoZD0BtQCv/Z+F4AAQGLCIAEYAIQAQgAhABiABEACIAEYAIQARgkGI804J2Do5MXVxXYld8PIaHR5h92/YXESp7GjzH+IQEPGgthZPzCuTm5l378qDRMPt9ixbB1NwCXt4+1xrUc9CUpGEiKQDju9zw+0cx0Pe3o7a2jvWTn/+t0HdjYyOz5eXlC+Pg1dXNHS0tLcKzx5o1+Dwj4/YA6OnpgYO9PRwc7PHxJ0fhFxCAsbExDA4Noa+/HyVyOT44nIqQkBAE+Pujo7OT1QuPiEDqkQ8hC5Vhz2u7MXTlCrOrvk6CunA/9IOXQMaHoWsqw+T+Z7HiAQmMjY1xNC1N6Ds7JwcDAwMIDAxk41hsY0PbC8W64CAKWMtsPt7ekNwtwdZt2xnEGQuZodx5lwnJys5m9z+fOUPmm5iSd997nzyzIYysdH+MpB07xspQEEKds9XVzEZXRbCNjIwQrl9BlFuX3FAn03eQt95OZvXa29uJVqsl1KsIBSmM43DqEaG9+voGZisrLycdHR3sPuf48ZlOixjPJm5We3jA2Xk5KisrBVtwUBDuWbAA658KwdqgYOa2VVU/wdLSElGRkUI5iUQCTnHu5p9o6G9RkREwMjJCRmYm5KdPMy+LjooSyiS/k8xc3tfPX7CVlJTgzX37mPe4u7nNeC53zDp50I54nRKpVIoLFxqRnZ2DlJQUBK9bj9jY2L/fMNGztvz9/JCVlY02hQLW1tbseUqcljnBxcUFVlZWgo0PMz7f5Od+A0dHx7nPAddLTc15UNeDr6+vYBsdHYWS6iuxO7F37x4W60sfeZjlCRo6QjmlUol5S1xv2vY8O3d25Vd8YHAQRUXfMY+4HrZMJsPBlAN4nfYzJUmJiexa39Bwe7ZBGvMswVlYmKOwsIhSdkBZaSkio7egu7ubrsoy0DhEzPNbkEuzNQ+js6Mdz23ahOLiE4jYvBk2NlJ88eVX+LX5IlSZcdCeLZw+mPmmMNtdBOP77aBSqSBd/BAD29rSDFtbW2EcXp6ezANMTU0QtiEM7qtWQV5yCgUFhfg0PR1VFRVwdX10bpMgn+h4fdzTi7yRmEjoSjL7q3FxZGN4OOnt7SV0OyRmFpZkqdNylpR4UavVhG6b5N6FC4mJmTmrz4TTEdX3h8hYwmqifMmRTBzcSHTdTdP6fHnHThL45NobjonirmgNIa2sru6deSSgsZouMjp5xEhTfBEUAIgARgAjAECeuv9wMddEBwwOgH+qBpvgQtDUn2VunwQDgOmuh+TEDuvpT7K+4YYSATgNdgxya0kwGwGByAHepAbqaE9D+UgAyMWIYSZDraYKu7gfozp9kcf6/3wWIehKcohpccwVzc/3Vvllvg/+JIzL8hPVdddC1nwPXRifeRWNap71lx/l3HpLidND3K8Bdvsjimeuqh/631mnZe46EHZLij8l9RtX7n/AEMn4V+j46WTpBfW8zU66vbS5W96+Eb5w/JhfzhwADAEp6pBLh7YWZAAAAAElFTkSuQmCC");
    }

    .form-control.creditcard.jcb {
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAoCAYAAABOzvzpAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo4Q0JDOEEwQkQ5QkJFMjExOEZFQUIwMEM5MDY5Rjk1OCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo3ODJEODgyMDA5N0ExMUUzQUZBM0UzQ0IwMzlDQTM2RCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3ODJEODgxRjA5N0ExMUUzQUZBM0UzQ0IwMzlDQTM2RCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjNFQjYzNzExNzYwOUUzMTE5MjFFQjVEQjRBN0YxNUQwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjhDQkM4QTBCRDlCQkUyMTE4RkVBQjAwQzkwNjlGOTU4Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+RS3J7gAAA3pJREFUeNrsWHtIU1EY/22z+Zo1Tc10zVctXSWZFib2olIxE6KgoqclERRoUPT4wzAii6AIgrCkt2UU/lVYUfaCHqL5gLKmtsxX6dxSm489XOcec2gzZ7Bi894ffLtn537n277fPef3nirN5WJwjBZBLbBExIdgBHbFnirNIECFp5hzSWExOAPWByDSUWyScfC8FeLOCzaNoPOxP4YDk4AjgCOAI4AlgNJ1sGm+IrwpndsUiYJ4Gbs2Vo3pLz9Jq2Igz718/G1IDxFj4HLxTj+I1ySHzccXrXfCTFSEeMZTcEuLs4oehU8rBJDcbOFDnO7Ykb0ceVJPyYxJJJJjjOElizKMRq8gz2rYuw6rMqLui/JG9TAiZPdBuVX5Cfh1Uf6STR2BVBPo/HVYExWwV+R01jB9q1OtoerA+azl6UfGxFU1sXdPo++IhdEOI/HuFSMb3/Vd2FUoXKIh4TY4K70HEIyDj7Evdef6Htu9mJ9Jp64inyHtVAb+ijQjcj2BPNhIjymjZkrJlFfS7fV1CTB3qSiiBAQ6sW3zTdcBEKcOvwMqTEBjoGAcOBSYxB5uY5yEqNNvf/6NajvkWLqw8V5r78zKWYFeKFd581mJl6Gz06Iwrf1Ds2AfRHySn80MbIIX0i13EIDxQP6Tty9S28PJzxvk5Dv88N80H66pmOKYIC/t+rv5wQEjXdG8uiAmj1qKxV4+bjGvskQFHfbha8gSld+Undv20luU8btLExGPuQnVc+ZDzjX1X33WJztSM5HAc3REIsEqJXb8TRa2V0vN0tgYIXStx9VYc5Mm/4ebmhuKqFqrzzOAGObItGqH9/FdiSIMMN8hSzrpQiv6gW8iAxUf1ulFWrzCI4gKQDhRA6CSg5alI56PhEGV1CtgIPi3NMtgi0d20ENsXLoGzuQFtHL0wmE/wnuiNG7gtPso4HDjCmJztoMrQMqkgZNBjhK3Y1l8HMSyW0DO5eZbnWGT0Inuxhn4ch5qlEEMVmzBqYROKjJX+8z8ygKDKTuJ3gWCLA2GdiNwHK5s5R+TWqtDaLZVcEnMyvsOpT3dCOgudK67FuVdjsf/3znWBtUweOXS/DxcKPf/Tp6jXgQXED0snZQdtjGDEW87os994H+yuDnAhyBHAEcARwBHAEOCYBOhbnb2QIeM5iAl4wBGwn9ohlM0H/K+etPwUYAO7UFu8nZtFbAAAAAElFTkSuQmCC");
    }

    .form-control.creditcard.mastercard {
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAoCAYAAABOzvzpAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo4Q0JDOEEwQkQ5QkJFMjExOEZFQUIwMEM5MDY5Rjk1OCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo2REIxOTA4NTA5N0ExMUUzQTM0MEZENTU0MTExMTk3MiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo2REIxOTA4NDA5N0ExMUUzQTM0MEZENTU0MTExMTk3MiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjNFQjYzNzExNzYwOUUzMTE5MjFFQjVEQjRBN0YxNUQwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjhDQkM4QTBCRDlCQkUyMTE4RkVBQjAwQzkwNjlGOTU4Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+XxeyrgAABOJJREFUeNrsWmtsU3UU/93e2wdryzo21r2f7GX2YGOsC+KmM5MoRMyWICrgC2MkYCSRT8ZADJqIUePzg4iPRGMEBaODoV8UFhgje7ixh869YOs65rq1g7brvb33eno18YsZdq3pTHuS0/b/zz23//O7590yTOXzGQA+JK4l1iAyiCc+R7ybZVI2fEUf6olZRA75dc0lLlfRSw0il+5QRZDZ/6MlqBDhFAUgCkAUgCgAEU3cf3HTlaKAxrmrqJ+fRLHHgViRV/Zt6hX4OWYVTsemoZnYxzB/PwlGxubkMeKrqE6YQqLWDY1KgkPQoscRj7NTmfjyWh6cQmizNkOlsByymxHvsg/hwFQfjATCYjSmMeDF1HKcN5pRlziBwyWXkG90LCozT8q/MlCJYyO3QV5uAKhlCe9ca8O9TmtAcheK43FPw3BAMt9NZuPp9rvAS8F7sL8XOBSKJ//2eBs2B6i8nzKmPbBDB2PWwr+WKSBLyTU4FSCWRRB8xD6CLY6JJcsbzjEQrIGFowdSR/Bo9kD4AdBLPvL53iAPIePG94aA5V4oaoeeE8ILQANFe9NfUT4Y0pIBeSYDi/BxGi+2pQ+FFwB/qlMlxEG7cf2fQSU1CRpL+dJy8jAdh1FBnVULTf59YDjt4gEsoQBb0m3hrQP8eV6/6yGY3jgIq7kMCV+8D8nlxuxj+8EV5MA3Og7JPgetpQKS2w1dfQ1E23V4TjRBXVwI39gExKlpqEsKIfM2GBpfgsqQBFlww2cfBKs3Q5qfgOz6HaqVqZAXHJAp47CxGTDubELJkbLwAhDv80K9rhSyZwHG/U9BU1mK+TePImZHA7icTOi3b8XCTxfBmlfD9dniryprvGYDh8e3gO3oQ8+D9mK7bBnPLKXiaz4BLrYLj3VJA9EJn2QM2LhfatTtws2kv9JuOwHPhddrfS6D1EDBWrMJM+LOApqIY/OUuGJ99EsKvw/D9MkQuUQV14RqIM3YIpLC6KI++TQU2KRHzr74HLi9bcRe+u48ALIHn2x/gvdgCaXZIUZ6hQonL2Ah2dQEkeuqcma5pfUs5sjB4Bnz/SQKhO/xZYC7WBC4rnQ7fAfeps2DTUsg5WWjIpEWrDUJ3vzJ3EfoHoa2uIDPnoSktAtmxsse3diprvvMKuUMfWcA6GLZ+AF31PnDJ5RCd5CK2brDJa5V3hlXTNeuhq3oGPlrbvbrwukC/zgTzpochTlAwoprS9clxUqod0pyT9ibJZ73g8nPBX+okV2iFtqYavqFRTNc2Kn7vbesi3zZAnJ6BNecGNB/VgY3PhzDWAvH6FcXMZe88mBVxtO6Fz3oZov03SM5xAmcc3c6E8JbCO+3DOGztCk1dvtuNmJTAUuqB7tvx8WhR+FzgZFwmHGzwHZojmQtY+Tlei+Pja8IbA1wqDq8lFQd1D5maCXX9QsByL1Nn6PKpw58FPo/PQZMpbemHuNuLxKybAcl8Y83Bp0GYfkgB8AeR59Kr0BybGrDsidwMxGzwBNwO7+m4MyQzgZC0w36SGAanTemY5TSodNuhpWrtVgORfRkWHDUUoH02EWWmGcRrF245EDnYZ8GhXgtEmVl+E6GIH4n9Hyk6Fo8CEAUgCkAUgEgHgI9g/UU/AOcjGIAWfyns/7tYCbG/m4mUf4r5f0z4kfiJPwQYAB3H59j066DAAAAAAElFTkSuQmCC");
    }

    .form-group {
        margin-bottom: 25px;
    }

    .form-group .control-label,
    .form-group>label {
        color: #686868;
        font-size: 12px;
        letter-spacing: .5px;
    }

    .form-group.floating-addon {
        position: relative;
    }

    .form-group.floating-addon .input-group-prepend {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        z-index: 5;
    }

    .form-group.floating-addon:not(.floating-addon-not-append) .input-group-append {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 5;
        left: initial;
        right: 0;
    }

    .form-group.floating-addon .input-group-prepend .input-group-text,
    .form-group.floating-addon .input-group-append .input-group-text {
        border-color: transparent;
        background-color: transparent;
        font-size: 20px;
    }

    .form-group.floating-addon .form-control {
        border-radius: 3px;
        padding-left: 40px;
    }

    .form-group.floating-addon .form-control+.form-control {
        border-radius: 0 3px 3px 0;
        padding-left: 15px;
    }

    .input-group-append [class*="btn-outline-"] {
        background-color: #fdfdff;
    }

    .form-text {
        font-size: 12px;
        line-height: 22px;
    }

    .custom-radio .custom-control-input:checked~.custom-control-label::before,
    .custom-control-input:checked~.custom-control-label::before {
        background-color: var(--primary) !important;
    }

    .custom-file-label {
        line-height: 2.2;
    }

    .custom-file-label:after {
        height: calc(2.25rem + 4px);
        line-height: 2.2;
        border-color: transparent;
    }

    .custom-file-label:focus,
    .custom-file-label:active {
        box-shadow: none;
        outline: none;
    }

    .custom-file-input:focus+.custom-file-label {
        box-shadow: none;
        border-color: var(--primary);
    }

    .custom-file-input:focus+.custom-file-label:after {
        border-color: transparent;
    }

    .selectgroup {
        display: inline-flex;
    }

    .selectgroup-item {
        flex-grow: 1;
        position: relative;
    }

    .selectgroup-item+.selectgroup-item {
        margin-left: -1px;
    }

    .selectgroup-item:not(:first-child) .selectgroup-button {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .selectgroup-item:not(:last-child) .selectgroup-button {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .selectgroup-input {
        opacity: 0;
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
    }

    .selectgroup-button {
        background-color: #fdfdff;
        border-color: #e4e6fc;
        border-width: 1px;
        border-style: solid;
        display: block;
        text-align: center;
        padding: 0 1rem;
        height: 35px;
        position: relative;
        cursor: pointer;
        border-radius: 3px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        font-size: 13px;
        min-width: 2.375rem;
        line-height: 36px;
    }

    .selectgroup-button-icon {
        padding-left: .5rem;
        padding-right: .5rem;
    }

    .selectgroup-button-icon i {
        font-size: 14px;
    }

    .selectgroup-input:checked+.selectgroup-button {
        background-color: var(--primary);
        color: #fff;
        z-index: 1;
    }

    .selectgroup-pills {
        display: block;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .selectgroup-pills .selectgroup-item {
        margin-right: .5rem;
        flex-grow: 0;
    }

    .selectgroup-pills .selectgroup-button {
        border-radius: 50px !important;
    }

    .custom-switch {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        cursor: default;
        display: inline-flex;
        align-items: center;
        margin: 0;
    }

    .custom-switch-input {
        position: absolute;
        z-index: -1;
        opacity: 0;
    }

    .custom-switches-stacked {
        display: flex;
        flex-direction: column;
    }

    .custom-switches-stacked .custom-switch {
        margin-bottom: .5rem;
    }

    .custom-switch-indicator {
        display: inline-block;
        height: 1.25rem;
        width: 2.25rem;
        background: #e9ecef;
        border-radius: 50px;
        position: relative;
        vertical-align: bottom;
        border: 1px solid rgba(0, 40, 100, 0.12);
        transition: .3s border-color, .3s background-color;
    }

    .custom-switch-indicator:before {
        content: '';
        position: absolute;
        height: calc(1.25rem - 4px);
        width: calc(1.25rem - 4px);
        top: 1px;
        left: 1px;
        background: #fff;
        border-radius: 50%;
        transition: .3s left;
    }

    .custom-switch-input:checked~.custom-switch-indicator {
        background: var(--primary);
    }

    .custom-switch-input:checked~.custom-switch-indicator:before {
        left: calc(1rem + 1px);
    }

    .custom-switch-input:focus~.custom-switch-indicator {
        border-color: var(--primary);
    }

    .custom-switch-description {
        margin-left: .5rem;
        color: #6e7687;
        transition: .3s color;
    }

    .custom-switch-input:checked~.custom-switch-description {
        color: #495057;
    }

    .imagecheck {
        margin: 0;
        position: relative;
        cursor: pointer;
    }

    .imagecheck-input {
        position: absolute;
        z-index: -1;
        opacity: 0;
    }

    .imagecheck-figure {
        background-color: #fdfdff;
        border-color: #e4e6fc;
        border-width: 1px;
        border-style: solid;
        border-radius: 3px;
        margin: 0;
        position: relative;
    }

    .imagecheck-input:focus~.imagecheck-figure {
        border-color: var(--primary);
    }

    .imagecheck-input:checked~.imagecheck-figure {
        border-color: rgba(0, 40, 100, 0.24);
    }

    .imagecheck-figure:before {
        content: '';
        position: absolute;
        top: .25rem;
        left: .25rem;
        display: block;
        width: 1rem;
        height: 1rem;
        pointer-events: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background: var(--primary) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E") no-repeat center center/50% 50%;
        color: #fff;
        z-index: 1;
        border-radius: 3px;
        opacity: 0;
        transition: .3s opacity;
    }

    .imagecheck-input:checked~.imagecheck-figure:before {
        opacity: 1;
    }

    .imagecheck-image {
        max-width: 100%;
        opacity: .64;
        transition: .3s opacity;
    }

    .imagecheck-image:first-child {
        border-top-left-radius: 2px;
        border-top-right-radius: 2px;
    }

    .imagecheck-image:last-child {
        border-bottom-left-radius: 2px;
        border-bottom-right-radius: 2px;
    }

    .imagecheck:hover .imagecheck-image {
        opacity: 1;
    }

    .imagecheck-input:focus~.imagecheck-figure .imagecheck-image,
    .imagecheck-input:checked~.imagecheck-figure .imagecheck-image {
        opacity: 1;
    }

    .imagecheck-caption {
        text-align: center;
        padding: .25rem .25rem;
        color: #9aa0ac;
        font-size: 0.875rem;
        transition: .3s color;
    }

    .imagecheck:hover .imagecheck-caption {
        color: #495057;
    }

    .imagecheck-input:focus~.imagecheck-figure .imagecheck-caption,
    .imagecheck-input:checked~.imagecheck-figure .imagecheck-caption {
        color: #495057;
    }

    .colorinput {
        margin: 0;
        position: relative;
        cursor: pointer;
    }

    .colorinput-input {
        position: absolute;
        z-index: -1;
        opacity: 0;
    }

    .colorinput-color {
        background-color: #fdfdff;
        border-color: #e4e6fc;
        border-width: 1px;
        border-style: solid;
        display: inline-block;
        width: 1.75rem;
        height: 1.75rem;
        border-radius: 3px;
        color: #fff;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    }

    .colorinput-color:before {
        content: '';
        opacity: 0;
        position: absolute;
        top: .25rem;
        left: .25rem;
        height: 1.25rem;
        width: 1.25rem;
        transition: .3s opacity;
        background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E") no-repeat center center/50% 50%;
    }

    .colorinput-input:checked~.colorinput-color:before {
        opacity: 1;
    }
    /* 3.3 List */

    .list-unstyled-border li {
        border-bottom: 1px solid #f9f9f9;
        padding-bottom: 15px;
        margin-bottom: 15px;
    }

    .list-unstyled-border li .custom-checkbox {
        margin-right: 15px;
    }

    .list-unstyled-border li:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }

    .list-unstyled-noborder li:last-child {
        border-bottom: none;
    }

    .list-group-item.active {
        background-color: var(--primary);
    }

    .list-group-item.disabled {
        color: #c9d7e0;
    }

    .list-group-item-primary {
        background-color: var(--primary);
        color: #fff;
    }

    .list-group-item-secondary {
        background-color: #cdd3d8;
        color: #fff;
    }

    .list-group-item-success {
        background-color: #47c363;
        color: #fff;
    }

    .list-group-item-danger {
        background-color: #fc544b;
        color: #fff;
    }

    .list-group-item-warning {
        background-color: #ffa426;
        color: #fff;
    }

    .list-group-item-info {
        background-color: #3abaf4;
        color: #fff;
    }

    .list-group-item-light {
        background-color: #e3eaef;
        color: #191d21;
    }

    .list-group-item-dark {
        background-color: #191d21;
        color: #fff;
    }
    /* 3.4 Alert */

    .alert {
        color: #fff;
        border: none;
        padding: 15px 20px;
    }

    .alert .alert-title {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 5px;
    }

    .alert code {
        background-color: #fff;
        border-radius: 3px;
        padding: 1px 4px;
    }

    .alert p {
        margin-bottom: 0;
    }

    .alert.alert-has-icon {
        display: flex;
    }

    .alert.alert-has-icon .alert-icon {
        margin-top: 4px;
        width: 30px;
    }

    .alert.alert-has-icon .alert-icon .ion,
    .alert.alert-has-icon .alert-icon .fas,
    .alert.alert-has-icon .alert-icon .far,
    .alert.alert-has-icon .alert-icon .fab,
    .alert.alert-has-icon .alert-icon .fal {
        font-size: 20px;
    }

    .alert.alert-has-icon .alert-body {
        flex: 1;
    }

    .alert:not(.alert-light) a {
        color: #fff;
    }

    .alert.alert-primary {
        background-color: var(--primary);
    }

    .alert.alert-secondary {
        background-color: #cdd3d8;
    }

    .alert.alert-success {
        background-color: #47c363;
    }

    .alert.alert-info {
        background-color: #3abaf4;
    }

    .alert.alert-warning {
        background-color: #ffa426;
    }

    .alert.alert-danger {
        background-color: #fc544b;
    }

    .alert.alert-light {
        background-color: #e3eaef;
        color: #191d21;
    }

    .alert.alert-dark {
        background-color: #191d21;
    }
    /* 3.5 Card */

    .card {
        box-shadow: 0 5px 20px #9299b808;
        background-color: #fff;
        border-radius: 8px;
        border: none;
        position: relative;
        margin-bottom: 30px;
        -webkit-box-shadow: 0px 9px 20px rgba(46, 35, 94, 0.07);
        box-shadow: 0px 9px 20px rgba(46, 35, 94, 0.07);
    }

    .card-header,
    .card .card-header,
    .card .card-body,
    .card .card-footer {
        background-color: transparent;
        padding: 20px 25px;
    }

    .visit-site-btn{
        background: #fff!important;
        color:#6c757d!important;
    }


   @media screen and (max-width:767px){
    
    .language-index-row{
        margin-top: 40px!important;
    }
    .text-right-to-left{
        text-align: left!important;
    }

    .manage-language{
        margin-top: 40px!important;
    }
   
   }
  
    .card .navbar {
        position: static;
    }

    .card .card-body {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .card .card-body .section-title {
        margin: 30px 0 10px 0;
        font-size: 16px;
    }

    .card .card-body .section-title:before {
        margin-top: 8px;
    }

    .card .card-body .section-title+.section-lead {
        margin-top: -5px;
    }

    .card .card-body p {
        font-weight: 500;
    }

    .card .card-header {
        border-bottom-color: #e5e5e5;
        line-height: 30px;
        -ms-grid-row-align: center;
        align-self: center;
        width: 100%;
        min-height: auto;
        padding: 15px 25px;
        display: flex;
        align-items: center;
        background-color: #fff;
        border-radius: 8px 8px 0 0;
    }
    .card-header {
        background-color: #fff;
        border-bottom-color: #e5e5e5;
    }
    .card-header h2,
    .card-header h3,
    .card-header h4,
    .card-header h5,
    .card-header h6 {
        margin-bottom: 0;
    }

    .card .card-header .btn {
        margin-top: 1px;
        padding: 10px 22px;
    }

    .card .card-header .btn:hover {
        box-shadow: none;
    }

    .card .card-header .form-control {
        height: 40px;
        font-size: 13px;
        /* border-radius: 30px; */
    }

    .card .card-header .form-control+.input-group-btn .btn {
        margin-top: -1px;
    }

    .card .card-header h4 {
        font-size: 18px;
        padding-right: 10px;
        margin-bottom: 0;
        text-transform: capitalize;
    }

    .card .card-header h4+.card-header-action,
    .card .card-header h4+.card-header-form {
        margin-left: auto;
    }

    .card .card-header h4+.card-header-action .btn,
    .card .card-header h4+.card-header-form .btn {
        font-size: 12px;
        height: 40px;
        margin-top: 0px !important;
        border-radius: 0px 3px 3px 0px;
        padding-left: 13px !important;
        padding-right: 13px !important;
    }

    .card .card-header h4+.card-header-action .btn.active,
    .card .card-header h4+.card-header-form .btn.active {
        box-shadow: 0 2px 6px #acb5f6;
        background-color: var(--primary);
        color: #fff;
    }

    .card .card-header h4+.card-header-action .dropdown,
    .card .card-header h4+.card-header-form .dropdown {
        display: inline;
    }

    .card .card-header h4+.card-header-action .btn-group .btn,
    .card .card-header h4+.card-header-form .btn-group .btn {
        border-radius: 0 !important;
    }

    .card .card-header h4+.card-header-action .btn-group .btn:first-child,
    .card .card-header h4+.card-header-form .btn-group .btn:first-child {
        border-radius: 30px 0 0 30px !important;
    }

    .card .card-header h4+.card-header-action .btn-group .btn:last-child,
    .card .card-header h4+.card-header-form .btn-group .btn:last-child {
        border-radius: 0 30px 30px 0 !important;
    }

    .card .card-header h4+.card-header-action .input-group .input-group-btn+.form-control,
    .card .card-header h4+.card-header-form .input-group .input-group-btn+.form-control {
        border-radius: 0 30px 30px 0 !important;
    }

    .card .card-header h4+.card-header-action .input-group .input-group-btn .btn,
    .card .card-header h4+.card-header-form .input-group .input-group-btn .btn {
        margin-top: -1px;
    }

    .card .card-footer {
        background-color: transparent;
        border: none;
        border-radius: 0 0 8px 8px;
    }

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

    .card.card-progress:after {
        content: ' ';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.5);
        z-index: 99;
        z-index: 99;
    }

    .card.card-progress .card-progress-dismiss {
        position: absolute;
        top: 66%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 999;
        color: #fff !important;
        padding: 5px 13px;
    }

    .card.card-progress.remove-spinner .card-progress-dismiss {
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .card.card-progress:not(.remove-spinner):after {
        background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJsb2FkZXItMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQogd2lkdGg9IjQwcHgiIGhlaWdodD0iNDBweCIgdmlld0JveD0iMCAwIDUwIDUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MCA1MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iIzAwMCIgZD0iTTQzLjkzNSwyNS4xNDVjMC0xMC4zMTgtOC4zNjQtMTguNjgzLTE4LjY4My0xOC42ODNjLTEwLjMxOCwwLTE4LjY4Myw4LjM2NS0xOC42ODMsMTguNjgzaDQuMDY4YzAtOC4wNzEsNi41NDMtMTQuNjE1LDE0LjYxNS0xNC42MTVjOC4wNzIsMCwxNC42MTUsNi41NDMsMTQuNjE1LDE0LjYxNUg0My45MzV6Ij4NCjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZVR5cGU9InhtbCINCiAgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIg0KICB0eXBlPSJyb3RhdGUiDQogIGZyb209IjAgMjUgMjUiDQogIHRvPSIzNjAgMjUgMjUiDQogIGR1cj0iMC42cyINCiAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4NCjwvcGF0aD4NCjwvc3ZnPg0K");
        background-size: 80px;
        background-repeat: no-repeat;
        background-position: center;
    }

    .card.card-primary {
        border-top: 2px solid var(--primary);
    }

    .card.card-secondary {
        border-top: 2px solid #cdd3d8;
    }

    .card.card-success {
        border-top: 2px solid #47c363;
    }

    .card.card-danger {
        border-top: 2px solid #fc544b;
    }

    .card.card-warning {
        border-top: 2px solid #ffa426;
    }

    .card.card-info {
        border-top: 2px solid #3abaf4;
    }

    .card.card-dark {
        border-top: 2px solid #191d21;
    }

    .card.card-hero .card-header {
        padding: 40px;
        background-image: linear-gradient(to bottom, var(--primary), #95a0f4);
        color: #fff;
        overflow: hidden;
        height: auto;
        min-height: auto;
        display: block;
    }

    .card.card-hero .card-header h4 {
        font-size: 40px;
        line-height: 1;
        color: #fff;
    }

    .card.card-hero .card-header .card-description {
        margin-top: 5px;
        font-size: 16px;
    }

    .card.card-hero .card-header .card-icon {
        float: right;
        color: #8c98f3;
        margin: -60px;
    }

    .card.card-hero .card-header .card-icon .ion,
    .card.card-hero .card-header .card-icon .fas,
    .card.card-hero .card-header .card-icon .far,
    .card.card-hero .card-header .card-icon .fab,
    .card.card-hero .card-header .card-icon .fal {
        font-size: 140px;
    }

    .card.card-statistic-1 .card-header,
    .card.card-statistic-2 .card-header {
        border-color: transparent;
        padding-bottom: 0;
        height: auto;
        min-height: auto;
        display: block;
    }

    .card.card-statistic-1 .card-header h4,
    .card.card-statistic-2 .card-header h4 {
        line-height: 1.2;
        color: #6c757d;
    }

    .card.card-statistic-1 .card-body,
    .card.card-statistic-2 .card-body {
        padding-top: 0;
    }

    .card.card-statistic-1 .card-body,
    .card.card-statistic-2 .card-body {
        font-size: 26px;
        font-weight: 700;
        color: var(--dark);
        padding-bottom: 0;
    }

    .card.card-statistic-1,
    .card.card-statistic-2 {
        display: inline-block;
        width: 100%;
    }

    .card.card-statistic-1 .card-icon,
    .card.card-statistic-2 .card-icon {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        margin: 12px 12px 12px 16px;
        text-align: center;
        float: left;
        margin-right: 15px;
    }

    .card.card-statistic-1 .card-icon .ion,
    .card.card-statistic-1 .card-icon .fas,
    .card.card-statistic-1 .card-icon .far,
    .card.card-statistic-1 .card-icon .fab,
    .card.card-statistic-1 .card-icon .fal,
    .card.card-statistic-2 .card-icon .ion,
    .card.card-statistic-2 .card-icon .fas,
    .card.card-statistic-2 .card-icon .far,
    .card.card-statistic-2 .card-icon .fab,
    .card.card-statistic-2 .card-icon .fal {
        font-size: 22px;
        color: #fff;
    }

    .card.card-statistic-1 {
        border-radius: 8px !important;
    }

    .card.card-statistic-1 .card-icon {
        position: relative;
        z-index: 1;
    }

    .card.card-statistic-1 .card-icon i {
        color: var(--primary) !important;
    }

    .card.card-statistic-1 .card-icon::before {
        position: absolute;
        content: '';
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: var(--primary);
        opacity: 0.15;
        z-index: -1;
    }

    .card.card-statistic-2 .card-icon {
        width: 50px;
        height: 50px;
        font-size: 22px;
        margin: 25px;
    }

    .card.card-statistic-1 .card-header,
    .card.card-statistic-2 .card-header {
        padding-bottom: 6px;
        padding-top: 15px;
    }

    .card.card-statistic-2 .card-body {
        padding-top: 20px;
    }

    .card.card-statistic-2 .card-header+.card-body,
    .card.card-statistic-2 .card-body+.card-header {
        padding-top: 0;
    }

    .card.card-statistic-1 .card-header h4,
    .card.card-statistic-2 .card-header h4 {
        font-weight: 400;
        font-size: 14px;
    }

    .card.card-statistic-1 .card-header h4 {
        margin-bottom: 0;
    }

    .card.card-statistic-2 .card-header h4 {
        text-transform: none;
        margin-bottom: 0;
    }

    .card.card-statistic-1 .card-body {
        font-size: 20px;
    }

    .card.card-statistic-2 .card-chart {
        padding-top: 20px;
        margin-left: -9px;
        margin-right: -1px;
        margin-bottom: -15px;
    }

    .card.card-statistic-2 .card-chart canvas {
        height: 90px !important;
    }

    .card .card-stats {
        width: 100%;
        display: inline-block;
        margin-top: 2px;
        margin-bottom: -6px;
    }

    .card .card-stats .card-stats-title {
        padding: 15px 25px;
        background-color: #fff;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: .3px;
    }

    .card .card-stats .card-stats-items {
        display: flex;
        height: 50px;
        align-items: center;
    }

    .card .card-stats .card-stats-item {
        width: calc(100% / 3);
        text-align: center;
        padding: 5px 20px;
    }

    .card .card-stats .card-stats-item .card-stats-item-label {
        font-size: 12px;
        letter-spacing: .5px;
        margin-top: 4px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    .card .card-stats .card-stats-item .card-stats-item-count {
        line-height: 1;
        margin-bottom: 8px;
        font-size: 20px;
        font-weight: 700;
    }

    .card.card-large-icons {
        display: flex;
        flex-direction: row;
    }

    .card.card-large-icons .card-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 150px;
        border-radius: 3px 0 0 3px;
    }

    .card.card-large-icons .card-icon .ion,
    .card.card-large-icons .card-icon .fas,
    .card.card-large-icons .card-icon .far,
    .card.card-large-icons .card-icon .fab,
    .card.card-large-icons .card-icon .fal {
        font-size: 60px;
    }

    .card.card-large-icons .card-body {
        padding: 25px 30px;
    }

    .card.card-large-icons .card-body h4 {
        font-size: 18px;
    }

    .card.card-large-icons .card-body p {
        opacity: .6;
        font-weight: 500;
    }

    .card.card-large-icons .card-body a.card-cta {
        text-decoration: none;
    }

    .card.card-large-icons .card-body a.card-cta i {
        margin-left: 7px;
    }

    .card.bg-primary,
    .card.bg-danger,
    .card.bg-success,
    .card.bg-info,
    .card.bg-dark,
    .card.bg-warning {
        color: #fff;
    }

    .card.bg-primary .card-header,
    .card.bg-danger .card-header,
    .card.bg-success .card-header,
    .card.bg-info .card-header,
    .card.bg-dark .card-header,
    .card.bg-warning .card-header {
        color: #fff;
        opacity: .9;
    }
    @media (max-width: 575.98px) {
        .card.card-large-icons {
            display: inline-block;
        }
        .card.card-large-icons .card-icon {
            width: 100%;
            height: 200px;
        }
    }

    @media (max-width: 767.98px) {
        .card .card-header {
            height: auto;
            flex-wrap: wrap;
        }
        .card .card-header h4+.card-header-action,
        .card .card-header h4+.card-header-form {
            flex-grow: 0;
            width: 100%;
            margin-top: 10px;
        }
    }

    @media (min-width: 768px) and (max-width: 991.98px) {
        .card .card-stats .card-stats-items {
            height: 49px;
        }
        .card .card-stats .card-stats-items .card-stats-item {
            padding: 5px 7px;
        }
        .card .card-stats .card-stats-items .card-stats-item .card-stats-item-count {
            font-size: 16px;
        }
        .card.card-sm-6 .card-chart canvas {
            height: 85px !important;
        }
        .card.card-hero .card-header {
            padding: 25px;
        }
    }
    
    @media (min-width: 1400px) {
        .custom-xxl-4 {
            -ms-flex: 0 0 33.333333%;
            flex: 0 0 33.333333%;
            max-width: 33.333333%;
        }
    }
    @media (min-width: 1650px) {
        .custom-xxxl-3 {
            -ms-flex: 0 0 25%;
            flex: 0 0 25%;
            max-width: 25%;
        }
    } 

    .card-stat {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        padding: 20px;
        border-radius: 8px;
        z-index: 1;
        transition: all 0.3s;
        -webkit-box-shadow: 0px 9px 20px rgba(46, 35, 94, 0.07);
        box-shadow: 0px 9px 20px rgba(46, 35, 94, 0.07);
}
    .card-stat .icon {
        position: relative;
        order: 2;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
        color: var(--primary);
        z-index: 1;
}

.card-stat .icon i {
    font-size: 18px;
}

.card-stat .icon::after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--primary);
    opacity: 0.1;
    z-index: -1;
}

    .card-stat .content {
        order: 1;
        width: calc(100% - 44px);
        padding-right: 20px;
    }
    .card-stat .caption {
        margin-bottom: 16px;
        font-size: 16px;
    }
    .card-stat .card-stat-amount {
        font-size: 24px;
        margin-bottom: 0;
    }

    @media (max-width: 767px) {
        .card-stat .card-stat-amount {
            font-size: 20px;
        }
    }

    .bg-1 {
        background-color: #066163;
    }
    .bg-2 {
        background-color: #344CB7;
    }
    .bg-3 {
        background-color: #333C83;
    }
    .bg-4 {
        background-color: #4D77FF;
    }
    .bg-5 {
        background-color: #332FD0;
    }
    .bg-6 {
        background-color: #019267;
    }
    .bg-7 {
        background-color: #1C658C;
    }
    .bg-8 {
        background-color: #21325E;
    }
    .bg-9 {
        background-color: #072227;
    }
    .bg-10 {
        background-color: #362222;
    }


    /* 3.6 Table */

    .table {
        color: inherit;
        margin-bottom: 0;
    }

    .table td,
    .table:not(.table-bordered) th {
        border-top: none;
    }

    .table:not(.table-sm) thead th {
        border-bottom: none;
        background-color: #E2E8F0;
        color: #67696e;
        padding-top: 15px;
        padding-bottom: 15px;
        border: 1px solid #d3d3d3;
    }

    .table.table-md th,
    .table.table-md td {
        padding: 10px 15px;
    }

    .table.table-bordered td,
    .table.table-bordered th {
        border-color: #f6f6f6;
    }

    .table-links {
        color: #34395e;
        font-size: 12px;
        margin-top: 5px;
        opacity: 0;
        transition: all .3s;
    }

    .table-links a {
        color: #666;
    }

    table tr:hover .table-links {
        opacity: 1;
    }

    .table-striped tbody tr:nth-of-type(odd) {
        background-color: rgba(0, 0, 0, 0.02);
    }

    @media (max-width: 575.98px) {
        .table-responsive table {
            min-width: 800px;
        }
    }
    .table tbody td {
        border: 1px solid #ededed;
    }
    .table thead th,
    .table tbody td {
        text-align: center;
        height: auto;
        padding: 14px 25px;
        vertical-align: middle;
    }
    .table thead th:first-child,
    .table tbody td:first-child {
        text-align: left;
    }
    .table thead th:last-child,
    .table tbody td:last-child {
        text-align: right;
    }
    /* 3.7 Tooltip */

    .tooltip {
        font-size: 12px;
    }

    .tooltip-inner {
        padding: 7px 13px;
    }
    /* 3.8 Modal */

    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 25px;
    }

    .modal-body {
        padding-top: 15px;
    }

    .modal-footer {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .modal-header {
        border-bottom: none;
        padding-bottom: 5px;
    }

    .modal-header h5 {
        font-size: 18px;
    }

    .modal-footer {
        border-top: none;
        border-radius: 0 0 3px 3px;
    }

    .modal-content {
        max-width: 100%;
        border: none;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
    }

    .modal.show .modal-content {
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }

    .modal-progress .modal-content {
        position: relative;
    }

    .modal-progress .modal-content:after {
        content: ' ';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.5);
        z-index: 999;
        background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJsb2FkZXItMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQogd2lkdGg9IjQwcHgiIGhlaWdodD0iNDBweCIgdmlld0JveD0iMCAwIDUwIDUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MCA1MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iIzAwMCIgZD0iTTQzLjkzNSwyNS4xNDVjMC0xMC4zMTgtOC4zNjQtMTguNjgzLTE4LjY4My0xOC42ODNjLTEwLjMxOCwwLTE4LjY4Myw4LjM2NS0xOC42ODMsMTguNjgzaDQuMDY4YzAtOC4wNzEsNi41NDMtMTQuNjE1LDE0LjYxNS0xNC42MTVjOC4wNzIsMCwxNC42MTUsNi41NDMsMTQuNjE1LDE0LjYxNUg0My45MzV6Ij4NCjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZVR5cGU9InhtbCINCiAgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIg0KICB0eXBlPSJyb3RhdGUiDQogIGZyb209IjAgMjUgMjUiDQogIHRvPSIzNjAgMjUgMjUiDQogIGR1cj0iMC42cyINCiAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4NCjwvcGF0aD4NCjwvc3ZnPg0K");
        background-size: 80px;
        background-repeat: no-repeat;
        background-position: center;
        border-radius: 3px;
    }

    .modal-part {
        display: none;
    }
    /* 3.9 Nav */

    .nav-tabs .nav-item .nav-link {
        color: var(--primary);
    }

    .nav-tabs .nav-item .nav-link.active {
        color: #000;
    }

    .tab-content>.tab-pane {
        padding: 10px 0;
        line-height: 24px;
    }

    .tab-bordered .tab-pane {
        padding: 15px;
        border: 1px solid #ededed;
        margin-top: -1px;
    }

    .nav-pills .nav-link.active,
    .nav-pills .show>.nav-link {
        color: #fff;
        background-color: var(--primary);
    }

    .nav-pills .nav-item .nav-link {
        color: var(--primary);
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .nav-pills .nav-item .nav-link:hover {
        background-color: #f6f7fe;
    }

    .nav-pills .nav-item .nav-link.active {
        box-shadow: 0 2px 6px #acb5f6;
        color: #fff;
        background-color: var(--primary);
    }

    .nav-pills .nav-item .nav-link .badge {
        padding: 5px 8px;
        margin-left: 5px;
    }

    .nav .nav-item .nav-link .ion,
    .nav .nav-item .nav-link .fas,
    .nav .nav-item .nav-link .far,
    .nav .nav-item .nav-link .fab,
    .nav .nav-item .nav-link .fal {
        margin-right: 3px;
        font-size: 12px;
    }
    /* 3.10 Pagination */

    .page-item .page-link {
        color: var(--primary);
        border-radius: 3px;
        margin: 0 3px;
    }

    .page-item.active .page-link {
        background-color: var(--primary);
        border-color: var(--primary);
    }

    .page-item.disabled .page-link {
        border-color: transparent;
        background-color: #f9fafe;
        color: var(--primary);
        opacity: .6;
    }

    .page-link {
        border-color: transparent;
        background-color: #f9fafe;
        font-weight: 600;
    }

    .page-link:hover {
        background-color: var(--primary);
        color: #fff;
        border-color: transparent;
    }

    .page-link:focus {
        box-shadow: none;
    }
    /* 3.11 Badge */

    .badges .badge {
        margin: 0 8px 10px 0;
    }

    .badge {
        vertical-align: middle;
        padding: 7px 12px;
        font-weight: 600;
        letter-spacing: .3px;
        border-radius: 30px;
        font-size: 12px;
    }

    .badge.badge-warning {
        color: #fff;
    }

    .badge.badge-primary {
        background-color: var(--primary);
    }

    .badge.badge-secondary {
        background-color: #cdd3d8;
    }

    .badge.badge-success {
        background-color: #47c363;
    }

    .badge.badge-info {
        background-color: #3abaf4;
    }

    .badge.badge-danger {
        background-color: #fc544b;
    }

    .badge.badge-light {
        background-color: #e3eaef;
        color: #191d21;
    }

    .badge.badge-white {
        background-color: #ffffff;
        color: #191d21;
    }

    .badge.badge-dark {
        background-color: #191d21;
    }

    h1 .badge {
        font-size: 24px;
        padding: 16px 21px;
    }

    h2 .badge {
        font-size: 22px;
        padding: 14px 19px;
    }

    h3 .badge {
        font-size: 18px;
        padding: 11px 16px;
    }

    h4 .badge {
        font-size: 16px;
        padding: 8px 13px;
    }

    h5 .badge {
        font-size: 14px;
        padding: 5px 10px;
    }

    h6 .badge {
        font-size: 11px;
        padding: 3px 8px;
    }

    .btn .badge {
        margin-left: 5px;
        padding: 4px 7px;
    }

    .btn .badge.badge-transparent {
        background-color: rgba(255, 255, 255, 0.25);
        color: #fff;
    }
    /* 3.12 Button */

    .buttons .btn {
        margin: 0 8px 10px 0;
    }

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

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

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

    .btn.btn-icon-split i,
    .dropdown-item.has-icon i {
        text-align: center;
        width: 15px;
        font-size: 15px;
        float: left;
        margin-right: 10px;
    }

    .btn {
        font-weight: 600;
        font-size: 12px;
        line-height: 24px;
        padding: 10px 20px;
        border-radius: 6px;
    }

    .btn.btn-icon-split {
        position: relative;
    }

    .btn.btn-icon-split i {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 45px;
        border-radius: 3px 0 0 3px;
        line-height: 32px;
    }

    .btn.btn-icon-split div {
        margin-left: 40px;
    }

    .btn.btn-icon-noflo-splitat {
        display: table;
        text-align: right;
    }

    .btn.btn-icon-noflo-splitat i {
        float: none;
        margin: 0;
        display: table-cell;
        vertical-align: middle;
        width: 30%;
    }

    .btn.btn-icon-noflo-splitat div {
        display: table-cell;
        vertical-align: middle;
        width: 70%;
        text-align: left;
        padding-left: 10px;
    }

    .btn:not(.btn-social):not(.btn-social-icon):active,
    .btn:not(.btn-social):not(.btn-social-icon):focus,
    .btn:not(.btn-social):not(.btn-social-icon):hover {
        border-color: transparent !important;
        background-color: white;
    }

    .btn>i {
        margin-left: 0 !important;
    }

    .btn.btn-lg {
        padding: .55rem 1.5rem;
        font-size: 12px;
    }

    .btn.btn-lg.btn-icon-split i {
        line-height: 42px;
    }

    .btn.btn-lg.btn-icon-split div {
        margin-left: 25px;
    }

    .btn.btn-md {
        padding: 4px 12px;
        font-size: 12px;
    }
    button.btn.btn-md {
        padding: 5px 11px;
    }

    .btn.btn-sm {
        padding: .10rem .4rem;
        font-size: 12px;
    }

    .btn.btn-icon .ion,
    .btn.btn-icon .fas,
    .btn.btn-icon .far,
    .btn.btn-icon .fab,
    .btn.btn-icon .fal {
        margin-left: 0 !important;
        font-size: 12px;
    }

    .btn.btn-icon.icon-left .ion,
    .btn.btn-icon.icon-left .fas,
    .btn.btn-icon.icon-left .far,
    .btn.btn-icon.icon-left .fab,
    .btn.btn-icon.icon-left .fal {
        margin-right: 3px;
    }

    .btn.btn-icon.icon-right .ion,
    .btn.btn-icon.icon-right .fas,
    .btn.btn-icon.icon-right .far,
    .btn.btn-icon.icon-right .fab,
    .btn.btn-icon.icon-right .fal {
        margin-left: 3px !important;
    }

    .btn-action {
        color: #fff !important;
        line-height: 25px;
        font-size: 12px;
        min-width: 35px;
        min-height: 35px;
    }

    .btn-secondary,
    .btn-secondary.disabled {
        box-shadow: 0 2px 6px #e1e5e8;
        background-color: #cdd3d8;
        border-color: #cdd3d8;
        color: #fff;
    }

    .btn-secondary:hover,
    .btn-secondary:focus,
    .btn-secondary:active,
    .btn-secondary.disabled:hover,
    .btn-secondary.disabled:focus,
    .btn-secondary.disabled:active {
        background-color: #bfc6cd !important;
        color: #fff !important;
    }

    .btn-outline-secondary:hover,
    .btn-outline-secondary:focus,
    .btn-outline-secondary:active,
    .btn-outline-secondary.disabled:hover,
    .btn-outline-secondary.disabled:focus,
    .btn-outline-secondary.disabled:active {
        background-color: #cdd3d8 !important;
        color: #fff !important;
    }

    .btn-success,
    .btn-success.disabled {
        box-shadow: 0 2px 6px #81d694;
        background-color: #47c363;
        border-color: #47c363;
        color: #fff;
    }

    .btn-success:hover,
    .btn-success:focus,
    .btn-success:active,
    .btn-success.disabled:hover,
    .btn-success.disabled:focus,
    .btn-success.disabled:active {
        background-color: #3bb557 !important;
        color: #fff !important;
    }

    .btn-outline-success:hover,
    .btn-outline-success:focus,
    .btn-outline-success:active,
    .btn-outline-success.disabled:hover,
    .btn-outline-success.disabled:focus,
    .btn-outline-success.disabled:active {
        background-color: #47c363 !important;
        color: #fff !important;
    }

    .btn-danger,
    .btn-danger.disabled {
        box-shadow: 0 2px 6px #fd9b96;
        background-color: #fc544b;
        border-color: #fc544b;
        color: #fff;
    }

    .btn-danger:hover,
    .btn-danger:focus,
    .btn-danger:active,
    .btn-danger.disabled:hover,
    .btn-danger.disabled:focus,
    .btn-danger.disabled:active {
        background-color: #fb160a !important;
    }

    .btn-outline-danger:hover,
    .btn-outline-danger:focus,
    .btn-outline-danger:active,
    .btn-outline-danger.disabled:hover,
    .btn-outline-danger.disabled:focus,
    .btn-outline-danger.disabled:active {
        background-color: #fb160a !important;
        color: #fff !important;
    }

    .btn-dark,
    .btn-dark.disabled {
        box-shadow: 0 2px 6px #728394;
        background-color: #191d21;
        border-color: #191d21;
        color: #fff;
    }

    .btn-dark:hover,
    .btn-dark:focus,
    .btn-dark:active,
    .btn-dark.disabled:hover,
    .btn-dark.disabled:focus,
    .btn-dark.disabled:active {
        background-color: black !important;
    }

    .btn-outline-dark:hover,
    .btn-outline-dark:focus,
    .btn-outline-dark:active,
    .btn-outline-dark.disabled:hover,
    .btn-outline-dark.disabled:focus,
    .btn-outline-dark.disabled:active {
        background-color: black !important;
        color: #fff !important;
    }

    .btn-light,
    .btn-light.disabled {
        box-shadow: 0 2px 6px #e6ecf1;
        background-color: #e3eaef;
        border-color: #e3eaef;
        color: #191d21;
    }

    .btn-light:hover,
    .btn-light:focus,
    .btn-light:active,
    .btn-light.disabled:hover,
    .btn-light.disabled:focus,
    .btn-light.disabled:active {
        background-color: #c3d2dc !important;
    }

    .btn-outline-light,
    .btn-outline-light.disabled {
        border-color: #e3eaef;
        color: #e3eaef;
    }

    .btn-outline-light:hover,
    .btn-outline-light:focus,
    .btn-outline-light:active,
    .btn-outline-light.disabled:hover,
    .btn-outline-light.disabled:focus,
    .btn-outline-light.disabled:active {
        background-color: #e3eaef !important;
        color: #fff !important;
    }

    .btn-warning,
    .btn-warning.disabled {
        box-shadow: 0 2px 6px #ffc473;
        background-color: #ffa426;
        border-color: #ffa426;
        color: #fff;
    }

    .btn-warning:hover,
    .btn-warning:focus,
    .btn-warning:active,
    .btn-warning.disabled:hover,
    .btn-warning.disabled:focus,
    .btn-warning.disabled:active {
        background-color: #ff990d !important;
        color: #fff !important;
    }

    .btn-outline-warning:hover,
    .btn-outline-warning:focus,
    .btn-outline-warning:active,
    .btn-outline-warning.disabled:hover,
    .btn-outline-warning.disabled:focus,
    .btn-outline-warning.disabled:active {
        background-color: #ffa426 !important;
        color: #fff !important;
    }

    .btn-info,
    .btn-info.disabled {
        box-shadow: 0 2px 6px #82d3f8;
        background-color: #3abaf4;
        border-color: #3abaf4;
        color: #fff;
    }

    .btn-info:hover,
    .btn-info:focus,
    .btn-info:active,
    .btn-info.disabled:hover,
    .btn-info.disabled:focus,
    .btn-info.disabled:active {
        background-color: #0da8ee !important;
    }

    .btn-outline-info:hover,
    .btn-outline-info:focus,
    .btn-outline-info:active,
    .btn-outline-info.disabled:hover,
    .btn-outline-info.disabled:focus,
    .btn-outline-info.disabled:active {
        background-color: #0da8ee !important;
        color: #fff !important;
    }

    .btn-primary,
    .btn-primary.disabled {
        box-shadow: 0 2px 6px #acb5f6;
        background-color: var(--primary);
        border-color: var(--primary);
    }

    .btn-primary:focus,
    .btn-primary.disabled:focus {
        background-color: #394eea !important;
    }

    .btn-primary:focus:active,
    .btn-primary.disabled:focus:active {
        background-color: #394eea !important;
    }

    .btn-primary:active,
    .btn-primary:hover,
    .btn-primary.disabled:active,
    .btn-primary.disabled:hover {
        background-color: #394eea !important;
    }

    .btn-outline-primary,
    .btn-outline-primary.disabled {
        border-color: var(--primary);
        color: var(--primary);
    }

    .btn-outline-primary:hover,
    .btn-outline-primary:focus,
    .btn-outline-primary:active,
    .btn-outline-primary.disabled:hover,
    .btn-outline-primary.disabled:focus,
    .btn-outline-primary.disabled:active {
        background-color: var(--primary) !important;
        color: #fff;
    }

    .btn-outline-white,
    .btn-outline-white.disabled {
        border-color: #fff;
        color: #fff;
    }

    .btn-outline-white:hover,
    .btn-outline-white:focus,
    .btn-outline-white:active,
    .btn-outline-white.disabled:hover,
    .btn-outline-white.disabled:focus,
    .btn-outline-white.disabled:active {
        background-color: #fff;
        color: var(--primary);
    }

    .btn-round {
        border-radius: 30px;
        padding-left: 34px;
        padding-right: 34px;
    }

    .btn-social-icon,
    .btn-social {
        border: none;
        border-radius: 3px;
    }

    .btn-social-icon {
        color: #fff !important;
        padding-left: 18px;
        padding-right: 18px;
    }

    .btn-social-icon> :first-child {
        font-size: 16px;
    }

    .btn-social {
        padding: 12px 12px 12px 50px;
        color: #fff !important;
        font-weight: 500;
    }

    .btn-social> :first-child {
        width: 55px;
        line-height: 50px;
        border-right: none;
    }

    .btn-reddit {
        color: #000 !important;
    }

    .btn-group .btn.active {
        background-color: var(--primary);
        color: #fff;
    }

    .btn-progress {
        position: relative;
        background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJsb2FkZXItMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQogd2lkdGg9IjQwcHgiIGhlaWdodD0iNDBweCIgdmlld0JveD0iMCAwIDUwIDUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MCA1MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTQzLjkzNSwyNS4xNDVjMC0xMC4zMTgtOC4zNjQtMTguNjgzLTE4LjY4My0xOC42ODNjLTEwLjMxOCwwLTE4LjY4Myw4LjM2NS0xOC42ODMsMTguNjgzaDQuMDY4YzAtOC4wNzEsNi41NDMtMTQuNjE1LDE0LjYxNS0xNC42MTVjOC4wNzIsMCwxNC42MTUsNi41NDMsMTQuNjE1LDE0LjYxNUg0My45MzV6Ij4NCjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZVR5cGU9InhtbCINCiAgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIg0KICB0eXBlPSJyb3RhdGUiDQogIGZyb209IjAgMjUgMjUiDQogIHRvPSIzNjAgMjUgMjUiDQogIGR1cj0iMC42cyINCiAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4NCjwvcGF0aD4NCjwvc3ZnPg0K");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 30px;
        color: transparent !important;
        pointer-events: none;
    }
    /* 3.13 Media */

    .media .media-right {
        float: right;
        color: var(--primary);
        font-weight: 600;
        font-size: 16px;
    }

    .media .media-icon {
        font-size: 20px;
        margin-right: 15px;
        line-height: 1;
    }

    .media .media-title {
        margin-top: 0;
        margin-bottom: 5px;
        font-weight: 600;
        font-size: 15px;
        color: #34395e;
    }

    .media .media-title a {
        font-weight: inherit;
        color: #000;
    }

    .media .media-description {
        line-height: 24px;
        color: #34395e;
    }

    .media .media-links {
        margin-top: 10px;
    }

    .media .media-links a {
        font-size: 12px;
        color: #999;
    }

    .media .media-progressbar {
        flex: 1;
    }

    .media .media-progressbar .progress-text {
        font-size: 12px;
        font-weight: 600;
        margin-bottom: 5px;
        color: #34395e;
    }

    .media .media-cta {
        margin-left: 40px;
    }

    .media .media-cta .btn {
        padding: 5px 15px;
        border-radius: 30px;
        font-size: 12px;
    }

    .media .media-items {
        display: flex;
    }

    .media .media-items .media-item {
        flex: 1;
        text-align: center;
        padding: 0 15px;
    }

    .media .media-items .media-item .media-label {
        font-weight: 600;
        font-size: 12px;
        color: #34395e;
        letter-spacing: .5px;
    }

    .media .media-items .media-item .media-value {
        font-weight: 700;
        font-size: 18px;
    }
    /* 3.14 Breadcrumb */

    .breadcrumb {
        background-color: #f9f9f9;
    }

    .breadcrumb .breadcrumb-item {
        line-height: 1;
    }

    .breadcrumb .breadcrumb-item i {
        margin-right: 5px;
    }
    /* 3.15 Accordion */

    .accordion {
        display: inline-block;
        width: 100%;
        margin-bottom: 10px;
    }

    .accordion .accordion-header,
    .accordion .accordion-body {
        padding: 10px 15px;
    }

    .accordion .accordion-header {
        background-color: #f9f9f9;
        border-radius: 3px;
        cursor: pointer;
        transition: all .5s;
    }

    .accordion .accordion-header h4 {
        line-height: 1;
        margin: 0;
        font-size: 14px;
        font-weight: 700;
    }

    .accordion .accordion-header:hover {
        background-color: #f2f2f2;
    }

    .accordion .accordion-header[aria-expanded="true"] {
        box-shadow: 0 2px 6px #acb5f6;
        background-color: var(--primary);
        color: #fff;
    }

    .accordion .accordion-body {
        line-height: 24px;
    }
    /* 3.16 Popover */

    .popover {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03);
        border-color: transparent;
    }

    .popover .manual-arrow {
        position: absolute;
        bottom: -15px;
        font-size: 26px;
        left: 50%;
        transform: translateX(-50%);
        color: #fff;
    }

    .bs-popover-auto[x-placement^=left] .arrow::before,
    .bs-popover-left .arrow::before {
        border-left-color: #f2f2f2;
    }

    .bs-popover-auto[x-placement^=bottom] .arrow::before,
    .bs-popover-bottom .arrow::before {
        border-bottom-color: #f2f2f2;
    }

    .bs-popover-auto[x-placement^=top] .arrow::before,
    .bs-popover-top .arrow::before {
        border-top-color: #f2f2f2;
    }

    .bs-popover-auto[x-placement^=right] .arrow::before,
    .bs-popover-right .arrow::before {
        border-right-color: #f2f2f2;
    }

    .popover .popover-header {
        background-color: transparent;
        border: none;
        padding-bottom: 0;
        padding-top: 10px;
    }

    .popover .popover-body {
        padding: 15px;
        line-height: 24px;
    }
    /* 3.17 Grid */

    .sm-gutters {
        margin-left: -5px;
        margin-right: -5px;
    }

    .sm-gutters>.col,
    .sm-gutters>[class*=col-] {
        padding-left: 5px;
        padding-right: 5px;
    }
    /* 3.18 Navbar */

    .navbar {
        height: 60px;
        left: 247px;
        right: 0px;
        position: absolute;
        z-index: 890;
        background-color: #fff;
        border-left: 1px solid #ffffff26;
    }

    .navbar.active {
        background-color: var(--primary);
        box-shadow: rgba(103, 119, 239, 0.2) rgba(0, 0, 0, 0.03);
    }

    .navbar-bg {
        content: ' ';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 115px;
        background-color: var(--primary);
        z-index: -1;
    }

    .navbar {
        align-items: center;
    }

    .navbar .navbar-brand {
        color: #fff;
        text-transform: uppercase;
        letter-spacing: 3px;
        font-weight: 700;
    }

    .navbar .form-inline .form-control {
        background-color: #fff;
        border-color: transparent;
        padding-left: 20px;
        padding-right: 0;
        margin-right: -6px;
        min-height: 46px;
        font-weight: 500;
        border-radius: 3px 0 0 3px;
        transition: all 1s;
    }

    .navbar .form-inline .form-control:focus,
    .navbar .form-inline .form-control:focus+.btn {
        position: relative;
        z-index: 9001;
    }

    .navbar .form-inline .form-control:focus+.btn+.search-backdrop {
        opacity: .6;
        visibility: visible;
    }

    .navbar .form-inline .form-control:focus+.btn+.search-backdrop+.search-result {
        opacity: 1;
        visibility: visible;
        top: 80px;
    }

    .navbar .form-inline .btn {
        border-radius: 0 3px 3px 0;
        background-color: #fff;
        padding: 9px 15px 9px 15px;
        border-color: transparent;
    }

    .navbar .form-inline .search-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 9000;
        background-color: #000;
        opacity: 0;
        visibility: hidden;
        transition: all .5s;
    }

    .navbar .form-inline .search-result {
        position: absolute;
        z-index: 9002;
        top: 100px;
        background-color: #fff;
        border-radius: 3px;
        width: 450px;
        opacity: 0;
        visibility: hidden;
        transition: all .5s;
    }

    .navbar .form-inline .search-result:before {
        position: absolute;
        top: -26px;
        left: 34px;
        content: '\f0d8';
        font-weight: 600;
        font-family: 'Font Awesome 5 Free';
        color: #fff;
        font-size: 30px;
    }

    .navbar .form-inline .search-result .search-header {
        padding: 13px 18px 2px 18px;
        text-transform: uppercase;
        letter-spacing: 1.3px;
        font-weight: 600;
        font-size: 10px;
        color: #bcc1c6;
    }

    .navbar .form-inline .search-result .search-item {
        display: flex;
    }

    .navbar .form-inline .search-result .search-item a {
        display: block;
        padding: 13px 18px;
        text-decoration: none;
        color: #34395e;
        font-weight: 600;
        display: flex;
        align-items: center;
    }

    .navbar .form-inline .search-result .search-item a:hover {
        background-color: #f1f3fe;
    }

    .navbar .form-inline .search-result .search-item a:not(.search-close) {
        width: 100%;
    }

    .navbar .form-inline .search-result .search-item a i {
        margin-left: 0 !important;
    }

    .navbar .form-inline .search-result .search-item .search-icon {
        width: 35px;
        height: 35px;
        line-height: 35px;
        text-align: center;
        border-radius: 50%;
    }

    .navbar .active .nav-link {
        color: #fff;
        font-weight: 700;
    }

    .navbar .navbar-text {
        color: #fff;
    }

    .navbar .nav-link {
        color: #777;
        padding-left: 15px !important;
        padding-right: 15px !important;
        padding-top: 0;
        padding-bottom: 0 !important;
        height: 100%;
    }

    .navbar .nav-link.nav-link-lg div {
        margin-top: 3px;
    }

    .navbar .nav-link .noti-icon {
        margin-left: 0 !important;
        font-size: 26px;
        line-height: 1;
    }

    .navbar .nav-link.nav-link-user {
        padding-top: 4px;
        padding-bottom: 4px;
        font-weight: 600;
    }

    .navbar .nav-link.nav-link-user img {
        width: 30px;
    }

    .navbar .nav-link.nav-link-img {
        padding-top: 4px;
        padding-bottom: 4px;
        border-radius: 50%;
        overflow: hidden;
    }

    .navbar .nav-link.nav-link-img .flag-icon {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03);
        border-radius: 50%;
        line-height: 18px;
        height: 22px;
        width: 22px;
        background-size: cover;
    }

    .remove-caret:after {
        display: none;
    }

    .navbar .nav-link:hover,
    .navbar .nav-link:focus,
    .navbar .nav-link:active {
        color: var(--primary);
    }

    .navbar .nav-link.disabled {
        color: #fff;
        opacity: .6;
    }

    .nav-collapse {
        display: flex;
    }

    @media (max-width: 575.98px) {
        body.search-show .navbar .form-inline .search-element {
            display: block;
        }
        /* .navbar .form-inline .search-element {
            position: absolute;
            top: 10px;
            left: 10px;
            right: 10px;
            z-index: 892;
            display: none;
        } */
        .navbar .form-inline .search-element .form-control {
            float: left;
            border-radius: 3px 0 0 3px;
            width: calc(100% - 43px) !important;
        }
        .navbar .form-inline .search-element .btn {
            margin-top: 1px;
            border-radius: 0 3px 3px 0;
        }
        .navbar .form-inline .search-result {
            width: 100%;
        }
        .navbar .form-inline .search-backdrop {
            display: none;
        }
        
    }

    @media (min-width: 576px) and (max-width: 767.98px) {
        .navbar .form-inline  {
            display: block;
        }
    }

    @media screen and (max-width:320px)
    {
        .search-element {
            position: absolute;
            top: 15px!important;
            left: 53px;
            right: 10px;
            z-index: 892;
        }

            .visit-site-btn{
                padding: 6px!important;
            }
            .navbar{
                height: 100px;
            }
            .section{
                margin-top: 100px;
            }
            
    }

   


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

        .search-element{
            display: block!important;
        }
        .search-element {
            position: absolute;
            top: 9px;
            left: 53px;
            right: 10px;
            z-index: 892;
            display: none;
        }
        .visit-site-btn{
            padding: 6px!important;
        }
        .navbar{
            height: 100px;
        }
        .section{
            margin-top: 100px;
        }
    }

    @media screen and (min-width:375px) and (max-width:424px) {
        .navbar-nav{
            margin-right: 10px;
            margin-top: 36px;
        }
        .bars-icon-navbar{
            margin-top: -66px!important;
        }
        .navbar-nav {
            margin-right: 10px;
            margin-top: 36px;
            position: absolute;
        }
    }

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

        .search-element {
            position: absolute;
            top: 40px;
            left: 53px;
            right: 10px;
            z-index: 892;
            
        }
        
    }
    @media (min-width: 768px) and (max-width: 991.98px) {
        .collapse {
            position: relative;
        }
        .collapse .navbar-nav {
            position: absolute;
        }
    }

    @media (max-width: 1024px) {
        .nav-collapse {
            position: relative;
        }
        .nav-collapse .navbar-nav {
            box-shadow: 0 0 30px rgba(0, 0, 0, 0.03);
            position: absolute;
            top: 40px;
            left: 0;
            width: 200px;
            display: none;
        }
        .nav-collapse .navbar-nav.show {
            display: block;
        }
        .nav-collapse .navbar-nav .nav-item:first-child {
            border-radius: 3px 3px 0 0;
        }
        .nav-collapse .navbar-nav .nav-item:last-child {
            border-radius: 0 0 3px 3px;
        }
        .nav-collapse .navbar-nav .nav-item .nav-link {
            background-color: #fff;
            color: #6c757d;
        }
        .nav-collapse .navbar-nav .nav-item .nav-link:hover {
            background-color: #fcfcfd;
            color: var(--primary);
        }
        .nav-collapse .navbar-nav .nav-item:focus>a,
        .nav-collapse .navbar-nav .nav-item.active>a {
            background-color: var(--primary);
            color: #fff;
        }
        .navbar {
            left: -0px!important;
            right: 0;
        }
        .navbar .dropdown-menu {
            position: absolute;
        }
        .navbar .navbar-nav {
            flex-direction: row;
        }
        .navbar-expand-lg .navbar-nav .dropdown-menu-right {
            right: 0;
            left: auto;
        }
    }
    .navbar-nav {
        align-items: center;
    }
    /* 3.19 Dropdown */

    .dropdown-item.has-icon i {
        margin-top: -1px;
        font-size: 13px;
    }

    .dropdown-menu {
        box-shadow: 0 10px 40px 0 rgba(51, 73, 94, 0.15);
        border: none;
        width: 200px;
    }

    .dropdown-menu.show {
        display: block !important;
    }

    .dropdown-menu a {
        font-size: 13px;
    }

    .dropdown-menu .dropdown-title {
        text-transform: uppercase;
        font-size: 10px;
        letter-spacing: 1.5px;
        font-weight: 700;
        color: #191d21 !important;
        padding: 10px 20px;
        line-height: 20px;
        color: #98a6ad;
    }

    .dropdown-menu.dropdown-menu-sm a {
        font-size: 14px;
        letter-spacing: normal;
        padding: 10px 20px;
        color: #6c757d;
    }

    a.dropdown-item {
        padding: 10px 20px;
        font-weight: 500;
        line-height: 1.2;
    }

    a.dropdown-item:focus,
    a.dropdown-item:active,
    a.dropdown-item.active {
        background-color: var(--primary);
        color: #fff !important;
    }

    .dropdown-divider {
        border-top-color: #f9f9f9;
    }

    .dropdown-list {
        width: 350px;
        padding: 0;
    }

    .dropdown-list .dropdown-item {
        display: inline-block;
        width: 100%;
        padding-top: 15px;
        padding-bottom: 15px;
        font-size: 13px;
        border-bottom: 1px solid #f9f9f9;
    }

    .dropdown-list .dropdown-item.dropdown-item-header:hover {
        background-color: transparent;
    }

    .dropdown-list .dropdown-item .time {
        margin-top: 10px;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 10px;
        letter-spacing: .5px;
    }

    .dropdown-list .dropdown-item .dropdown-item-avatar {
        float: left;
        width: 40px;
        text-align: right;
        position: relative;
    }

    .dropdown-list .dropdown-item .dropdown-item-avatar img {
        width: 100%;
    }

    .dropdown-list .dropdown-item .dropdown-item-avatar .is-online {
        position: absolute;
        bottom: 0;
        right: 0;
    }

    .dropdown-list .dropdown-item .dropdown-item-desc {
        line-height: 24px;
        white-space: normal;
        color: #34395e;
        margin-left: 60px;
    }

    .dropdown-list .dropdown-item .dropdown-item-desc b {
        font-weight: 600;
        color: #666;
    }

    .dropdown-list .dropdown-item .dropdown-item-desc p {
        margin-bottom: 0;
    }

    .dropdown-list .dropdown-item:focus {
        background-color: var(--primary);
    }

    .dropdown-list .dropdown-item:focus .dropdown-item-desc {
        color: #fff !important;
    }

    .dropdown-list .dropdown-item:focus .dropdown-item-desc b {
        color: #fff !important;
    }

    .dropdown-list .dropdown-item.dropdown-item-unread:active .dropdown-item-desc {
        color: #6c757d;
    }

    .dropdown-list .dropdown-item.dropdown-item-unread:active .dropdown-item-desc b {
        color: #6c757d;
    }

    .dropdown-list .dropdown-item:active .dropdown-item-desc {
        color: #fff;
    }

    .dropdown-list .dropdown-item:active .dropdown-item-desc b {
        color: #fff;
    }

    .dropdown-list .dropdown-item.dropdown-item-unread {
        background-color: #fbfbfb;
        border-bottom-color: #f2f2f2;
    }

    .dropdown-list .dropdown-item.dropdown-item-unread:focus .dropdown-item-desc {
        color: #6c757d !important;
    }

    .dropdown-list .dropdown-item.dropdown-item-unread:focus .dropdown-item-desc b {
        color: #6c757d !important;
    }

    .dropdown-list .dropdown-footer,
    .dropdown-list .dropdown-header {
        letter-spacing: .5px;
        font-weight: 600;
        padding: 15px;
    }

    .dropdown-list .dropdown-footer a,
    .dropdown-list .dropdown-header a {
        font-weight: 600;
    }

    .dropdown-list .dropdown-list-content {
        height: 350px;
        overflow: hidden;
    }

    .dropdown-list .dropdown-list-content:not(.is-end):after {
        content: ' ';
        position: absolute;
        bottom: 46px;
        left: 0;
        width: 100%;
        background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.8));
        height: 60px;
    }

    .dropdown-list .dropdown-list-icons .dropdown-item {
        display: flex;
    }

    .dropdown-list .dropdown-list-icons .dropdown-item .dropdown-item-icon {
        flex-shrink: 0;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        line-height: 42px;
        text-align: center;
    }

    .dropdown-list .dropdown-list-icons .dropdown-item .dropdown-item-icon i {
        margin: 0;
    }

    .dropdown-list .dropdown-list-icons .dropdown-item .dropdown-item-desc {
        margin-left: 15px;
        line-height: 20px;
    }

    .dropdown-list .dropdown-list-icons .dropdown-item .dropdown-item-desc .time {
        margin-top: 5px;
    }

    .dropdown-flag .dropdown-item {
        font-weight: 600;
    }

    .dropdown-flag .dropdown-item .flag-icon {
        width: 20px;
        height: 13px;
        margin-right: 7px;
        margin-top: -6px;
    }

    .dropdown-flag .dropdown-item.active {
        background-color: var(--primary);
        color: #fff;
    }

    @media (max-width: 575.98px) {
        .dropdown-list-toggle {
            position: static;
        }
        .dropdown-list-toggle .dropdown-list {
            left: 10px !important;
            width: calc(100% - 20px);
        }
        .dropdown-list-toggle{
            margin-top: 5px;
        }
    }

    .navbar .selectric {
        min-height: 30px !important;
    }
    
    .navbar .selectric .label,
    .navbar .selectric .button {
        line-height: 38px !important;
        min-height: 38px !important;
        height: 32px !important;
    }
    .selectric-items {
        box-shadow: 0 4px 8px #00000026 !important;
    }
    /* 3.20 Dropdown */

    .tab-content.no-padding>.tab-pane {
        padding: 0;
    }

    .tab-content>.tab-pane {
        line-height: 28px;
    }

    ul.nav-tabs li.nav-item a.nav-link i {
        color: var(--primary);
    }

    ul.nav-tabs li.nav-item a.nav-link span {
        display: block;
        line-height: 60%;
    }

    ul.nav-tabs li.nav-item a.nav-link span i {
        font-size: 16px !important;
    }

    ul.nav-tabs li.nav-item a.nav-link.active i {
        color: #191d21;
    }
    /* 3.21 Progress Bar */

    .progress-bar {
        background-color: var(--primary);
    }
    /* 3.22 Jumbotron */

    .jumbotron {
        background-color: #e3eaef;
    }
    /* 3.23 Carousel */

    .carousel .carousel-caption p {
        font-size: 13px;
        line-height: 24px;
    }
    /* 4. Theme Style */
    /* 4.1 Misc */

     :root {
        /* Colors */
        --primary: #6d28d9;
        --secondary: #34395e;
        --success: #059669;
        --info:    #0891b2;
        --warning: #d97706;
        --danger:  #dc2626;
        --light:   #e2e8f0;
        --dark:    #1e293b;
    }

    body,
    html {
        min-height: 100%;
    }

    body {
        background-color: #eef1f7;
        font-size: 14px;
        font-weight: 500;
        font-family: 'Poppins', sans-serif;
        color: #475569;
    }

    a.bb {
        text-decoration: none;
        border-bottom: 1px solid var(--primary);
        padding-bottom: 1px;
    }

    .form-divider {
        display: inline-block;
        width: 100%;
        margin: 10px 0;
        font-size: 16px;
        font-weight: 600;
    }

    .ui-sortable-handle,
    .sort-handler {
        cursor: move;
    }

    .text-job {
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: 700;
        color: #34395e;
    }

    .text-time {
        font-size: 12px;
        color: #666;
        font-weight: 500;
        margin-bottom: 10px;
    }

    .bullet,
    .slash {
        display: inline;
        margin: 0 4px;
    }

    .bullet:after {
        content: '\2022';
    }

    .slash:after {
        content: '/';
    }

    .login-brand {
        margin: 20px 0;
        margin-bottom: 40px;
        font-size: 24px;
        text-transform: uppercase;
        letter-spacing: 4px;
        color: #666;
        text-align: center;
    }

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

    .budget-price {
        display: inline-block;
        width: 100%;
        display: flex;
        align-items: center;
        margin-bottom: 3px;
    }

    .budget-price .budget-price-square {
        width: 15px;
        height: 3px;
        background-color: #f9f9f9;
    }

    .budget-price .budget-price-label {
        font-size: 12px;
        font-weight: 600;
        margin-left: 5px;
    }

    .gradient-bottom {
        position: relative;
    }

    .gradient-bottom:after {
        content: ' ';
        position: absolute;
        bottom: 41px;
        left: 0;
        width: 100%;
        background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.8));
        height: 60px;
    }

    .text-small {
        font-size: 12px;
        line-height: 20px;
    }

    .text-title {
        font-size: 14px;
        color: #34395e;
        font-weight: 600;
    }

    .text-muted-transparent {
        color: rgba(255, 255, 255, 0.8);
    }

    .img-shadow {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03);
    }

    .colors {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -5px;
    }

    .colors .color {
        border-radius: 3px;
        width: calc((100% / 4) - 10px);
        padding: 10px;
        height: 60px;
        line-height: 40px;
        text-align: center;
        margin: 5px;
    }

    blockquote {
        padding: 20px;
        padding-left: 40px;
        font-style: oblique;
        background-color: #f9f9f9;
        border-radius: 3px;
        position: relative;
        font-family: 'Time new Romans';
        font-size: 16px;
        letter-spacing: .3px;
    }

    blockquote:before {
        content: '"';
        font-size: 30px;
        position: absolute;
        top: 10px;
        left: 20px;
        opacity: .2;
    }

    blockquote .blockquote-footer {
        margin-top: 10px;
    }

    .bg-whitesmoke {
        background-color: #f7f9f9 !important;
    }

    .ion {
        font-size: 15px;
    }

  

    #visitorMap {
        height: 210px;
    }

    .sidebar-gone-show {
        display: none !important;
    }

    pre {
        border-radius: 3px;
    }

    .circle-step {
        display: flex;
        margin-bottom: 10px;
    }

    .circle-step .circle-content {
        margin-top: 3px;
        margin-left: 13px;
    }

    .circle-step .circle {
        border-width: 2px;
        border-style: solid;
        border-radius: 50%;
        display: inline-block;
        width: 32px;
        height: 32px;
        line-height: 30px;
        font-size: 11px;
        text-align: center;
    }

    .circle-step .circle.circle-primary {
        border-color: var(--primary);
        color: var(--primary);
    }

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

    .contact-map {
        width: 100%;
        height: 100%;
        min-height: 400px;
    }

    #visitorMap2,
    #visitorMap3 {
        height: 350px;
    }

    .shadow-primary {
        box-shadow: 0 2px 6px #acb5f6;
    }

    .shadow-secondary {
        box-shadow: 0 2px 6px #e1e5e8;
    }

    .shadow-success {
        box-shadow: 0 2px 6px #81d694;
    }

    .shadow-warning {
        box-shadow: 0 2px 6px #ffc473;
    }

    .shadow-danger {
        box-shadow: 0 2px 6px #fd9b96;
    }

    .shadow-info {
        box-shadow: 0 2px 6px #82d3f8;
    }

    .shadow-light {
        box-shadow: 0 2px 6px #e6ecf1;
    }

    .shadow-dark {
        box-shadow: 0 2px 6px #728394;
    }

    .is-online {
        width: 10px;
        height: 10px;
        background-color: #47c363;
        border-radius: 50%;
        display: inline-block;
    }

    .gutters-xs {
        margin-right: -0.25rem;
        margin-left: -0.25rem;
    }

    .gutters-xs>.col,
    .gutters-xs>[class*="col-"] {
        padding-right: 0.25rem;
        padding-left: 0.25rem;
    }

    .beep {
        position: relative;
    }

    .beep:after {
        content: '';
        position: absolute;
        top: 2px;
        right: 8px;
        width: 7px;
        height: 7px;
        background-color: #ffa426;
        border-radius: 50%;
        -webkit-animation: pulsate 1s ease-out;
        animation: pulsate 1s ease-out;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        opacity: 1;
    }

    .beep.beep-sidebar:after {
        position: static;
        margin-left: 10px;
    }

    @media (max-width: 575.98px) {
        .fc-overflow {
            width: 100%;
            overflow: auto;
        }
        .fc-overflow #myEvent {
            width: 800px;
        }
        .ionicons li {
            width: calc(100% / 4);
        }
        .icon-wrap {
            width: 100%;
        }
    }

    .background-walk-y {
        background-repeat: no-repeat;
        background-position: 0 0%;
        -webkit-animation-name: backgroundWalkY;
        animation-name: backgroundWalkY;
        -webkit-animation-duration: 70s;
        animation-duration: 70s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-direction: alternate;
        animation-direction: alternate;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        background-size: 100%;
    }

    @media (max-width: 1199.98px) {
        .background-walk-y {
            background-size: cover;
        }
    }

    .background-walk-x {
        background-repeat: no-repeat;
        background-position: 0 0%;
        -webkit-animation-name: backgroundWalkX;
        animation-name: backgroundWalkX;
        -webkit-animation-duration: 70s;
        animation-duration: 70s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-direction: alternate;
        animation-direction: alternate;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
    }

    @-webkit-keyframes backgroundWalkY {
        0% {
            background-position: 0 0%;
        }
        100% {
            background-position: 0 100%;
        }
    }

    @keyframes backgroundWalkY {
        0% {
            background-position: 0 0%;
        }
        100% {
            background-position: 0 100%;
        }
    }

    @-webkit-keyframes backgroundWalkX {
        0% {
            background-position: 0 0%;
        }
        100% {
            background-position: 100% 0;
        }
    }

    @keyframes backgroundWalkX {
        0% {
            background-position: 0 0%;
        }
        100% {
            background-position: 100% 0;
        }
    }

    .overlay-gradient-bottom:after {
        content: ' ';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: false;
        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, 0.65) 100%);
        z-index: 1;
    }

    .overlay-gradient-top:after {
        content: ' ';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: false;
        background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, 0.65) 100%);
        z-index: 1;
    }

    .index-1 {
        z-index: 1 !important;
    }

    .index-2 {
        z-index: 2 !important;
    }

    .index-3 {
        z-index: 3 !important;
    }

    .index-4 {
        z-index: 4 !important;
    }

    .index-5 {
        z-index: 5 !important;
    }

    .absolute-bottom-left {
        position: absolute;
        left: 0;
        bottom: 0;
    }

    .bg-paypal {
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAoCAYAAABOzvzpAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo4Q0JDOEEwQkQ5QkJFMjExOEZFQUIwMEM5MDY5Rjk1OCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4MzhDMkFERDA5N0ExMUUzOEU3NkI3REVBNTBBQTM3QyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4MzhDMkFEQzA5N0ExMUUzOEU3NkI3REVBNTBBQTM3QyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjNFQjYzNzExNzYwOUUzMTE5MjFFQjVEQjRBN0YxNUQwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjhDQkM4QTBCRDlCQkUyMTE4RkVBQjAwQzkwNjlGOTU4Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+pzjbbwAABEdJREFUeNrsWGtsk1UYfnpd13Yd68boXOmAgnO4VSfLUBIhRhYIGkPMDHHGCJloNOIPL9EYkKB4SURiovBnRn+QQaZchUgQp8KcDlh2MawwV7YJG1u3sVtvWy9fPef9sMt0Gp1JQ/KdNzl9z7Xt85znfd9+VdlLKx0APmVtFWt6KMPCrJ1h7WmNJfeeg6xTxpoGyjGO1clasZq9rIRy7X61gmQ/oxLUULgJAgQBggBBgCBAECAIEAQIAgQBCjXtbA8+UlaKPTufmXrADkdx+UoPtu3aj6aLnbN7MtGnILPABZVKJU/E44hFwgj0X0doePBvz/H98jk1Btuak6OAVffeSZ6D/qymFgM3RuEqWIAPt22ieb1eiwX2bOQ7c5GZkUZzOp0W9pws9gg29bGGFD3NmU2p0JnTCIwUiyI46EUkGCBSLI6FUOt0HCnzemhTjeQTt2g00T4pFkmeAkpci8nvrvoKJ79vgrvjGnZt3Uhglxffjpq9r0wDeqK2EQ1N7dj56hP48kQ9Xnr7cwJde2AHbptnirZY3q/Cd20t7J4ZvwNf7G4HKWnqXrA4GODO/CGrt1FeOToQw4rkEndFM40jAnirwCrHPMWOSYR32fP4TSu5fgqcceoHF942Xyr7+3D13XvKQCTszDD5bg0Nc/0VpRQR75Fzc9ROCb2zpx7JvzsOYX0rwUjdAtm7Jz5DELAykaRWCgD9FQkFRimb8QWkMq22eCzvQHAYHkELCsaHGif+CTlxP9C60d2PpBNZHjuiMP5evuQ67NSmtXewdxydNDfafDBmeeDZsfL2NhHqe8AaYWDoibOcdOjVssHMZYt4cnBKg1Ghjn2pgy9AklxCZDUwoIJkkBJS4neX7DR0+dw/CoHy3uLrS0dWH9muX4+K3NtFZ95CyRUbF+JS784kFv/zD8wQmYjQbsfedZaLUa1Bz/Ea3ubugt6XLekyQW//0snmNM4kFEfONQ8+TI5M9zQHDIi7BvDGm5DlIGJ5ATEqf9oWQRICugav9p7Dv8w7S18nUryH9xvB5HTjXgo+2VNG5s9ZBvv9LLFOTE0iXz4Q+E8P6eQ3LSNMqJcnJsBP6+nmnvaUjPgIrd/uT4KILePhizbXLlYTH/f25/1lXAdTOGf2ZJ7c92sf0q+deefxSnq3eguHARjRua5b2/dl5P7OUJdGjEJ1cIlsllUL6/vGeEKYFbimUO5hYWw2DNkuf94/947t+Yyl5aGf+vh3KyMyBJcXiHRmesySuW5VN5O9fSgYx0E1WD7p4BWn/jhXI89+RaeLr7UFaxHdGYJN8Ei2mVWsNifnJmqbKkqEkxIMpuPR6XqAxyyfO8wPsx1ufhkBQCZmtp5lTUHXyXSmXFlt2oO+9W1k/hyg2rCfzhkw23BPikK0A8DAkCBAGCAEGAIEAQIAgQBniriBIQVjD/GCTirYALqOAH8H4tvFaaEyE3MG38XYABCjHjqM0/uowAAAABJRU5ErkJggg==");
        background-repeat: no-repeat;
        background-size: cover;
    }

    .bg-visa {
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAoCAYAAABOzvzpAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo4Q0JDOEEwQkQ5QkJFMjExOEZFQUIwMEM5MDY5Rjk1OCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo2N0ZCMEUyQjA5N0ExMUUzQThCQUUwNkRBQTdGOUQzMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo2N0ZCMEUyQTA5N0ExMUUzQThCQUUwNkRBQTdGOUQzMSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjNFQjYzNzExNzYwOUUzMTE5MjFFQjVEQjRBN0YxNUQwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjhDQkM4QTBCRDlCQkUyMTE4RkVBQjAwQzkwNjlGOTU4Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+NGpUrQAABKJJREFUeNrsWHtMW1UY/3ELFAq0tCuDQjtbnm7SjbkBA3lMN4LO6QwxzmWSmKiJfyiJMWaJ/0m2mCzTaJYZXTYN6kKi0z/cDIsyF0eGcxuMOXkMxvv9KOXVVvr0nHPpbe8kMUpS/uj9ktN77ndPzznf73zf7/vujSg6WL8JwBnSykmLRniIk7RfSXs1kvycJW0vwkvoQVeQVseRnzKEr5RyYeT2q4mMQ5iLBIAEgASABIAEgASABIAEQNhK5H8ZrI+zotLQiQr9PWjkNqbz+DhcGDTjk/ZS0dgXnsrGk6VG1u8ZnMP7n93AB0fKoFbFMN2Jz1vQcd/C+rqkODxfmYWduclITY4n9SmH2XkHmm6N4uMvb4vmfbN6O7blaMFxEey+5ugVLNldoQFgxKbG2a5i1HUXoiqjE4czbyCWs2Pfpj9xuuMxuH28Q9HNHdr/MJI3KNj9dz/1IFYeiV15qYjg9w2L1cGu5fl6vFdThOgomWit1I3xeChNKdLt2qbDoadzRLockwYt7ZOhDQG3V4bzvWaM53+BUc6MaM4Do9Ii2qjf+LnFZTQ2DzFj/MbbHC5MWuwMlCOv5QvG3+maZid+6lwbLv82hPYei2jdlw5s/sdecrM2hC4EgsXr9WFmwYu8/R9i8Md3ka2awv35JPbswJ4MYdzFK31Ydnpg0gdOc2BkgV03Z2iQqJQL+tpT1zE+bVt1vWyjGo9u2cj6M8R7tOpY1n9kjQCsiQR/vzMOjSoWun3HkJ7kZTq6seLtqTw/eHzM/amY9Crhf30j8+w6v+QUzXeCcETJjrRV16qqyBT61EPo3FS2ZK4rABPsqklUwFRWzfrPPpEOmYz39ebbY5icsbN+ukEV5AE8AL1Dc/jhcq+gpyAdf6cUp2v3wpCSIOgTE+SoXCHUuYVl/HJ9mBCrlV+bkCol0XUBYGrWjr5h3piCnTlI0cbhmccD7v9NQ7fQN6YFAOhfCQEqx8/cwsmv27BoC3hDbrYWn9bugSqBD4/nyOnLo3me+Ll5EC63F3e7Z4TxawmDNdcBNAzYpxVy6jXVeUjWKgQjWzt4dqZkl5KkCAAwOh/gEp8P9Re7UPXGBXx7KQCYWhmD8gI9mzfY/ScIR+Sbk+F0eYOIUBt6EhQA+GOCpTwquwsNgp7Gvo8PU5YBuJUUYHe4WVj4T5QSpD8zfFTXisoSI5Txga90uwsMAuH564AHhZLpugHQ1jnNjPAbRGWJuHPD1f6g2FYGuT9/+ltJMXPsrRJcaxlF94CVnWgZqQn8xrs9Xtwk4NbWFP/rHnJMakRFciw0Qg6A0+Uhrj6FojydoGtoGoDjL7eI3B4EgOriFVGM3PwEF5xiT37VRsg1RohvCsjhtxtYXSGkTVJAFZKag9YRWSRN+ivLkAJApZEQkzoon5+/1CN6LiOVYVffLO8xpNihcq/fikZS7JgJ4SURF6ceMG21M4/6noQPff76i1sxNrXExt+8O4nhiUXRvNdax2DQ8dlCT0ro/wNARNHBep/0NigBIAEgASABIAEgASABIAEgARCeADjD2H4PBeBqGAPQRAF4hb7QhZknuFZsfvlvAQYAHheK9jMfKWkAAAAASUVORK5CYII=");
        background-repeat: no-repeat;
        background-size: cover;
    }

    .bg-americanexpress {
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAoCAYAAABOzvzpAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo4Q0JDOEEwQkQ5QkJFMjExOEZFQUIwMEM5MDY5Rjk1OCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo5RkI5MDAxRjA5N0ExMUUzOUQ4QkU1OTZBNzYxMzREQiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo5RkI5MDAxRTA5N0ExMUUzOUQ4QkU1OTZBNzYxMzREQiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjNFQjYzNzExNzYwOUUzMTE5MjFFQjVEQjRBN0YxNUQwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjhDQkM4QTBCRDlCQkUyMTE4RkVBQjAwQzkwNjlGOTU4Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+jutENgAAB2FJREFUeNrsWGlQlWUUfi7cy2VfZFdAFkUQUVxAwz3TLM3d1DQEpRzN1GaymHEdl6yxcVyyUcfQynBJUxx1zNBEMERRSBkUEdkR2ZEdLtzOebn3E4p+hEN/7j0zL5fvvd/33vc855znPO8n6xMR4wbgMI2xNIygG9ZEI5ZGuJz+fEfjDeiWcaAn0vjegP6Mge7aaAMdSvvOzNAAOm56APQA6AHQA6AHQJdNrv2np7Uxrn4aDLmhTFw3NLfi0v3nmDXUWbq5plGFcV/dRC8bE0R/HNSlH6xvbkHG81r0cTCDqZGhmKusa8bVh6UY420Le4vOZclPt/KxcISLdN3Sqsa+q1lYM9FTmvv610wcvJ7dNQDeD3bF9fRSRJxOE9e7F/jj7YGOuJxajPW/PBRz+xYOxOKRbnCxMcbppEJ8eSlDzB8ODRD38Vx72zbLFym5VR3mFSQ9RnjZYNtMX4QfTZGeZ9iXRCbjWVWDmLsRMQqTd91CXZMKkwc4Yv073lIA2EJpH8vHu+NJcS3mH0gSv9XlDLA0lmNeYE8sOZICbydzFL9oxAFC8tgHQ9CsakVVvYoio8Q3hPiBkIEwkhtgyu5bMFPKUVjZABVFo54yRk7O7ZrnJy3e19EcCZkV0jzfdyW1BCfvFJBTDqhtbBH33c97gYgzaZjY3x7LxrmTPJPh5O0CFFc3YlqAE87cK8SK191hQfvkvfQwM8K3v2fjTVqjVa0Wc7zPLnPAu+Q8I8nRWkRpFkLZkPi0AmmF1dKNoSNdcTurAulFNYh7XIacsnosHe3WYbE6cugEbVw72AE2djy3vB75NEpqGkXq+/WykJ6Lf1IO8gNbZ/qguaUVk/zscfRmnnBw7WQvyg4ZfvwjT7o/fIwbbM0VWEeZyc+9EglySoaQc4dicyCjPIzLKEcKRYSN57T2lr8D3GxNRN3x5kZTvfbvafE3YS2Daw8TaZgoDCRgOKKn7hQi4UmFeM7OXCk9p9Z4wZniZW8muIczq6K2CXtjsmBtKhfPvmhQifvMCMAtM3yQTAE7lpD/aiQ4dZAjmlRqXCMSCu7TA3JyQk4/MMzdWtS1r7O55Fz46N7YeO6RuOby+LspyeGRtIbWLIwV4pOJ7ezKIJTVNCG1oFrU/t3sSum+IA8b8bmJ1p7k54CDBHxvAru3ramY5zXPJRcJELQ23scOU4ijTiUVvBoAYaNccSIxH3a0yb3v+YuNGVEkPOxNMX3fbUSnFMHKRA4DSg/uCJHxuXC2UmK4p40oGf6OQeNoqyh9V0U96ECCPM+1y7b9YgbCKNv4GY65mbKtCwR6WGPz9H6ibOIzHomM2Ditn+gUXGrj+tniOfESZwY/yxxUQBmygYiRs6CWyFEh71pHl6nVL6uIa56d5mhfWxssWmN7K6GaZjJkq6htho2Z4j/92OrjqdizYMA/5quoDcYSr7xG3cHW3EiAzbuatCsB2aV1wlHmpfYWRW3R0coYE3ztXqkNyvpExKihw6ZXgt21cMaOCf/6HbfSBQfvYgoR8JbpPqL7tLdG6umc+nZUDlwS7a2aOgF/5+9i2enadU0tyKN2y91Eq2rZ8ivqRftlDfG/AMA2dU8iijTK7mXRybCZCO7MikDYEvHOIxXHLa+huaWDWhxAOmE7kega4o34jDLpOxZfM4c4C5LWqkKtBbhZYedcP+y8/KStlWvobeUET0Go2y48RqlGm7BdWD2iewHgaLFemDuspzTH7eyzn9NIavvh89O5guU3TfMWBPnJJC8EuFqKdrmW7jlCHaeWIupoaYx1U/uSSFLjBxJE+69lkUJ0FAqQyVFLhnirtTpHKjE0vwxezfWGubHOvn5OZWN+QwN8686VktiJ9Ie/uGksrrBHtjc2PBNAO2hgD89GxB6KlHftwKLSJygLH0kQhNL8QSFJJtAglqSIA+ODkYWcqpTK37RJNVHl97gwiun8+F+XDgiyI2qwDda97OVW4SK2UgRpM2WIsN+x+ACzJSd5EmyBSCu3OeqFnirBlAQS2XpTLbriuZlP4kfClS3BLDRrlh/dlH5GCTUJL8WEZxDeYH9RKtmo1bcfv1Zwx2Ih0jQxIBwxkSGZcjOGE3tV8ORC5lXBZxCB/QmGO6HQA+ObZXh1zTiU8rcWjxIJHKoXQC3Eqylo01wjhSeHzUZaKTa5xk6czKs4Yy5xRtnGt8OR2a2DyJ7LTrc2SZTxjAQFKXvE5CZjkp3VZBvC50jOfhaKkUZx0+d3QrALwhPjjxkPouObV/kT+lqhIHQwYhLDIFm8+ntylKIr9N0elC5LAdXzZUlAVrNVaCUYkFcCeJzKdXThp+Jjr5mRhaEpxDfLPh7EMpwzyJLFfQsZnPNVoyNVYYYjap2pF9e3QvABdWD+90nk+Vc/YniUPY+VUdX6z8llbS4Xq3RjlyZNnYwTkaUk3aOLbT9fmorX1pUlTVSGRoKK2jfbHDL2VWRaXqlaD+pageAD0AegD0AOgB0HEAmnTY/xYG4IYOAxDHACylEaNjmdCs8Tn0LwEGANFzD+vUOoKUAAAAAElFTkSuQmCC");
        background-repeat: no-repeat;
        background-size: cover;
    }

    .bg-dinersclub {
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAoCAYAAABOzvzpAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo4Q0JDOEEwQkQ5QkJFMjExOEZFQUIwMEM5MDY5Rjk1OCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo3QzZFN0NDMjA5N0ExMUUzQTlFREIzQkJBNTFDMUVBOSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3QzZFN0NDMTA5N0ExMUUzQTlFREIzQkJBNTFDMUVBOSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjNFQjYzNzExNzYwOUUzMTE5MjFFQjVEQjRBN0YxNUQwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjhDQkM4QTBCRDlCQkUyMTE4RkVBQjAwQzkwNjlGOTU4Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+DhLVaQAABA5JREFUeNrsmHlIFFEcx7+r5qqb95GWeaRWpBamhhZ2UFKupZ2S1h9Z0QkdEFF0KR0UEf1RWFAWREFaJF1GEZgWphGdVt6laZalrpjttofbe2s7u9OYGbQxy8wP3rIz83tv9/eZ3/WeBPITAQBOkzGFDHsIQ9RkFJOx0hZhsy+TL4lk2EI4Qm0NISPKhnirMhnAlwUZAbt+nJ9hA4CICEAGIAEQAgha7//EjwzxlWDZjFBKj/DHE3Ql6vR5eLg7wdnVkdLpVWjS3daOioR1Xy94i/34dVGqdxf+bhLTCekstLh1ki+ylMVg4KQQ5NysMRjV96Waeuw+WQh4bgI0pkYgd6cOa+6G9G1vPlOFCUY11AnCV2aMwW4437xXYcPIBvn3X/j4OJRJsTI3E4RXxpDORsJ7l3qnE6mPF0PVY5j3RvUDWP48r0l/d2JOE4pct2HyqFBpdT7/61LSyyk94Vt+GtIQQAxCjjA/xgp+HDNcfNVgPgC0LxpEYd8S6nBIWlPBAd7QqlMy9Eb4uBjhqbS+gqmYFVBqdIVeYS3SoN2pbOvHyXTv/qwB1/fWzI7DmeAlJdr33PJ0dcO9gCrYtimLpzowejoqcNIwN9mTuHbnyHK8bOzjrHl4eD0d7O/4DyJgahmtl7/C5U8nEd8GumZg0xrdP/UAfZ9zemwwft96KQGP9QP4Tjp6fhxMWJYzgPwB5TAAuPahjrhdPCUVCuF+/c3xJady5OJq5vkoAarTcvDFnQhD/AVB3flr3hbleQjxiYJ4TCmPu+6rUoJrkg18lJsyb/wAGOwxCFzHAKKOHuw1oHs0TPmaN0ccOZZ9hwHsAKg273uv/onybq37X6PrsF3gPgLa0TlJTtn7VOLDSRcujeYn095JxdFo6vvEfQCXp/CZHmJLeQFvZC/dMeh7OUtIzeHB0yqs+8R/ADdKxzZsYzFzTilD0ornfObUfOrH/oqn0pcYFc1piKgWlb/kP4HxRNaaP8zeUNmMOmL/vDu4+a/qt8Ul7CtHWpWI6xu1pUVzPalIQmPXWsRlaNWsMUuICMSf7FpMEaQILG+aKqiYFqwmica9UmxLn7vRosoOM5STS5KxC3HrcaB0HIqduvya1XItDmXHMvR5ihbnirVBpau1jGzyehszsjhrPejnPlFjHeYgDoG8s8WoTgIS44u3ka3GTSfvXt7XrdPm9bIiv26Tr7857g4KWn1nkgQt1+09xIrJWHk9xQgyul9awdHS11NOFtSo1E6FBX1ly6IdqS+9Bib/6/ADAKPf5KJ3uClLggwxaYgqGbH/N+gR6YNH7+isc1rYZsf628Ado/nCNYDQA+i3gsLgIQAYgARABCB6AWsP06CqBEwADuUwAryLgrME/Q/LR52Q8BBgBm3GJpfFCpogAAAABJRU5ErkJggg==");
        background-repeat: no-repeat;
        background-size: cover;
    }

    .bg-discover {
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAoCAYAAABOzvzpAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo4Q0JDOEEwQkQ5QkJFMjExOEZFQUIwMEM5MDY5Rjk1OCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4MTYxNkM1QzA5N0ExMUUzODkyODk5REFFMENGQ0I0MiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4MTYxNkM1QjA5N0ExMUUzODkyODk5REFFMENGQ0I0MiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjNFQjYzNzExNzYwOUUzMTE5MjFFQjVEQjRBN0YxNUQwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjhDQkM4QTBCRDlCQkUyMTE4RkVBQjAwQzkwNjlGOTU4Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Nbpv+wAABOVJREFUeNrsmnlQVVUcx79gGWtvGCuteBgOSykiISQaO5GgwWtKZlJkMfpDrZQmBNOCxqJF0UlsEaPYbAMCCp1JnjFsZSKyiRA8FkGCARyBx9Lb7judexzuSKMNIU7Lu7+Z39x7f++sn/P7/c59d44RIcQGQDpVH6rzYRiioVpO9QUjCkBOb56AYUoZD0BtQCv/Z+F4AAQGLCIAEYAIQAQgAhABiABEACIAEYAIQARgkGI804J2Do5MXVxXYld8PIaHR5h92/YXESp7GjzH+IQEPGgthZPzCuTm5l378qDRMPt9ixbB1NwCXt4+1xrUc9CUpGEiKQDju9zw+0cx0Pe3o7a2jvWTn/+t0HdjYyOz5eXlC+Pg1dXNHS0tLcKzx5o1+Dwj4/YA6OnpgYO9PRwc7PHxJ0fhFxCAsbExDA4Noa+/HyVyOT44nIqQkBAE+Pujo7OT1QuPiEDqkQ8hC5Vhz2u7MXTlCrOrvk6CunA/9IOXQMaHoWsqw+T+Z7HiAQmMjY1xNC1N6Ds7JwcDAwMIDAxk41hsY0PbC8W64CAKWMtsPt7ekNwtwdZt2xnEGQuZodx5lwnJys5m9z+fOUPmm5iSd997nzyzIYysdH+MpB07xspQEEKds9XVzEZXRbCNjIwQrl9BlFuX3FAn03eQt95OZvXa29uJVqsl1KsIBSmM43DqEaG9+voGZisrLycdHR3sPuf48ZlOixjPJm5We3jA2Xk5KisrBVtwUBDuWbAA658KwdqgYOa2VVU/wdLSElGRkUI5iUQCTnHu5p9o6G9RkREwMjJCRmYm5KdPMy+LjooSyiS/k8xc3tfPX7CVlJTgzX37mPe4u7nNeC53zDp50I54nRKpVIoLFxqRnZ2DlJQUBK9bj9jY2L/fMNGztvz9/JCVlY02hQLW1tbseUqcljnBxcUFVlZWgo0PMz7f5Od+A0dHx7nPAddLTc15UNeDr6+vYBsdHYWS6iuxO7F37x4W60sfeZjlCRo6QjmlUol5S1xv2vY8O3d25Vd8YHAQRUXfMY+4HrZMJsPBlAN4nfYzJUmJiexa39Bwe7ZBGvMswVlYmKOwsIhSdkBZaSkio7egu7ubrsoy0DhEzPNbkEuzNQ+js6Mdz23ahOLiE4jYvBk2NlJ88eVX+LX5IlSZcdCeLZw+mPmmMNtdBOP77aBSqSBd/BAD29rSDFtbW2EcXp6ezANMTU0QtiEM7qtWQV5yCgUFhfg0PR1VFRVwdX10bpMgn+h4fdzTi7yRmEjoSjL7q3FxZGN4OOnt7SV0OyRmFpZkqdNylpR4UavVhG6b5N6FC4mJmTmrz4TTEdX3h8hYwmqifMmRTBzcSHTdTdP6fHnHThL45NobjonirmgNIa2sru6deSSgsZouMjp5xEhTfBEUAIgARgAjAECeuv9wMddEBwwOgH+qBpvgQtDUn2VunwQDgOmuh+TEDuvpT7K+4YYSATgNdgxya0kwGwGByAHepAbqaE9D+UgAyMWIYSZDraYKu7gfozp9kcf6/3wWIehKcohpccwVzc/3Vvllvg/+JIzL8hPVdddC1nwPXRifeRWNap71lx/l3HpLidND3K8Bdvsjimeuqh/631mnZe46EHZLij8l9RtX7n/AEMn4V+j46WTpBfW8zU66vbS5W96+Eb5w/JhfzhwADAEp6pBLh7YWZAAAAAElFTkSuQmCC");
        background-repeat: no-repeat;
        background-size: cover;
    }

    .bg-jcb {
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAoCAYAAABOzvzpAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo4Q0JDOEEwQkQ5QkJFMjExOEZFQUIwMEM5MDY5Rjk1OCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo3ODJEODgyMDA5N0ExMUUzQUZBM0UzQ0IwMzlDQTM2RCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3ODJEODgxRjA5N0ExMUUzQUZBM0UzQ0IwMzlDQTM2RCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjNFQjYzNzExNzYwOUUzMTE5MjFFQjVEQjRBN0YxNUQwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjhDQkM4QTBCRDlCQkUyMTE4RkVBQjAwQzkwNjlGOTU4Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+RS3J7gAAA3pJREFUeNrsWHtIU1EY/22z+Zo1Tc10zVctXSWZFib2olIxE6KgoqclERRoUPT4wzAii6AIgrCkt2UU/lVYUfaCHqL5gLKmtsxX6dxSm489XOcec2gzZ7Bi894ffLtn537n277fPef3nirN5WJwjBZBLbBExIdgBHbFnirNIECFp5hzSWExOAPWByDSUWyScfC8FeLOCzaNoPOxP4YDk4AjgCOAI4AlgNJ1sGm+IrwpndsUiYJ4Gbs2Vo3pLz9Jq2Igz718/G1IDxFj4HLxTj+I1ySHzccXrXfCTFSEeMZTcEuLs4oehU8rBJDcbOFDnO7Ykb0ceVJPyYxJJJJjjOElizKMRq8gz2rYuw6rMqLui/JG9TAiZPdBuVX5Cfh1Uf6STR2BVBPo/HVYExWwV+R01jB9q1OtoerA+azl6UfGxFU1sXdPo++IhdEOI/HuFSMb3/Vd2FUoXKIh4TY4K70HEIyDj7Evdef6Htu9mJ9Jp64inyHtVAb+ijQjcj2BPNhIjymjZkrJlFfS7fV1CTB3qSiiBAQ6sW3zTdcBEKcOvwMqTEBjoGAcOBSYxB5uY5yEqNNvf/6NajvkWLqw8V5r78zKWYFeKFd581mJl6Gz06Iwrf1Ds2AfRHySn80MbIIX0i13EIDxQP6Tty9S28PJzxvk5Dv88N80H66pmOKYIC/t+rv5wQEjXdG8uiAmj1qKxV4+bjGvskQFHfbha8gSld+Undv20luU8btLExGPuQnVc+ZDzjX1X33WJztSM5HAc3REIsEqJXb8TRa2V0vN0tgYIXStx9VYc5Mm/4ebmhuKqFqrzzOAGObItGqH9/FdiSIMMN8hSzrpQiv6gW8iAxUf1ulFWrzCI4gKQDhRA6CSg5alI56PhEGV1CtgIPi3NMtgi0d20ENsXLoGzuQFtHL0wmE/wnuiNG7gtPso4HDjCmJztoMrQMqkgZNBjhK3Y1l8HMSyW0DO5eZbnWGT0Inuxhn4ch5qlEEMVmzBqYROKjJX+8z8ygKDKTuJ3gWCLA2GdiNwHK5s5R+TWqtDaLZVcEnMyvsOpT3dCOgudK67FuVdjsf/3znWBtUweOXS/DxcKPf/Tp6jXgQXED0snZQdtjGDEW87os994H+yuDnAhyBHAEcARwBHAEOCYBOhbnb2QIeM5iAl4wBGwn9ohlM0H/K+etPwUYAO7UFu8nZtFbAAAAAElFTkSuQmCC");
        background-repeat: no-repeat;
        background-size: cover;
    }

    .bg-mastercard {
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAoCAYAAABOzvzpAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo4Q0JDOEEwQkQ5QkJFMjExOEZFQUIwMEM5MDY5Rjk1OCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo2REIxOTA4NTA5N0ExMUUzQTM0MEZENTU0MTExMTk3MiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo2REIxOTA4NDA5N0ExMUUzQTM0MEZENTU0MTExMTk3MiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjNFQjYzNzExNzYwOUUzMTE5MjFFQjVEQjRBN0YxNUQwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjhDQkM4QTBCRDlCQkUyMTE4RkVBQjAwQzkwNjlGOTU4Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+XxeyrgAABOJJREFUeNrsWmtsU3UU/93e2wdryzo21r2f7GX2YGOsC+KmM5MoRMyWICrgC2MkYCSRT8ZADJqIUePzg4iPRGMEBaODoV8UFhgje7ixh869YOs65rq1g7brvb33eno18YsZdq3pTHuS0/b/zz23//O7590yTOXzGQA+JK4l1iAyiCc+R7ybZVI2fEUf6olZRA75dc0lLlfRSw0il+5QRZDZ/6MlqBDhFAUgCkAUgCgAEU3cf3HTlaKAxrmrqJ+fRLHHgViRV/Zt6hX4OWYVTsemoZnYxzB/PwlGxubkMeKrqE6YQqLWDY1KgkPQoscRj7NTmfjyWh6cQmizNkOlsByymxHvsg/hwFQfjATCYjSmMeDF1HKcN5pRlziBwyWXkG90LCozT8q/MlCJYyO3QV5uAKhlCe9ca8O9TmtAcheK43FPw3BAMt9NZuPp9rvAS8F7sL8XOBSKJ//2eBs2B6i8nzKmPbBDB2PWwr+WKSBLyTU4FSCWRRB8xD6CLY6JJcsbzjEQrIGFowdSR/Bo9kD4AdBLPvL53iAPIePG94aA5V4oaoeeE8ILQANFe9NfUT4Y0pIBeSYDi/BxGi+2pQ+FFwB/qlMlxEG7cf2fQSU1CRpL+dJy8jAdh1FBnVULTf59YDjt4gEsoQBb0m3hrQP8eV6/6yGY3jgIq7kMCV+8D8nlxuxj+8EV5MA3Og7JPgetpQKS2w1dfQ1E23V4TjRBXVwI39gExKlpqEsKIfM2GBpfgsqQBFlww2cfBKs3Q5qfgOz6HaqVqZAXHJAp47CxGTDubELJkbLwAhDv80K9rhSyZwHG/U9BU1mK+TePImZHA7icTOi3b8XCTxfBmlfD9dniryprvGYDh8e3gO3oQ8+D9mK7bBnPLKXiaz4BLrYLj3VJA9EJn2QM2LhfatTtws2kv9JuOwHPhddrfS6D1EDBWrMJM+LOApqIY/OUuGJ99EsKvw/D9MkQuUQV14RqIM3YIpLC6KI++TQU2KRHzr74HLi9bcRe+u48ALIHn2x/gvdgCaXZIUZ6hQonL2Ah2dQEkeuqcma5pfUs5sjB4Bnz/SQKhO/xZYC7WBC4rnQ7fAfeps2DTUsg5WWjIpEWrDUJ3vzJ3EfoHoa2uIDPnoSktAtmxsse3diprvvMKuUMfWcA6GLZ+AF31PnDJ5RCd5CK2brDJa5V3hlXTNeuhq3oGPlrbvbrwukC/zgTzpochTlAwoprS9clxUqod0pyT9ibJZ73g8nPBX+okV2iFtqYavqFRTNc2Kn7vbesi3zZAnJ6BNecGNB/VgY3PhzDWAvH6FcXMZe88mBVxtO6Fz3oZov03SM5xAmcc3c6E8JbCO+3DOGztCk1dvtuNmJTAUuqB7tvx8WhR+FzgZFwmHGzwHZojmQtY+Tlei+Pja8IbA1wqDq8lFQd1D5maCXX9QsByL1Nn6PKpw58FPo/PQZMpbemHuNuLxKybAcl8Y83Bp0GYfkgB8AeR59Kr0BybGrDsidwMxGzwBNwO7+m4MyQzgZC0w36SGAanTemY5TSodNuhpWrtVgORfRkWHDUUoH02EWWmGcRrF245EDnYZ8GhXgtEmVl+E6GIH4n9Hyk6Fo8CEAUgCkAUgEgHgI9g/UU/AOcjGIAWfyns/7tYCbG/m4mUf4r5f0z4kfiJPwQYAB3H59j066DAAAAAAElFTkSuQmCC");
        background-repeat: no-repeat;
        background-size: cover;
    }
    /* 4.2 Section */

    .section {
        position: relative;
        z-index: 1;
    }

    .section>*:first-child {
        margin-top: -7px;
    }

    .section .section-header {
        background-color: transparent;
        border-radius: 3px;
        border: none;
        position: relative;
        padding: 20px;
        display: flex;
        align-items: center;
    }

    .section .section-header h1 {
        margin-bottom: 0;
        font-weight: 700;
        display: inline-block;
        font-size: 24px;
        margin-top: 3px;
        color: #34395e;
    }

    .section .section-header .section-header-back {
        margin-right: 15px;
    }

    .section .section-header .section-header-back .btn:hover {
        background-color: var(--primary);
        color: #fff;
    }

    .section .section-header .section-header-button {
        margin-left: 20px;
    }

    .section .section-header .section-header-breadcrumb {
        margin-left: auto;
        display: flex;
        align-items: center;
    }

    .section .section-header .section-header-breadcrumb .breadcrumb-item {
        font-size: 12px;
    }

    .section .section-header .btn {
        font-size: 12px;
    }

    .section .section-title {
        font-size: 18px;
        color: #191d21;
        font-weight: 600;
        position: relative;
        margin: 30px 0 25px 0;
    }

    .section .section-title:before {
        content: ' ';
        border-radius: 5px;
        height: 8px;
        width: 30px;
        background-color: var(--primary);
        display: inline-block;
        float: left;
        margin-top: 6px;
        margin-right: 15px;
    }

    .section .section-title+.section-lead {
        margin-top: -20px;
    }

    .section .section-lead {
        margin-left: 45px;
    }

    .main-wrapper-1 .section .section-header {
        margin-left: -30px;
        margin-right: -30px;
        margin-top: -10px;
        border-radius: 0;
        border-top: 1px solid #f9f9f9;
        padding-left: 35px;
        padding-right: 35px;
    }

    @media (max-width: 575.98px) {
        .section .section-title {
            font-size: 14px;
        }
        .section .section-header {
            flex-wrap: wrap;
            margin-bottom: 20px !important;
        }
        .section .section-header h1 {
            font-size: 18px;
        }
        .section .section-header .float-right {
            display: inline-block;
            width: 100%;
            margin-top: 15px;
        }
        .section .section-header .section-header-breadcrumb {
            flex-basis: 100%;
            margin-top: 10px;
        }
    }
    /* 4.3 Page */

    .page-error {
        height: 100%;
        width: 100%;
        padding-top: 60px;
        text-align: center;
        display: table;
    }

    .page-error .page-inner {
        display: table-cell;
        width: 100%;
        vertical-align: middle;
    }

    .page-error h1 {
        font-size: 10em;
        font-weight: 700;
    }

    .page-error .page-description {
        font-size: 18px;
        font-weight: 400;
        color: #34395e;
    }

    .page-error .page-search {
        margin: 40px auto;
        max-width: 100%;
        width: 350px;
    }

    .page-error .page-search .form-control {
        border-radius: 30px;
    }

    .page-error .page-search .btn {
        border-radius: 30px;
        margin-left: 10px;
    }

    @media (max-width: 575.98px) {
        .page-error .page-search {
            width: 100%;
        }
    }
    /* 4.4 Layout */

    .main-sidebar {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03);
        position: fixed;
        top: 0;
        height: 100%;
        width: 275px;
        background-color: #fff;
        z-index: 880;
        left: 0;
        border-right: 3px solid #fff;
    }

    .btn-documantation {
        background-color: #FB8A5F;
        color: #fff;
        font-size: 13px;
    }

    #sidebar-wrapper {
        background-color: #fff;
    }

    .main-sidebar,
    .navbar,
    .main-content,
    .main-footer {
        transition: all .5s;
    }

    body.sidebar-gone .main-sidebar {
        left: -250px;
    }

    body.sidebar-mini .hide-sidebar-mini {
        display: none !important;
    }

    body.sidebar-mini .main-sidebar {
        width: 65px;
        overflow: initial !important;
        position: absolute;
        box-shadow: none;
    }

    body.sidebar-mini .main-sidebar:after {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03);
        content: ' ';
        position: fixed;
        background-color: #fff;
        width: 65px;
        height: 100%;
        left: 0;
        top: 0;
        z-index: -1;
        opacity: 0;
        -webkit-animation-name: mini-sidebar;
        animation-name: mini-sidebar;
        -webkit-animation-duration: 1.5s;
        animation-duration: 1.5s;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
    }

    @-webkit-keyframes mini-sidebar {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    @keyframes mini-sidebar {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    body.sidebar-mini .main-sidebar .sidebar-brand {
        display: none;
    }

    body.sidebar-mini .main-sidebar .sidebar-brand-sm {
        display: block;
    }

    body.sidebar-mini .main-sidebar .sidebar-menu>li {
        padding: 10px;
    }

    body.sidebar-mini .main-sidebar .sidebar-menu>li.menu-header {
        padding: 0;
        font-size: 0;
        height: 2px;
    }

    body.sidebar-mini .main-sidebar .sidebar-menu>li>a {
        border-radius: 3px;
        height: 45px;
        padding: 0 16px;
        justify-content: center;
    }

    body.sidebar-mini .main-sidebar .sidebar-menu>li>a .ion,
    body.sidebar-mini .main-sidebar .sidebar-menu>li>a .fas,
    body.sidebar-mini .main-sidebar .sidebar-menu>li>a .far,
    body.sidebar-mini .main-sidebar .sidebar-menu>li>a .fab,
    body.sidebar-mini .main-sidebar .sidebar-menu>li>a .fal {
        margin: 0;
        font-size: 20px;
    }

    body.sidebar-mini .main-sidebar .sidebar-menu>li>a span:not(.icon) {
        display: none;
    }

    body.sidebar-mini .main-sidebar .sidebar-menu>li>a .badge {
        padding: 5px;
        position: absolute;
        top: 4px;
        right: 4px;
        font-size: 10px;
    }

    body.sidebar-mini .main-sidebar .sidebar-menu>li>a.has-dropdown:after {
        content: initial;
    }

    body.sidebar-mini .main-sidebar .sidebar-menu>li.active>a {
        box-shadow: 0 4px 8px #acb5f6;
        background-color: var(--primary);
        color: #fff;
    }

    body.sidebar-mini .main-sidebar .sidebar-menu>li ul.dropdown-menu {
        position: absolute;
        background-color: #fff;
        left: 42px;
        top: 10px;
        width: 200px;
        display: none;
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.03);
    }

    body.sidebar-mini .main-sidebar .sidebar-menu>li ul.dropdown-menu li>a:focus,
    body.sidebar-mini .main-sidebar .sidebar-menu>li ul.dropdown-menu li.active>a,
    body.sidebar-mini .main-sidebar .sidebar-menu>li ul.dropdown-menu li.active>a:hover {
        color: #fff;
        background-color: var(--primary) !important;
    }

    body.sidebar-mini .main-sidebar .sidebar-menu>li ul.dropdown-menu li a {
        height: 40px;
        padding: 0 20px;
        background-color: #fff;
    }

    body.sidebar-mini .main-sidebar .sidebar-menu>li ul.dropdown-menu li a.has-dropdown:after {
        content: "";
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translate(0, -50%);
        font-size: 12px;
        transition: all .5s;
    }

    body.sidebar-mini .main-sidebar .sidebar-menu li:hover>ul.dropdown-menu {
        display: block !important;
    }

    body.sidebar-mini .main-sidebar .sidebar-menu li:hover>ul.dropdown-menu li:hover>a {
        background-color: #fcfcfd;
    }

    body.sidebar-mini .main-sidebar .sidebar-menu li:hover>ul.dropdown-menu li .dropdown-menu {
        left: 200px;
        padding: 0;
    }

    body.sidebar-mini .navbar {
        left: 65px;
    }

    body.sidebar-mini .main-content,
    body.sidebar-mini .main-footer {
        padding-left: 90px;
    }

    body.layout-2 .navbar-bg {
        z-index: 889;
        height: 70px;
    }

    body.layout-2 .navbar {
        left: 0;
        z-index: 890;
    }

    body.layout-2 .main-wrapper {
        display: flex;
        flex-wrap: wrap;
        padding: 0 50px;
    }

    body.layout-2 .main-sidebar,
    body.layout-2 .main-content,
    body.layout-2 .main-footer {
        flex-shrink: 0;
        flex-grow: 0;
    }

    body.layout-2 .main-sidebar {
        background-color: transparent;
        box-shadow: none;
        position: static;
        margin-top: 100px;
        width: 200px;
    }

    body.layout-2 .main-sidebar .sidebar-menu li.menu-header {
        padding: 0;
    }

    body.layout-2 .main-sidebar .sidebar-menu li a {
        padding: 0;
    }

    body.layout-2 .main-sidebar .sidebar-menu li a i {
        width: 10px;
    }

    body.layout-2 .main-sidebar .sidebar-menu li a.has-dropdown:after {
        right: 0;
    }

    body.layout-2 .main-sidebar .sidebar-menu li a:hover {
        color: var(--primary);
        background-color: transparent;
    }

    body.layout-2 .main-sidebar .sidebar-menu li ul.dropdown-menu li a {
        padding-left: 34px;
    }

    body.layout-2 .main-sidebar .sidebar-menu li.active a {
        background-color: transparent;
    }

    body.layout-2 .main-sidebar .sidebar-menu li.active ul.dropdown-menu {
        background-color: transparent;
    }

    body.layout-2 .main-sidebar .sidebar-menu li.active ul.dropdown-menu a {
        background-color: transparent;
    }

    body.layout-2 .main-content {
        padding-top: 107px;
        padding-left: 30px;
        padding-right: 0;
        width: calc(100% - 200px);
    }

    body.layout-2 .main-footer {
        margin-left: 230px;
        width: calc(100% - 230px);
        padding-left: 0;
        padding-right: 0;
    }

    body.layout-3 .navbar {
        left: 0;
        right: 0;
    }

    body.layout-3 .navbar.navbar-secondary {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03);
        background-color: #fff;
        top: 70px;
        padding: 0;
        z-index: 889;
    }

    body.layout-3 .navbar.navbar-secondary .navbar-nav>.nav-item.active>.nav-link {
        color: var(--primary);
    }

    body.layout-3 .navbar.navbar-secondary .navbar-nav>.nav-item.active>.nav-link:before {
        left: 35px;
        right: 0;
    }

    body.layout-3 .navbar.navbar-secondary .navbar-nav>.nav-item:first-child .nav-link {
        margin-left: 0;
    }

    body.layout-3 .navbar.navbar-secondary .navbar-nav>.nav-item:last-child .nav-link {
        margin-right: 0;
    }

    body.layout-3 .navbar.navbar-secondary .navbar-nav>.nav-item>.nav-link {
        color: #868e96;
        font-size: 13px;
        letter-spacing: .3px;
        height: 70px;
        padding: 0;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 15px;
        margin-right: 15px;
        position: relative;
    }

    body.layout-3 .navbar.navbar-secondary .navbar-nav>.nav-item>.nav-link.has-dropdown {
        margin-right: 35px;
    }

    body.layout-3 .navbar.navbar-secondary .navbar-nav>.nav-item>.nav-link.has-dropdown:after {
        content: "";
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translate(0, -50%);
        font-size: 12px;
        transition: all .5s;
        right: -20px;
    }

    body.layout-3 .navbar.navbar-secondary .navbar-nav>.nav-item>.nav-link:before {
        content: ' ';
        position: absolute;
        left: initial;
        right: initial;
        bottom: 0;
        height: 2px;
        background-color: var(--primary);
        transition: all .5s;
    }

    body.layout-3 .navbar.navbar-secondary .navbar-nav>.nav-item>.nav-link span {
        line-height: 74px;
    }

    body.layout-3 .navbar.navbar-secondary .navbar-nav>.nav-item>.nav-link i {
        width: 30px;
        font-size: 16px;
    }

    body.layout-3 .navbar.navbar-secondary .navbar-nav>.nav-item>.nav-link:hover {
        color: #191d21 !important;
    }

    body.layout-3 .navbar.navbar-secondary .navbar-nav>.nav-item .dropdown-menu {
        padding: 0;
    }

    body.layout-3 .navbar.navbar-secondary .navbar-nav>.nav-item .dropdown-menu .nav-item .nav-link {
        color: #6c757d;
        font-weight: 600;
        letter-spacing: .3px;
        padding: 7px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    body.layout-3 .navbar.navbar-secondary .navbar-nav>.nav-item .dropdown-menu .nav-item .nav-link.has-dropdown:after {
        content: "";
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translate(0, -50%);
        font-size: 12px;
        transition: all .5s;
        right: 15px;
    }

    body.layout-3 .navbar.navbar-secondary .navbar-nav>.nav-item .dropdown-menu .nav-item:hover>.nav-link {
        background-color: #fcfcfd;
        color: #191d21;
    }

    body.layout-3 .navbar.navbar-secondary .navbar-nav>.nav-item .dropdown-menu .nav-item:hover>.dropdown-menu {
        display: block !important;
        top: -5px;
        left: 200px;
    }

    body.layout-3 .navbar.navbar-secondary .navbar-nav>.nav-item .dropdown-menu .nav-item.active>.nav-link,
    body.layout-3 .navbar.navbar-secondary .navbar-nav>.nav-item .dropdown-menu .nav-item .nav-link:focus {
        background-color: var(--primary);
        color: #fff;
    }

    body.layout-3 .main-content {
        padding-left: 0;
        padding-right: 0;
        padding-top: 170px;
    }

    body.layout-3 .main-footer {
        padding-left: 0;
        padding-right: 0;
    }

    .main-sidebar .sidebar-brand {
        display: inline-block;
        width: 100%;
        text-align: center;
        height: 60px;
        line-height: 60px;
    }

    .main-sidebar .sidebar-brand.sidebar-brand-sm {
        display: none;
    }

    .main-sidebar .sidebar-brand a {
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: 700;
        color: var(--primary);
        font-size: 20px;
    }

    .main-sidebar .sidebar-user {
        display: inline-block;
        width: 100%;
        padding: 10px;
        margin-bottom: 10px;
    }

    .main-sidebar .sidebar-user .sidebar-user-picture {
        float: left;
        margin-right: 10px;
    }

    .main-sidebar .sidebar-user .sidebar-user-picture img {
        width: 50px;
        border-radius: 50%;
    }

    .main-sidebar .sidebar-menu {
        padding: 0 12px;
        margin: 0;
    }

    .main-sidebar .sidebar-menu li {
        display: block;
    }
    
    .main-sidebar .sidebar-menu > li + li {
        margin-top: 4px;
    }

    .main-sidebar .sidebar-menu li.menu-header {
        padding: 3px 15px;
        color: #000;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 1.3px;
        font-weight: 600;
        display: none;
    }

    .main-sidebar .sidebar-menu li.menu-header:not(:first-child) {
        margin-top: 10px;
    }

    .main-sidebar .sidebar-menu li a {
        position: relative;
        display: flex;
        gap: 8px;
        align-items: center;
        padding: 8px 12px;
        width: 100%;
        color: #606060;
        text-decoration: none; 
        font-size: 14px;
        font-weight: 400;
        border-radius: 8px;
    }

    .main-sidebar .sidebar-menu li a .badge {
        float: right;
        padding:5px 6px;
        border-radius: 50%;
        margin-top: 2px;
        margin-left: 10px;
    }

    .main-sidebar .sidebar-menu li a i {
        width: 28px;
        margin-right: 20px;
        text-align: center;
        color: var(--primary);
    }

    .main-sidebar .sidebar-menu li a .icon {
        font-size: 22px;
        line-height: 1;
    }

.sidebar-menu-caption {
    padding: 15px 28px 5px 0;
    text-transform: uppercase;
    font-weight: 600;
    color: #585858;
    font-size: 12px;
    border-top: 1px solid #e5e5e5;
}
    .main-sidebar .sidebar-menu li a i {
        transition: all 0.3s;
        font-size: 16px;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -ms-transition: all 0.3s;
        -o-transition: all 0.3s;
}

    .main-sidebar .sidebar-menu li > a:hover {
        background-color: var(--primary);
        color: #fff;
    }
    .main-sidebar .sidebar-menu li > a:hover i {
        color: #fff;
    }

    .main-sidebar .sidebar-menu > li.active > a {
        color: #fff;
        background-color: var(--primary);
    }
    .main-sidebar .sidebar-menu li.active > a i {
        color: #fff;
    }

    .main-sidebar .sidebar-menu li.active a.has-dropdown:after {
        transform: translate(0, -50%) rotate(90deg);
    }

    .main-sidebar .sidebar-menu li.active ul.dropdown-menu {
        background-color: rgba(255, 255, 255, 0.035);
    }

    .main-sidebar .sidebar-menu li a.has-dropdown:after {
        content: "";
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translate(0, -50%);
        font-size: 11px;
        transition: all .5s;
    }

    .main-sidebar .sidebar-menu li.active>ul.dropdown-menu li a:hover {
        background-color: transparent;
        color: var(--primary);
    }

    .main-sidebar .sidebar-menu li ul.dropdown-menu {
        padding: 0;
        margin: 0;
        display: none;
        position: static;
        float: none;
        width: 100%;
        box-shadow: none;
        background-color: transparent;
        border-radius: 0;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        -ms-border-radius: 0;
        -o-border-radius: 0;
}

    .main-sidebar .sidebar-menu li ul.dropdown-menu li a {
        color: #686868;
        height: 35px;
        padding-left: 42px;
        font-weight: 400;
    }

    .main-sidebar .sidebar-menu li ul.dropdown-menu li a:hover {
        color: var(--primary);
        background-color: inherit;
    }

    .main-sidebar .sidebar-menu li ul.dropdown-menu li.active>a {
        color: var(--primary);
        font-weight: 600;
    }

    .main-sidebar .sidebar-menu li ul.dropdown-menu li a i {
        margin-top: 1px;
        text-align: center;
    }

    .main-sidebar .sidebar-menu li ul.dropdown-menu li ul.dropdown-menu {
        padding-left: 10px;
    }

    .main-content {
        padding-left: 300px;
        padding-right: 30px;
        padding-top: 80px;
        width: 100%;
        position: relative;
        overflow: hidden;
    }

    .main-footer {
        padding: 20px 30px 20px 280px;
        margin-top: 40px;
        color: #98a6ad;
        border-top: 1px solid #e3eaef;
        display: inline-block;
        width: 100%;
    }

    .main-footer .footer-left {
        float: left;
    }

    .main-footer .footer-right {
        float: right;
    }

    .simple-footer {
        text-align: center;
        margin-top: 40px;
        margin-bottom: 40px;
    }

    body:not(.sidebar-mini) .sidebar-style-1 .sidebar-menu li.active a {
        background-color: var(--primary);
        color: #fff;
    }

    body:not(.sidebar-mini) .sidebar-style-1 .sidebar-menu li.active ul.dropdown-menu li a {
        color: #e8ebfd;
    }

    body:not(.sidebar-mini) .sidebar-style-1 .sidebar-menu li.active ul.dropdown-menu li a:hover {
        background-color: var(--primary);
        color: #fff;
    }

    body:not(.sidebar-mini) .sidebar-style-1 .sidebar-menu li.active ul.dropdown-menu li.active a {
        color: #fff;
    }

    body:not(.sidebar-mini) .sidebar-style-2 .sidebar-menu>li.active>a {
        padding-left: 16px;
        background-color: transparent;
        position: relative;
    }

    body:not(.sidebar-mini) .sidebar-style-2 .sidebar-menu>li.active>a:before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        height: 25px;
        width: 4px;
        background-color: var(--primary);
    }

    body:not(.sidebar-mini) .sidebar-style-2 .sidebar-menu li.active ul.dropdown-menu li a {
        padding-left: 61px;
        background-color: #fff;
    }

    @media (max-width: 1024px) {
        .sidebar-gone-hide {
            display: none !important;
        }
        .sidebar-gone-show {
            display: block !important;
        }
        .main-sidebar {
            position: fixed !important;
            margin-top: 0 !important;
            z-index: 891;
        }
        body.layout-2 .main-wrapper,
        body.layout-3 .main-wrapper {
            width: 100%;
            padding: 0;
            display: block;
        }
        .main-content {
            padding-left: 30px;
            padding-right: 30px;
            width: 100% !important;
        }
        .main-footer {
            padding-left: 30px;
        }
        body.search-show {
            overflow: hidden;
        }
        body.search-show .navbar {
            z-index: 892;
        }
        body.sidebar-show {
            overflow: hidden;
        }
        body.search-show:before,
        body.sidebar-show:before {
            content: '';
            position: fixed;
            left: 0;
            right: 0;
            width: 100%;
            height: 100%;
            background-color: #000;
            opacity: 0;
            z-index: 891;
            -webkit-animation-name: fadeinbackdrop;
            animation-name: fadeinbackdrop;
            -webkit-animation-duration: 1s;
            animation-duration: 1s;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }
        @-webkit-keyframes fadeinbackdrop {
            to {
                opacity: .6;
            }
        }
        @keyframes fadeinbackdrop {
            to {
                opacity: .6;
            }
        }
    }
    /* 4.5 Animation */

    .pulsate {
        -webkit-animation: pulsate 1s ease-out;
        animation: pulsate 1s ease-out;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        opacity: 1;
    }

    @-webkit-keyframes pulsate {
        0% {
            -webkit-transform: scale(0.1, 0.1);
            opacity: 0.0;
        }
        50% {
            opacity: 1.0;
        }
        100% {
            -webkit-transform: scale(1.2, 1.2);
            opacity: 0.0;
        }
    }
    /* Start:: Obaydullah style*/

    .height-wight {
        width: 150px;
        height: 42px !important;
        margin-left: 3px;
    }

    select[readonly] {
        background: #eee;
        pointer-events: none;
        touch-action: none;
    }
    /* End:: Obaydullah style*/
    /* For Table Border Top Css Start Here */

    .borderTop {
        border-top: 3px solid black;
    }
    /* For Table Border Top Css End Here */

    .btn-icon-remove{
        margin-top: 32px;
    }
.selectable{
    cursor: pointer;
}
.custom-height{
    min-height: 50vh;
}

.navbar .notification-toggle {
    position: relative;
}

.notification-badge{
    position: absolute;
    top: -5px;
    right: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    padding: 1px;
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    font-size: 11px;
}


.no-drop{
    cursor:context-menu !important;
}

@media screen and (max-width:575.98px) {
    .invest-report-card {
       
        width: 99%!important;
 
}

.all-users-table{
width: 320px!important;
}
}
.withdraw-row{
    margin-top: 47px;
}
.withdraw-all-row{
    margin-top: 47px;
}

.login-page {
    padding: 50px 0;
    min-height: 100vh;
    display: flex;
    flex-flow: column;
    justify-content: center;
}

.login-button {
    background-color: var(--primary);
    color: #fff;
    padding: 12px 30px;
    border: none;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.admin-login-wrapper {
    padding: 40px 30px;
    background-color: #fff;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

@media (max-width: 575px) {
    .admin-login-wrapper {
        padding: 30px 20px;
    }
}
.admin-login-wrapper .form-control {
    background-color: #fafafa;
}

.pt-8px {
    padding-top: 8px !important;
}

.connectedSortable .ui-state-highlight {
    cursor: pointer;
}


 .ranges {
    padding: 10px !important;
    margin-top: 10px !important;
}

.daterangepicker .ranges li.active{
    background-color: #625BF6 !important;
}

.daterangepicker .ranges li:hover{
    background-color: #f5f5f5 !important;
    color: #6777ee;
}

#overlay {
    position: fixed;
    top: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    display: none;
    background: rgba(0, 0, 0, 0.6);
}

.cv-spinner {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.spinner {
    width: 60px;
    height: 60px;
    border: 4px #ddd solid;
    border-top: 4px #068cfa solid;
    border-radius: 50%;
    animation: sp-anime 0.8s infinite linear;
}

@keyframes sp-anime {
    100% {
        transform: rotate(360deg);
    }
}

.is-hide {
    display: none;
}

.gjs-editor .gjs-frame #wrapper {
    background: #000;
}






/* =============================================
   SALON OVERRIDES (merged from salon.css)
   ============================================= */
/* =============================================
   SALON MANAGEMENT SYSTEM - ADMIN CSS
   ============================================= */


:root {
    --primary: #6d28d9;
}

/* ── Body & Page Background ── */
body { background-color: #f3f1fb !important; }
.main-content {
    background: #f3f1fb;
    min-height: 100vh;
}
section.section { padding-bottom: 32px; }

/* ── Top Navbar ── */
.main-navbar.navbar {
    background: #fff !important;
    border-bottom: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.06) !important;
    height: 70px;
}
.main-navbar .nav-link { color: #475569 !important; }
.main-navbar .nav-link:hover { color: #6d28d9 !important; }
.main-navbar .noti-icon { font-size: 22px; color: #64748b; }
.main-navbar .notification-badge {
    font-size: 9px; min-width: 16px; height: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 99px; padding: 0 4px;
}

/* ── Navbar component classes ── */
.nb-visit-link { font-size: 12px; letter-spacing: .2px; }
.nb-icon { font-size: 22px; color: #64748b; }

/* Quick-link text buttons */
.nb-quick-link {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 6px 14px !important;
    border-radius: 8px;
    border: 1.5px solid #e2e8f0;
    background: #fff;
    transition: background .13s, border-color .13s;
    line-height: 1;
}
.nb-quick-link:hover { background: #f5f3ff; border-color: #7c3aed; }
.nb-quick-label {
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    white-space: nowrap;
    transition: color .13s;
}
.nb-quick-link:hover .nb-quick-label { color: #7c3aed; }
.nb-quick-link-pos { border-color: #6ee7b7; background: #f0fdf4; }
.nb-quick-link-pos .nb-quick-label { color: #059669; }
.nb-quick-link-pos:hover { background: #dcfce7; border-color: #059669; }
.nb-quick-link-pos:hover .nb-quick-label { color: #047857; }
.nb-ticket-dropdown { min-width: 240px; }
.nb-ticket-avatar {
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.nb-ticket-time { font-size: 11px; }
.nb-noti-dropdown { min-width: 300px; }
.nb-mark-read { font-size: 11px; }
.nb-noti-list { max-height: 320px; overflow-y: auto; }
.nb-noti-avatar { width: 32px; height: 32px; font-size: 13px; flex-shrink: 0; }
.nb-noti-time { font-size: 11px; }
.nb-noti-empty-icon { font-size: 28px; display: block; margin-bottom: 6px; }
.nb-noti-empty-text { font-size: 12px; }
.nb-lang-select { min-width: 90px; font-size: 12px; border-color: #e2e8f0; }
.nb-user-avatar {
    width: 34px; height: 34px; font-size: 13px;
    box-shadow: 0 2px 8px rgba(109,40,217,.3);
}

/* ── Visit Frontend button ── */
.main-navbar .bg-primary {
    background: linear-gradient(135deg, #7c3aed, #6d28d9) !important;
    border-radius: 10px !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .2px;
    box-shadow: 0 3px 10px rgba(109,40,217,.3) !important;
    transition: filter .15s !important;
}
.main-navbar .bg-primary:hover { filter: brightness(1.08); }

/* ── Dark Indigo Sidebar ── */
.main-sidebar,
#sidebar-wrapper {
    background: linear-gradient(180deg, #1e1b4b 0%, #16133e 100%) !important;
    border-right: none !important;
    box-shadow: 4px 0 20px rgba(0,0,0,.22) !important;
}
.main-sidebar .sidebar-brand {
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: transparent !important;
}
.main-sidebar .sidebar-brand a { color: #c4b5fd !important; }

.main-sidebar .sidebar-menu li.menu-header {
    color: #a78bfa !important;
    font-size: 10px !important;
    letter-spacing: 1.2px !important;
    font-weight: 700 !important;
    opacity: .65;
    display: block !important;
    padding: 14px 15px 4px !important;
}
.main-sidebar .sidebar-menu li.menu-header:first-child { padding-top: 10px !important; }

.main-sidebar .sidebar-menu li a {
    color: rgba(255,255,255,.7) !important;
    border-radius: 10px !important;
    margin-bottom: 1px;
    transition: background .15s, color .15s !important;
}
.main-sidebar .sidebar-menu li a .icon {
    color: #a78bfa !important;
    font-size: 20px !important;
    transition: color .15s;
}
.main-sidebar .sidebar-menu li a i { color: #a78bfa !important; }

.main-sidebar .sidebar-menu li > a:hover {
    background: rgba(124,58,237,.28) !important;
    color: #fff !important;
}
.main-sidebar .sidebar-menu li > a:hover .icon,
.main-sidebar .sidebar-menu li > a:hover i { color: #c4b5fd !important; }

.main-sidebar .sidebar-menu > li.active > a {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important;
    color: #fff !important;
    box-shadow: 0 3px 12px rgba(109,40,217,.4) !important;
}
.main-sidebar .sidebar-menu li.active > a .icon,
.main-sidebar .sidebar-menu li.active > a i { color: #fff !important; }

/* sidebar submenu active parent — keep parent highlight subtle */
.main-sidebar .sidebar-menu > li.active > a,
.main-sidebar .sidebar-menu > li.dropdown.active > a {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important;
    color: #fff !important;
    box-shadow: 0 3px 12px rgba(109,40,217,.4) !important;
}

/* Sidebar scrollbar */
#sidebar-wrapper::-webkit-scrollbar { width: 4px; }
#sidebar-wrapper::-webkit-scrollbar-track { background: transparent; }
#sidebar-wrapper::-webkit-scrollbar-thumb { background: rgba(167,139,250,.3); border-radius: 4px; }

/* ── Cards — light clean white ── */
.card {
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 6px rgba(0,0,0,.05) !important;
}
.card .card-header {
    border-bottom: 1.5px solid #f1f5f9 !important;
    background: #fff !important;
    border-radius: 14px 14px 0 0 !important;
    font-weight: 700;
}

/* ── Buttons ── */
.btn-primary {
    background: linear-gradient(135deg, #7c3aed, #6d28d9) !important;
    border-color: #6d28d9 !important;
    box-shadow: 0 2px 8px rgba(109,40,217,.3) !important;
    font-weight: 600;
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-outline-primary {
    color: #6d28d9 !important;
    border-color: #6d28d9 !important;
}
.btn-outline-primary:hover {
    background: #6d28d9 !important;
    color: #fff !important;
}

/* ── Badges ── */
.badge.bg-primary { background: #6d28d9 !important; }
.badge.bg-success { background: #059669 !important; }
.badge.bg-danger  { background: #dc2626 !important; }
.badge.bg-warning { background: #d97706 !important; color: #fff !important; }
.badge.bg-info    { background: #0891b2 !important; }

/* ── Section headers ── */
.section-header h1 { color: #1e293b; font-weight: 800; }
.section-header-breadcrumb .breadcrumb-item a { color: #6d28d9; }
.breadcrumb-item.active { color: #64748b; }

/* ── Form controls ── */
.form-control:focus, .form-select:focus {
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 3px rgba(124,58,237,.12) !important;
}

/* ── Tables ── */
.table thead th {
    background: #f8fafc;
    color: #64748b;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 700;
    border-bottom: 2px solid #e2e8f0 !important;
}
.table tbody tr:hover td { background: #f5f3ff; }

/* ── Pagination ── */
.page-item.active .page-link {
    background: #6d28d9 !important;
    border-color: #6d28d9 !important;
}
.page-link { color: #6d28d9 !important; }
.page-link:hover { background: #ede9fe !important; border-color: #ede9fe !important; }

/* ── Dropdown menus (navbar only — NOT sidebar) ── */
.main-navbar .dropdown-menu,
.noti-dropdown-menu {
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.1) !important;
}
.dropdown-item:hover, .dropdown-item:focus { background: #f5f3ff !important; color: #6d28d9 !important; }
.dropdown-header { color: #94a3b8 !important; font-size: 10px !important; text-transform: uppercase !important; letter-spacing: .8px !important; font-weight: 700 !important; }

/* ── Sidebar submenu — fully reset (undo any dropdown-menu bleed) ── */
.main-sidebar .sidebar-menu ul.dropdown-menu {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 2px 0 4px 0 !important;
    margin: 0 !important;
    position: static !important;
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
}
.main-sidebar .sidebar-menu ul.dropdown-menu.show,
.main-sidebar .sidebar-menu ul.dropdown-menu.collapse.show {
    display: block !important;
}
.main-sidebar .sidebar-menu ul.dropdown-menu li {
    margin: 0 8px !important;
}
.main-sidebar .sidebar-menu ul.dropdown-menu li a.nav-link {
    color: rgba(255,255,255,.6) !important;
    font-size: 13px !important;
    padding: 7px 12px 7px 32px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    transition: background .15s, color .15s !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.main-sidebar .sidebar-menu ul.dropdown-menu li a.nav-link::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(167,139,250,.5);
    transition: background .15s;
}
.main-sidebar .sidebar-menu ul.dropdown-menu li a.nav-link:hover {
    background: rgba(124,58,237,.25) !important;
    color: #e9d5ff !important;
}
.main-sidebar .sidebar-menu ul.dropdown-menu li a.nav-link:hover::before {
    background: #c4b5fd;
}
.main-sidebar .sidebar-menu ul.dropdown-menu li.active a.nav-link,
.main-sidebar .sidebar-menu ul.dropdown-menu li a.nav-link.active {
    background: rgba(124,58,237,.3) !important;
    color: #c4b5fd !important;
}
.main-sidebar .sidebar-menu ul.dropdown-menu li.active a.nav-link::before,
.main-sidebar .sidebar-menu ul.dropdown-menu li a.nav-link.active::before {
    background: #a78bfa;
}

/* ── Alerts ── */
.alert-primary { background: #ede9fe; border-color: #c4b5fd; color: #4c1d95; }

/* ── Mini sidebar body ── */
body.sidebar-mini .main-sidebar:after { background: linear-gradient(180deg, #1e1b4b 0%, #16133e 100%) !important; }

/* ---------- Common Salon Layout ---------- */
.salon-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.salon-page-header h4 {
    margin: 0;
    font-weight: 600;
}

/* ---------- Salon Stats Cards ---------- */
.salon-stat-card {
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid rgba(0,0,0,.07);
    transition: box-shadow .2s;
}

.salon-stat-card:hover {
    box-shadow: 0 4px 18px rgba(0,0,0,.1);
}

.salon-stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.salon-stat-info .value {
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}

.salon-stat-info .label {
    font-size: 13px;
    margin-top: 4px;
    opacity: .7;
}

/* ---------- Status Badges ---------- */
.badge-pending    { background: #f39c12; color: #fff; }
.badge-confirmed  { background: #3498db; color: #fff; }
.badge-serving    { background: #9b59b6; color: #fff; }
.badge-confirmed  { background: #3498db; color: #fff; }
.badge-serving    { background: #9b59b6; color: #fff; }
.badge-completed  { background: #27ae60; color: #fff; }
.badge-cancelled  { background: #e74c3c; color: #fff; }
.badge-active     { background: #27ae60; color: #fff; }
.badge-inactive   { background: #95a5a6; color: #fff; }
.badge-paid       { background: #27ae60; color: #fff; }
.badge-open       { background: #3498db; color: #fff; }
.badge-void       { background: #e74c3c; color: #fff; }
.badge-due        { background: #f39c12; color: #fff; }
.badge-pending    { background: #95a5a6; color: #fff; }

/* ---------- Salon Table ---------- */
.salon-table thead th {
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .4px;
    border-bottom: 2px solid rgba(0,0,0,.08);
}

/* ---------- Staff Color Dot ---------- */
.staff-color-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
}

/* ---------- Avatar / Image thumb ---------- */
.salon-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.salon-avatar-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #adb5bd;
}

/* ---------- POS Layout ---------- */
.pos-wrapper {
    display: flex;
    gap: 16px;
    height: calc(100vh - 120px);
}

.pos-left {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
}

.pos-right {
    width: 360px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Category tabs */
.pos-category-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding-bottom: 4px;
}

.pos-category-tab {
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid #dee2e6;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, color .15s;
    background: #fff;
    color: #495057;
}

.pos-category-tab.active,
.pos-category-tab:hover {
    background: #3cd2a5;
    color: #fff;
    border-color: #3cd2a5;
}

/* Service cards grid */
.pos-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    overflow-y: auto;
    padding-right: 4px;
    flex: 1 1 0;
}

.pos-service-card {
    border: 1px solid #dee2e6;
    border-radius: 10px;
    padding: 12px;
    cursor: pointer;
    text-align: center;
    transition: border-color .15s, box-shadow .15s;
    background: #fff;
}

.pos-service-card:hover {
    border-color: #3cd2a5;
    box-shadow: 0 2px 10px rgba(60,210,165,.2);
}

.pos-service-card .svc-name {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}

.pos-service-card .svc-price {
    font-size: 15px;
    font-weight: 700;
    color: #3cd2a5;
}

.pos-service-card .svc-duration {
    font-size: 11px;
    color: #adb5bd;
    margin-top: 2px;
}

/* POS Cart */
.pos-cart {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    overflow: hidden;
}

.pos-cart-header {
    padding: 12px 16px;
    border-bottom: 1px solid #dee2e6;
    font-weight: 600;
    font-size: 14px;
}

.pos-cart-items {
    flex: 1 1 0;
    overflow-y: auto;
    padding: 8px;
}

.pos-cart-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid #f0f0f0;
    margin-bottom: 6px;
}

.pos-cart-item .item-name {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
}

.pos-cart-item .item-price {
    font-size: 13px;
    font-weight: 600;
    color: #3cd2a5;
}

.pos-cart-item .btn-remove-item {
    border: none;
    background: none;
    color: #e74c3c;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    padding: 0 2px;
}

/* POS Totals */
.pos-totals {
    padding: 12px 16px;
    border-top: 1px solid #dee2e6;
}

.pos-total-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 6px;
    color: #6c757d;
}

.pos-total-row.grand {
    font-size: 16px;
    font-weight: 700;
    color: #212529;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #dee2e6;
}

/* POS Payment buttons */
.pos-payment-methods {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 12px 16px;
}

.pos-pay-btn {
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    text-align: center;
    transition: background .15s, color .15s;
    background: #f8f9fa;
    color: #495057;
}

.pos-pay-btn.active,
.pos-pay-btn:hover {
    background: #3cd2a5;
    color: #fff;
    border-color: #3cd2a5;
}

.pos-charge-btn {
    width: 100%;
    padding: 14px;
    background: #3cd2a5;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s;
    margin: 0 16px 16px;
    box-sizing: border-box;
}

.pos-charge-btn:hover {
    background: #2dbb8f;
}

/* ---------- Appointment Calendar ---------- */
.appt-calendar-wrapper {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    overflow: hidden;
}

/* Staff row header */
.appt-staff-header {
    display: flex;
    border-bottom: 1px solid #dee2e6;
    position: sticky;
    top: 0;
    background: #f8f9fa;
    z-index: 2;
}

.appt-time-col {
    width: 60px;
    flex-shrink: 0;
    border-right: 1px solid #dee2e6;
}

.appt-staff-col {
    flex: 1;
    padding: 10px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    border-right: 1px solid #dee2e6;
}

/* Time slots */
.appt-grid {
    display: flex;
    overflow-x: auto;
}

.appt-time-labels {
    width: 60px;
    flex-shrink: 0;
}

.appt-time-slot {
    height: 48px;
    border-bottom: 1px solid #f0f0f0;
    border-right: 1px solid #dee2e6;
    font-size: 11px;
    color: #adb5bd;
    padding: 2px 4px;
    display: flex;
    align-items: flex-start;
}

.appt-columns {
    flex: 1;
    display: flex;
}

.appt-column {
    flex: 1;
    border-right: 1px solid #dee2e6;
    position: relative;
}

.appt-cell {
    height: 48px;
    border-bottom: 1px solid #f0f0f0;
}

.appt-block {
    position: absolute;
    left: 2px;
    right: 2px;
    border-radius: 6px;
    padding: 4px 6px;
    font-size: 11px;
    font-weight: 500;
    color: #fff;
    overflow: hidden;
    cursor: pointer;
    z-index: 1;
}

/* ---------- Client Search Dropdown ---------- */
.client-search-wrapper {
    position: relative;
}

.client-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,.1);
    z-index: 100;
    max-height: 220px;
    overflow-y: auto;
    display: none;
}

.client-search-results.show {
    display: block;
}

.client-result-item {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 13px;
    border-bottom: 1px solid #f1f5f9;
    transition: background .1s;
    color: #1e293b;
}

.client-result-item:last-child {
    border-bottom: none;
}

.client-result-item:hover {
    background: #f5f3ff;
}

.client-result-item .client-name {
    font-weight: 700;
    color: #1e293b;
}

.client-result-item .client-phone {
    font-size: 11px;
    color: #94a3b8;
}

/* ---------- Coupon badge ---------- */
.coupon-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .5px;
    border: 1px dashed currentColor;
}

/* ---------- Reward points ---------- */
.reward-badge {
    background: #fff3cd;
    color: #856404;
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
}

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
    .pos-wrapper {
        flex-direction: column;
        height: auto;
    }

    .pos-right {
        width: 100%;
    }
}

/* =============================================
   NIRSALON — PROFESSIONAL 3-PANEL POS
   ============================================= */

.pos-page {
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 70px !important;
    overflow: hidden !important;
    height: 100vh !important;
    max-height: 100vh !important;
}
.pos-page .pos-topnav,
.pos-page .cal-page { margin-top: 0; }

/* ── Top Navigation Bar ── */
/* ── Top Navigation Bar ── */
.pos-topnav {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
    color: #fff;
    padding: 0 20px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    gap: 16px;
    flex-shrink: 0;
    box-shadow: 0 2px 12px rgba(30,27,75,.4);
}

.pos-topnav-brand {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: .8px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #c4b5fd;
}
.pos-topnav-brand i { font-size: 18px; }
.pos-topnav-brand span { color: #fff; }

.pos-topnav-tabs {
    display: flex;
    gap: 4px;
    height: 100%;
    align-items: stretch;
}

.pos-topnav-tab {
    color: rgba(255,255,255,.6);
    text-decoration: none;
    padding: 0 18px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 3px solid transparent;
    transition: color .15s, border-color .15s;
    white-space: nowrap;
    letter-spacing: .3px;
}

.pos-topnav-tab:hover { color: rgba(255,255,255,.9); }

.pos-topnav-tab.active {
    color: #fff;
    border-bottom-color: #a78bfa;
}

.pos-topnav-info {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    font-size: 12px;
    color: rgba(255,255,255,.7);
}

.pos-topnav-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .6px;
    opacity: .6;
}

.pos-topnav-val {
    font-weight: 700;
    color: #e0e7ff;
}

.pos-topnav-orders-link {
    color: #c4b5fd;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 13px;
    border: 1.5px solid rgba(167,139,250,.5);
    border-radius: 20px;
    transition: background .15s, border-color .15s;
    margin-left: 8px;
}

.pos-topnav-orders-link:hover {
    background: rgba(167,139,250,.2);
    border-color: #a78bfa;
    color: #fff;
}

/* ── 3-panel wrapper ── */
.pos3-wrapper {
    display: flex;
    height: calc(100vh - 70px - 52px);
    overflow: hidden;
    background: #eef1f7;
    gap: 0;
}


.pos3-left {
    width: 370px;
    flex-shrink: 0;
    background: #fff;
    border-right: 1.5px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pos3-cart-header {
    display: flex;
    align-items: center;
    background: #f8fafc;
    border-bottom: 1.5px solid #e2e8f0;
    padding: 7px 10px;
    font-size: 10px;
    font-weight: 800;
    color: #94a3b8;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.pos3-col-tech   { width: 116px; flex-shrink: 0; display: flex; align-items: center; gap: 3px; }
.pos3-col-rq     { width: 26px; flex-shrink: 0; text-align: center; }
.pos3-col-serve  { flex: 1; padding: 0 4px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos3-col-dur    { width: 34px; flex-shrink: 0; text-align: center; font-size: 11px; }
.pos3-col-price  { width: 60px; flex-shrink: 0; text-align: right; }
.pos3-col-status { width: 32px; flex-shrink: 0; text-align: center; }

/* Client row */
.pos3-client-row {
    padding: 9px 12px;
    border-bottom: 1.5px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fafaff;
}

/* Search inner wrapper — bordered input with icon */
.pos3-client-search-inner {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    padding: 0 10px;
    background: #f8fafc;
    height: 34px;
    transition: border-color .15s, background .15s;
}
.pos3-client-search-inner:focus-within {
    border-color: #7c3aed;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(124,58,237,.1);
}
.pos3-search-icon { font-size: 12px; color: #94a3b8; flex-shrink: 0; }

.pos3-client-input {
    border: none;
    background: transparent;
    font-size: 12px;
    font-weight: 500;
    color: #1e293b;
    outline: none;
    flex: 1;
    min-width: 0;
    letter-spacing: .2px;
}
.pos3-client-input::placeholder { color: #94a3b8; font-weight: 400; }

/* Selected client card */
.pos3-client-card {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f5f3ff;
    border: 1.5px solid #c4b5fd;
    border-radius: 8px;
    padding: 5px 8px;
    min-width: 0;
}
.pos3-client-avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 800;
    flex-shrink: 0;
}
.pos3-client-info { flex: 1; min-width: 0; }
.pos3-client-name-lbl {
    font-size: 12px; font-weight: 700; color: #3730a3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pos3-client-sub-lbl {
    font-size: 10px; color: #7c3aed;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pos3-client-clear {
    background: none; border: none; color: #7c3aed;
    cursor: pointer; padding: 2px 4px; border-radius: 4px;
    font-size: 13px; line-height: 1; flex-shrink: 0;
    transition: background .1s;
}
.pos3-client-clear:hover { background: #ddd6fe; }

/* New customer button */
.pos3-new-client-btn {
    width: 34px; height: 34px;
    border-radius: 8px;
    background: linear-gradient(135deg, #6d28d9, #7c3aed);
    color: #fff; border: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px; cursor: pointer; flex-shrink: 0;
    transition: filter .15s;
    box-shadow: 0 2px 6px rgba(109,40,217,.3);
}
.pos3-new-client-btn:hover { filter: brightness(1.12); }

/* Cart items list */
.pos3-items {
    flex: 1 1 0;
    overflow-y: auto;
    padding: 2px 0;
}

.pos3-empty {
    text-align: center;
    color: #cbd5e1;
    padding: 50px 20px;
    font-size: 13px;
}

.pos3-empty i {
    font-size: 42px;
    display: block;
    margin-bottom: 10px;
    opacity: .5;
}

/* Cart item row */
.pos3-item-row {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 12px;
    transition: background .1s;
}

.pos3-item-row:hover { background: #fafafa; }

.pos3-remove-btn {
    background: none;
    border: 1.5px solid #fca5a5;
    color: #ef4444;
    border-radius: 5px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    font-size: 11px;
    margin-right: 4px;
    transition: background .12s, border-color .12s;
}

.pos3-remove-btn:hover { background: #fef2f2; border-color: #ef4444; }

.pos3-tech-name { font-size: 11px; font-weight: 600; color: #475569; }

.pos3-status-btn { background: none; border: none; cursor: pointer; padding: 0; }

/* Totals */
.pos3-totals {
    background: #f8fafc;
    border-top: 2px solid #e2e8f0;
    padding: 8px 14px 6px;
}

.pos3-tot-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    padding: 3px 0;
    color: #475569;
}

.pos3-tot-deduct { color: #f59e0b; font-weight: 600; }

.pos3-tot-divider {
    border-top: 1.5px solid #e2e8f0;
    margin: 6px 0;
}

.pos3-tot-total {
    font-size: 15px;
    font-weight: 800;
    color: #1e293b;
    letter-spacing: -.2px;
}

/* ── Bottom Action Bar ── */
.pos3-action-bar {
    display: flex;
    gap: 8px;
    padding: 10px 10px 14px;
    background: #fff;
    border-top: 2.5px solid #e8ecf4;
    flex-shrink: 0;
    box-shadow: 0 -4px 18px rgba(0,0,0,.07);
}

.pos3-btn-ab {
    flex: 1;
    border: none;
    border-radius: 16px;
    padding: 16px 6px 14px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    transition: all .15s;
    line-height: 1;
    letter-spacing: .7px;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
}
.pos3-btn-ab::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.18) 0%, transparent 55%);
    pointer-events: none;
}

.pos3-btn-ab-icon { font-size: 28px; line-height: 1; }
.pos3-btn-ab span { font-size: 11px; letter-spacing: .8px; font-weight: 800; }
.pos3-btn-ab:disabled { opacity: .35; cursor: not-allowed; }
.pos3-btn-ab:not(:disabled):hover { filter: brightness(1.08); transform: translateY(-2px); }
.pos3-btn-ab:not(:disabled):active { transform: scale(.95); }

.pos3-btn-discount {
    background: linear-gradient(145deg, #fbbf24 0%, #f59e0b 100%);
    color: #78350f;
    box-shadow: 0 5px 14px rgba(245,158,11,.35);
}
.pos3-btn-save {
    background: linear-gradient(145deg, #3b82f6 0%, #1d4ed8 100%);
    color: #fff;
    box-shadow: 0 5px 14px rgba(59,130,246,.35);
}
.pos3-btn-qcash {
    background: linear-gradient(145deg, #10b981 0%, #047857 100%);
    color: #fff;
    box-shadow: 0 5px 14px rgba(16,185,129,.35);
}
.pos3-btn-paybill {
    background: linear-gradient(145deg, #8b5cf6 0%, #6d28d9 100%);
    color: #fff;
    box-shadow: 0 6px 18px rgba(109,40,217,.45);
}


.pos3-middle {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #eef1f7;
}

/* Service & product view panels — must flex so inner grid scrolls */
#posPanelServices,
#posPanelProducts {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.pos3-cats-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
    color: #94a3b8;
    padding: 10px 14px 4px;
    text-transform: uppercase;
}

/* Special open-item / extra row */
.pos3-special-row {
    display: flex;
    gap: 10px;
    padding: 0 14px 10px;
}

.pos3-special-btn {
    flex: 1;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 4px;
    font-size: 10px;
    font-weight: 800;
    gap: 5px;
    cursor: pointer;
    color: #64748b;
    letter-spacing: .6px;
    text-transform: uppercase;
    transition: border-color .15s, color .15s, box-shadow .15s;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}

.pos3-special-btn:hover {
    border-color: #a78bfa;
    color: #6d28d9;
    box-shadow: 0 2px 8px rgba(109,40,217,.15);
}
.pos3-special-btn i { font-size: 20px; }

/* Category scroll */
.pos3-cat-scroll {
    display: flex;
    gap: 8px;
    padding: 10px 14px 12px;
    overflow-x: auto;
    flex-shrink: 0;
    scrollbar-width: none;
}
.pos3-cat-scroll::-webkit-scrollbar { display: none; }

/* Category tile — luxury large button */
.pos3-cat-tile {
    flex: 1 1 0;
    min-width: 80px;
    height: 50px;
    background: #f1f5f9;
    border: 2px solid transparent;
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    gap: 7px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 800;
    color: #64748b;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    transition: all .18s;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.pos3-cat-tile::before { content: none; }

.pos3-cat-tile::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.18) 0%, transparent 60%);
    pointer-events: none;
}

.pos3-cat-tile:hover {
    background: var(--cat-color, #6d28d9);
    color: #fff;
    border-color: var(--cat-color, #6d28d9);
    box-shadow: 0 6px 20px rgba(0,0,0,.18);
    transform: translateY(-1px);
}

.pos3-cat-tile i { font-size: 16px; color: var(--cat-color, #6d28d9); }
.pos3-cat-tile:hover i { color: #fff; }

.pos3-cat-tile.active {
    background: var(--cat-color, #6d28d9);
    color: #fff;
    border-color: var(--cat-color, #6d28d9);
    box-shadow: 0 6px 22px rgba(0,0,0,.22);
    transform: translateY(-1px);
}

.pos3-cat-tile.active::before { content: none; }
.pos3-cat-tile.active i { color: #fff; }

/* Category tile image */
.pos3-cat-tile-img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
    border-radius: 4px;
    opacity: .75;
}
.pos3-cat-tile.active .pos3-cat-tile-img { filter: brightness(0) invert(1); opacity: 1; }
.pos3-cat-tile:hover .pos3-cat-tile-img { filter: brightness(0) invert(1); opacity: 1; }
/* Hide old pcat-icon block */
.pos3-cat-tile .pos3-pcat-icon { display: none; }
/* Product category icon in pill */
.pos3-pcat-icon-bs { font-size: 14px; flex-shrink: 0; line-height: 1; }
.pos3-cat-tile.active .pos3-pcat-icon-bs { color: #fff !important; }


#pos3ProdCatScroll {
    display: flex;
    gap: 8px;
    padding: 10px 14px 12px;
    overflow-x: auto;
    flex-shrink: 0;
    scrollbar-width: none;
}
#pos3ProdCatScroll::-webkit-scrollbar { display: none; }

#pos3ProdCatScroll .pos3-cat-tile {
    flex: 1 1 0;
    min-width: 90px;
    height: 50px;
    border-radius: 10px;
    border: 2px solid transparent;
    background: #f1f5f9;
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 14px;
    cursor: pointer;
    transition: all .18s;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    position: relative;
    overflow: hidden;
}

#pos3ProdCatScroll .pos3-cat-tile::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.18) 0%, transparent 60%);
    pointer-events: none;
}

#pos3ProdCatScroll .pos3-cat-tile:hover {
    background: var(--cat-color, #6d28d9);
    color: #fff;
    border-color: var(--cat-color, #6d28d9);
    box-shadow: 0 6px 20px rgba(0,0,0,.18);
    transform: translateY(-1px);
}

#pos3ProdCatScroll .pos3-cat-tile.active {
    background: var(--cat-color, #6d28d9);
    color: #fff;
    border-color: var(--cat-color, #6d28d9);
    box-shadow: 0 6px 22px rgba(0,0,0,.22);
    transform: translateY(-1px);
}

#pos3ProdCatScroll .pos3-cat-tile.active .pos3-pcat-icon-bs,
#pos3ProdCatScroll .pos3-cat-tile:hover .pos3-pcat-icon-bs { color: #fff !important; }

#pos3ProdCatScroll .pos3-cat-tile .pos3-pcat-icon-bs {
    font-size: 16px;
    color: var(--cat-color, #6d28d9);
}

#pos3ProdCatScroll .pos3-cat-tile-img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: none;
    opacity: .7;
}
#pos3ProdCatScroll .pos3-cat-tile.active .pos3-cat-tile-img { filter: brightness(0) invert(1); opacity: 1; }

/* Services grid — 4 cols on 1366px, 6 cols on 1920px */
.pos3-svc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-content: start;
    gap: 10px;
    padding: 8px 14px 14px;
    overflow-y: auto;
    flex: 1 1 0;
    min-height: 0;
}

/* ── Service tile — professional centered card ── */
.pos3-svc-tile {
    background: #fff;
    border: 1.5px solid #eaecf2;
    border-radius: 14px;
    padding: 0;
    overflow: hidden;
    text-align: center;
    cursor: pointer;
    transition: transform .13s, box-shadow .13s, border-color .13s;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    display: flex;
    flex-direction: column;
    position: relative;
    height: 150px;
}

/* Top color accent bar */
.pos3-svc-tile::before {
    content: '';
    display: block;
    height: 4px;
    background: var(--cat-color, #6d28d9);
    flex-shrink: 0;
    border-radius: 14px 14px 0 0;
}

.pos3-svc-tile:hover {
    transform: translateY(-3px);
    border-color: var(--cat-color, #a78bfa);
    box-shadow: 0 8px 24px rgba(0,0,0,.13);
}
.pos3-svc-tile:active { transform: translateY(-1px); }

/* Icon circle background area */
.pos3-svc-icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px 6px;
}
.pos3-svc-icon-circle .pos3-cat-tile-img {
    width: 46px;
    height: 46px;
    object-fit: contain;
    display: block;
    border-radius: 50%;
    background: #f3f0ff;
    padding: 6px;
    box-shadow: 0 2px 8px rgba(109,40,217,.10);
}

/* Body: name + price + duration */
.pos3-svc-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px 10px 8px;
    flex: 1;
    gap: 3px;
    border-top: 1px solid #f0f2f7;
}

.pos3-svc-name {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    color: #1e293b;
    word-break: break-word;
    letter-spacing: 0;
}

.pos3-svc-price {
    font-size: 13px;
    font-weight: 800;
    color: var(--cat-color, #6d28d9);
    letter-spacing: -.2px;
    background: #f8f6ff;
    padding: 2px 10px;
    border-radius: 20px;
    margin-top: 2px;
}

.pos3-svc-dur {
    font-size: 10px;
    color: #94a3b8;
    font-weight: 500;
    letter-spacing: .2px;
}

/* Product image in tile (actual photo) */
.pos3-prod-img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}


.pos3-right {
    width: 275px;
    flex-shrink: 0;
    background: #fff;
    border-left: 1.5px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* Amount Due + Outstanding */
.pos3-amount-row {
    display: flex;
    gap: 6px;
    padding: 10px 10px 6px;
}

.pos3-amount-due {
    flex: 1;
    background: #f1f5f9;
    border-radius: 12px;
    padding: 10px 8px;
    text-align: center;
    border: 1.5px solid #e2e8f0;
}

.pos3-outstanding {
    flex: 1;
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    border-radius: 12px;
    padding: 10px 8px;
    text-align: center;
    color: #fff;
    box-shadow: 0 3px 10px rgba(109,40,217,.35);
}

.pos3-amount-label {
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: .65;
    line-height: 1;
    margin-bottom: 3px;
}

.pos3-amount-val {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.5px;
}

/* Payment method grid — 3×2 */
.pos3-pay-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    padding: 8px 10px 10px;
}

.pos3-pay-method {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 14px 4px 12px;
    border-radius: 14px;
    font-size: 9.5px;
    font-weight: 800;
    text-align: center;
    cursor: pointer;
    border: 2.5px solid transparent;
    transition: all .18s;
    color: #fff;
    opacity: .5;
    letter-spacing: .5px;
    text-transform: uppercase;
    user-select: none;
    position: relative;
    overflow: hidden;
}

.pos3-pay-method::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(255,255,255,.18) 0%, transparent 55%);
    pointer-events: none;
}

.pos3-pay-icon {
    font-size: 22px;
    line-height: 1;
}

.pos3-pay-method span {
    font-size: 9.5px;
    font-weight: 900;
    letter-spacing: .6px;
}

.pos3-pay-method.active {
    opacity: 1;
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 6px 18px rgba(0,0,0,.30);
    border-color: rgba(255,255,255,.55);
}

.pos3-pay-method:not(.active):hover {
    opacity: .75;
    transform: translateY(-1px);
}

.pos3-pay-method.credit   { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
.pos3-pay-method.debit    { background: linear-gradient(135deg, #7c3aed, #6d28d9); }
.pos3-pay-method.cash     { background: linear-gradient(135deg, #059669, #047857); }
.pos3-pay-method.check    { background: linear-gradient(135deg, #0891b2, #0e7490); }
.pos3-pay-method.giftcard { background: linear-gradient(135deg, #d97706, #b45309); }
.pos3-pay-method.others   { background: linear-gradient(135deg, #6366f1, #4f46e5); }

/* --- Finalize Sale style POS modals --- */
.pos3-fin-modal .modal-content{border:none;border-radius:14px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.18)}
.pos3-fin-dialog{max-width:580px}
.pos3-fin-header{background:#fff;border-bottom:1px solid #e5e7eb;padding:16px 20px}
.pos3-fin-title{font-size:17px;font-weight:700;color:#111827;margin:0}
.pos3-fin-left{flex:1;padding:20px;min-width:0}
.pos3-fin-right{width:150px;flex-shrink:0;background:#0d9488;color:#fff;padding:20px 14px;display:flex;flex-direction:column;gap:22px}
.pos3-fin-rl{font-size:10px;font-weight:700;letter-spacing:.8px;opacity:.75;text-transform:uppercase;margin-bottom:3px}
.pos3-fin-rv{font-size:22px;font-weight:900;line-height:1.1;letter-spacing:-.5px}
.pos3-fin-label{display:block;font-size:12px;font-weight:600;color:#374151;margin-bottom:5px}
.pos3-fin-opt{font-size:11px;font-weight:400;color:#9ca3af}
.pos3-fin-input{width:100%;border:1px solid #d1d5db;border-radius:8px;padding:9px 12px;font-size:14px;font-weight:500;color:#111827;background:#fff;outline:none;transition:border-color .15s,box-shadow .15s;box-sizing:border-box;display:block}
.pos3-fin-input:focus{border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.1)}
select.pos3-fin-input{cursor:pointer}
.pos3-fin-input-xl{font-size:28px;font-weight:900;padding:10px 14px;letter-spacing:-.5px}
.pos3-fin-textarea{resize:none}
.pos3-fin-hint{font-size:13px;color:#6b7280;margin-bottom:12px;padding:10px 14px;background:#f9fafb;border-radius:8px;border:1px solid #e5e7eb}
.pos3-fin-qbtns{display:flex;gap:6px;flex-wrap:wrap}
.pos3-qcash{flex:1;min-width:52px;padding:7px 4px;border:1px solid #d1d5db;border-radius:7px;background:#f9fafb;font-size:12px;font-weight:700;color:#374151;cursor:pointer;transition:all .12s}
.pos3-qcash:hover{border-color:#6366f1;color:#6366f1;background:#eef2ff}
.pos3-fin-igrp{display:flex;gap:8px}
.pos3-fin-igrp .pos3-fin-input{flex:1}
.pos3-fin-verify-btn{padding:0 16px;border:1px solid #d97706;border-radius:8px;background:#fffbeb;color:#92400e;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}
.pos3-fin-verify-btn:hover{background:#fef3c7}
.pos3-fin-badge-ok{padding:8px 12px;background:#d1fae5;border-radius:8px;color:#065f46;font-size:13px;font-weight:600}
.pos3-fin-badge-err{padding:8px 12px;background:#fee2e2;border-radius:8px;color:#991b1b;font-size:12px;font-weight:600}
.pos3-fin-toggle-row{display:flex;gap:6px;margin-bottom:4px}
.pos3-fin-tog{flex:1;padding:8px;border:1px solid #d1d5db;border-radius:8px;background:#f9fafb;font-size:12px;font-weight:700;color:#6b7280;cursor:pointer;transition:all .12s}
.pos3-fin-tog.active{border-color:#f59e0b;background:#fffbeb;color:#92400e}
.pos3-fin-pfx-wrap{position:relative;display:flex;align-items:center}
.pos3-fin-pfx{position:absolute;left:12px;font-size:18px;font-weight:700;color:#9ca3af;pointer-events:none}
.pos3-fin-sfx{position:absolute;right:12px;font-size:18px;font-weight:700;color:#9ca3af;pointer-events:none}
.pos3-fin-pfx-wrap .pos3-fin-input{flex:1;padding-left:28px}
.pos3-fin-success-wrap{text-align:center;padding:20px 10px}
.pos3-fin-success-icon{font-size:52px;color:#059669;line-height:1;margin-bottom:12px}
.pos3-fin-order-num{font-size:20px;font-weight:800;color:#111827;margin-bottom:6px}
.pos3-fin-change-text{font-size:14px;color:#6b7280}
.pos3-fin-footer{border-top:1px solid #e5e7eb;padding:12px 20px;display:flex;align-items:center;gap:10px;background:#fff}
.pos3-fin-submit-btn{padding:10px 24px;border-radius:8px;border:none;background:#6366f1;color:#fff;font-size:14px;font-weight:700;cursor:pointer;transition:filter .15s;display:flex;align-items:center;gap:6px}
.pos3-fin-submit-btn:hover{filter:brightness(1.1)}
.pos3-fin-btn-sec{padding:10px 18px;border-radius:8px;border:1px solid #d1d5db;background:#fff;color:#374151;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;display:flex;align-items:center;gap:5px;transition:background .12s}
.pos3-fin-btn-sec:hover{background:#f9fafb;color:#374151}
.pos3-fin-check-label{font-size:12.5px;font-weight:600;color:#4b5563;display:flex;align-items:center;gap:5px;margin:0;cursor:pointer;user-select:none}
.pos3-restore-bar{position:fixed;bottom:0;left:0;right:0;z-index:1050;background:#1e293b;color:#fff;padding:10px 20px;display:flex;align-items:center;gap:12px;font-size:13px}
.pos3-restore-label{flex:1;font-weight:600}
.pos3-restore-action{padding:6px 18px;border-radius:8px;border:none;background:#3b82f6;color:#fff;font-weight:800;font-size:12px;cursor:pointer}
.pos3-restore-discard{background:none;border:none;color:#94a3b8;cursor:pointer;font-size:16px}

/* Numpad display — premium dark */
.pos3-numpad-display {
    background: #1e1b4b;
    border: none;
    border-radius: 12px;
    margin: 4px 10px;
    padding: 12px 16px;
    font-size: 28px;
    font-weight: 800;
    text-align: right;
    color: #c4b5fd;
    letter-spacing: 1px;
    line-height: 1;
}

/* Numpad keys */
.pos3-numpad {
    padding: 2px 10px;
}

.pos3-numpad-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    margin-bottom: 5px;
}

.pos3-numpad-key {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 0;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    transition: background .08s, transform .08s, box-shadow .08s;
    color: #1e293b;
    user-select: none;
    line-height: 1;
}

.pos3-numpad-key:hover  { background: #f1f5f9; border-color: #a78bfa; }
.pos3-numpad-key:active {
    background: #ede9fe;
    transform: scale(.94);
    box-shadow: inset 0 2px 6px rgba(109,40,217,.15);
}

/* Extra inputs */
.pos3-extra-inputs {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 4px 10px;
}

.pos3-input-sm {
    flex: 1 1 76px;
    min-width: 0;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    padding: 7px 9px;
    font-size: 12px;
    outline: none;
    transition: border-color .15s;
    color: #1e293b;
}

.pos3-input-sm:focus { border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,.1); }

.pos3-apply-btn {
    background: #6d28d9;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
    letter-spacing: .3px;
}

.pos3-apply-btn:hover { background: #5b21b6; }

/* CLEAR button */
.pos3-right-clear {
    padding: 5px 10px 10px;
    flex-shrink: 0;
    margin-top: auto;
}

.pos3-btn-void {
    display: block;
    width: 100%;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 13px 14px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: filter .15s;
    letter-spacing: .6px;
    text-transform: uppercase;
    box-shadow: 0 3px 10px rgba(220,38,38,.3);
}

.pos3-btn-void:hover { filter: brightness(1.08); }

/* Staff picker */
.pos3-staff-picker {
    position: relative;
    display: inline-block;
}
.pos3-staff-btn {
    background: none;
    border: 1.5px dashed #cbd5e1;
    border-radius: 5px;
    padding: 2px 5px;
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    white-space: nowrap;
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    transition: border-color .15s;
}
.pos3-staff-btn.assigned {
    border-color: #6d28d9;
    border-style: solid;
    color: #fff;
    background: #7c3aed;
}
.pos3-staff-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 9999;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    min-width: 155px;
    padding: 4px 0;
    display: none;
}
.pos3-staff-dropdown.open { display: block; }
.pos3-staff-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .1s;
    color: #334155;
}
.pos3-staff-option:hover { background: #f5f3ff; color: #6d28d9; }
.pos3-staff-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Editable price button */
.pos3-price-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-weight: 800;
    color: #059669;
    font-size: 12px;
    letter-spacing: -.2px;
}
.pos3-price-btn:hover { text-decoration: underline; }

/* Responsive */
@media (max-width: 1200px) {
    .pos3-left  { width: 310px; }
    .pos3-right { width: 250px; }
}

@media (max-width: 768px) {
    .pos3-wrapper { flex-direction: column; height: auto; }
    .pos3-left, .pos3-right { width: 100%; }
}


.turn-card {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    border: 2px solid #dee2e6;
    transition: border-color .2s;
}
.turn-card.turn-serving { border-color: #27ae60; }
.turn-card.turn-done    { border-color: #dee2e6; opacity: .6; }

.turn-card-header {
    padding: 8px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
}
.turn-order { font-size: 20px; font-weight: 800; }
.turn-status-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    background: rgba(255,255,255,.25);
    border-radius: 20px;
    padding: 2px 8px;
}
.turn-card-body {
    padding: 12px 14px;
    background: #fff;
}
.turn-staff-name { font-size: 16px; font-weight: 700; }
.turn-staff-pos  { font-size: 12px; color: #6c757d; }
.turn-client-badge {
    margin-top: 6px;
    font-size: 12px;
    background: #e8f5e9;
    color: #27ae60;
    border-radius: 20px;
    padding: 3px 10px;
    display: inline-block;
    font-weight: 600;
}
.turn-card-footer {
    padding: 10px 14px;
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
}




.cal-page { display:flex; flex-direction:column; height:calc(100vh - 70px); overflow:hidden; background:#eef1f7; }

.cal-topbar {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
    color:#fff;
    display:flex; align-items:center; gap:10px;
    padding:0 20px; height:54px; flex-shrink:0;
    box-shadow:0 3px 14px rgba(30,27,75,.4);
}

.cal-topbar-title {
    font-size:16px; font-weight:800; letter-spacing:.8px;
    display:flex; align-items:center; gap:8px;
    color:#c4b5fd; white-space:nowrap;
}
.cal-topbar-title i { font-size:17px; }
.cal-topbar-title span { color:#fff; }

.cal-nav-btn {
    background:rgba(255,255,255,.12); border:1.5px solid rgba(255,255,255,.2); color:#fff;
    width:34px; height:34px; border-radius:9px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; font-size:14px; transition:background .15s, border-color .15s;
    flex-shrink:0;
}
.cal-nav-btn:hover { background:rgba(255,255,255,.25); border-color:rgba(255,255,255,.4); }

.cal-date-display {
    font-size:14px; font-weight:700; min-width:170px; text-align:center;
    color:#e0e7ff; letter-spacing:.2px;
}

.cal-today-btn {
    background:transparent; border:1.5px solid rgba(255,255,255,.35); color:rgba(255,255,255,.9);
    border-radius:8px; padding:5px 13px; font-size:11px; font-weight:700;
    cursor:pointer; letter-spacing:.4px; transition:background .15s, border-color .15s;
}
.cal-today-btn:hover { background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.6); }

.cal-view-toggle { display:flex; gap:0; border-radius:10px; overflow:hidden; border:1.5px solid rgba(255,255,255,.25); }
.cal-view-btn {
    background:transparent; border:none; color:rgba(255,255,255,.65);
    padding:6px 14px; font-size:11px; font-weight:700;
    cursor:pointer; text-decoration:none; letter-spacing:.4px;
    transition:background .15s, color .15s;
    display:inline-flex; align-items:center;
}
.cal-view-btn:not(:last-child) { border-right:1px solid rgba(255,255,255,.2); }
.cal-view-btn:hover { background:rgba(255,255,255,.12); color:#fff; }
.cal-view-btn.active { background:rgba(167,139,250,.45); color:#fff; }

.cal-new-btn {
    background:linear-gradient(135deg, #7c3aed, #6d28d9);
    color:#fff; border:none;
    border-radius:10px; padding:8px 18px; font-size:12px; font-weight:800;
    cursor:pointer; white-space:nowrap; letter-spacing:.3px;
    box-shadow:0 3px 10px rgba(109,40,217,.4);
    transition:filter .15s;
    display:flex; align-items:center; gap:6px;
}
.cal-new-btn:hover { filter:brightness(1.1); }

.cal-topbar-right { margin-left:auto; display:flex; gap:10px; align-items:center; }

/* ── Grid wrapper ── */
.cal-grid-wrapper { flex:1; overflow:auto; position:relative; }

.cal-head {
    display:grid;
    grid-template-columns: var(--cal-cols, 60px repeat(1,1fr));
    background:#fff; border-bottom:2px solid #e2e8f0;
    position:sticky; top:0; z-index:10;
    box-shadow:0 2px 8px rgba(0,0,0,.06);
}

.cal-head-time {
    background:#f8fafc; border-right:1.5px solid #e2e8f0;
    min-height:58px;
}

.cal-head-staff {
    padding:10px 8px; text-align:center;
    border-right:1px solid #e2e8f0;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
}

.cal-staff-avatar {
    width:30px; height:30px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:11px; font-weight:800; color:#fff;
    margin:0 auto 4px; flex-shrink:0;
    box-shadow:0 2px 6px rgba(0,0,0,.2);
}

.cal-staff-dot { width:10px; height:10px; border-radius:50%; display:inline-block; margin-right:5px; vertical-align:middle; flex-shrink:0; }
.cal-staff-name { font-size:12px; font-weight:700; color:#1e293b; }
.cal-staff-pos  { font-size:10px; color:#94a3b8; font-weight:500; margin-top:1px; }

.cal-grid {
    display:grid;
    grid-template-columns: var(--cal-cols, 60px repeat(1,1fr));
}

.cal-time-cell {
    height:48px; border-right:1.5px solid #e2e8f0; border-bottom:1px solid #f1f5f9;
    background:#f8fafc; display:flex; align-items:flex-start;
    padding:4px 8px; font-size:10px; color:#94a3b8; font-weight:700;
    letter-spacing:.3px;
}
.cal-time-cell.half { background:#fafcff; border-bottom-style:dashed; }

.cal-cell {
    height:48px; border-right:1px solid #f0f4f8; border-bottom:1px solid #f1f5f9;
    position:relative; cursor:pointer; transition:background .1s;
}
.cal-cell:hover { background:#f5f3ff; }
.cal-cell.half { border-bottom:1px dashed #e8edf5; }

.cal-appt-block {
    position:absolute; left:3px; right:3px; top:2px;
    border-radius:8px; padding:4px 8px; font-size:11px; font-weight:600;
    color:#fff; overflow:hidden; cursor:pointer; z-index:5;
    box-shadow:0 2px 8px rgba(0,0,0,.18); transition:filter .15s, transform .1s;
    min-height:40px;
    border-left:3px solid rgba(255,255,255,.4);
}
.cal-appt-block:hover { filter:brightness(1.08); transform:scale(1.01); }
.cal-appt-client  { font-size:11px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal-appt-service { font-size:10px; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.cal-appt-time    { font-size:9px; opacity:.7; margin-top:2px; }
.cal-unassigned-label { color:#cbd5e1; font-style:italic; font-size:11px; }

/* ── Modal ── */
.cal-modal-overlay {
    position:fixed; inset:0; background:rgba(15,23,42,.5);
    z-index:9999; display:none; align-items:center; justify-content:center;
    backdrop-filter:blur(3px);
}
.cal-modal-overlay.open { display:flex; }
.cal-modal {
    background:#fff; border-radius:18px;
    padding:28px; width:480px; max-width:95vw;
    box-shadow:0 16px 48px rgba(0,0,0,.2);
}
.cal-modal-header {
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:22px;
    padding-bottom:16px;
    border-bottom:1.5px solid #f1f5f9;
}
.cal-modal-title  { font-size:17px; font-weight:800; color:#1e293b; letter-spacing:-.2px; }
.cal-modal-close  {
    background:#f1f5f9; border:none; width:32px; height:32px; border-radius:8px;
    font-size:18px; cursor:pointer; color:#64748b;
    display:flex; align-items:center; justify-content:center;
    transition:background .15s, color .15s;
    line-height:1;
}
.cal-modal-close:hover { background:#fef2f2; color:#ef4444; }

/* ── Check-in / Check-out ── */
.appt-checkin-row{display:flex;align-items:center;gap:12px}
.appt-ci-block{flex:1;text-align:center}
.appt-ci-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.6px;color:#9ca3af;font-weight:600;margin-bottom:2px}
.appt-ci-time{font-size:1.1rem;font-weight:700}
.appt-ci-arrow{color:#9ca3af;font-size:1.2rem}

/* ── Week Calendar ── */
.cal-week-wrapper{overflow:auto;flex:1;display:flex;flex-direction:column}
.cal-week-head{display:grid;position:sticky;top:0;z-index:10;background:#fff;border-bottom:2px solid #e2e8f0;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.cal-week-grid{display:grid}
.cal-week-day-head{padding:10px 4px;text-align:center;border-left:1px solid #e2e8f0}
.cal-week-day-head.today{background:#f5f3ff}
.cal-week-day-name{font-size:.68rem;text-transform:uppercase;letter-spacing:.8px;color:#94a3b8;font-weight:700}
.cal-week-day-num{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:4px auto 0;font-size:.9rem;font-weight:700;color:#334155}
.cal-week-day-num.today-circle{background:linear-gradient(135deg,#7c3aed,#6d28d9);color:#fff;box-shadow:0 2px 8px rgba(109,40,217,.35)}
.cal-week-cell{min-height:48px;border-left:1px solid #f1f5f9;border-bottom:1px solid #f1f5f9;padding:1px;position:relative;cursor:pointer;transition:background .1s}
.cal-week-cell.half{min-height:48px;border-bottom:1px dashed #e8edf5}
.cal-week-cell:hover{background:#f5f3ff}

/* ── Client Profile ── */
.client-kpi-num{font-size:1.8rem;font-weight:800;line-height:1}
.client-kpi-lbl{font-size:.75rem;color:#9ca3af;font-weight:500;margin-top:4px;text-transform:uppercase;letter-spacing:.5px}
.client-membership-badge{background:linear-gradient(135deg,#4f46e5,#7c3aed);border-radius:10px;padding:16px;color:#fff}
.client-memb-name{font-size:1rem;font-weight:700;margin-bottom:4px}
.client-memb-exp{font-size:.8rem;opacity:.8}
.client-memb-visits{font-size:.8rem;opacity:.8;margin-top:2px}

/* ── POS extra inputs row ── */
.pos3-extra-row{display:flex;gap:4px;flex:1 1 100%}
.pos3-extra-row .pos3-input-sm{flex:1}
.pos3-apply-gift{background:#d97706}
.pos3-apply-reward{background:#7c3aed}
.pos3-reward-info{font-size:.73rem;color:#7c3aed;font-weight:700;padding:2px 0;width:100%}

/* ── Staff Schedule ── */
.sched-card{}
.sched-card-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.sched-staff-info{display:flex;align-items:center;gap:12px}
.sched-avatar{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.95rem;font-weight:800;color:#fff;flex-shrink:0}
.sched-staff-name{font-weight:700;font-size:.95rem;line-height:1.2}
.sched-staff-pos{font-size:.75rem;color:#9ca3af}
.sched-week-summary{font-size:.75rem;color:#6b7280}
.sched-table th,.sched-table td{vertical-align:middle;padding:10px 16px}
.sched-col-day{width:140px}
.sched-col-off{width:100px}
.sched-col-hours{width:80px;text-align:center}
.sched-day-badge{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#f3f4f6;font-size:.72rem;font-weight:700;color:#374151;margin-right:6px}
.sched-day-badge.sched-day-weekend{background:#fef3c7;color:#92400e}
.sched-day-full{font-weight:600;font-size:.88rem}
.sched-row.sched-off{background:#fef2f2}
.sched-row.sched-off .sched-day-badge,.sched-row.sched-off .sched-day-full{color:#9ca3af}
.sched-hours-badge{display:inline-block;background:#dcfce7;color:#16a34a;font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:12px}
.sched-off-label{color:#ef4444;font-size:.78rem;font-weight:600}

/* ── Calendar topbar right section ── */
.cal-topbar-right{margin-left:auto;display:flex;gap:8px;align-items:center}

/* ── Form card width constraints ── */
.form-card-narrow{max-width:700px}
.form-card-narrow-sm{max-width:520px}

/* ── POS extra classes ── */
.pos-page-full{min-height:100vh}
.pos3-search-grow{flex:1}
.pos3-dot-unassign{background:#ccc!important}
.pos3-rq-icon{color:#e2e8f0}
.pos3-status-icon{color:#059669;font-size:18px}

/* ── Settings page ── */
.salon-logo-preview{max-height:60px;border-radius:8px}
.icon-instagram{color:#e4405f}
.icon-info-lg{font-size:2rem}

/* ── POS Category tile image ── */
.pos3-cat-img {
    width: 46px;
    height: 46px;
    object-fit: cover;
    border-radius: 8px;
}

/* ── POS Service tile image ── */
.pos3-svc-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* ── Category thumbnail in admin table ── */
.cat-thumb {
    width: 42px;
    height: 42px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

/* ── Service image preview ── */
.svc-img-preview {
    max-height: 70px;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

/* Action bar button images */
.pos3-btn-ab-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 8px;
    display: block;
}

.pos3-btn-ab:disabled .pos3-btn-ab-img {
    opacity: .5;
}



/* Mode toggle (Services / Products) */
.pos-mode-toggle {
    display: flex; gap: 0; padding: 8px 14px 6px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
    flex-shrink: 0;
}
.pos-mode-btn {
    flex: 1; padding: 7px 0; border: 1.5px solid #e2e8f0;
    background: #fff; color: #64748b;
    font-size: 11px; font-weight: 700; letter-spacing: .4px;
    cursor: pointer; transition: all .2s;
}
.pos-mode-btn:first-child { border-radius: 8px 0 0 8px; }
.pos-mode-btn:last-child  { border-radius: 0 8px 8px 0; border-left: none; }
.pos-mode-btn.active {
    background: linear-gradient(135deg,#7c3aed,#6d28d9);
    border-color: #6d28d9; color: #fff; z-index: 1;
}

/* Service / Product search bar */
.pos3-svc-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    flex-shrink: 0;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}
.pos3-svc-search-icon { font-size: 13px; color: #94a3b8; flex-shrink: 0; }
.pos3-svc-search-input {
    flex: 1;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12.5px;
    font-weight: 500;
    color: #1e293b;
    outline: none;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.pos3-svc-search-input:focus {
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124,58,237,.1);
}
.pos3-svc-search-input::placeholder { color: #94a3b8; }
.pos3-svc-search-clear {
    background: none; border: none; color: #94a3b8;
    cursor: pointer; padding: 4px 6px; border-radius: 6px;
    font-size: 12px; line-height: 1; flex-shrink: 0;
    transition: color .1s, background .1s;
}
.pos3-svc-search-clear:hover { background: #fee2e2; color: #ef4444; }

/* ── Search active: hide category scroll, show "all results" ── */
.pos3-middle.searching .pos3-cat-scroll { display: none; }
.pos3-middle.searching .pos3-svc-tile   { display: flex !important; }

/* Product stock badge on tile */
.pos3-prod-stock {
    font-size: 9px; color: #059669; font-weight: 700;
    padding: 0 10px 8px; letter-spacing: .3px;
}
.pos3-prod-stock.low { color: #dc2626; }

/* Per-item tip input in cart */
.pos3-tip-input {
    width: 52px; font-size: 10px; padding: 2px 4px;
    border: 1px solid #d1d5db; border-radius: 4px;
    background: #f0fdf4; color: #065f46; text-align: center;
    margin-top: 2px; display: block;
}
.pos3-tip-input:focus { outline: none; border-color: #059669; }
.pos3-tip-input::placeholder { color: #9ca3af; font-style: italic; }

/* Product badge in cart */
.pos3-product-badge {
    font-size: 9px; font-weight: 800; letter-spacing: 1px;
    color: #6d28d9; background: #ede9fe; border-radius: 3px;
    padding: 1px 5px; display: inline-block;
}

/* Type icon in RQ column */
.pos3-type-icon { font-size: 14px; color: #94a3b8; }

/* ── Product tiles (same base as service tiles) ── */
.pos3-prod-tile { cursor: pointer; }
.pos3-prod-no-items {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 24px 12px;
    color: #94a3b8;
    font-size: 12px;
    text-align: center;
    cursor: default;
}
.pos3-prod-no-items i { font-size: 28px; color: #94a3b8; }


.pos3-prod-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-content: start;
    gap: 10px;
    padding: 8px 14px 14px;
    overflow-y: auto;
    flex: 1 1 0;
    min-height: 0;
}

.pos3-prod-tile {
    background: #fff;
    border: 1.5px solid #e8ecf1;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: box-shadow .15s, transform .12s, border-color .15s;
    box-shadow: 0 2px 8px rgba(0,0,0,.07);
}
.pos3-prod-tile:hover {
    transform: translateY(-3px);
    border-color: var(--pcat-color, #a78bfa);
    box-shadow: 0 8px 22px rgba(0,0,0,.13);
}

/* Category color accent bar at top */
.pos3-prod-cat-bar {
    height: 5px;
    background: var(--pcat-color, #6d28d9);
    width: 100%;
    flex-shrink: 0;
}

.pos3-prod-img-wrap {
    width: 100%;
    height: 86px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f4f6fb;
    overflow: hidden;
    padding: 8px;
}
.pos3-prod-img-main {
    width: 70px;
    height: 70px;
    object-fit: contain;
    display: block;
}
.pos3-prod-no-img {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #c0c8d8;
    text-align: center;
    width: 100%;
    height: 100%;
}
.pos3-prod-no-img i { font-size: 24px; }
.pos3-prod-no-img span { font-size: 8px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; line-height: 1.2; }

.pos3-prod-info {
    padding: 7px 7px 9px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2px;
    flex: 1;
}
.pos3-prod-title {
    font-size: 11px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.3;
    word-break: break-word;
}
.pos3-prod-price {
    font-size: 13px;
    font-weight: 800;
    color: var(--pcat-color, #6d28d9);
    letter-spacing: .2px;
}
.pos3-prod-sku {
    font-size: 9px;
    color: #94a3b8;
    font-weight: 600;
    letter-spacing: .3px;
}
.pos3-prod-qty {
    font-size: 10px;
    color: #64748b;
    font-weight: 500;
}
.pos3-prod-qty.low { color: #dc2626; font-weight: 700; }

/* ── Product category icon wrapper ── */
.pos3-pcat-icon {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pos3-prod-icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Product image in tile ── */
.pos3-prod-img {
    width: 42px;
    height: 42px;
    object-fit: cover;
    border-radius: 6px;
}



.client-profile-tabs .nav-link {
    color: #475569; font-weight: 600; font-size: 13px;
    padding: 8px 16px; border-radius: 8px 8px 0 0;
}
.client-profile-tabs .nav-link.active {
    background: linear-gradient(135deg,#7c3aed,#6d28d9);
    color: #fff; border-color: transparent;
}

/* Before/After photo card */
.photo-card { border-radius: 12px; overflow: hidden; }
.photo-card-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.photo-card-imgs img { width: 100%; height: 110px; object-fit: cover; }
.photo-card-label {
    font-size: 9px; font-weight: 800; letter-spacing: 1px;
    text-align: center; padding: 3px 0;
    background: rgba(0,0,0,.45); color: #fff;
}
.photo-before .photo-card-label { background: rgba(109,40,217,.7); }
.photo-after  .photo-card-label { background: rgba(5,150,105,.7); }

/* Before/After comparison slider */
.ba-slider-wrap {
    position: relative; overflow: hidden; border-radius: 8px;
    cursor: col-resize; user-select: none; touch-action: none;
    background: #000;
}
.ba-slider-wrap img {
    display: block; width: 100%; height: 420px; object-fit: cover;
    pointer-events: none;
}
.ba-after-img { position: absolute; inset: 0; overflow: hidden; }
.ba-after-img img { position: absolute; top: 0; left: 0; }
.ba-handle {
    position: absolute; top: 0; bottom: 0; width: 3px;
    background: #fff; cursor: col-resize;
    display: flex; align-items: center; justify-content: center;
}
.ba-handle-btn {
    width: 40px; height: 40px; border-radius: 50%;
    background: #fff; border: 3px solid #6d28d9;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; color: #6d28d9; flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.ba-labels {
    position: absolute; top: 12px; left: 0; right: 0;
    display: flex; justify-content: space-between; padding: 0 16px;
    pointer-events: none;
}
.ba-label {
    font-size: 11px; font-weight: 800; letter-spacing: 1px;
    padding: 3px 10px; border-radius: 20px; color: #fff;
}
.ba-label-before { background: rgba(109,40,217,.8); }
.ba-label-after  { background: rgba(5,150,105,.8); }

/* Color formula card */
.color-formula-card {
    border-left: 4px solid #6d28d9; border-radius: 0 8px 8px 0;
}
.color-swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #e2e8f0; }

/* Review stars */
.review-stars { color: #f59e0b; font-size: 18px; letter-spacing: 2px; }

/* ── Appointment Detail (show page) ── */
.appt-detail-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-radius: 12px; margin-bottom: 4px;
    border-left: 5px solid #7c3aed; background: #fff;
    box-shadow: 0 1px 6px rgba(0,0,0,.06);
}
.appt-detail-bar-pending   { border-left-color: #f39c12; }
.appt-detail-bar-confirmed { border-left-color: #3498db; }
.appt-detail-bar-serving   { border-left-color: #9b59b6; }
.appt-detail-bar-completed { border-left-color: #27ae60; }
.appt-detail-bar-cancelled { border-left-color: #e74c3c; }
.appt-detail-bar-left  { display: flex; align-items: center; gap: 14px; }
.appt-detail-bar-right { display: flex; align-items: center; gap: 8px; }
.appt-back-btn {
    width: 34px; height: 34px; border-radius: 8px; border: 1.5px solid #e2e8f0;
    display: flex; align-items: center; justify-content: center;
    color: #64748b; text-decoration: none; transition: all .15s;
}
.appt-back-btn:hover { background: #f5f3ff; border-color: #c4b5fd; color: #7c3aed; }
.appt-detail-num  { font-size: 1.1rem; font-weight: 800; color: #1e293b; letter-spacing: -.3px; }
.appt-detail-meta { font-size: .8rem; color: #64748b; margin-top: 1px; }
.appt-status-badge { font-size: .75rem; padding: 5px 12px; border-radius: 20px; }

.appt-info-card { border: 1.5px solid #f1f5f9; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,.04); }
.appt-card-header {
    display: flex; align-items: center; font-size: .8rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .5px; color: #475569;
    padding: 10px 16px; background: #f8fafc; border-bottom: 1px solid #f1f5f9;
    border-radius: 10px 10px 0 0;
}

.appt-client-row { display: flex; align-items: center; gap: 14px; }
.appt-client-avatar {
    width: 46px; height: 46px; border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    color: #fff; font-weight: 800; font-size: 1.1rem;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.appt-client-name  { font-size: 1rem; font-weight: 700; color: #1e293b; }
.appt-client-phone { font-size: .78rem; color: #64748b; margin-top: 2px; }
.appt-notes-box {
    background: #fafafa; border: 1px dashed #e2e8f0; border-radius: 8px;
    padding: 10px 12px; font-size: .82rem; color: #475569;
}

.appt-total-pill {
    margin-left: auto; background: #f0fdf4; color: #166534;
    padding: 3px 10px; border-radius: 20px; font-size: .75rem;
}
.appt-staff-chip {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    color: #fff; font-size: .65rem; font-weight: 800;
    margin-right: 4px; vertical-align: middle;
}

.appt-status-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.appt-status-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 16px; border-radius: 20px; font-size: .8rem; font-weight: 600;
    border: 1.5px solid; background: transparent;
    cursor: pointer; transition: all .15s; white-space: nowrap;
}
.appt-status-pill:hover { opacity: .85; }
.appt-status-pill-active { font-weight: 700; }

/* ── Appointment List page ── */
.appt-filter-row {
    display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap;
}
.appt-filter-group { display: flex; flex-direction: column; gap: 3px; }
.appt-filter-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #64748b; }
.appt-filter-actions { display: flex; gap: 6px; align-items: flex-end; padding-top: 14px; }

.appt-list-row:hover { background: #fafbff; }
.appt-num-link { font-weight: 700; color: #7c3aed; text-decoration: none; font-size: .85rem; letter-spacing: .3px; }
.appt-num-link:hover { text-decoration: underline; }
.appt-list-client { display: flex; align-items: center; gap: 10px; }
.appt-list-avatar {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    color: #fff; font-size: .75rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.appt-svc-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.appt-svc-chip {
    background: #f1f5f9; color: #475569; border-radius: 20px;
    padding: 2px 9px; font-size: .72rem; font-weight: 600;
}
.appt-svc-more { background: #ede9f8; color: #7c3aed; }
.appt-delete-icon-wrap {
    width: 32px; height: 32px; border-radius: 8px; background: #fef2f2;
    display: flex; align-items: center; justify-content: center; font-size: 1rem;
}

/* ── Calendar modal labels / buttons ── */
.cal-modal-label {
    display: block; margin-bottom: 5px;
    font-size: 11px; font-weight: 700; letter-spacing: .5px;
    text-transform: uppercase; color: #64748b;
}
.cal-modal-submit-btn {
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    color: #fff; font-weight: 700; font-size: 13px; letter-spacing: .3px;
    border: none; border-radius: 10px; padding: 11px;
    box-shadow: 0 3px 10px rgba(109,40,217,.3);
}
.cal-modal-submit-btn:hover { filter: brightness(1.08); color: #fff; }
.cal-modal-cancel-btn {
    background: #f1f5f9; color: #475569; font-weight: 600;
    border: none; border-radius: 10px; padding: 11px 18px;
}
.cal-modal-cancel-btn:hover { background: #e2e8f0; }
.review-star-empty { color: #d1d5db; }

/* ── Appointment show — extra elements ── */
.appt-card-subtitle {
    font-size: .72rem; font-weight: 400;
    text-transform: none; letter-spacing: 0; color: #94a3b8;
}
.appt-cancel-icon-wrap {
    width: 36px; height: 36px; border-radius: 8px; background: #fef2f2;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.appt-source-tag {
    display: inline-flex; align-items: center; font-size: .68rem;
    font-weight: 700; padding: 2px 8px; border-radius: 20px;
}
.appt-source-online { background: #ede9f8; color: #7c3aed; }
.appt-source-walkin { background: #f0fdf4; color: #166534; }

.appt-notes-box {
    background: #fafafa; border: 1px dashed #e2e8f0; border-radius: 8px;
    padding: 10px 12px; font-size: .82rem; color: #475569; min-height: 36px;
}
.appt-quick-note input { font-size: .82rem; }
.appt-note-msg { font-size: .75rem; margin-top: 3px; }

.appt-pill-check { font-size: .75em; }

/* Payment summary */
.appt-payment-summary {
    border-top: 1px solid #f1f5f9; padding: 12px 16px; background: #fafbff;
    border-radius: 0 0 10px 10px;
}
.appt-pay-row {
    display: flex; justify-content: space-between; align-items: center;
    font-size: .82rem; color: #64748b; padding: 3px 0;
}
.appt-pay-total {
    font-size: .9rem; font-weight: 800; color: #1e293b;
    border-top: 1px solid #e2e8f0; margin-top: 4px; padding-top: 6px;
}
.appt-pay-discount { color: #22c55e; }
.appt-pay-paid { color: #22c55e; }
.appt-pay-due  { color: #f59e0b; }

/* Client history rows */
.appt-history-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 16px; border-bottom: 1px solid #f1f5f9;
    text-decoration: none; color: inherit; transition: background .12s;
}
.appt-history-row:last-child { border-bottom: none; }
.appt-history-row:hover { background: #f5f3ff; }
.appt-history-date { font-size: .8rem; font-weight: 700; color: #1e293b; }
.appt-history-svc  { font-size: .72rem; color: #64748b; margin-top: 1px; }

.appt-status-msg { font-size: .82rem; }

/* ── Waiting List ── */
.wl-add-card { border: 1.5px solid #ede9f8; border-radius: 12px; }
.wl-add-header {
    background: linear-gradient(135deg, #7c3aed11, #6d28d908);
    font-size: .78rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .5px; color: #6d28d9; border-bottom: 1px solid #ede9f8;
    padding: 10px 16px; border-radius: 12px 12px 0 0;
}
.wl-label {
    display: block; margin-bottom: 4px;
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .4px; color: #64748b;
}

.wl-stat-card {
    border-radius: 10px; padding: 12px; text-align: center;
    border: 1.5px solid transparent;
}
.wl-stat-num   { font-size: 1.6rem; font-weight: 800; line-height: 1; }
.wl-stat-label { font-size: .7rem; font-weight: 600; margin-top: 3px; text-transform: uppercase; letter-spacing: .4px; }
.wl-stat-waiting { background: #fffbeb; border-color: #fde68a; color: #d97706; }
.wl-stat-called  { background: #ecfeff; border-color: #a5f3fc; color: #0891b2; }
.wl-stat-serving { background: #f5f3ff; border-color: #ddd6fe; color: #6d28d9; }
.wl-stat-done    { background: #f0fdf4; border-color: #bbf7d0; color: #059669; }

.wl-queue-num { font-weight: 800; color: #94a3b8; width: 32px; }
.wl-row-3 td, .wl-row-4 td { opacity: .55; }
.wl-row:hover { background: #fafbff; }

/* ── Global Confirm Modal ── */
.gc-modal-content { border-radius: 16px; border: none; box-shadow: 0 20px 60px rgba(0,0,0,.15); }
.gc-icon-wrap {
    width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
}
.gc-subtitle  { font-size: .72rem; color: #94a3b8; margin-top: 1px; }
.gc-message   { font-size: .85rem; color: #475569; line-height: 1.5; }
.gc-detail-box {
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;
    padding: 8px 12px; font-size: .82rem; color: #334155; font-weight: 600;
}
.gc-cancel-btn  { border-radius: 8px; padding: 6px 16px; background: #f1f5f9; border: none; color: #475569; }
.gc-cancel-btn:hover { background: #e2e8f0; }
.gc-confirm-btn { border-radius: 8px; padding: 6px 16px; font-weight: 600; }



/* Base button reset inside admin content */
.main-content .btn {
    font-size: 13px;
    font-weight: 600;
    padding: 7px 16px;
    height: 36px;
    line-height: 1;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    white-space: nowrap;
    transition: all .18s ease;
}

/* Small variant — same height, tighter padding */
.main-content .btn-sm {
    font-size: 12px;
    padding: 5px 12px;
    height: 32px;
    border-radius: 7px;
    gap: 4px;
}

/* Icon-only action button — square, used in table rows */
.main-content .btn-icon {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 7px;
    font-size: 14px;
    flex-shrink: 0;
}

/* btn-xs alias (Bootstrap 5 removed it) */
.main-content .btn-xs,
.btn-xs {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    height: 26px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

/* Page-header primary action button (Add New, New Sale, etc.) */
.salon-page-header .btn,
.section-header .btn {
    height: 36px;
    font-size: 13px;
    padding: 7px 16px;
    border-radius: 8px;
    font-weight: 600;
}

/* Table row action group */
.main-content td .d-flex.gap-1 .btn,
.main-content td .d-flex.gap-1 button {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 7px;
    font-size: 14px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Card-header action buttons */
.main-content .card-header .btn {
    height: 32px;
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 7px;
}

/* Filter bar buttons */
.main-content .appt-filter-actions .btn,
.main-content form.d-flex .btn {
    height: 32px;
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 7px;
}

/* Form submit buttons — slightly larger */
.main-content .card-body > form .btn[type="submit"],
.main-content .card-body .btn.w-100 {
    height: 40px;
    font-size: 14px;
    padding: 8px 20px;
    border-radius: 9px;
}

/* Hover lifts */
.main-content .btn:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0,0,0,.12);
}
.main-content td .d-flex.gap-1 .btn:hover,
.main-content td .d-flex.gap-1 button:hover {
    transform: translateY(-1px);
}



/* ── Cards ── */
.main-content .card {
    border: none !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 3px rgba(109,40,217,.06), 0 4px 16px rgba(109,40,217,.06) !important;
    overflow: hidden;
}
.main-content .card-header {
    background: linear-gradient(135deg, #fdfcff 0%, #f7f5ff 100%) !important;
    border-bottom: 1.5px solid #ede9fe !important;
    padding: 14px 20px !important;
    font-weight: 700;
    color: #1e1b4b;
}
.main-content .card-body {
    background: #fff !important;
}
.main-content .card-footer {
    background: #faf9ff !important;
    border-top: 1px solid #ede9fe !important;
    padding: 10px 20px !important;
}

/* ── Tables ── */
.main-content .table thead th,
.main-content .table thead tr th {
    background: linear-gradient(135deg, #f5f3ff, #ede9fe) !important;
    color: #4c1d95 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .6px !important;
    text-transform: uppercase !important;
    border-bottom: 2px solid #ddd6fe !important;
    padding: 12px 16px !important;
}
.main-content .table tbody td {
    padding: 12px 16px !important;
    color: #1e293b;
    font-size: 13.5px;
    border-bottom: 1px solid #f1f0f9 !important;
    vertical-align: middle;
}
.main-content .table tbody tr:hover td {
    background: #faf8ff !important;
}
.main-content .table tbody tr:last-child td {
    border-bottom: none !important;
}

/* ── Page / Section headers ── */
.salon-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid #ede9fe;
}
.salon-page-header h4 {
    font-size: 1.25rem;
    font-weight: 800;
    color: #1e1b4b;
    margin: 0;
}
.section-header h1 {
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    color: #1e1b4b !important;
}

/* ── Breadcrumb ── */
.breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}
.breadcrumb-item a { color: #6d28d9 !important; font-size: 13px; }
.breadcrumb-item.active { color: #94a3b8; font-size: 13px; }
.breadcrumb-item + .breadcrumb-item::before { color: #c4b5fd !important; }

/* ── Alerts ── */
.main-content .alert-success {
    background: #f0fdf4 !important;
    border: 1.5px solid #bbf7d0 !important;
    color: #166534 !important;
    border-radius: 10px !important;
}
.main-content .alert-danger {
    background: #fff1f2 !important;
    border: 1.5px solid #fecdd3 !important;
    color: #9f1239 !important;
    border-radius: 10px !important;
}

/* ── Form controls ── */
.main-content .form-control,
.main-content .form-select {
    border: 1.5px solid #e2e0f0 !important;
    border-radius: 8px !important;
    color: #1e293b !important;
    font-size: 13.5px !important;
    background: #fdfcff !important;
    transition: border-color .15s, box-shadow .15s !important;
}
.main-content .form-control:focus,
.main-content .form-select:focus {
    border-color: #6d28d9 !important;
    box-shadow: 0 0 0 3px rgba(109,40,217,.12) !important;
    background: #fff !important;
}
.main-content label,
.main-content .form-label {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    letter-spacing: .2px;
}

/* ── Input group text ── */
.main-content .input-group-text {
    background: #f5f3ff !important;
    border: 1.5px solid #e2e0f0 !important;
    border-right: none !important;
    color: #7c3aed !important;
    border-radius: 8px 0 0 8px !important;
}

/* ── Badges — more contrast ── */
.main-content .badge {
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 4px 9px !important;
    border-radius: 6px !important;
    letter-spacing: .2px;
}

/* ── Subtle page-level background pattern ── */
.main-content::before {
    content: '';
    position: fixed;
    top: 0; right: 0;
    width: 600px; height: 600px;
    background: radial-gradient(circle at 80% 10%, rgba(124,58,237,.05) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}
.main-content > * { position: relative; z-index: 1; }