:root,
[data-app-theme="blue"] {
    --first-color: #203A55;
    --second-color: #00C0DC;
    --third-color: #F2FEFF;
    --fourth-color: #B9F0F6;
    --fifth-color: #F2FEFF;
    --main-bgcolor: #ffffff;
    --white: #ffffff;
    --error-color: #dc3545;
    --error-dark: #842029;
    --error-bg: #f8d7da;
    --error-border: #f5c2c7;
    --shadow-color: #cccccc;
}

[data-app-theme="green"] {
    --first-color: green;
    --second-color: #5DBB63;
    --third-color: #F2FEFF;
    --fourth-color: #b2d3c2;
    --fifth-color: #F2FEFF;
    --main-bgcolor: #ffffff;
    --error-color: #dc3545;
    --error-dark: #842029;
    --error-bg: #f8d7da;
    --error-border: #f5c2c7;
}

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

* {
    box-sizing: border-box;
}

body {
    background-color: var(--main-bgcolor);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.container-fluid.left {
    margin-right: 10px
}

.container-fluid.main {
    margin-left: 220px;
    margin-bottom: 0;
    width: auto;

    background-color: var(--third-color);
    min-height: calc(100vh - 58px);
    padding: 5px 10px;
}


.main-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    width: max-content;
    position: fixed;
    height: 100vh;
    overflow: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.main-nav::-webkit-scrollbar {
    display: none;
}

.main-nav li a {
    text-decoration: none;
    color: var(--first-color);
    display: block;
    padding: 1rem;
    position: relative;
    padding-left: calc(1em + 40px);
    border-bottom: 1px solid var(--fourth-color);
}

.main-nav li a:hover,
.main-nav li a.active {
    background-color: var(--second-color);
    border-radius: .3rem;
    color: var(--white);
}

/* .main-nav li a:hover
{
    text-indent: 0px;
    padding-right:1rem;
} */

.main-nav li a:before {
    position: absolute;
    background-size: 30px;
    width: 30px;
    height: 30px;
    content: "";
    left: 1em;
    top: calc(50% - 15px);
}

#nav-home a::before {
    background-image: url('../icons/home.png');
}

#nav-home a:hover::before,
#nav-home a:hover::before,
#nav-home a.active::before {
    background-image: url('../icons/home-active.png');
}

#nav-orders a::before {
    background-image: url('../icons/orders.png');
}

#nav-orders a:hover::before,
#nav-orders a:hover::before,
#nav-orders a.active::before {
    background-image: url('../icons/orders-active.png');
}


#nav-create-order a::before {
    background-image: url('../icons/create-order.png');
}

#nav-create-order a:hover::before,
#nav-create-order a:hover::before,
#nav-create-order a.active::before {
    background-image: url('../icons/create-order-active.png');
}


#nav-reports a::before {
    background-image: url('../icons/reports.png');
}

#nav-reports a:hover::before,
#nav-reports a:hover::before,
#nav-reports a.active::before {
    background-image: url('../icons/reports-active.png');
}



#nav-clients a::before {
    background-image: url('../icons/clients.png');
}

#nav-clients a:hover::before,
#nav-clients a:hover::before,
#nav-clients a.active::before {
    background-image: url('../icons/clients-active.png');
}



#nav-users a::before {
    background-image: url('../icons/users.png');
}

#nav-users a:hover::before,
#nav-users a:hover::before,
#nav-users a.active::before {
    background-image: url('../icons/users-active.png');
}


#nav-recording-forms a::before {
    background-image: url('../icons/recording-forms.png');
}

#nav-recording-forms a:hover::before,
#nav-recording-forms a:hover::before,
#nav-recording-forms a.active::before {
    background-image: url('../icons/recording-forms-active.png');
}



#nav-document-types a::before {
    background-image: url('../icons/document-types.png');
}

#nav-document-types a:hover::before,
#nav-document-types a:hover::before,
#nav-document-types a.active::before {
    background-image: url('../icons/document-types-active.png');
}


#nav-payments a::before {
    background-image: url('../icons/payments.png');
}

#nav-payments a:hover::before,
#nav-payments a:hover::before,
#nav-payments a.active::before {
    background-image: url('../icons/payments-active.png');
}

#nav-allocation-setup a::before {
    background-image: url('../icons/allocation-setup.png');
}

#nav-allocation-setup a:hover::before,
#nav-allocation-setup a:hover::before,
#nav-allocation-setup a.active::before {
    background-image: url('../icons/allocation-setup-active.png');
}


#nav-template-design a::before {
    background-image: url('../icons/template-design.png');
}

#nav-template-design a:hover::before,
#nav-template-design a:hover::before,
#nav-template-design a.active::before {
    background-image: url('../icons/template-design-active.png');
}

#nav-settings a::before {
    background-image: url('../icons/settings.png');
}

#nav-settings a:hover::before,
#nav-settings a:hover::before,
#nav-settings a.active::before {
    background-image: url('../icons/settings-active.png');
}

.search-panel {
    margin-bottom: 5px;
}

#search {
    display: inline-block;
    background: rgb(255, 255, 255);
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(231, 231, 231, 1) 100%);
    border: 2px solid #DDDDDD;
    border-radius: .2rem;
    margin-right: 10px;
}

#search input {
    padding-left: 30px;
    background-color: transparent;
    background-image: url('../icons/search.png');
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: 5px;
    border: 0;
}

#search input:focus,
#search input:active {
    outline: none;

}

.initial {
    background-image: url('../svg/round.svg');
    background-size: cover;
    display: inline-block;
    text-align: center;
    padding: 10px;
    font-weight: bold;
    margin-right: 10px;
}



.submenu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.submenu li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.submenu li a {
    text-decoration: none;
    color: var(--first-color);
    padding: .8rem;
    border-top: 1px solid #DDDDDD;
    border-bottom: 1px solid #DDDDDD;
    float: left;
    background-color: var(--main-bgcolor);
    padding-left: 3rem;
    position: relative;
    border-left: 1px solid #f3f3f3;
    border-right: 1px solid #f3f3f3;
}

.submenu li a::before {
    position: absolute;
    content: "";
    background-size: contain;
    width: 2.5rem;
    height: 2.5rem;
    left: 5px;
    top: 5px;
    background-repeat: no-repeat;
}

.submenu li a#template-design::before {
    background-image: url('../icons/template-design.png');
}

.submenu li a#field-creation::before {
    background-image: url('../icons/field-creation.png');
}

.submenu li a#field-arrangement::before {
    background-image: url('../icons/field-arrangement.png');
}

.submenu li a#field-grouping::before {
    background-image: url('../icons/field-grouping.png');
}

.submenu li:first-child a {
    border-left: 1px solid #DDDDDD;
    border-radius: .35rem 0 0 .35rem;
}

.submenu li:last-child a {
    border-right: 1px solid #DDDDDD;
    border-radius: 0 .35rem .35rem 0;
}

.submenu li a:hover,
.submenu li a.active {
    background-color: #ECEEF1;
    border-right: 1px solid #DDDDDD;
    border-left: 1px solid #DDDDDD;
}

.submenu::after {
    content: '';
    display: block;
    clear: both;
}



.menu-hide-show {
    float: left;
    margin-top: 10px;
    margin-left: 1rem;
    cursor: pointer;
}

.menu-hide-show::before {
    content: "\f100";
    font-family: "Font Awesome 6 Free";
    font-weight: bold;
}

.menu-hide-show.hided::before {

    content: "\f101";
}

.hide-menu>li>a {
    text-indent: -99999px;
    padding-right: 8px;
}

.icon-only-menu.main {
    margin-left: 80px;
}



.btn {
    border-width: 1px;
    border-radius: .35rem;
}

.btn-primary {
    background-color: var(--fifth-color);
    border-color: var(--first-color);
    color: var(--first-color);
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary.clicked {
    color: var(--white);
    background-color: var(--second-color) !important;
    border-color: var(--third-color) !important;
}

#loading-progress {
    background: var(--second-color);
    display: block;
    height: 8px;
    text-align: center;
    transition: width .3s;
    width: 0;
    position: fixed;
    bottom: 0;
}

#loading-progress.hide {
    opacity: 0;
    transition: opacity 1.3s;
}

.form-input,
.form-input-select {
    position: relative;
    padding-top: .5rem;
    background-color: inherit;
}

.form-input input,
.form-input textarea,
.form-input-select select {
    border-radius: .25rem;
    border: 1px solid var(--first-color);
    width: 100%;
    padding: .3rem;
}

.form-input textarea {
    resize: none;
}

.form-input-select select {
    background-color: var(--white);
}

.form-input input~label,
.form-input textarea~label,
.form-input-select select~label {
    position: absolute;
    left: 0;
    top: 0;
    margin-top: -.4rem;
    margin-left: .5rem;
    background-color: var(--fifth-color);
    padding: 0 .2rem;
}

.form-input input:focus,
.form-input textarea:focus,
.form-input input:active,
.form-input textarea:active,
.form-input-select select:focus,
.form-input-select select:active {

    border: 1px solid var(--second-color) !important;
    outline: 2px solid var(--second-color) !important;
}

.form-input-checkbox label::before,
.form-input-radio label::before {
    content: "\f0c8";
    font-weight: 400;
    font-family: "Font Awesome 6 Free";
    font-size: 1.5rem;
    position: absolute;
    margin-left: -2rem;
    margin-top: -.3rem;
    color: var(--first-color);

}

.form-input-radio label::before {
    content: "\f111";
}

.form-input-checkbox input,
.form-input-radio input {
    display: none;
}

.form-input-checkbox label,
.form-input-radio label {
    position: relative;
    padding-left: 2rem;

}


.form-input-checkbox input:checked~label::before {
    content: "\f14a";
}

.form-input-radio input:checked~label::before {
    content: "\f192";
}

.nostyle {
    text-decoration: none;
    color: var(--first-color);
}

.form-input-range label::after {
    content: attr(data-value);
    display: inline-block;
    padding-left: 1rem;
}

.form-input-range input[type="range"]::-moz-range-thumb {
    background-color: var(--first-color);
    height: 1.5rem;
    width: 1.5rem;
    cursor: pointer;
}

.form-input-range input[type="range"]::-webkit-slider-thumb {
    background-color: var(--first-color);
    height: 1.5rem;
    width: 1.5rem;
    margin-top: -.5rem;
    cursor: pointer;
}

.form-input-range input[type="range"]:focus::-moz-range-thumb {
    box-shadow: 0 0 1px #fff, 0 0 0 .25rem var(--second-color);
}


.form-input-range input[type="range"]:focus::-webkit-slider-thumb {
    box-shadow: 0 0 1px #fff, 0 0 0 .25rem var(--second-color);
}

.form-input-range input[type="range"]::-moz-range-track {
    background-color: var(--fifth-color);
    border: 1px solid var(--first-color);
    border-radius: 0.2rem;
    height: .75rem
}

.form-input-range input[type="range"]::-webkit-slider-runnable-track {
    background-color: var(--fifth-color);
    border: 1px solid var(--first-color);
    border-radius: 0.2rem;
    height: .75rem;
}

.validation-error {
    display: inline-block;
    position: absolute;
    right: .5rem;
    top: .7rem;
    cursor: pointer;
    color: var(--error-color);
    width: max-content;
}

.validation-error::before {
    content: attr(data-error-message);
    display: none;
    position: absolute;
    width: max-content;
    right: 0;

    color: var(--error-dark);
    background-color: var(--error-bg);
    border: 1px solid var(--error-border);

    border-radius: .2rem;
    padding: .2rem .5rem;
    font-size: .9rem;
}

.validation-error:hover::before {
    display: block;
}

div[data-error="true"] {
    position: relative;
}




.field-list {
    border: 1px solid var(--first-color);
    padding: 1rem;
    border-radius: .25rem;
}

.tempus-dominus-widget.light .date-container-days div.range-end:not(.no-highlight),
.tempus-dominus-widget.light .date-container-days div.range-in:not(.no-highlight),
.tempus-dominus-widget.light .date-container-days div.range-start:not(.no-highlight),
.tempus-dominus-widget.light .date-container-days div:not(.no-highlight).active,
.tempus-dominus-widget.light .date-container-decades div:not(.no-highlight).active,
.tempus-dominus-widget.light .date-container-months div:not(.no-highlight).active,
.tempus-dominus-widget.light .date-container-years div:not(.no-highlight).active,
.tempus-dominus-widget.light .time-container-clock div:not(.no-highlight).active,
.tempus-dominus-widget.light .time-container-hour div:not(.no-highlight).active,
.tempus-dominus-widget.light .time-container-minute div:not(.no-highlight).active,
.tempus-dominus-widget.light .time-container-second div:not(.no-highlight).active {
    background-color: var(--second-color);
}

.tempus-dominus-widget.light .date-container-days div:not(.no-highlight).today::before,
.tempus-dominus-widget.light .date-container-decades div:not(.no-highlight).today::before,
.tempus-dominus-widget.light .date-container-months div:not(.no-highlight).today::before,
.tempus-dominus-widget.light .date-container-years div:not(.no-highlight).today::before,
.tempus-dominus-widget.light .time-container-clock div:not(.no-highlight).today::before,
.tempus-dominus-widget.light .time-container-hour div:not(.no-highlight).today::before,
.tempus-dominus-widget.light .time-container-minute div:not(.no-highlight).today::before,
.tempus-dominus-widget.light .time-container-second div:not(.no-highlight).today::before {
    border-bottom-color: var(--second-color);
    border-top-color: rgba(0, 0, 0, .2);
}

.tempus-dominus-widget.light button {
    background-color: var(--second-color);
    border: none;
}





/*Multiple File Uploader CSS Start*/

.file-upload-holder {
    padding: 10px;
    cursor: pointer;
    border: 1px solid var(--second-color);
    border-radius: 1rem .25rem .25rem .25rem;
}

.file-uploader {
    /* min-height: 150px; */
    padding: 10px;
    text-align: center;
    display: block;
    font-size: .9rem;
    text-decoration: underline;
    line-height: 250%;
}

.file-uploader:hover {

    box-shadow: 0 0 8px var(--primary-color-3);
}

.file-uploader:empty::after {
    content: "Drag files or click here to upload";
    text-align: center;
    display: block;
    margin-top: 40px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 20px;
}

.file-icon {
    width: 40px;
}

.file-uploader[max-file="1"]:empty::after {
    content: "Drag file or click here to upload";
}

.file-upload-highlight {
    border-color: var(--primary-color-2);
}

.file-uploader .file .filepreview {
    width: 100px;
    height: 100px;
    border: 1px solid var(--primary-color-2);
    border-radius: 5px;
    padding-top: 20px;
    margin: auto;
    text-transform: uppercase;
}

.file-uploader .file .filepreview img {
    max-width: 100%;
    max-height: 100%;
}

.file-uploader .file .filename {
    margin: auto;
    text-align: center;
    word-wrap: break-word;
    font-size: .8rem;
    width: 200px;

}

.file-uploader .file .removelink {
    text-align: center;
}

.file-uploader .file .removelink span {
    color: var(--primary-color-5);
}

.file-uploader .file .removelink span:hover {
    color: var(--primary-color-4);
}


.file-upload-holder input[type="file"] {
    visibility: hidden;
    position: absolute;
}

.primary-progress {
    height: .75rem;
    border-radius: .25rem;
}

.primary-progress .progress-bar {

    background-color: var(--first-color)
}

/*Multiple File Uploader CSS End*/

.alert-ok-btn,
.alert-confirm-btn {
    background-color: var(--first-color);
    color: var(--main-bgcolor);
    min-width: 100px;
    border-radius: .25rem;
}

.field-arr-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.field-arr-list li,
li.draggable {
    display: block;
    border: 1px solid var(--first-color);
    padding: .5rem;
    margin-bottom: .5rem;
    border-radius: .25rem;
}

.field-arr-list li .field-holder,
li.draggable .field-holder {
    display: none;
}

.auto-hide-msg {
    position: fixed;
    bottom: 1rem;
    margin: 0;
    border-radius: 1.5rem 0 1.5rem 0;
    z-index: 5002;

    -webkit-animation: cssAnimation 5s forwards;
    animation: cssAnimation 5s forwards;
}

@keyframes cssAnimation {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }

    25% {
        transform: translateX(0);
        opacity: 1;

    }

    50% {
        transform: translateX(0);
        opacity: 1;
    }

    75% {
        transform: translateX(0);
        opacity: 1;
    }

    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

@-webkit-keyframes cssAnimation {
    0% {
        transform: translateX(100%);
        opacity: 0;
        transition: 1.5;
    }

    25% {
        transform: translateX(0);
        opacity: 1;

    }

    50% {
        transform: translateX(0);
        opacity: 1;
    }

    75% {
        transform: translateX(0);
        opacity: 1;
    }

    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}


.hide {
    animation: slideOutLeft 1s forwards;
}


.itztable {
    width: 100%;
}

.itztable tr {
    border-bottom: 1px solid #DDDDDD;
}

.itztable thead {
    font-weight: 600;
}

.itztable tbody tr {
    border-radius: .25rem;
}

.itztable tr td {
    padding: .75rem;
}

.itztable tbody tr:hover {
    background-color: var(--main-bgcolor);
    outline: 1px solid #DDDDDD;
    box-shadow: 0 0 .25rem #fff, 0 0 0 .25rem #f9f9f9;
}

.form-container {

    border-radius: .25rem;
    background-color: var(--main-bgcolor);
    outline: 1px solid #DDDDDD;
    box-shadow: 0 0 1px #fff, 0 0 0 .25rem #fff;
    padding: 1rem;
}

.options-gear {

    position: absolute;
    top: 15px;
    right: 10px
}

.field-hold {
    padding: 10px;
    padding-right: 35px;
    position: relative;
    border-radius: .25rem;

}

.field-hold:hover {
    outline: 1px solid var(--first-color);
}

.login-container {
    background-color: var(--main-bgcolor);
    border: 1px solid var(--shadow-color);
    border-radius: .5rem;
    min-width: 500px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    box-shadow: 0 0 2rem var(--shadow-color);
}

.form-container {

    border-radius: .25rem;
    background-color: var(--main-bgcolor);
    outline: 1px solid #DDDDDD;
    box-shadow: 0 0 1px #fff, 0 0 0 .25rem #fff;
    padding: 1rem;
}


.view_password {
    position: absolute;
    top: 1rem;
    right: .75rem;
    color: black;
}

.sequence {
    border: 1px solid var(--first-color);
    border-radius: .25rem;
    background: var(--main-bgcolor);
}

.sequence-m {
    border: 1px solid var(--first-color);
    border-radius: .25rem;
    background: var(--third-color);
}


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

.custom-pagination .page-item.active .page-link {
    background-color: var(--first-color);
    border-color: var(--first-color);
    color: var(--main-bgcolor);
}


.custom-pagination .page-link {
    color: var(--first-color);
}

.custom-pagination .page-item .page-link:focus {
    box-shadow: 0 0 2px 2px var(--third-color);
}

.droppable {
    border-radius: .25rem;
}

.ui-droppable-hover {
    background-color: var(--main-bgcolor);
    outline: 1px solid var(--first-color);
    box-shadow: 0 0 2px 2px var(--third-color);
}

.dbutt {
    color: #343434;
    border: 1px solid #343434;
    /* border-radius: 5px !important; */
}

.dbutt:hover {
    color: #fff !important;
    background: #343434 !important;
}

.table-container {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    overflow: hidden;
}

.custom-table {
    width: 100%;
    border-collapse: collapse;

}

.custom-table thead {
    border: 1px solid #343434;
}

/* .custom-table thead tr {
    border-bottom: 10px solid #FFF;
} */

.custom-table tbody {
    border: 1px solid #343434;
}


.custom-table th {
    padding: 11px 8px;
    background-color: #343434;
    color: #ffffff;
}

.custom-table td {
    padding: 8px;
    background-color: #FFF;
}

/* Modal Design Start*/

.itzModal {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 100;
    background: rgba(0, 0, 50, .2);
    display: none;
    justify-content: center;
    align-items: center;
}

.close-btn {
    position: absolute;
    right: 1rem;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--white-color);
    /* box-sizing: content-box; */
}

.close-btn:hover {
    color: var(--white-color);
}


.itzModal>div {
    width: 75%;
    background-color: var(--white-color);
    border: 1px solid var(--dark-gray);
    border-radius: 1rem 0rem 0 0;
}

.itzModal .body {
    max-height: 70vh;
    overflow-y: scroll;
    background-color: var(--white-color);
}

.itzModal .title,
.itzModal .body,
.itzModal .footer {
    padding: .5rem 1rem;
}

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

.itzModal .title {
    /* border-bottom: 1px solid var(--dark-gray); */
    background-color: var(--first-color);
    font-weight: bold;
    border-radius: 1rem 0rem 0 0;
    position: relative;
    font-size: 1.1rem;
    color: var(--white-color);
}

.itzModal .close-btn {
    right: 1rem;
    position: absolute;
    font-size: 1.5rem;
    cursor: pointer;

}

.dialog>div {
    width: 50%;
}

.itzModal .alert-title,
.itzModal .alert-body,
.itzModal .alert-footer {
    padding: 1rem;
    color: var(--white-color) !important;
    /* font-weight: bold; */
}

.itzModal .alert-body,
.itzModal .alert-footer {
    background: var(--bg-color) !important;
    color: var(--bg-inverse-color) !important;
}

.itzModal .alert-footer {
    text-align: right;
}

.itzModal .alert-title {
    border-bottom: 1px solid var(--gray-shadow);
    background-color: var(--first-color);
    color: var(--bg-color);
    font-weight: 600;
    border-radius: 1rem 0 0 0;
    position: relative;
    font-size: 1.1rem;
}

/* Modal Design End*/