@import url('grid-custom-resp.css');

:root {
    --bs-primary: #d1183a;
    --bs-primary-suttle: rgba(209,24,58,0.1);
    --bs-primary-light: #f8224a;
    --bs-primary-dark: #ff1a4b;
    --bs-primary-hover: #a20c28;
    --bs-dropdown-link-hover-color: #5f4388;
    --bs-secondary: #727b83;
    --bs-secondary-hover: #59636c;
    --bs-info: #20a7d5;
    --bs-danger: #c03221;
    --bs-card-body-color-dark: #222738;
    --gr-yellow-extra-light: #fae3c4;
    --gr-yellow-light: #efa33b;
    --gr-yellow: #eb8c0a;
    --gr-yellow-hover: #e06604;
    --gr-blue-extra-light: #c0e1ed;
    --gr-blue-light: #309dc4;
    --gr-blue: #2895bc;
    --gr-blue-hover: #14709f;
    --gr-pink-extra-light: #f7c4e1;
    --gr-pink-light: #e33d9b;
    --gr-pink: #d51180;
    --gr-pink-hover: #c2075a;
    --gr-purple-extra-light: #ddd4ea;
    --gr-purple-light: #8f70bb;
    --gr-purple: #5f4388;
    --gr-purple-hover: #3c2663;
    --gr-grad: linear-gradient(45deg, rgba(74, 34, 87, 1) 0%, rgba(0, 56, 117, 1) 100%);
    --gr-grad-ver: linear-gradient(180deg, rgba(209,24,58,1) 0%, rgba(79,22,45,1) 100%);
    --gr-green: #048b1d;
    --lgrey: #ededed;
    --font-color: #6c757d;
    --font-color-emp: #232d42;
    --border-light: #dbdcdc;
    --wysiwyg-light: #eceff1;
    --font-light: #6c757d;
    --border-dark: #545763;
    --font-color-dark: #9d9fa6;
    --font-color-emp-dark: #efefef;
    --header-color: #000;
    --header-nav-font: Nunito, "Poppins", Raleway sans-serif;
    --font-default: Nunito, "Poppins", Raleway sans-serif;
    --bs-pagination-font-size: 0.838rem;
    --bs-body-bg: #d8d8dc;
    --sc-unknown: #624486;
    --sc-pending: #ac6443;
    --sc-active: #de7e15;
    --sc-in-active: #e09113;
    --sc-suspended: #8b955c;
    --sc-restricted: #3395ad;
    --sc-under-review: #3384bc;
    --sc-retired: #7651a8;
    --sc-archive: #d21381;
    --box-radius: 10px;
    --bg-color-light: #eeeeee;
    --bg-color-light-dark: #cacaca;
    --bg-color-light-hover: #f4f4f4;
    --grad-pm: linear-gradient(180deg, rgba(248,34,74,1) 0%, rgba(167,48,108,1) 100%);
    --bs-card-bg: #ffffff;
    --bs-modal-padding: 1.5rem;
    --bs-green: #0f7408;
    --bs-red: #bd1313;
    --bg-dark-light: #2d3242;
    --bg-dark: #222738;
    --bg-dark-extra: #151824;
    --ch-purple: #7B459A;
    --ch-maroon: #A7306C;
    --ch-blue: #286CF0;
    --ch-red: #F8224A;
    --circle-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 48px;
}

html {
    position: relative;
    min-height: 100%;
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body,
p {
    color: var(--font-color);
}
body,
p,
label,
li,
button,
.btn,
.form-control,
.sidebar .nav-link,
div{
    font-family: "Poppins", Raleway sans-serif;
    font-size: 13.5px;
}

.dark body,
.dark p,
.dark label,
.dark .btn-dropdown {
    color: var(--font-color-dark);
}
body {
    background-color: var(--bs-body-bg);
}

p {
    line-height: 1.7em;
}

.btn,
button{
    transition:all 0.2s
}

.btn-dropdown {
    padding: unset;
    background: transparent;
    border: unset;
}

    .btn-dropdown img {
        margin-right: 10px;
    }

.dropdown-menu {
    min-width: 100%;
    border-radius: var(--box-radius);
}

.dropdown-item {
    font-size: 0.838rem;
}

a {
    color: var(--bs-primary);
    text-decoration: none;
}

    a:hover,
    a:focus{
        color: var(--bs-primary-hover);
        text-decoration: none;
    }

.a-inline {
    display: inline-block
}


h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--header-nav-font);
}

h1 {
    font-size: 2rem;
}
h2 {
    font-size: 1.75rem;
}
h3 {
    font-size: 1.5rem;
}
h4 {
    font-size: 1.25rem;
}
h5 {
    font-size: 1.125rem;
}
h6{
    font-size:1rem;
}


.dark h1, .dark .h1, .dark h2, .dark .h2, .dark h3, .dark .h3, .dark h4, .dark .h4, .dark h5, .dark .h5, .dark h6, .dark .h6 {
    color: #efefef;
}

.f-btns-hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    margin: 1rem 0 2rem 0;
}

.mt-10 {
    margin-top: 0.625rem;
}

.ml-7 {
    margin-left: 7px;
}

.mt-at-sign {
    padding-top: 25px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content:center;
}

.mh-100 {
    min-height: 100%;
}
.vh-100{
    height:100vh;
}

.bg-grad {
    background: var(--gr-grad);
}

.f-size-16 {
    font-size: 1rem
}

.f-size-18 {
    font-size: 1.125rem
}

.f-size-20 {
    font-size: 1.25rem
}

.f-size-22 {
    font-size: 1.375rem
}

.f-size-24 {
    font-size: 1.5rem
}

.f-size-28 {
    font-size: 1.75rem
}

.f-size-30 {
    font-size: 1.875rem
}

.f-size-36 {
    font-size: 2.25rem
}

.fc-primary {
    color: var(--bs-primary);
}

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

.badge {
    padding: unset;
    margin: unset;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.5em;
}

.emp-text-block {
    border-radius:var(--box-radius);
    border:1px #ccc solid;
    border-left:3px var(--bs-primary) solid;
    padding:1.5rem;
    margin-bottom:25px;
}
.etb-nm{
    margin-bottom:unset;
}

.emp-text-block h6{
    margin-bottom:1rem;
}
.emp-text-block p{
    margin-bottom:unset;
}
    .emp-text-block p strong{
        font-weight:600;
        color:var(--font-color-emp);
    }
.dark .emp-text-block p strong {
    font-weight: 600;
    color: var(--font-color-emp-dark);
}

/*--- Gen List ---*/
.gen-list {
    margin: 10px 0;
    padding: unset;
}

    .gen-list li {
        list-style-type: none;
        margin: 5px 0;
    }

        .gen-list li a {
            display: flex;
            align-items: center;
        }

            .gen-list li a i {
                font-size: 15px;
                margin-right: 5px;
            }

/*--- header ---*/
.header-qlinks {
    margin-right: 15px;
    padding-right: 15px;
    border-right: 1px #ccc solid;
}



/*--- widgets ---*/
.progress-widget .progress-detail {
    margin-left: 1.125rem;
}

/*-- sidebar --*/
.sidebar.sidebar-dark {
    background: #0e1019;
}
.dark .sidebar.sidebar-dark {
    background-color: #0e1019;
}

/*-- status --*/
.status-blocks{
    border-radius:15px;
    padding:6px 12px;
    font-size:13px;
    display:flex;
    align-items:center;
    max-width:145px;
}
.status-blocks i{
    font-size:14px;
    display:flex;
    justify-content:center;
    width:25px;
}
.sb-green,
.sb-valid,
.sb-sent,
.sb-delivered {
    background-color: #6A9A23;
    color: #fff;
}
.sb-red,
.sb-invalid,
.sb-failed {
    background-color: #C9372C;
    color: #fff;
}
.sb-scheduled,
.sb-orange {
    background-color: #E56910;
    color: #fff;
}
.sb-blue,
.sb-draft {
    background-color: #2898BD;
    color: #fff;
}
.sb-sea-green,
.sb-queue {
    background-color: #22A06B;
    color: #fff;
}
.sb-purple,
.sb-archive {
    background-color: #CC519D;
    color: #fff;
}

.valid-blocks {
    border-radius: 15px;
    padding: 6px 12px;
    font-size: 13px;
    display: flex;
    align-items: center;
}

    .valid-blocks i {
        font-size: 20px;
        display: inline-flex;
        justify-content: center;
        width: 25px;
    }

/*-- progress --*/
.send-progress-bar {
    padding: 3px;
    border-radius: 50px;
    background-color: #e0e0e0;
    width: 100%;
}
.spb-inner {
    background: linear-gradient(90deg, rgba(248,34,74,1) 0%, rgba(209,24,58,1) 100%);
    border-radius: 50px;
    padding:12px 20px;
    color:#fff;
    display:flex;
    justify-content:end;
}

.spb-total span {
    padding: 5px 10px;
    border-radius: 20px;
    background: rgba(0,0,0,0.7);
    color:#fff;
    margin: 10px 5px;
    display: inline-block;
}
.spb-total-h4 {
    display:flex;
    justify-content:end;
    margin-top:10px;
}

.send-progress-icon-skipped,
.send-progress-icon-failed,
.send-progress-icon-succeeded,
.send-progress-icon-time {
    width: 50px;
    height: 45px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 2rem;
}
.send-progress-icon-skipped {
    background-color: #6192fe;
}
.send-progress-icon-failed {
    background-color: #e89a25;
}
.send-progress-icon-succeeded {
    background-color: #4ab491;
}
.send-progress-icon-time {
    background-color: #e04545;
}
.spb-copy {
    margin:unset;
}

.send-progress-current {
    background-color:#efefef;
    border: 1px #ccc dashed;
    padding: 15px;
    border-radius: 10px;
}
.spc-row {
    display:flex;
}
    .spc-row label {
        font-weight: 400;
        color: var(--font-color);
        min-width:120px;
        padding:3px;
    }
    .spc-row .label-result {
        font-weight: 600;
        color: var(--font-color-emp);
        padding: 3px;
    }


.tb-less {
    margin:unset;
    justify-content:start;
    padding:0 !important;
}

.df-c{
    display:flex;
    align-items:center;
}

/*--------------------------------------------------------------
# Stats Mini
--------------------------------------------------------------*/

.stats-mini {
    padding: 16px;
    color: #fff;
}
.stats-mini i{
    font-size:52px;
    display:flex;
    justify-content:center;
    padding-top:5px;
}

    .stats-mini h3,
    .stats-mini p {
        color: #fff;
    }
    .stats-mini p {
        margin-bottom:unset;
    }

    .stats-mini.sm-p{
        background:var(--ch-purple)
    }
    .stats-mini.sm-m {
        background: var(--ch-maroon)
    }
    .stats-mini.sm-b {
        background: var(--ch-blue)
    }
    .stats-mini.sm-r {
        background: var(--ch-red)
    }

/*--------------------------------------------------------------
# Inboxes
--------------------------------------------------------------*/

.inbox-header {
    padding: 25px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px #ccc solid;
    margin: -25px -25px 0 -25px;
}
.inbox-header .ih-name{
    display:flex;
    flex-direction:column;
}
.ih-name h2 {
    font-size: 16px;
    margin-bottom: unset;
    color:#000;
}
.ih-name p {
    font-size: 14px;
    font-weight: 400;
    margin-bottom:unset;
}
.ih-list {
    margin:unset;
    padding:unset;
    display:flex;
}
.ih-list li{
    list-style-type:none;
}
    .ih-list li a{
        border-radius:25px;
        display:block;
        padding:8px 20px;
        color:var(--bs-primary);
    }
        .ih-list li a:hover,
        .ih-list li a:focus{
            background:#efefef;
        }
        .ih-list li a.active {
            background: var(--bs-primary);
            color:#fff;
        }


.inbox-panels-row {
    margin-left:-1.5rem !important;
    margin-right:-1.5rem !important;
}
.inbox-panels-row .col-md-3{
    padding:unset;
}
.inbox-left-panel {
    background: #F2F2F4;
    overflow-y: scroll;
    overflow-x: hidden;
    /*max-height: 600px;*/
    scrollbar-color: var(--bs-primary) #efefef;
    scrollbar-width: thin;
    margin-bottom: -1.5rem;
    border-radius: 0 0 0 10px;
}
.accordion-item {
    background:transparent;
}

.ilp-list {
    margin:0 -15px;
    padding:unset;
    display:flex;
    flex-direction:column;
}
.ilp-list li{
    list-style-type:none;
    border-bottom:#DDD solid 1px;
}
    .ilp-list li a {
        padding: 15px 10px;
        display: flex;
        align-items: center;
        border-left: 4px solid transparent;
    }
        .ilp-list li a:hover,
        .ilp-list li a:focus {
            background: rgba(255,255,255,0.5);
            border-left: 4px solid rgba(255,255,255,0.5);
        }
        .ilp-list li a.active {
            background: #fff;
            border-left: 4px solid var(--bs-primary);
            margin-left: -1px;
        }

        .ilp-list li a .ilp-list-pic {
            width:25%;
            display:flex;
            align-items:center;
            justify-content:center;
        }
            .ilp-list li a .ilp-list-pic .pic {
                background:#efefef;
                border-radius:50%;
                width: 50px;
                height: 50px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size:22px;
            }
                .ilp-list li a .ilp-list-pic .pic.col-blue {
                    background: #C9D6F6;
                    color: #444C8B;
                }
                .ilp-list li a .ilp-list-pic .pic.col-purple {
                    background: #E2CBF7;
                    color: #7536B8;
                }
                .ilp-list li a .ilp-list-pic .pic.col-green {
                    background: #C9EDC7;
                    color: #07780B;
                }

        .ilp-list li a .ilp-list-name {
            width:75%;
        }
            .ilp-list li a .ilp-list-name.unread h5 {
                font-size: 15px;
                font-weight: 600;
                margin-bottom: unset;
            }
            .ilp-list li a .ilp-list-name.unread p {
                font-size: 13px;
                font-weight: 500;
                color: var(--bs-primary-shade-80);
            }

            .ilp-list li a .ilp-list-name.read h5 {
                font-size: 15px;
                font-weight: 400;
                margin-bottom: unset;
            }
            .ilp-list li a .ilp-list-name p {
                margin: unset;
                font-size: 13px;
            }

        .ilp-list li a .ilp-list-time {
            color: var(--font-color);
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 13px;
        }
        .ilp-list li a .ilp-list-time .icon-status{
            width:20px;
            height:20px;
            border-radius:50%;
            display:flex;
            justify-content:center;
            align-items:center;
        }


.inbox-right-panel {
    background: #FFF;
    min-height: 300px;
    height: 100%;
}
.irp-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px #ccc dotted;
    flex-wrap:wrap;
}
.irp-header .profile{
    display:flex;
    align-items:center
}
    .irp-header .profile .pic{
        width:70px;
        height:70px;
        background:#efefef;
        border-radius:50%;
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:28px;
    }
    .irp-header .profile .name {
        display: flex;
        flex-direction: column;
        min-width: 250px;
        margin-left: 15px;
        font-size: 16px;
        font-weight: 600;
        color: var(--font-color-emp)
    }
    .irp-header .profile .name span{
        font-size:14px;
        font-weight:500;
        color:var(--font-color-emp)
    }

    .irp-header .date-time-view {
        display:flex;
        align-items:center;
    }
    .irp-header .date-time-view .date-time{
        margin-right:15px;
    }
        .irp-header .date-time-view .btn-view {
            width: 35px;
            height: 35px;
            border: 1px #ccc solid;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size:18px;
        }
            .irp-header .date-time-view .btn-view:hover {
                background: var(--bs-primary);
                border: 1px var(--bs-primary) solid;
                color: #fff;
            }

    .irp-header .irp-recipients-row {
        display: flex;
        width: 100%;
        margin-top:10px;
        margin-left:-5px;
        margin-right:-5px;
    }
        .irp-header .irp-recipients-row .irp-rr-to {
            background: #E7F1FF;
            border: 1px #649AEA dotted;
            color: #1569E5;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 5px;
            font-weight: 600;
        }
        .irp-header .irp-recipients-row a {
            border: 1px #ccc dotted;
            border-radius: 25px;
            color: #757575;
            display: block;
            padding: 8px 10px;
            white-space: nowrap;
            margin:0 5px;
            transition:all 0.2s;
        }
            .irp-header .irp-recipients-row a:hover,
            .irp-header .irp-recipients-row a:focus {
                background: #E7F1FF;
                border: 1px #649AEA dotted;
                color: #1569E5;
            }




.irp-header,
.irp-content {
    padding: 20px;
    margin-left: -15px;
    margin-right: -15px;
}
.irp-content h3{
    font-size:18px;
    font-weight:500;
    color:var(--font-color-emp);
    margin-bottom:10px;
}
.irp-content p{
    color:var(--font-color);
}


/*--------------------------------------------------------------
# Buttons
--------------------------------------------------------------*/
.btn {
    border-radius: 55px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .btn i {
        margin-right: 5px;
        margin-left:5px;
        font-size: 1.25rem;
    }

    .btn .btn-inner i:not(.fas):not(.fab) {
        position: relative;
        top: 2px;
        margin: unset;
    }

.btn-icons{
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.btn-block {
    width: 100%;
}

.btn-big{
    padding:10px 25px;
    font-size:16px;
}

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

    .btn.btn-primary:hover,
    .btn.btn-primary:focus {
        background-color: var(--bs-primary-hover);
        border-color: var(--bs-primary-hover);
    }

.dark .btn.btn-primary:hover,
.dark .btn.btn-primary:focus {
    background-color: var(--bs-primary-dark);
    border-color: var(--bs-primary-dark);
}


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

    .btn.btn-outline-primary:hover,
    .btn.btn-outline-primary:focus {
        color: #fff;
        background-color: var(--bs-primary);
    }
.btn-check:checked + .btn, .btn-check:active + .btn, .btn:active, .btn.active, .btn.show {
    background-color: var(--bs-primary);
}


.dark .btn.btn-outline-primary {
    color: var(--bs-primary-dark);
    border-color: var(--bs-primary-dark);
}

    .dark .btn.btn-outline-primary:hover,
    .dark .btn.btn-outline-primary:focus {
        color: var(--bs-white);
        background-color: var(--bs-primary-dark);
        border-color: var(--bs-primary-dark);
    }


.btn.btn-secondary {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
}

    .btn.btn-secondary:hover,
    .btn.btn-secondary:focus {
        background-color: var(--bs-secondary-hover);
    }

.btn.btn-outline-secondary {
    color: var(--bs-secondary);
    border-color: var(--bs-secondary);
}

    .btn.btn-outline-secondary:hover,
    .btn.btn-outline-secondary:focus {
        color: #fff;
        background-color: var(--bs-secondary);
    }

.btn.btn-blue {
    background-color: var(--gr-blue);
    color: #fff;
}

    .btn.btn-blue:hover,
    .btn.btn-blue:focus {
        background-color: var(--gr-blue-hover);
        color: #fff;
    }

.btn-icon-cir {
    border: 1px var(--border-light) solid;
    color: var(--font-light);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
    font-size: 22px;
}

    .btn-icon-cir:hover {
        background-color: var(--bs-primary);
        border: 1px var(--bs-primary) solid;
        color: #fff;
    }
.btn-outline-primary .btn-number {
    background: var(--bs-primary);
    border-radius: 50%;
    color: #fff;
    width: 25px;
    height: 25px;
    font-size: 12px;
    margin-left:10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-outline-primary:hover .btn-number {
    background-color: #fff;
    color: var(--bs-primary);
}

.btn-split{
    display:flex;
}

    .btn-split .bs-number {
        border-left: 1px var(--bs-primary) solid;
        margin: -10px 5px -10px 7px;
        padding: 7px;
    }
        .btn-outline-primary:hover .bs-number {
            border-left: 1px rgba(255,255,255,0.5) solid;
        }


/*--------------------------------------------------------------
# Grid / Table - responsive setup
--------------------------------------------------------------*/
.gr-grid-setup {
}

    .gr-grid-setup .user-avtar {
        border-radius: 50%;
        width: 50px;
        height: 50px;
    }
.ggs-devide-right {
    border-right: 1px rgba(200, 200, 200, 0.5) solid;
}

.ggs-row-bleft,
.ggs-row-bright,
.ggs-row-3m,
.ggs-row {
    display: flex;
    align-items: center;
    border-bottom: 1px rgba(200,200,200,0.5) solid;
    justify-content: space-between;
}

.gr-grid-setup .ggs-row-bleft:last-child,
.gr-grid-setup .ggs-row-bright:last-child {
    border-bottom: unset;
}

.ggs-row-3m:first-child,
.ggs-row:first-child {
    background-color: rgba(200,200,200,0.2);
    font-weight: 500;
    color: var(--font-color-emp);
    min-height: 4rem;
}

.dark .ggs-row-3m:first-child,
.dark .ggs-row:first-child {
    background-color: rgba(200,200,200,0.2);
    font-weight: 500;
    color: var(--font-color-emp-dark);
    min-height: 4rem;
}

.ggs-row-3m:first-child .ggs-col,
.ggs-row:first-child .ggs-col {
    color: var(--font-color-emp);
}

.dark .ggs-row-3m:first-child .ggs-col,
.dark .ggs-row:first-child .ggs-col {
    color: var(--font-color-emp-dark);
}

.dark .ggs-row-3m:first-child,
.dark .ggs-row:first-child {
    background-color: #2c3349;
    font-weight: 500;
}

.ggs-row-bleft:last-child,
.ggs-row-bright:last-child,
.ggs-row-3m:last-child,
.ggs-row:last-child {
    border-bottom: unset
}


.ggs-row-bleft div,
.ggs-row-bright div,
.dark .ggs-row-bleft div,
.dark .ggs-row-bright div {
    flex: 1;
    padding: 1rem 0.25rem;
}
.ggs-row-bleft div,
.ggs-row-bright div {
    color: var(--font-color);
}
.dark .ggs-row-bleft div,
.dark .ggs-row-bright div {
    color: var(--font-color-dark);
}

.ggs-row-less div {
    flex: unset;
    padding:0.5rem;
}



    .ggs-row-bright div:nth-child(2) {
        font-weight: 500;
        color: var(--font-color-emp);
    }

.dark .ggs-row-bright div:nth-child(2) {
    font-weight: 500;
    color: var(--font-color-emp-dark);
}

.ggs-row-bleft div:nth-child(1) {
    font-weight: 500;
    color: var(--font-color-emp);
}

.dark .ggs-row-bleft div:nth-child(1) {
    font-weight: 500;
    color: var(--font-color-emp-dark);
}


.ggs-row-3m .ggs-col,
.ggs-row .ggs-col,
.dark .ggs-row-3m .ggs-col,
.dark .ggs-row .ggs-col,
.ggs-row-3m .ggs-col-action,
.ggs-row .ggs-col-action,
.ggs-row-3m .ggs-col-100,
.ggs-row .ggs-col-100 {
    padding: 6px;
}
.ggs-row-3m .ggs-col,
.ggs-row .ggs-col {
    color: var(--font-color);
}
.dark .ggs-row-3m .ggs-col,
.dark .ggs-row .ggs-col {
    color: var(--font-color-dark);
}

.ggs-row-3m .ggs-col-action,
.ggs-row .ggs-col-action {
    width: 10%;
}

.ggs-row-3m .ggs-col-100,
.ggs-row .ggs-col-100 {
    width: 100%;
    color: var(--font-color);
}

.ggs-row-3m .ggs-col-90,
.ggs-row .ggs-col-90 {
    width: 90%;
}

.ggs-row-3m .ggs-col-80,
.ggs-row .ggs-col-80 {
    width: 80%;
}

.ggs-row-3m .ggs-col-70,
.ggs-row .ggs-col-70 {
    width: 70%;
}

.ggs-row-3m .ggs-col-60,
.ggs-row .ggs-col-60 {
    width: 60%;
}

.ggs-row-3m .ggs-col-50,
.ggs-row .ggs-col-50 {
    width: 50%;
}

.ggs-row-3m .ggs-col-45,
.ggs-row .ggs-col-45 {
    width: 45%;
}

.ggs-row-3m .ggs-col-40,
.ggs-row .ggs-col-40 {
    width: 40%;
}

.ggs-row-3m .ggs-col-35,
.ggs-row .ggs-col-35 {
    width: 35%;
}

.ggs-row-3m .ggs-col-30,
.ggs-row .ggs-col-30 {
    width: 30%;
}

.ggs-row-3m .ggs-col-25,
.ggs-row .ggs-col-25 {
    width: 25%;
}

.ggs-row-3m .ggs-col-20,
.ggs-row .ggs-col-20 {
    width: 20%;
}

.ggs-row-3m .ggs-col-15,
.ggs-row .ggs-col-15 {
    width: 15%;
}

.ggs-row-3m .ggs-col-10,
.ggs-row .ggs-col-10 {
    width: 10%;
}
.ggs-row-3m .ggs-col-5,
.ggs-row .ggs-col-5 {
    width: 5%;
}
.ggs-row-3m .ggs-col-14,
.ggs-row .ggs-col-14 {
    width: 14%;
}
.ggs-row-3m .ggs-col-12,
.ggs-row .ggs-col-12 {
    width: 12%;
}
.ggs-row-3m .ggs-col-8,
.ggs-row .ggs-col-8 {
    width: 8%;
}


.ggs-row-3m .ggs-col-avatar,
.ggs-row .ggs-col-avatar {
    width: 10%;
}
.ggs-center{
    text-align:center;
}

.ggs-link-number{
    text-align:center;
}
    .ggs-link-number a {
        background-color: var(--bs-primary);
        border-radius: 15px;
        display: inline-block;
        color: #fff;
        padding: 6px 12px;
        font-size: 13px;
        min-width: 60px;
        line-height: 20px;
        text-align: center;
        transition: all 0.2s;
    }
    .ggs-link-number a:hover,
    .ggs-link-number a:focus {
        background-color: var(--bs-primary-hover);
    }

.ggs-head-icons {
    border: 1px #ccc solid;
    border-radius: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.65rem;
    width: 50px;
    height: 50px;
}

/*--------------------------------------------------------------
# Header - Left and Top Nav
--------------------------------------------------------------*/
.logo-title {
    font-family: var(--header-nav-font);
    color: #F8224A !important;
    text-transform: unset;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-left:10px !important;
}

.sidebar .navbar-brand {
    padding: 0.625rem 1rem;
}

.sidebar .logo-main .logo-normal {
    display: block;
    height: 45px;
    width: 45px;
}

.sidebar.navs-rounded-all .sidebar-body .nav-item .nav-link {
    border-radius: 1.563rem;
}

.sidebar + .main-content .iq-navbar-header .iq-container {
    padding: 25px;
}

.sidebar + .main-content .iq-navbar-header .iq-header-img {
    height: 300px;
    border-radius: 0 0 15px 15px;
}

.sidebar-base .nav-item {
    margin-top: 3px;
    margin-bottom: 3px;
}

.sidebar .nav-link {
    font-family: var(--header-nav-font);
    font-weight: 300;
}
.dark .sidebar.sidebar-default .nav-link:not(.static-item):hover:not(.active):not([aria-expanded=true]) {
    background-color: rgba(255,255,255,0.1);
    color:#efefef;
}
.dark .sidebar.sidebar-default .nav-link:not(.static-item).active,
.dark .sidebar.sidebar-default .nav-link:not(.static-item)[aria-expanded=true] {
    background: var(--bs-primary);
    color: #fff;
    box-shadow: 0 10px 20px -10px rgba(0,0,0,0.5);
}

.sidebar-base .nav-item .nav-link {
    padding: .75rem 1rem;
}
.dark .sidebar-base .nav-item .nav-link {
    color:var(--font-color-dark);
    padding: .75rem 1rem;
}

.nav-link {
    display: flex;
    position: relative;
}

    .nav-link .badge {
        position: absolute;
        background: var(--gr-pink-light);
        border-radius: 50%;
        top: -5px;
        right: -5px;
    }

.iq-navbar-header {
    height: 125px;
}

.gradient,
.gradient-bottom {
    height: 100vh;
    background: var( --gr-grad);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    overflow: hidden;
}

    .gradient p,
    .gradient-bottom p {
        color: #fff;
    }

.sidebar-base .nav-item .nav-link .item-name {
    font-weight: 400;
}

.caption-title {
    font-size: 0.838rem
}

.caption-sub-title {
    font-size: 0.875rem
}

/*--- cards ---*/
.c-mh-225 {
    min-height: 225px;
}

.c-mh-320 {
    min-height: 320px;
}

.c-mh-360 {
    min-height: 360px;
}

.d-slider1 .swiper-button.swiper-button-prev {
    background-color: var(--bs-primary);
    color: #fff;
    border-radius: 50%;
}

.d-slider1 .swiper-button.swiper-button-prev {
    background-color: var(--bs-primary);
    color: #fff;
    border-radius: 50%;
}

.d-slider1 .swiper-button.swiper-button-next {
    background-color: var(--bs-primary);
    border-radius: 50%;
}

    .d-slider1 .swiper-button.swiper-button-next:after {
        color: #fff;
    }

.d-slider1 .swiper-button.swiper-button-prev:after {
    color: #fff;
}

.card-nbm {
    margin-bottom: unset;
}

.card-header-wtabs {
    border-radius: unset !important;
}

.card-wtabs {
    border-radius: 0 0 10px 10px;
}

.header-title {
    display: flex;
}

    .header-title h5.sub-db {
        width: 215px;
        line-height: 1.4em;
        margin-bottom: unset;
    }


.card-wforms .form-group {
    margin-bottom: unset;
}

.card-body,
.modal-body {
    padding: 1.5rem;
}
h5.card-title {
    font-size: 1.125rem;
    margin: -1.5rem -1.5rem 1.5rem -1.5rem;
    padding: 1.5rem;
    border-bottom: 1px #ccc dotted;
}
h5.card-title span{
    display:block;
    color:var(--font-color);
    font-size:0.875rem;
}

.card-body strong {
    color: var(--bs-primary-shade-80);
}

.card-body .cb-charts div,
.card-body .cb-charts div div,
.card-body .cb-charts div div svg,
.card-body .cb-charts div div svg foreignObject {
    height: unset !important;
    min-height: unset !important;
}
.dark .card-body .cb-charts div div svg text{
    fill:#efefef;
}

.card{
    margin-bottom:unset;
    border:unset;
}

.card .card {
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}

.dark .card .card {
    box-shadow: rgba(255, 255, 255, 0.02) 0px 1px 3px 0px, rgba(101, 103, 114, 0.15) 0px 0px 0px 1px;
}

.card-hr {
    border-bottom: 1px #ccc solid;
    border-top:unset;
    margin: 1.5rem -1.5rem 1.5rem -1.5rem;
    opacity: unset;
}

.dark .card-hr {
    border-bottom: 1px #777a82 solid;
}

.dropdown-hr {
    border-bottom: 1px #ccc solid;
    margin: 1rem 0;
    opacity: unset;
}

.map-container {
    border-radius: 10px 10px 0 0;
    overflow: hidden;
}

.card-search {
    margin-bottom: 1.5rem;
}

    .card-search .form-group {
        margin-bottom: unset;
    }

.card-title-type {
    display: flex;
    align-items: center;
}

    .card-title-type p {
        margin-bottom: unset;
    }

    .card-title-type i {
        margin-right: 5px;
    }

.card-title {
    display: flex;
    align-items: center;
    justify-content:space-between;
}

    .card-title i {
        font-size: 24px;
        margin-right: 5px;
    }

.card-img-head {
    min-height: 280px;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
    position: relative;
}

    .card-img-head h5 {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 5px;
    }

    .card-img-head .img-head {
        height: 175px;
        width: 100%;
    }

    .card-img-head .usage-type {
        background-color: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 130px;
        height: 130px;
        bottom: 45px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    }

        .card-img-head .usage-type i {
            font-size: 6rem;
            color: var(--bs-primary);
        }

.logo-pic {
    display: flex;
    align-items: center;
    justify-content: center;
}

    .logo-pic .user-img {
        width: 100%;
        height: auto;
        max-height: 450px;
        max-width: 450px;
    }

.card-img-top {
    overflow: hidden;
    max-height: 180px;
    position: relative;
}

.card-footer {
    border-top: 1px #ccc solid;
}

.card-submit-head {
    background: transparent url(../img/success-confetti.svg) repeat-x left top;
    min-height: 250px;
    position: relative;
}
    .card-submit-head .icon-success {
        background: #fff;
        border-radius: 50%;
        box-shadow: var(--circle-shadow);
        width: 150px;
        height: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%);
    }
        .card-submit-head .icon-success i {
            font-size: 80px;
            color: var(--gr-green);
        }
.card-submit-body {
    padding: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
    .card-submit-body h2 {
        margin:5px;
        color: var(--gr-green);
        font-size: 30px;
        font-weight:600;
    }



/*-- bootstrap calendar --*/
.dtp > .dtp-content > .dtp-date-view > header.dtp-header {
    background: var(--bs-primary);
}

.dtp div.dtp-date, .dtp div.dtp-time {
    background: var(--bs-primary-light);
}

.dtp .p10 > a {
    color: var(--bs-primary);
}

.dtp table.dtp-picker-days tr > td > a.selected {
    background: var(--bs-primary);
}

/*--- Charts ---*/

.apexcharts-legend {
    top: 0 !important;
}


.metric {
    padding: 10%;
}

    .metric svg {
        max-width: 100%;
    }

    .metric path {
        stroke-width: 75;
        stroke: #ecf0f1;
        fill: none;
    }
    .dark .metric path {
        stroke:rgba(255,255,255,0.3);
    }

    .metric text {
        font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    .metric.participation path.data-arc {
        stroke: #3498db;
    }
    .metric.participation text {
        fill: #3498db;
    }

    .metric.completion path.data-arc {
        stroke: #27ae60;
    }
    .metric.completion text {
        fill: #27ae60;
    }

    .metric.blocked path.data-arc {
        stroke: #e74c3c;
    }
    .metric.blocked text {
        fill: #e74c3c;
    }

    .metric.spam path.data-arc {
        stroke: #820cae;
    }
    .metric.spam text {
        fill: #820cae;
    }

/*-- Sub Dashboard --*/

.db-sh {
    height: 160px;
}

.db-card-icon {
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
}

    .db-card-icon i {
        font-size: 2.25rem;
    }

    .db-card-icon.dbci-purple {
        background-color: var(--gr-purple-extra-light);
    }

        .db-card-icon.dbci-purple i {
            color: var(--gr-purple);
        }

    .db-card-icon.dbci-yellow {
        background-color: var(--gr-yellow-extra-light);
    }

        .db-card-icon.dbci-yellow i {
            color: var(--gr-yellow);
        }

    .db-card-icon.dbci-blue {
        background-color: var(--gr-blue-extra-light);
    }

        .db-card-icon.dbci-blue i {
            color: var(--gr-blue);
        }

    .db-card-icon.dbci-pink {
        background-color: var(--gr-pink-extra-light);
    }

        .db-card-icon.dbci-pink i {
            color: var(--gr-pink);
        }

.db-list {
    margin: unset;
    padding: 1rem 2rem 1rem 0;
}

    .db-list li {
        list-style-type: none;
    }

        .db-list li a {
            display: flex;
            align-items: center;
            padding: 3px;
        }

            .db-list li a i {
                font-size: 1rem;
                margin-right: 15px;
            }


/*-- cards - profiles --*/
.cb-ver {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
}

    .cb-ver .profile-pic {
        border-radius: 50%;
        background-color: #ccc;
        width: 100px;
        height: 100px;
        overflow: hidden;
        margin-bottom: 15px;
    }

        .cb-ver .profile-pic img {
            width: 100%;
            height: 100%;
        }

    .cb-ver .profile-detail {
        padding-bottom: 25px;
    }

        .cb-ver .profile-detail h5 {
            font-size: 1.125rem;
            margin-bottom: 5px;
        }

    .cb-ver .profile-member-type {
        display: inline-block;
        background-color: rgba(95,67,136,0.1);
        border-radius: 25px;
        padding: 2px 8px;
        margin: 5px;
        font-size: 0.813rem;
        min-height: 20px;
        min-width: 20px;
    }

    .cb-ver .profile-contact {
        align-items: center;
    }

        .cb-ver .profile-contact .icon {
            width: 25px;
            font-size: 1.5rem;
            color: var(--bs-primary);
        }

        .cb-ver .profile-contact p {
            display: block;
            margin-bottom: unset;
        }

    .cb-ver .profile-btns {
        display: flex;
        justify-content: center;
        border-top: 1px var(--border-light) solid;
        padding-top: 15px;
        width: 100%;
    }

        .cb-ver .profile-btns.pb-abs {
            position: absolute;
            bottom: 20px;
        }


        .cb-ver .profile-btns .btn {
            margin-left: 5px;
            margin-right: 5px;
        }

.dark .cb-ver .profile-btns {
    border-top: 1px var(--border-dark) solid;
}

.btn-circle-icon,
.cb-ver .btn-status,
.cb-ver .btn-edit,
.cb-ver .profile-btns .btns {
    border: 1px var(--bs-primary) solid;
    color: var(--bs-primary);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: 5px 7px 0 7px;
    transition: all 0.2s;
    font-size: 22px;
}

.cb-ver .btn-status,
.cb-ver .btn-edit,
.cb-ver .btn-settings,
.cb-ver .btn-danger,
.cb-ver .profile-btns .btns {
    margin: 5px 7px 0 7px;
}

.btn-circle-icon.btn-info,
.cb-ver .btn-edit,
.btn-circle-icon.btn-settings,
.cb-ver .btn-settings {
    border: 1px var(--bs-info) solid;
    color: var(--bs-info);
}

    .btn-circle-icon.btn-info:hover,
    .cb-ver .btn-edit:hover,
    .btn-circle-icon.btn-settings:hover,
    .cb-ver .btn-settings:hover {
        background: var(--bs-info);
        border: 1px solid var(--bs-info);
        color: #fff;
    }

.btn-circle-icon.btn-danger,
.cb-ver .btn-danger {
    border: 1px var(--bs-danger) solid;
    color: var(--bs-danger);
}

    .btn-circle-icon.btn-danger:hover,
    .cb-ver .btn-danger:hover {
        background: var(--bs-danger);
        border: 1px solid var(--bs-danger);
        color: #fff;
    }


.cb-ver .profile-btns .btns {
    border: 1px var(--border-light) solid;
    color: var(--font-light);
}

    .btn-circle-icon:hover,
    .cb-ver .profile-btns .btns:hover {
        background: var(--bs-primary);
        border: 1px solid var(--bs-primary);
        color: #fff;
    }

.dark .dropup .btns {
    background-color: #343a49;
    border: 1px solid var(--border-dark);
    color: var(--font-dark);
}

.dark .cb-ver .profile-btns .btns {
    border: 1px var(--border-dark) solid;
    color: var(--font-dark);
}

    .dark .cb-ver .profile-btns .btns:hover {
        background: var(--bs-primary-dark);
        border: 1px solid var(--bs-primary-dark);
        color: #fff;
    }

.cb-ver .btn-status,
.cb-ver .btn-edit {
    margin: unset;
}

.cb-ver .btn-edit {
    position: absolute;
    top: 10px;
    right: 10px;
}

.cb-ver .btn-status {
    position: absolute;
    top: 10px;
    left: 10px;
}

.cb-ver .dropup .dropdown-toggle::after {
    display: none;
}

.cb-ver .dropdown-menu {
    border: 1px #ccc solid;
}

/*-- search and select functions --*/
.ss-setup {
    display: flex;
    justify-content: space-between;
    border-top: 1px var(--border-light) solid;
    padding-top: 15px;
    margin-top: 15px;
}

.dark .ss-setup {
    border-top: 1px var(--border-dark) solid;
}

.ss-setup .btn-primary {
    padding: 0 15px;
}

.ss-setup .btns {
    border: 1px var(--border-light) solid;
    color: var(--font-light);
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    margin-left: 7px;
    transition: all 0.2s;
    padding: 0 15px;
}

    .ss-setup .btns:hover,
    .ss-setup .btns:focus {
        background-color: var(--bs-primary);
        border: 1px var(--bs-primary) solid;
        color: #fff;
    }

.dark .ss-setup .btns {
    border: 1px var(--border-dark) solid;
    color: var(--font-dark);
}

    .dark .ss-setup .btns:hover,
    .dark .ss-setup .btns:focus {
        background-color: var(--bs-primary-dark);
        border: 1px var(--bs-primary-dark) solid;
        color: #fff;
    }

.ss-setup .btn-primary span.btns-icon,
.ss-setup .btns span.btns-icon {
    font-size: 1.25rem;
    margin-right: 5px;
}

.ss-setup .btns span.btns-label {
    font-size: 0,9375rem;
}

.grid-table,
.select {
    display: flex;
}




.pw-circle {
    border: 2px solid;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
}
/*-- status btn + icon - unknown --*/
.pwc-unknown,
.btn-status.pwc-unknown {
    color: var(--sc-unknown);
    border-color: var(--sc-unknown);
}

    .btn-status.pwc-unknown:hover {
        color: #fff;
        background-color: var(--sc-unknown);
        border-color: var(--sc-unknown);
    }

/*-- status btn + icon - pending --*/
.pwc-pending,
.btn-status.pwc-pending {
    color: var(--sc-pending);
    border-color: var(--sc-pending);
    transition: all 0.2s;
}

    .btn-status.pwc-pending:hover {
        color: #fff;
        background-color: var(--sc-pending);
        border-color: var(--sc-pending);
    }

/*-- status btn + icon - active --*/
.pwc-active,
.btn-status.pwc-active {
    color: var(--sc-active);
    border-color: var(--sc-active);
    transition: all 0.2s;
}

    .btn-status.pwc-active:hover {
        color: #fff;
        background-color: var(--sc-active);
        border-color: var(--sc-active);
    }

/*-- status btn + icon - in acitve --*/
.pwc-in-active,
.btn-status.pwc-active {
    color: var(--sc-active);
    border-color: var(--sc-active);
    transition: all 0.2s;
}

.btn-status.pwc-pending:hover {
    color: #fff;
    background-color: var(--sc-active);
    border-color: var(--sc-active);
}


/*-- status btn + icon - suspended --*/
.pwc-suspended,
.btn-status.pwc-suspended {
    color: var(--sc-suspended);
    border-color: var(--sc-suspended);
    transition: all 0.2s;
}

    .btn-status.pwc-suspended:hover {
        color: #fff;
        background-color: var(--sc-suspended);
        border-color: var(--sc-suspended);
    }

/*-- status btn + icon - restricted --*/
.pwc-restricted,
.btn-status.pwc-restricted {
    color: var(--sc-restricted);
    border-color: var(--sc-restricted);
    transition: all 0.2s;
}

    .btn-status.pwc-restricted:hover {
        color: #fff;
        background-color: var(--sc-restricted);
        border-color: var(--sc-restricted);
    }

/*-- status btn + icon - review --*/
.pwc-under-review,
.btn-status.pwc-under-review {
    color: var(--sc-under-review);
    border-color: var(--sc-under-review);
    transition: all 0.2s;
}

    .btn-status.pwc-under-review:hover {
        color: #fff;
        background-color: var(--sc-under-review);
        border-color: var(--sc-under-review);
    }

/*-- status btn + icon - retired --*/
.pwc-retired,
.btn-status.pwc-retired {
    color: var(--sc-retired);
    border-color: var(--sc-retired);
    transition: all 0.2s;
}

    .btn-status.pwc-retired:hover {
        color: #fff;
        background-color: var(--sc-retired);
        border-color: var(--sc-retired);
    }

/*-- status btn + icon - archived --*/
.pwc-archived,
.btn-status.pwc-archived {
    color: var(--sc-archive);
    border-color: var(--sc-archive);
    transition: all 0.2s;
}

    .btn-status.pwc-archived:hover {
        color: #fff;
        background-color: var(--sc-archive);
        border-color: var(--sc-archive);
    }

/*-- page setup --*/
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px #ccc solid;
    margin-bottom: 30px;
    padding-bottom: 30px;
}

    .page-header .stats {
        display: flex;
        align-items: center;
        padding: 0 10px;
    }

        .page-header .stats .stat-indv {
            display: flex;
            align-items: center;
            border-right: 1px #ccc solid;
            padding: 5px 15px;
        }

            .page-header .stats .stat-indv:last-child {
                border-right: unset;
            }

            .page-header .stats .stat-indv .icon {
                font-size: 40px;
                margin-right: 15px;
                color: var(--bs-primary);
            }

            .page-header .stats .stat-indv h5 {
                margin-bottom: unset;
                font-size: 1.125rem;
                font-weight: 600;
            }

            .page-header .stats .stat-indv p {
                margin-bottom: unset;
            }

/*-- tables --*/
.table th,
.table td {
    color: #232d42;
}

.table-striped > tbody > tr:nth-of-type(even) > * {
    color: #232d42;
}

.table {
    --bs-table-striped-bg: rgba(138, 146, 166, 0.07);
}

    .table .user-avtar {
        border-radius: 50%;
        width: 50px;
        height: 50px;
    }

/*--- tabs ---*/
.tabs-hb-setup {
    border-radius: 10px 10px 0 0;
    display: flex;
    justify-content: space-between;
}

    .tabs-hb-setup .nav {
        background-color: transparent;
    }

        .tabs-hb-setup .nav .nav-link {
            color: var(--bs-primary);
            border-top: 2px solid transparent;
            background-color: transparent;
            margin-right: 5px;
        }

        .tabs-hb-setup .nav .nav-link {
            color: var(--bs-primary);
        }

        .tabs-hb-setup .nav .nav-link {
            background-color: var(--bs-primary-light);
            color: var(--bs-white);
        }

.dark .tabs-hb-setup .nav .nav-link {
    background-color: rgba(0,0,0,0.5);
    color: rgba(255,255,255,0.6);
}

.tabs-hb-setup .nav .nav-link:hover,
.tabs-hb-setup .nav .nav-link:focus {
    color: var(--bs-primary);
    background-color: #fff;
    /*border-top: 2px solid var(--bs-primary);*/
    border-top: 2px solid #fff;
}

.dark .tabs-hb-setup .nav .nav-link {
    color: rgba(255,255,255,0.75);
}

.tabs-hb-setup .nav-link.active {
    color: var(--bs-primary);
    background-color: #fff;
    border-top: 2px solid var(--bs-primary);
}

.dark .tabs-hb-setup .nav-link.active {
    color: var(--font-color-emp-dark);
    background-color: var(--bg-dark);
}

.dark .tabs-hb-setup .nav .nav-link:hover,
.dark .tabs-hb-setup .nav .nav-link:focus {
    color: var(--font-color-emp-dark);
    background-color: var(--bg-dark);
}

.tabs-hb-setup .btn-back {
    background-color: #fff;
    border: 1px #ccc solid;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
    font-size: 18px;
    margin: 8px 8px 0 0;
}

.dark .tabs-hb-setup .btn-back {
    background-color: var(--bs-card-body-color-dark);
    border: 1px var(--border-dark) solid;
}

.tabs-hb-setup .btn-back:hover {
    border: 1px var(--bs-primary) solid;
    background: var(--bs-primary);
    color: #fff;
}

.nav-slider .nav-slider-thumb {
    z-index: 1 !important;
    width: 100%;
    color: var(--bs-primary);
    background: #fff;
}

.nav-pills .nav-link {
    border: 0;
    border-radius: 10px 10px 0 0;
    padding: 10px 25px;
}

.iq-banner:not(.hide) + .content-inner {
    margin-top: unset !important;
    padding-top: unset;
    padding-bottom: unset;
}

.content-inner {
    padding: 25px !important;
}

.tabs-hb-bline {
    background: #fff;
    height: 15px;
    box-shadow: 0 10px 30px 0 rgba(17,38,146,.05);
}

.dark .tabs-hb-bline {
    background: var(--bs-card-body-color-dark);
}

/*--- Organisation ---*/
.org-logo-name {
    display: flex;
    align-items: center;
}

.org-logo {
    border: 5px #fff solid;
    border-radius: 50%;
    background-color: #fff;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    .org-logo img {
        height: 100%;
        width: 100%;
    }

.org-name {
    margin-left: 15px;
    font-size: 1.25rem;
}

    .org-name h5 {
        font-weight: 600;
    }

    .org-name p {
        margin-bottom: unset;
        color: rgba(255,255,255,0.5);
    }

.main-content .content-inner {
    min-height: unset;
}

.content-inner,
.content-inner .card,
.content-inner .card .inbox-panels-row {
    height: 100%;
}

/*--------------------------------------------------------------
# Account Pages
--------------------------------------------------------------*/

.hero-dots {
    width: 616px;
    height: 800px;
}

.account-pages .logo-main .logo-normal {
    display: block;
    height: 85px;
    width: 85px;
}

.account-pages .logo-title {
    font-size: 30px;
}

/*--------------------------------------------------------------
# Drop downs
--------------------------------------------------------------*/
.dropdown-menu {
    border-radius: 6px;
    box-shadow: rgba(60, 64, 67, 0.01) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
    position: absolute;
}

.dropdown-item {
    display: flex;
    align-items: center;
    padding: 5px 15px;
}
.dropdown-item:hover{
    color:var(--bs-primary);
}
    .dropdown-item:focus {
        color:#fff;
    }

    .dropdown-item i {
        margin-right: 10px;
    }

.dark .dropdown-menu .dropdown-item {
    color: var(--font-color-dark);
}
    .dark .dropdown-menu .dropdown-item:hover {
        color: var(--font-color-emp-dark);
    }

/*--------------------------------------------------------------
# Tables
--------------------------------------------------------------*/
.table {
    overflow: unset;
}

.td-10 {
    width: 10%;
}

.td-15 {
    width: 15%;
}

.td-20 {
    width: 20%;
}

/*--------------------------------------------------------------
# Fomrs
--------------------------------------------------------------*/

.form-control {
    border: 1px solid var(--border-light);
    -webkit-appearance: auto;
    -moz-appearance: initial;
    appearance: auto;
    border-radius: .5rem;
}

select,
.form-select {
    border: 1px solid var(--border-light);
}

.dark .form-control {
    border: 1px solid var(--border-dark);
}

.logo-pic .user-img {
    width: 100%;
    height: auto;
}

.form-switch .form-check-input {
    width: 3em;
    padding: 12px;
    margin-right: 10px;
}

.fs-pos {
    position: absolute;
    right: 10px;
    top: 10px;
}

.form-check {
    display: flex;
    align-items: center;
}

.form-check-input {
    border-color: var(--border-light);
}

input[type=file] {
    margin: auto;
    padding: 1.125em;
    background-color: #fff;
    width:100%;
}
.dark input[type=file] {
    background-color: var(--bg-dark);
}

    input[type=file]::file-selector-button {
        padding: 0.75rem 1rem;
        border: 1px solid var(--bs-primary);
        border-radius: 2em;
        background-color: #fff;
        color: var(--bs-primary);
        transition: all 0.25s ease-in-out;
        cursor: pointer;
        margin-right: 1em;
    }

        input[type=file]::file-selector-button:hover {
            background-color: var(--bs-primary);
            color:#fff;
        }

.dummy-label-place,
.form-empty-label {
    height: 13px;
}
    .dummy-label-place label,
    .form-empty-label label {
        margin-bottom: 0.5rem;
    }


/*--- wyziwig --*/
.tox-tinymce {
    border: 2px solid var(--wysiwyg-light) !important;
    font-family: var(--font-default) !important;
}
/*--- wyziwig --*/

.modal-body {
    padding: 1.5rem;
}

.col-md-12,
.col-md-11,
.col-md-10,
.col-md-9,
.col-md-8,
.col-md-7,
.col-md-6,
.col-md-5,
.col-md-4,
.col-md-3,
.col-md-2,
.col-md-1 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.row {
    margin-left: -1rem;
    margin-right: -1rem;
}

/*-- changes client ---*/
.btn-change-client {
    background-color: var(--bs-primary);
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    color: #fff;
    display: flex;
    width: 35px;
    height: 35px;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    position:absolute;
    top:180px;
    right:35px;
}
    .btn-change-client:hover,
    .btn-change-client:focus {
        background-color: #fff;
        color: var(--bs-primary);
    }


/*--------------------------------------------------------------
# Progress Bar | Steps
--------------------------------------------------------------*/
.progressbar-setup {
    position: relative;
    z-index: 1;
    margin: 5px 0;
}
.progressbar {
    display: flex;
    counter-reset: step;
    margin:unset;
    padding:10px;
}
    .progressbar li {
        flex: 1;
        position: relative;
        text-align: center;
        list-style-type: none;
        color: var(--font-color);
        font-weight: 400;
    }
.dark .progressbar li {
    color: var(--font-color-dark);
}
    .progressbar li:before {
        content: counter(step);
        counter-increment: step;
        width: 45px;
        height: 45px;
        border: 2px solid #bebebe;
        display: block;
        margin: 0 auto 10px auto;
        border-radius: 50%;
        line-height: 35px;
        background: white;
        color: #bebebe;
        text-align: center;
        font-weight: 600;
        font-size:1rem;
        display:flex;
        align-items:center;
        justify-content:center;
    }
.dark .progressbar li:before {
    background: var(--bg-dark);
}
    .progressbar li:after {
        content: '';
        position: absolute;
        width: 100%;
        height: 2px;
        background: #bebebe;
        top: 22px;
        left: -50%;
        z-index: -1;
    }
    .progressbar li:first-child:after {
        content: none;
    }
    .progressbar li.active {
        color: var(--font-color-header);
        font-weight:500;
    }
        .progressbar li.active span{
            color: var(--font-color);
            font-weight: 400;
        }
    .progressbar li.active:after {
        background: var(--bs-primary-light);
        height:4px;
        top:20px;
    }

    .progressbar li.active:before {
        border-color: var(--bs-primary-light);
        background: var(--bs-primary-light);
        color: white
    }
        .progressbar li a {
            color: var(--font-color-header);
        }

.progress-steps-previous,
.progress-steps-next {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.progress-steps-previous {
    border-right: 1px #ccc dotted;
}
.progress-steps-next {
    border-left: 1px #ccc dotted;
}
    .progress-steps-previous i,
    .progress-steps-next i{
        font-size:1.25rem;
    }
.btn-h-fs {
}
.btn-h-ls {
}
.progressbar-layout .btn-icon-cir .step-btn-word {
    display: none;
}
.span-bold {
    font-weight:600 !important;
}

.confirm {
    max-height: 320px;
    width: auto;
}

/*-- form | channels --*/

.inputGroup {
    background-color: #fff;
    display: block;
    margin: 10px 0;
    position: relative;
    cursor:pointer;
}
.dark .inputGroup {
    background-color: var(--bg-dark);
}

    .inputGroup label {
        padding: 12px 15px;
        width: 100%;
        display: block;
        text-align: left;
        color: #3c454c;
        cursor: pointer;
        position: relative;
        z-index: 2;
        transition: color 200ms ease-in;
        overflow: hidden;
        border: 1px #ccc solid;
        border-radius: 50px;
    }
.dark .inputGroup label {
    color: var(--font-color-dark);
    border: 1px var(--font-color-dark) solid;
}
        .inputGroup label .course {
            display:flex;
            align-items:center;
        }
    .inputGroup label .course .icon{
        font-size:1.5rem;
        padding-right:5px;
    }

        .inputGroup label:before {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            content: '';
            background-color: var(--bs-primary-suttle);
            position: absolute;
            left: 50%;
            top: 50%;
            width: 100%;
            transform: translate(-50%, -50%) scale3d(1, 1, 1);
            opacity: 0;
            z-index: -1;
            border: 1px #6f06a4 solid;
        }
.dark .inputGroup label:before {
    background-color: rgba(255,255,255,0.2);
}

        .inputGroup label:after {
            width: 28px;
            height: 28px;
            content: '';
            border: 2px solid #d1d7dc;
            background-color: #fff;
            background-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
            background-repeat: no-repeat;
            border-radius: 50%;
            z-index: 2;
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            transition: all 200ms ease-in;
        }


    .inputGroup input:checked ~ label {
        color: var(--bs-primary);
        border: 1px var(--bs-primary) solid;
    }
.dark .inputGroup input:checked ~ label {
    color: #fff;
    border: 1px #fff solid;
}

        .inputGroup input:checked ~ label:before {
            transform: translate(-50%, -50%) scale3d(56, 56, 1);
            opacity: 1;
        }

        .inputGroup input:checked ~ label:after {
            background-color: var(--bs-primary);
            border-color: var(--bs-primary);
        }

.dark .inputGroup input:checked ~ label:after {
    background-color: var(--bg-dark);
    border-color: var(--bg-dark);
}

    .inputGroup input {
        width: 32px;
        height: 32px;
        order: 1;
        z-index: 2;
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        visibility: hidden;
    }



/*--- Two Factor Authentication --*/
.tfa-info-block {
    border: 1px #ccd6fd solid;
    border-radius: 10px;
    min-height: 200px;
    height: 100%;
    position: relative;
    padding-bottom: 50px;
}

    .tfa-info-block p {
        padding: 0 20px;
    }

    .tfa-info-block .title-icons {
        padding: 20px;
        min-height: 100px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

        .tfa-info-block .title-icons h4 {
            font-size: 1.125rem;
            font-weight: 500;
            line-height: 1.5em;
            margin-bottom: unset;
        }

        .tfa-info-block .title-icons i {
            font-size: 5rem;
            color: var(--bs-primary);
            width: 40%;
            text-align: center;
        }

.tfa-btn {
    border-top: 1px #ccd6fd solid;
    border-radius: 0 0 10px 10px;
    color: var(--bs-primary);
    min-height: 50px;
    transition: all .4s ease-in-out;
    position: absolute;
    bottom: 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .tfa-btn:hover,
    .tfa-btn:focus {
        background-color: var(--bs-primary);
        color: #fff;
    }

/*-- Purchase Number --*/
.pn-switches {
    border:1px #ccc solid;
    border-radius:10px;
    padding:5px;
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
    width:100%;
    margin-top:15px;
}
.pn-switches .row{
    width:100%;
}
    .pn-switches .form-group{
        margin:unset;
    }
    .pn-switches .col-md-4,
    .pn-switches .col-md-7 {
        display: flex;
        align-items: center;
    }

/*--- campaign ---*/
.campaign-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap:wrap;
}
    .campaign-title-row .title {
        font-size: 1.125rem;
        color: var(--font-color-emp);
    }
    .campaign-title-row .title span{
        font-weight:500;
        color:var(--font-color-emp);
    }
.campaign-title-row .short-info{
    display:flex;
    justify-content:end;
    min-width:400px;
}

.validation-message {
    color:var(--bs-primary);
}

/*--- campaign setup ---*/
.ctb-title {
    display:flex;
    flex-direction:column;
}
    .ctb-title p {
        color: var(--font-color);
        margin-bottom: unset;
        font-size: 0.813rem;
    }
    .ctb-title h4 {
        margin-bottom: 0.5rem;
        font-size: 1.25rem
    }

.ctb-detail {
    display:flex;
    margin:unset;
    padding:unset
}
.ctb-detail li {
    display: flex;
    flex-direction: column;
    list-style-type:none;
    margin-right:25px;
    padding-right:25px;
    border-right:1px #ccc solid;
}
    .ctb-detail li:last-child {
        border-right: unset;
    }

.ctb-detail li p {
    color: var(--font-color);
    margin-bottom: unset;
    font-size: 0.813rem;
}
  
    .ctb-detail li h5 {
        color: var(--font-color-emp);
        margin-bottom: unset;
        font-size: 1.125rem;
    }

.review-stats {
    display: flex;
    align-items: center;
}
.rs-ver {
    flex-direction: column;
}
.rs-ver-cen {
    justify-content:center;
    text-align:center;
}

.rs-hor {
    flex-direction: row;
}

.review-stats .icon {
    background-color: #fff1f4;
    color: var(--bs-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    margin: 0.5rem;
}

.rs-detail{

}
.review-stats p {
    color: var(--font-color);
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.review-stats h5 {
    color: var(--font-color-emp);
    margin-bottom: unset;
    font-size: 1.5rem;
    font-weight:600;
}



.si-recipient,
.si-channel{
    border-radius:50%;
    border:1px solid;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 5px;
    height:40px;
    width:40px;
    position:relative;
}
.si-recipient {
    border-color: #207bd6;
}
    .si-recipient .icon {
        font-size: 1.5rem;
        font-weight: 600;
        color: #207bd6;
    }
    .si-recipient .badge {
        background-color: #207bd6
    }
.si-channel {
    border-color: #d98235;
}
    .si-channel .icon {
        font-size: 1.5rem;
        font-weight:600;
        color: #d98235;
    }
    .si-channel .badge {
        background-color: #d98235;
    }
    .si-recipient .badge,
    .si-channel .badge {
        min-width: 20px;
        width: unset;
        height: unset;
        position: absolute;
        color: #fff;
        display: inline-block;
        border-radius: 15px;
        padding: 3px 10px;
        top: -15px;
        right: -5px;
    }
.si-status {
    border: 1px #0c9b98 solid;
    color: #0c9b98;
    border-radius: 25px;
    padding: 5px 15px;
    display: flex;
    align-items: center;
    margin: 0 10px 0 5px;
    min-width:40px;
    min-height:40px;
}

.ch-date {
    border: 1px var(--font-color) solid;
    border-radius: 25px;
    color: var(--font-color);
    display: flex;
    align-items: center;
    padding: 5px 10px;
}
    .ch-date i{
        margin:3px;
    }

    .ch-badges {
        display: flex;
        flex-direction: row;
        align-items: center;
        max-width: 450px;
    }
/*-- sender idetities --*/
.email-select .col-md-5{
    padding-right:0;
}
.email-select .col-md-1 {
    padding-left: 2px;
    padding-right: 2px;
}
.email-select .col-md-6 {
    padding-left: 0;
}


/*--- guage ---*/
.gauge {
    position: relative;
    border-radius: 50%/100% 100% 0 0;
    background-color: var(--color, #a22);
    overflow: hidden;
}

    .gauge:before {
        content: "";
        display: block;
        padding-top: 50%; /* ratio of 2:1*/
    }

    .gauge .chart {
        overflow: hidden;
    }

    .gauge .mask {
        position: absolute;
        left: 20%;
        right: 20%;
        bottom: 0;
        top: 40%;
        background-color: #fff;
        border-radius: 50%/100% 100% 0 0;
    }

    .gauge .percentage {
        position: absolute;
        top: -1px;
        left: -1px;
        bottom: 0;
        right: -1px;
        background-color: var(--background, #aaa);
        transform: rotate(var(--rotation));
        transform-origin: bottom center;
        transition-duration: 0.2s;
    }

    .gauge:hover {
        --rotation: 100deg;
    }

    .gauge .value {
        position: absolute;
        bottom: 0%;
        left: 0;
        width: 100%;
        text-align: center;
    }

    .gauge .min {
        position: absolute;
        bottom: 0;
        left: 5%;
    }

    .gauge .max {
        position: absolute;
        bottom: 0;
        right: 5%;
    }


/*--- Pie Chart ---*/
.pie {
    width: 250px;
    height: 250px;
    background-image: conic-gradient(#d18018 36deg, #34a853 36deg 324deg);
    border-radius: 50%;
    margin:15px auto;
}
.pie-legend-green,
.pie-legend-orange {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    margin: 0 auto;
}
.pie-legend-green {
    background-color: #34a853;
}
.pie-legend-orange {
    background-color: #d18018;
}
.pie-legend{
    width:10%;
    text-align:center;
}
.pie-legend-info {
    display: flex;
    flex-direction: column;
}
.pie-legend-info p{
    margin-bottom:unset;
}


/*--------------------------------------------------------------
# Email Templates
--------------------------------------------------------------*/

.template-thumb {
    background-color: #ccc;
    border:1px #ccc solid;
    height: 400px;
}
    .template-thumb .thumb-container,
    .template-thumb .thumb-container iframe{
        height: 100%;
    }

/*--------------------------------------------------------------
# Onboard Steps
--------------------------------------------------------------*/
.step {
    position: relative;
    min-height: 1em;
    color: gray;
}

.step {
    font-size: 0.875rem;
    line-height: 1.5em;
    font-weight: 400;
    color: #757d8a;
}

.title {
    font-size: 1.025rem;
    line-height: 1.5em;
    font-weight: 500;
    margin-bottom: 5px;
}

.caption {
    font-size: 0.75rem;
    padding: 5px 15px;
    border-radius: 25px;
    display: inline-block;
    background-color: #efefef;
    display: none
}

.step + .step {
    margin-top: 1.5em
}

.step > div:first-child {
    position: static;
    height: 0;
}

.step > div:not(:first-child) {
    margin-left: 45px;
    padding-left: 10px;
}

.step.step-done {
    color: #0a994a;
}

    .step.step-done .circle {
        background-color: #0a994a;
        border-color: #0a994a;
        color: #fff;
    }

    .step.step-done .caption {
        background-color: #e0f2e9;
    }

.step.step-active {
    color: #204671;
}

    .step.step-active .circle {
        background-color: #204671;
        border-color: #204671;
        color: #fff;
    }

    .step.step-active .caption {
        background-color: #eef3f8;
    }

.circle {
    background: white;
    position: relative;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    color: #808080;
    text-align: center;
    box-shadow: 0 0 0 3px #fff;
    padding-top: 3px;
    border: 2px #808080 solid;
}

    .circle:after {
        content: ' ';
        position: absolute;
        display: block;
        top: 5px;
        right: 50%;
        bottom: 1px;
        left: 50%;
        height: 100%;
        width: 1px;
        transform: scale(1, 2);
        transform-origin: 50% -100%;
        background-color: rgba(0, 0, 0, 0.25);
        z-index: auto;
    }

.step:last-child .circle:after {
    display: none
}
/*-- onboarding steps | end --*/

/*--------------------------------------------------------------
# 14 Day Trial | starts
--------------------------------------------------------------*/
.trial-setup {
}

    .trial-setup h4 {
        font-weight: 300;
    }

        .trial-setup h4 span {
            font-weight: 600;
            color: var(--bs-primary);
        }

.trial-icon-setup {
    display: flex;
    justify-content: center;
    align-items: center;
}

.trial-info-setup {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.trial-icon {
    background: transparent url('/images/calendar-bg.svg') no-repeat center center;
    background-size: cover;
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .trial-icon h3 {
        font-size: 3.5rem;
        color: var(--bs-primary);
        padding-top: 45px;
    }

.signup-steps {
    margin: unset;
    padding: unset;
    display: flex;
}

    .signup-steps li {
        list-style-type: none;
        display: flex;
        align-items: center;
        margin: 0 25px;
    }

        .signup-steps li .circle-icon {
            width: 70px;
            height: 70px;
            border: 2px solid #7e878e;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

            .signup-steps li .circle-icon i {
                font-size: 2.5rem;
                color: #7e878e;
            }

        .signup-steps li h5 {
            color: #7e878e;
            font-size: 1.125rem;
            padding: 10px 10px 0 10px;
        }

.ss-payment-select {
    background: #efefef;
    padding: 1.125rem;
    border-radius: 15px;
}
/*-- 14 Day Trail | ends --*/


/*--------------------------------------------------------------
# Media Queries
--------------------------------------------------------------*/

@media (max-width:1536px) {

    
    .ggs-col-btn-cir {
        padding: 0.625rem 0 !important;
    }
    .campaigns-qstats .col-md-2 {
        width: 33.333%;
        -webkit-box-flex: 1;
        -webkit-flex: unset;
        -ms-flex: unset;
        flex: unset;
    }
    .trial-setup .col-md-3,
    .trial-setup .col-md-9{
        width:100%;
    }
    .trial-icon{
        margin-bottom:2rem;
    }
    .campaign-title-row .short-info {
        display: flex;
        justify-content: start;
        min-width: 400px;
        margin-top:20px
    }
}

@media (max-width:1366px) {
    .layout-search .col-md-2,
    .layout-search .col-md-9 .col-md-3 {
        padding-right: unset;
    }

        .layout-search .col-md-2:last-child {
            padding-right: 1rem;
        }

    .sidebar-toggle .f-size-22 {
        font-size: 16px;
    }
    .campaigns-header {
        display:flex;
        flex-direction:column;
    }
        .campaigns-header .col-md-4,
        .campaigns-header .col-md-6,
        .campaigns-header .col-md-2{
            width:100%;
        }
        .campaigns-header .col-md-4,
        .campaigns-header .col-md-6 {
            margin-bottom:1.25rem;
        }
}

@media (max-width:1024px) {

    .cb-ver .btn-status, .cb-ver .btn-edit, .cb-ver .profile-btns .btns {
        width: 35px;
        height: 35px;
        margin: 5px 5px 0 5px;
        font-size: 20px;
    }

    .sr-grid-table .btns {
        width: 35px;
        height: 35px;
        display: flex;
        margin-left: 5px;
        font-size: 20px;
    }
        

    .db-card-icon {
        width: 50px;
        height: 50px;
    }

        .db-card-icon i {
            font-size: 2rem;
        }

    .header-title h5.sub-db {
        width: 180px;
        font-size: 1.125rem;
    }
}

@media (max-width:768px) {

    .campaigns-qstats .col-md-2 {
        width: 50%;
    }
    .iq-navbar-header {
        height: 180px;
    }

    .card-wforms .form-group {
        margin-bottom: 1rem;
    }

    .layout-search .col-md-2 {
        width: 50%;
    }

    .layout-search .col-md-2,
    .layout-search .col-md-9 .col-md-3 {
        padding-right: 1rem;
    }

    .ss-setup .btn-primary span.btns-label,
    .ss-setup .btns span.btns-label {
        display: none;
    }

    .ss-setup .btn i,
    .ss-setup .btn-primary span.btns-icon,
    .ss-setup .btns span.btns-icon {
        margin-right: unset;
    }

    .ss-setup .btns {
        padding: 0 8px;
    }

    .ss-setup .btn-primary {
        padding: 0 9px;
    }

    .layout-grid .col-md-4 {
        width: 50%;
    }

    .reports-setup .col-md-3 {
        width: 50%;
    }

    .reports-setup .col-md-6,
    .col-md-6 {
        width: 100%;
    }

    .btns-row-setup .col-md-6 {
        width: 50%;
    }


    .card-search {
        flex-direction: column;
    }

        .card-search .col-md-8,
        .card-search .col-md-6,
        .card-search .col-md-2 {
            width: 100%;
        }

        .card-search .form-group {
            margin-bottom: 1rem;
        }

    /*--------------------------------------------------------------
# Grid / Table - responsive setup
--------------------------------------------------------------*/
        .ggs-row-3m .ggs-col-avatar, .ggs-row .ggs-col-avatar {
        width: 20%;
        text-align: center;
    }

    .gr-grid-setup .user-avtar {
        border-radius: 50%;
        width: 50px;
        height: 50px;
    }

    .ggs-row,
    .ggs-row-3m {
        flex-direction: column;
    }

        .ggs-row-3m:first-child .ggs-col,
        .ggs-row:first-child .ggs-col {
            display: none
        }

        .ggs-row-3m:first-child .ggs-col-action,
        .ggs-row:first-child .ggs-col-action {
            width: 100%;
        }

        .ggs-row .ggs-col-action {
            width: 30%;
        }

        .ggs-row-3m .ggs-col,
        .ggs-row-3m .ggs-col .ggs-col-100,
        .ggs-row-3m .ggs-col .ggs-col-90,
        .ggs-row-3m .ggs-col .ggs-col-80,
        .ggs-row-3m .ggs-col .ggs-col-70,
        .ggs-row-3m .ggs-col .ggs-col-60,
        .ggs-row-3m .ggs-col .ggs-col-50,
        .ggs-row-3m .ggs-col .ggs-col-45,
        .ggs-row-3m .ggs-col .ggs-col-35,
        .ggs-row-3m .ggs-col .ggs-col-30,
        .ggs-row-3m .ggs-col .ggs-col-25,
        .ggs-row-3m .ggs-col .ggs-col-20,
        .ggs-row-3m .ggs-col .ggs-col-15 {
            margin-left: 50%;
            width: 50%;
            min-height: 42px;
        }

    .dark .ggs-row-3m .ggs-col {
        border-bottom: 1px var(--border-dark) solid;
    }

    .ggs-row-3m .ggs-col:before {
        padding: 0 1.25rem 0.625rem 1.25rem;
        width: 50%;
        position: absolute;
        font-weight: 500;
        left: 20px;
        color: var(--font-color-emp);
    }

    .ggs-col .f-size-22 {
        font-size: 1.175rem;
    }

    .ggs-row-3m .ggs-col-action {
        width: 100%;
    }

    .ggs-col-action .btn {
        width: 100%;
    }

    .ggs-col-action .dropdown-menu {
        width: 100%;
    }

    .tabs-hb-setup {
        flex-direction: column;
        background-color: #d1d1d1;
        border-radius: 10px;
        margin-bottom: 10px;
    }
    .tabs-hb-setup li{
        margin-bottom:10px;
    }
        .tabs-hb-setup li:last-child {
            margin-bottom: unset;
        }

        .tabs-hb-setup .d-flex {
            flex-direction: column;
        }

        .tabs-hb-setup .nav-link {
            display: block;
            text-align: left;
        }

        .tabs-hb-setup .nav .nav-link {
            margin-right: unset;
            border-radius: 10px;
        }

        .tabs-hb-setup .nav-link.active {
            border-radius: 10px;
        }

    .progress-widget-resp .col-md-3 {
        width: 50%;
    }

    .db-card-icon {
        width: 70px;
        height: 70px;
        margin-right: unset;
        margin-bottom: 15px;
    }

        .db-card-icon i {
            font-size: 2.25rem;
        }

    .header-title {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

        .header-title h5.sub-db {
            width: 100%;
            font-size: 1.125rem;
            text-align: center;
        }

    .db-list {
        padding: 1rem 0;
    }
    .trial-info-setup .col-md-6{
        margin-bottom:1.5rem;
    }
}

@media (max-width:480px) {
    .ctb-detail {
        display: flex;
        flex-direction:column;
        margin: unset;
        padding: unset;
    }
        .ctb-detail li {
            border-right: unset;
            border-bottom: 1px #ccc solid;
            padding-right:unset;
            margin-right:unset;
            padding-top:10px;
            padding-bottom:10px;
        }

    .campaigns-qstats .col-md-2 {
        width: 100%;
    }

/*--------------------------------------------------------------
# Grid / Table - responsive setup
--------------------------------------------------------------*/

    .ggs-row,
    .ggs-row-bright {
        flex-direction: column;
    }

        .ggs-row .ggs-col,
        .ggs-row .ggs-col-action {
            width: 100%;
        }

        .ggs-row-bright div {
            width: 100%;
        }

            .ggs-row-bright div:nth-child(1) {
                padding: 0.625rem 1rem 0 1rem;
            }

    .dropdown-menu {
        width: 100%;
    }


    .org-logo-name {
        margin-bottom: 15px;
    }

    .content-inner {
        padding: 1.5rem !important;
    }

    .iq-navbar-header .iq-header-img {
        height: 300px !important;
    }

    .layout-search .col-md-2 {
        width: 100%;
    }

    .layout-grid .col-md-4 {
        width: 100%;
    }

    .reports-setup .col-md-3 {
        width: 100%;
    }

    .ss-setup {
        flex-wrap: wrap;
    }

        .ss-setup .select {
            margin-top: 10px;
        }

    .card-wtabs {
        border-radius: 10px;
    }

    .btns-row-setup .col-md-3:nth-child(1) {
        margin-bottom: 15px;
    }

    .pagination {
        flex-wrap: wrap;
    }

    .btn i {
        margin-right: unset;
    }

    .sub-dashboard .col-md-4 {
        margin-bottom: 20px;
    }

    .card-title {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .pn-switches {
        margin-bottom:15px;
    }
        .pn-switches .form-group .col-md-7,
        .pn-switches .form-group .col-md-5{
            width:50%;
        }
}

@media (min-width:2000px) {
    .card-img-top img {
        width: 100%;
    }
}


/*--- Tour Guide ---*/

/* -------------------------------- 

xnugget info 

-------------------------------- */
.cd-nugget-info {
    position: absolute;
    width: 60%;
    left: 50%;
    top: 50%;
    bottom: auto;
    right: auto;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    z-index: 1;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

    .cd-nugget-info h1 {
        color: #fefffb;
        font-size: 2.4rem;
        margin: .6em 0;
    }

    .cd-nugget-info .cd-btn {
        -webkit-appearance: none;
        -moz-appearance: none;
        -ms-appearance: none;
        -o-appearance: none;
        appearance: none;
        border: none;
        border-radius: 50em;
        background: #ff962c;
        padding: 1em 2em;
        color: #fefffb;
        font-weight: bold;
        font-size: 1.4rem;
        cursor: pointer;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }

        .cd-nugget-info .cd-btn:active {
            -webkit-transform: scale(0.9);
            -moz-transform: scale(0.9);
            -ms-transform: scale(0.9);
            -o-transform: scale(0.9);
            transform: scale(0.9);
        }

        .no-touch .cd-nugget-info .cd-btn:hover, .cd-nugget-info .cd-btn:focus {
            outline: none;
            background: #ffa346;
        }

@media only screen and (min-width: 1100px) {
    .cd-nugget-info h1 {
        font-size: 4.2rem;
        font-weight: 300;
    }

    .cd-nugget-info .cd-btn {
        font-size: 1.6rem;
    }
}

/* -------------------------------- 

Main Components 

-------------------------------- */
.cd-tour-wrapper {
    position: fixed;
    z-index: 2;
    height: 90%;
    width: 90%;
    left: 50%;
    top: 50%;
    bottom: auto;
    right: auto;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity 0.4s 0s, visibility 0s 0.4s;
    -moz-transition: opacity 0.4s 0s, visibility 0s 0.4s;
    transition: opacity 0.4s 0s, visibility 0s 0.4s;
}

    .cd-tour-wrapper::before {
        /* never visible - this is used in jQuery to check the current MQ */
        display: none;
        content: 'mobile';
    }

    .cd-tour-wrapper.active {
        /* start tour */
        visibility: visible;
        opacity: 1;
        -webkit-transition: opacity 0.4s 0s, visibility 0s 0s;
        -moz-transition: opacity 0.4s 0s, visibility 0s 0s;
        transition: opacity 0.4s 0s, visibility 0s 0s;
    }

@media only screen and (min-width: 600px) {
    .cd-tour-wrapper {
        max-width: 500px;
        max-height: 600px;
    }
}

@media only screen and (min-width: 1100px) {
    .cd-tour-wrapper {
        /* reset style */
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        max-width: none;
        max-height: none;
        opacity: 1;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
    }

        .cd-tour-wrapper::before {
            /* never visible - this is used in jQuery to check the current MQ */
            content: 'desktop';
        }

        .cd-tour-wrapper.active {
            visibility: hidden;
        }
}

.cd-single-step {
    /* tour single step */
    position: absolute;
    z-index: 1;
    width: 100%;
    left: 0;
    top: 0;
    background-color: #fefffb;
    border-radius: 4px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    opacity: 0;
    /* Force Hardware Acceleration */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    -webkit-transition: -webkit-transform 0.4s 0s, opacity 0s 0.4s;
    -moz-transition: -moz-transform 0.4s 0s, opacity 0s 0.4s;
    transition: transform 0.4s 0s, opacity 0s 0.4s;
}

    .cd-single-step > span {
        /* dot indicator - visible on desktop version only */
        position: relative;
        z-index: 1;
        display: block;
        width: 10px;
        height: 10px;
        border-radius: inherit;
        background: #ff962c;
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -ms-transform: scale(0);
        -o-transform: scale(0);
        transform: scale(0);
        -webkit-transition: -webkit-transform 0.4s;
        -moz-transition: -moz-transform 0.4s;
        transition: transform 0.4s;
        /* replace text with background images */
        overflow: hidden;
        text-indent: 100%;
        white-space: nowrap;
        /* hide on mobile */
        display: none;
    }

    .cd-single-step::after {
        /* this is used to create the pulse animation */
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        border-radius: inherit;
        /* Force Hardware Acceleration */
        -webkit-transform: translateZ(0);
        -moz-transform: translateZ(0);
        -ms-transform: translateZ(0);
        -o-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        /* hide on mobile */
        display: none;
    }

.active .cd-single-step {
    /* tour started */
    -webkit-transform: scale(1) translateX(100%);
    -moz-transform: scale(1) translateX(100%);
    -ms-transform: scale(1) translateX(100%);
    -o-transform: scale(1) translateX(100%);
    transform: scale(1) translateX(100%);
    -webkit-transition: -webkit-transform 0.4s 0s, opacity 0.4s 0s;
    -moz-transition: -moz-transform 0.4s 0s, opacity 0.4s 0s;
    transition: transform 0.4s 0s, opacity 0.4s 0s;
}

    .active .cd-single-step.move-left {
        -webkit-transform: scale(1) translateX(-100%);
        -moz-transform: scale(1) translateX(-100%);
        -ms-transform: scale(1) translateX(-100%);
        -o-transform: scale(1) translateX(-100%);
        transform: scale(1) translateX(-100%);
    }

    .active .cd-single-step.is-selected {
        /* visible step */
        opacity: 1;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
        -webkit-transition: -webkit-transform 0.4s 0s;
        -moz-transition: -moz-transform 0.4s 0s;
        transition: transform 0.4s 0s;
    }

@media only screen and (min-width: 1100px) {
    .cd-single-step {
        /* reset style */
        height: auto;
        width: auto;
        top: auto;
        left: auto;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
        border-radius: 50%;
        visibility: hidden;
        opacity: 1;
        background-color: transparent;
        box-shadow: none;
        -webkit-transition: visibility 0s 0.4s;
        -moz-transition: visibility 0s 0.4s;
        transition: visibility 0s 0.4s;
    }

        .cd-single-step:nth-of-type(1) {
            /* set tour points positions */
            bottom: 40%;
            right: 30%;
        }

        .cd-single-step:nth-of-type(2) {
            bottom: 60%;
            right: 48%;
        }

        .cd-single-step:nth-of-type(3) {
            top: 28%;
            left: 20%;
        }

        .cd-single-step > span, .cd-single-step::after {
            display: block;
        }

    .active .cd-single-step, .active .cd-single-step.move-left {
        -webkit-transition: visibility 0s 0.4s;
        -moz-transition: visibility 0s 0.4s;
        transition: visibility 0s 0.4s;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
    }

    .cd-single-step.is-selected {
        visibility: visible;
        -webkit-transition: visibility 0s 0s;
        -moz-transition: visibility 0s 0s;
        transition: visibility 0s 0s;
    }

        .cd-single-step.is-selected > span {
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            -ms-transform: scale(1);
            -o-transform: scale(1);
            transform: scale(1);
        }

        .cd-single-step.is-selected::after {
            -webkit-animation: cd-pulse 2s infinite;
            -moz-animation: cd-pulse 2s infinite;
            animation: cd-pulse 2s infinite;
            -webkit-animation-delay: 0.5s;
            -moz-animation-delay: 0.5s;
            animation-delay: 0.5s;
        }

        .cd-single-step.is-selected .cd-more-info {
            opacity: 1;
        }
}

@-webkit-keyframes cd-pulse {
    0% {
        box-shadow: 0 0 0 0 #ff962c;
    }

    100% {
        box-shadow: 0 0 0 20px rgba(255, 150, 44, 0);
    }
}

@-moz-keyframes cd-pulse {
    0% {
        box-shadow: 0 0 0 0 #ff962c;
    }

    100% {
        box-shadow: 0 0 0 20px rgba(255, 150, 44, 0);
    }
}

@keyframes cd-pulse {
    0% {
        box-shadow: 0 0 0 0 #ff962c;
    }

    100% {
        box-shadow: 0 0 0 20px rgba(255, 150, 44, 0);
    }
}

.cd-single-step .cd-more-info {
    z-index: 1;
    padding: 1.5em;
    width: 100%;
}

    .cd-single-step .cd-more-info::after {
        clear: both;
        content: "";
        display: table;
    }

    .cd-single-step .cd-more-info::before {
        /* triangle next to the step description - hidden on mobile */
        content: '';
        position: absolute;
        height: 0;
        width: 0;
        border: 6px solid transparent;
        display: none;
    }

    .cd-single-step .cd-more-info h2 {
        font-size: 2rem;
        line-height: 1.2;
        margin-bottom: .4em;
    }

    .cd-single-step .cd-more-info p {
        font-size: 1.3rem;
        line-height: 1.6;
        margin-bottom: 1.4em;
        font-family: Georgia, serif;
        color: #7f7f7d;
    }

    .cd-single-step .cd-more-info img {
        margin-bottom: 1.4em;
    }

    .cd-single-step .cd-more-info .cd-close {
        /* 'X' icon to skip the tour */
        position: absolute;
        top: 10px;
        right: 10px;
        width: 32px;
        height: 32px;
        /* replace text with background images */
        overflow: hidden;
        text-indent: 100%;
        white-space: nowrap;
    }

        .cd-single-step .cd-more-info .cd-close::after, .cd-single-step .cd-more-info .cd-close:before {
            /* these are the 2 lines of the 'X' icon */
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            height: 2px;
            width: 16px;
            border-radius: 4em;
            background-color: #cbccc8;
            /* Force Hardware Acceleration */
            -webkit-transform: translateZ(0);
            -moz-transform: translateZ(0);
            -ms-transform: translateZ(0);
            -o-transform: translateZ(0);
            transform: translateZ(0);
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }

        .cd-single-step .cd-more-info .cd-close::after {
            -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
            -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
            -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
            -o-transform: translateX(-50%) translateY(-50%) rotate(45deg);
            transform: translateX(-50%) translateY(-50%) rotate(45deg);
        }

        .cd-single-step .cd-more-info .cd-close::before {
            -webkit-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
            -moz-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
            -ms-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
            -o-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
            transform: translateX(-50%) translateY(-50%) rotate(-45deg);
        }

    .cd-single-step .cd-more-info span {
        /* step count e.g. 1 of 3*/
        float: left;
        padding-top: .1em;
        font-size: 1.3rem;
        font-family: Georgia, serif;
    }

@media only screen and (min-width: 1100px) {
    .cd-single-step .cd-more-info {
        position: absolute;
        width: 340px;
        border-radius: 4px;
        box-shadow: 0 3px 20px rgba(0, 0, 0, 0.15);
        opacity: 0;
        background-color: #fefffb;
        -webkit-transition: opacity 0.4s;
        -moz-transition: opacity 0.4s;
        transition: opacity 0.4s;
        border-color: #fefffb;
    }

        .cd-single-step .cd-more-info p {
            margin-bottom: 2.5em;
        }

        .cd-single-step .cd-more-info img {
            display: none;
        }

        .cd-single-step .cd-more-info::before {
            /* triangle next to the step description - hidden on mobile */
            display: block;
        }

        .cd-single-step .cd-more-info.left {
            right: calc(100% + 15px);
            -webkit-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            -o-transform: translateY(-50%);
            transform: translateY(-50%);
        }

        .cd-single-step .cd-more-info.right {
            left: calc(100% + 15px);
            -webkit-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            -o-transform: translateY(-50%);
            transform: translateY(-50%);
        }

        .cd-single-step .cd-more-info.left, .cd-single-step .cd-more-info.right {
            top: 50%;
        }

        .cd-single-step .cd-more-info.top {
            bottom: calc(100% + 15px);
            -webkit-transform: translateX(-50%);
            -moz-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            -o-transform: translateX(-50%);
            transform: translateX(-50%);
        }

        .cd-single-step .cd-more-info.bottom {
            top: calc(100% + 15px);
            -webkit-transform: translateX(-50%);
            -moz-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            -o-transform: translateX(-50%);
            transform: translateX(-50%);
        }

        .cd-single-step .cd-more-info.top, .cd-single-step .cd-more-info.bottom {
            left: 50%;
        }

        .cd-single-step .cd-more-info.left::before, .cd-single-step .cd-more-info.right::before {
            top: 50%;
            bottom: auto;
            -webkit-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            -o-transform: translateY(-50%);
            transform: translateY(-50%);
        }

        .cd-single-step .cd-more-info.top::before, .cd-single-step .cd-more-info.bottom::before {
            left: 50%;
            right: auto;
            -webkit-transform: translateX(-50%);
            -moz-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            -o-transform: translateX(-50%);
            transform: translateX(-50%);
        }

        .cd-single-step .cd-more-info.left::before {
            border-left-color: inherit;
            left: 100%;
        }

        .cd-single-step .cd-more-info.right::before {
            border-right-color: inherit;
            right: 100%;
        }

        .cd-single-step .cd-more-info.top::before {
            border-top-color: inherit;
            top: 100%;
        }

        .cd-single-step .cd-more-info.bottom::before {
            border-bottom-color: inherit;
            bottom: 100%;
        }

    .is-selected .cd-single-step .cd-more-info {
        opacity: 1;
    }
}

.cd-tour-nav {
    float: right;
}

    .cd-tour-nav::after {
        clear: both;
        content: "";
        display: table;
    }

    .cd-tour-nav li {
        display: inline-block;
        float: left;
    }

        .cd-tour-nav li:first-of-type {
            margin-right: 1.5em;
        }

    .cd-tour-nav a {
        font-size: 1.3rem;
        color: #222d33;
        font-weight: bold;
    }

        .cd-tour-nav a.inactive {
            /* item not clickable */
            color: #cbccc8;
            cursor: not-allowed;
        }

.cd-cover-layer {
    /* background cover layer - visible when tour is activated */
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity 0.4s 0s, visibility 0s 0.4s;
    -moz-transition: opacity 0.4s 0s, visibility 0s 0.4s;
    transition: opacity 0.4s 0s, visibility 0s 0.4s;
}

    .cd-cover-layer.is-visible {
        opacity: 1;
        visibility: visible;
        -webkit-transition: opacity 0.4s 0s, visibility 0s 0s;
        -moz-transition: opacity 0.4s 0s, visibility 0s 0s;
        transition: opacity 0.4s 0s, visibility 0s 0s;
    }

@media only screen and (min-width: 1100px) {
    .cd-cover-layer.is-visible {
        opacity: 0;
        -webkit-animation: cd-fade-in 2.1s;
        -moz-animation: cd-fade-in 2.1s;
        animation: cd-fade-in 2.1s;
    }
}

@-webkit-keyframes cd-fade-in {
    0%, 100% {
        opacity: 0;
    }

    14%, 40% {
        opacity: 1;
    }
}

@-moz-keyframes cd-fade-in {
    0%, 100% {
        opacity: 0;
    }

    14%, 40% {
        opacity: 1;
    }
}

@keyframes cd-fade-in {
    0%, 100% {
        opacity: 0;
    }

    14%, 40% {
        opacity: 1;
    }
}
/* -------------------------------- 

xapp prototype - no need to import this in production 

-------------------------------- */
.cd-app-screen {
    position: absolute;
    left: 50%;
    top: 50%;
    bottom: auto;
    right: auto;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    width: 90%;
    height: 80%;
    background: #222d33;
    border-radius: 4px;
    box-shadow: 0 10px 60px #08151d;
}

    .cd-app-screen::before, .cd-app-screen::after {
        content: '';
        position: absolute;
    }

    .cd-app-screen::before {
        top: 0;
        left: 0;
        height: 40px;
        width: 100%;
        background: #fefffb;
        border-radius: 4px 4px 0 0;
    }

    .cd-app-screen::after {
        top: 14px;
        left: 20px;
        height: 12px;
        width: 60px;
        background: #e4e5e1;
        border-radius: 3px;
    }