body {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-family: "Roboto", Arial, sans-serif;
    background: #ecf0f3;
    color: #000;
    margin: 0;
    padding: 10px;
}

[type=text], [type=password], [type=date], [type=datetime], [type=datetime-local], [type=month], [type=week], [type=email], [type=number], [type=search], [type=tel], [type=time], [type=url], [type=color], textarea, select {
    margin: 0;
    border-radius: 5px;
}

* {
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
}

    *::after, *::before {
        -webkit-box-sizing: border-box !important;
        box-sizing: border-box !important;
    }

label {
    cursor: default;
    font: 500 15px "Roboto", Arial, sans-serif;
}

button {
    cursor: pointer;
    text-decoration: none;
}

sup {
    color: #DC143C;
    font-size: 15px;
    vertical-align: sub;
}

ol, ul {
    list-style: none;
    margin: 0;
}

table {
    background: #fff;
}

    table thead {
        background: #f5f5f6;
        border: none;
        color: #000;
    }

    table tbody {
        border: none;
        background: white;
    }

        table tbody tr td {
            color: #000;
        }

        table tbody tr:nth-child(2n) {
            background: #f5f5f6;
        }

.table-scroll {
    min-width: 100%;
    width: 0;
    overflow-x: auto;
}

    .table-scroll table {
        width: 100%;
        margin: 0;
        font: 14px "Roboto", Arial, sans-serif;
        overflow: hidden;
    }

        .table-scroll table thead tr th {
            white-space: nowrap;
            font-weight: 500;
        }

        .table-scroll table tbody tr {
            -webkit-transition: all 0.3s ease;
            transition: all 0.3s ease;
        }

            .table-scroll table tbody tr:hover {
                position: relative;
                -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 10px 3px;
                box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 10px 3px;
            }

                .table-scroll table tbody tr:hover td {
                    -webkit-transform: translateX(5%) scale(1.1);
                    transform: translateX(5%) scale(1.1);
                }

                .table-scroll table tbody tr:hover .dash-ord-no {
                    background: #000;
                    color: #fff;
                }

            .table-scroll table tbody tr td {
                padding: 1em;
                white-space: nowrap;
                -webkit-transition: all 0.3s ease;
                transition: all 0.3s ease;
            }

                .table-scroll table tbody tr td .dash-ord-no {
                    color: #000;
                    border: 1px solid gray;
                    padding: 0 5px;
                    border-radius: 25px;
                    -webkit-transition: all 0.3s ease;
                    transition: all 0.3s ease;
                }

.edit-record {
    display: inline-block;
}

    .edit-record::before {
        display: block;
        width: 22px;
        content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke='rgba(76,175,80,1)' stroke-width='7' stroke-linecap='round' stroke-miterlimit='10'><path d='M81.9 56.5v26.3c0 6.7-5.4 12-12 12H17c-6.7 0-12-5.4-12-12V31.6c0-6.7 5.4-12 12-12h25.7M55 61.9L38.2 45.1m48.6-15L70.1 13.3'/><path d='M55 61.9l-20.4 3.6 3.6-20.4L76.8 6.5c1.8-1.8 4.8-1.8 6.7 0l10.1 10.1c1.8 1.8 1.8 4.8 0 6.7L55 61.9z'/></g></svg>");
    }
.save-record {
    display: inline-block
}

    .save-record:before {
        display: block;
        width: 22px;
        content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke='rgba(76,175,80,1)' stroke-width='7' stroke-linecap='round' stroke-miterlimit='10'><path d='M81.9 56.5v26.3c0 6.7-5.4 12-12 12H17c-6.7 0-12-5.4-12-12V31.6c0-6.7 5.4-12 12-12h25.7M55 61.9L38.2 45.1m48.6-15L70.1 13.3'/><path d='M55 61.9l-20.4 3.6 3.6-20.4L76.8 6.5c1.8-1.8 4.8-1.8 6.7 0l10.1 10.1c1.8 1.8 1.8 4.8 0 6.7L55 61.9z'/></g></svg>")
    }

.del-record {
    display: inline-block;
}

    .del-record::before {
        display: block;
        width: 22px;
        content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke='rgba(220,20,60,1)' stroke-width='7' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10'><path d='M5 22.5h90m-28.5 0V9.3c0-2.3-1.5-4.2-3.3-4.2H36.8c-1.8 0-3.3 1.9-3.3 4.2v13.3m-1.6 13.9L35.7 78m14.1-41.5V78m17.9-41.5L63.8 78'/><path d='M84.8 22.5l-6.5 66.9c-.3 3.2-3 5.6-6.2 5.6H28c-3.2 0-5.9-2.4-6.2-5.6l-6.5-66.9'/></g></svg>");
    }

.frm-field {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column wrap;
    flex-flow: column wrap;
    gap: 5px;
}

.heading-one {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.5em;
    font: 500 1em "Roboto", Arial, sans-serif;
    color: #fff;
    background: #000;
    margin: 0;
    padding: 0.5em 1em;
    text-transform: uppercase;
}

    .heading-one svg {
        width: 25px;
        stroke: #00aeef;
        stroke-width: 6;
    }

.heading-border {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.5em;
    font: 500 1em "Roboto", Arial, sans-serif;
    color: #000;
    border-bottom: 1px solid #e6e6e6;
    margin: 0;
    padding: 0.5em 1em;
    text-transform: uppercase;
}

    .heading-border svg {
        width: 25px;
        stroke: #00aeef;
        stroke-width: 6;
    }

.thumbnail {
    margin: 0;
}

.form-error {
    font: 500 0.8em "Roboto", Arial, sans-serif;
    margin: 0;
    color: #DC143C;
    font-style: italic;
}

/* BUTTONS */
.btn {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: auto 0.5em 1fr;
    grid-template-columns: auto 1fr;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.5em;
    border-radius: 0.3em;
    font: 500 "Roboto", Arial, sans-serif;
    text-align: center;
    text-transform: capitalize;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    margin: 0.5em 0;
    color: #fff;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

    .btn:hover {
        color: #fff;
    }

    .btn:focus {
        color: #fff;
    }

    .btn:active {
        position: relative;
        top: 1px;
    }

    .btn svg {
        width: 20px;
        stroke: #fff;
        stroke-width: 7;
    }

    .btn.lg {
        width: 100%;
        padding: 0.5em 1em;
        font-size: 1em;
    }

    .btn.md {
        width: -webkit-max-content;
        width: -moz-max-content;
        width: max-content;
        padding: 0.4em 1em;
        font-size: 0.9em;
    }

    .btn.sm {
        width: -webkit-max-content;
        width: -moz-max-content;
        width: max-content;
        padding: 0.3em 1em;
        font-size: 0.8em;
    }

        .btn.lg.magenta, .btn.md.magenta, .btn.sm.magenta {
            border: solid 1px #71154b;
            background: #9c1d68;
            background: -webkit-gradient(linear, left top, left bottom, from(#9c1d68), to(#71154b));
            background: linear-gradient(#9c1d68, #71154b);
        }

            .btn.lg.magenta:hover, .btn.md.magenta:hover, .btn.sm.magenta:hover {
                background: -webkit-gradient(linear, left top, left bottom, from(#71154b), to(#5b113d));
                background: linear-gradient(#71154b, #5b113d);
            }

            .btn.lg.magenta:active, .btn.md.magenta:active, .btn.sm.magenta:active {
                background: -webkit-gradient(linear, left top, left bottom, from(#71154b), to(#9c1d68));
                background: linear-gradient(#71154b, #9c1d68);
            }

        .btn.lg.green, .btn.md.green, .btn.sm.green {
            border: solid 1px #3d8b40;
            background: #4caf50;
            background: -webkit-gradient(linear, left top, left bottom, from(#4caf50), to(#3d8b40));
            background: linear-gradient(#4caf50, #3d8b40);
        }

            .btn.lg.green:hover, .btn.md.green:hover, .btn.sm.green:hover {
                background: -webkit-gradient(linear, left top, left bottom, from(#3d8b40), to(#357a38));
                background: linear-gradient(#3d8b40, #357a38);
            }

            .btn.lg.green:active, .btn.md.green:active, .btn.sm.green:active {
                background: -webkit-gradient(linear, left top, left bottom, from(#3d8b40), to(#4caf50));
                background: linear-gradient(#3d8b40, #4caf50);
            }

/* BUTTONS END */
/* LOGIN SCREEN */
.login-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column wrap;
    flex-flow: column wrap;
    gap: 1em;
    height: 98vh;
    background: #ecf0f3;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

    .login-container .login-form {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: 600px;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
        gap: 2em;
        background: #ecf0f3;
        -webkit-box-shadow: 13px 13px 20px #cbced1, -13px -13px 20px #fff;
        box-shadow: 13px 13px 20px #cbced1, -13px -13px 20px #fff;
        padding: 1.5em;
        border-radius: 25px;
    }

        .login-container .login-form img {
            width: 150px;
            margin: 0 auto;
            -webkit-box-flex: 0;
            -ms-flex: 0 1 auto;
            flex: 0 1 auto;
        }

        .login-container .login-form form {
            -webkit-box-flex: 1;
            -ms-flex: 1 0 auto;
            flex: 1 0 auto;
        }

            .login-container .login-form form .item-left {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                -ms-flex-flow: column;
                flex-flow: column;
                gap: 1em;
            }

                .login-container .login-form form .item-left .input-override {
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-pack: center;
                    -ms-flex-pack: center;
                    justify-content: center;
                    gap: 0.5em;
                    padding: 0.5em 1em;
                    border-radius: 15px;
                    -webkit-box-shadow: inset 8px 8px 8px #cbced1, inset -8px -8px 8px #fff;
                    box-shadow: inset 8px 8px 8px #cbced1, inset -8px -8px 8px #fff;
                }

                    .login-container .login-form form .item-left .input-override svg {
                        width: 25px;
                        stroke: gray;
                        stroke-width: 5;
                    }

                    .login-container .login-form form .item-left .input-override input {
                        -webkit-appearance: none;
                        -moz-appearance: none;
                        appearance: none;
                        border: none;
                        outline: none;
                        background: transparent;
                        -webkit-box-shadow: none;
                        box-shadow: none;
                    }

                .login-container .login-form form .item-left button {
                    font: 500 1em "Roboto", Arial, sans-serif;
                    text-transform: uppercase;
                    border-radius: 25px;
                    -webkit-box-shadow: 13px 13px 20px #cbced1, -13px -13px 20px #fff;
                    box-shadow: 13px 13px 20px #cbced1, -13px -13px 20px #fff;
                    color: #000;
                    padding: 1em;
                    cursor: pointer;
                    -webkit-transition: all 0.3s ease;
                    transition: all 0.3s ease;
                }

                    .login-container .login-form form .item-left button:hover {
                        background: #9c1d68;
                        color: #fff;
                    }

.ip-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column wrap;
    flex-flow: column wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

    .ip-container .ip-detect {
        display: inline-block;
        margin: 1em auto;
        font: 0.9em "Roboto", Arial, sans-serif;
        color: #999999;
        text-align: center;
        border: 1px solid #cccccc;
        padding: 0.2em 1em;
        border-radius: 25px;
    }

        .ip-container .ip-detect strong {
            font-weight: 500;
        }

/* LOGIN SCREEN END */
/* DASHBOARD */
.three-sections {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 300px 1em 1fr 1em 1fr;
    grid-template-columns: 300px 1fr 1fr;
    gap: 1em;
}

    .three-sections header {
        background: #fff;
        -webkit-box-shadow: 0 0 0 1px #dce4e9;
        box-shadow: 0 0 0 1px #dce4e9;
        padding: 1em;
        border-radius: 5px;
    }

    .three-sections header {
        grid-column: 1/-1;
    }

    .three-sections .boffice-nav {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-flow: column;
        flex-flow: column;
        gap: 1em;
        -ms-grid-column: 1;
        -ms-grid-column-span: 1;
        grid-column: 1/2;
    }

        .three-sections .boffice-nav .nav-sec {
            border-radius: 5px;
            overflow: hidden;
            -webkit-box-shadow: 0 0 0 1px #dce4e9;
            box-shadow: 0 0 0 1px #dce4e9;
        }

            .three-sections .boffice-nav .nav-sec ul {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                -ms-flex-flow: column;
                flex-flow: column;
                gap: 1px;
                list-style-type: none;
                margin: 0;
            }

                .three-sections .boffice-nav .nav-sec ul li {
                    background: #fff;
                }

                    .three-sections .boffice-nav .nav-sec ul li a {
                        display: block;
                        font: 500 0.9em "Roboto", Arial, sans-serif;
                        color: #000;
                        padding: 0.7em 1em;
                        -webkit-transition: all 0.3s ease;
                        transition: all 0.3s ease;
                    }

                        .three-sections .boffice-nav .nav-sec ul li a:hover {
                            background: #9c1d68;
                            color: #fff;
                        }

    .three-sections .main-content {
        grid-column: 2/-1;
    }

        .three-sections .main-content .dash-maincon-sec {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-flow: column;
            flex-flow: column;
            gap: 1em;
        }

            .three-sections .main-content .dash-maincon-sec .sec-one {
                background: #fff;
                -webkit-box-shadow: 0 0 0 1px #dce4e9;
                box-shadow: 0 0 0 1px #dce4e9;
                border-radius: 5px;
            }

                .three-sections .main-content .dash-maincon-sec .sec-one .brand-assign {
                    display: -ms-grid;
                    display: grid;
                    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
                    gap: 1em;
                    margin: 0;
                    padding: 1em;
                    list-style: none;
                }

    .three-sections .two-section {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 1em;
    }

        .three-sections .two-section .logo-and-toggler {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            -ms-flex-flow: row wrap;
            flex-flow: row wrap;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            gap: 5px;
        }

            .three-sections .two-section .logo-and-toggler img {
                width: 120px;
            }

        .three-sections .two-section .right-sec {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            -ms-flex-flow: row wrap;
            flex-flow: row wrap;
            gap: 1.5em;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
        }

            .three-sections .two-section .right-sec .right-1 {
                position: relative;
            }

                .three-sections .two-section .right-sec .right-1 button {
                    cursor: pointer;
                }

                    .three-sections .two-section .right-sec .right-1 button svg {
                        width: 30px;
                        stroke: #000;
                        stroke-width: 7;
                    }

                    .three-sections .two-section .right-sec .right-1 button span {
                        display: -webkit-box;
                        display: -ms-flexbox;
                        display: flex;
                        padding: 0.1em 0.3em;
                        border-radius: 5px;
                        background: #DC143C;
                        color: #fff;
                        font: 0.8em "Roboto", Arial, sans-serif;
                        position: absolute;
                        top: -10px;
                        right: -12px;
                    }

                .three-sections .two-section .right-sec .right-1 .dropdown-pane.is-open {
                    left: 50% !important;
                    -webkit-transform: translateX(-50%);
                    transform: translateX(-50%);
                    padding: 0;
                    -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
                    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
                }

            .three-sections .two-section .right-sec .right-2 {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-orient: horizontal;
                -webkit-box-direction: normal;
                -ms-flex-flow: row wrap;
                flex-flow: row wrap;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                gap: 0.5em;
            }

                .three-sections .two-section .right-sec .right-2 svg {
                    width: 30px;
                    stroke: #000;
                    stroke-width: 7;
                }

                .three-sections .two-section .right-sec .right-2 span {
                    font: 700 1em "Roboto", Arial, sans-serif;
                }

            .three-sections .two-section .right-sec .right-3 a svg {
                width: 35px;
                vertical-align: middle;
                fill: #00aeef;
            }

/* DASHBOARD END */
/* WORLD CLOCK */
.world-clock {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 1em;
    margin: 0;
    margin-left: auto;
    padding: 0;
}

    .world-clock li {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
        list-style: none;
        gap: 0.5em;
        -webkit-box-shadow: 0 0 0 1px #cdd7df;
        box-shadow: 0 0 0 1px #cdd7df;
        padding: 0.1em 0.5em;
        border-radius: 5px;
    }

        .world-clock li .zone-date {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-flow: column;
            flex-flow: column;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
        }

            .world-clock li .zone-date .zone {
                font: 500 0.8em "Roboto", Arial, sans-serif;
                text-transform: capitalize;
                text-align: right;
            }

            .world-clock li .zone-date .date {
                font: 0.6em "Roboto", Arial, sans-serif;
                text-transform: capitalize;
                text-align: right;
                color: #577489;
            }

        .world-clock li .time {
            font: 500 1.5em "Roboto", Arial, sans-serif;
            text-transform: uppercase;
        }

/* WORLD CLOCK END */
/* NOTIFICATION TABS */
.noify-tab > input, .noify-tab section > div {
    display: none;
}

.noify-tab #tab1:checked ~ section .tab1, #tab2:checked ~ section .tab2, #tab3:checked ~ section .tab3 {
    display: block;
}

.noify-tab {
    width: 100%;
    margin: 0 auto;
    list-style: none;
    padding: 0;
}

    .noify-tab nav {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
        gap: 1px;
        background: #fff;
    }

    .noify-tab label {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        background: #dce4e9;
        font: 500 0.8em "Roboto", Arial, sans-serif;
        text-transform: uppercase;
        padding: 10px 5px;
        text-align: center;
        color: #000;
    }

        .noify-tab label:hover {
            background: #cdd7df;
            cursor: pointer;
        }

        .noify-tab label:active {
            background: #fff;
        }

    .noify-tab section {
        padding: 10px;
        clear: both;
    }

        .noify-tab section div {
            height: 400px;
            overflow-y: scroll;
            background: transparent;
            line-height: 1.5em;
            letter-spacing: 0.3px;
            color: #000;
        }

            .noify-tab section div h2 {
                margin: 0;
                font-family: "Raleway";
                letter-spacing: 1px;
                color: #34495e;
            }

    .noify-tab #tab1:checked ~ nav .tab1, #tab2:checked ~ nav .tab2, #tab3:checked ~ nav .tab3 {
        background: white;
        color: #111;
        position: relative;
    }

        .noify-tab #tab1:checked ~ nav .tab1::after, #tab2:checked ~ nav .tab2::after, #tab3:checked ~ nav .tab3::after {
            content: "";
            display: block;
            position: absolute;
            height: 2px;
            width: 100%;
            background: #ffffff;
            left: 0;
            bottom: -1px;
        }

.sporder-details {
    list-style: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column wrap;
    flex-flow: column wrap;
    gap: 0.3em;
    margin: 0;
}

    .sporder-details .spblocks {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
        padding: 5px 0;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

        .sporder-details .spblocks span {
            -webkit-box-flex: 1;
            -ms-flex: 1 0 49%;
            flex: 1 0 49%;
            font: 0.8em "Roboto", Arial, sans-serif;
            padding: 3px;
        }

            .sporder-details .spblocks span a {
                color: #000;
                border: 1px solid #000;
                border-radius: 25px;
                padding: 0 3px;
                -webkit-transition: all 0.3s ease;
                transition: all 0.3s ease;
            }

        .sporder-details .spblocks .spb-1, .sporder-details .spblocks .spb-3, .sporder-details .spblocks .spb-5 {
            font-weight: 500;
        }

        .sporder-details .spblocks:nth-child(odd) {
            background: #ecf0f3;
        }

        .sporder-details .spblocks:hover a {
            background: #000;
            color: #fff;
        }

.tab2 .sporder-details {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
}

    .tab2 .sporder-details .spblocks {
        padding: 10px 0;
    }

        .tab2 .sporder-details .spblocks span {
            -webkit-box-flex: 1;
            -ms-flex: 1 0 80%;
            flex: 1 0 80%;
        }

            .tab2 .sporder-details .spblocks span a {
                border: none;
            }

            .tab2 .sporder-details .spblocks span .verify {
                color: green;
            }

            .tab2 .sporder-details .spblocks span .not-verify {
                color: #DC143C;
            }

        .tab2 .sporder-details .spblocks .spb-1 {
            -webkit-box-flex: 1;
            -ms-flex: 1 0 80;
            flex: 1 0 80;
        }

        .tab2 .sporder-details .spblocks .spb-2 {
            -webkit-box-flex: 1;
            -ms-flex: 1 0 auto;
            flex: 1 0 auto;
        }

        .tab2 .sporder-details .spblocks:hover a {
            background: none;
        }

/* NOTIFICATION TABS END*/
/* RADIO SWITCH LIGHT DARK MODE */
.toggler {
    width: auto;
}

    .toggler input {
        display: none;
    }

    .toggler label {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        position: relative;
        width: 45px;
        height: 15px;
        border: 1px solid #d6d6d6;
        border-radius: 86px;
        background: #e4e8e8;
        cursor: pointer;
    }

        .toggler label::after {
            display: block;
            border-radius: 100%;
            background-color: #ffba00;
            content: "";
            -webkit-animation-name: toggler-size;
            animation-name: toggler-size;
            -webkit-animation-duration: 0.15s;
            animation-duration: 0.15s;
            -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
            -webkit-animation-direction: forwards;
            animation-direction: forwards;
            -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
            -webkit-animation-play-state: running;
            animation-play-state: running;
        }

        .toggler label::after, .toggler label .toggler-on, .toggler label .toggler-off {
            position: absolute;
            left: 25%;
            width: 25px;
            height: 25px;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
            -webkit-transition: left 0.15s ease-in-out, width 0.15s ease-in-out, height 0.15s ease-in-out, opacity 0.15s ease-in-out;
            transition: left 0.15s ease-in-out, width 0.15s ease-in-out, height 0.15s ease-in-out, opacity 0.15s ease-in-out;
            padding: 2px;
        }

    .toggler input:checked + label::after, .toggler input:checked + label .toggler-on, .toggler input:checked + label .toggler-off {
        left: 75%;
    }

    .toggler input:checked + label::after {
        background: #000;
        -webkit-animation-name: toggler-size2;
        animation-name: toggler-size2;
    }

    .toggler .toggler-on, .toggler .toggler-off {
        opacity: 1;
        z-index: 2;
    }

    .toggler input:checked + label .toggler-off, .toggler input:not(:checked) + label .toggler-on {
        width: 0;
        height: 0;
        opacity: 0;
    }

/* RADIO SWITCH LIGHT DARK MODE */
/* CHANGE PASSWORD */
.change-pass-form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column wrap;
    flex-flow: column wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    max-width: 600px;
    min-height: 500px;
    gap: 1em;
    margin: 0 auto;
}

    .change-pass-form .change-pass-svg {
        width: 80px;
        background: #cdd7df;
        border-radius: 50%;
        padding: 0.3em;
    }

        .change-pass-form .change-pass-svg g {
            fill: #fff;
        }

    .change-pass-form form {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-flow: column wrap;
        flex-flow: column wrap;
        gap: 1em;
    }

/* CHANGE PASSWORD END */
/* MANAGE USERS */
.btn-group {
    padding: 0.5em 1em;
}

.user-roles-tag {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    gap: 0.5em;
    margin: 0;
}

    .user-roles-tag li {
        border: 1px solid #b3b3b3;
        padding: 0 0.5em;
        border-radius: 25px;
        font-size: 13px;
        color: #4d4d4d;
    }

.co-flag img {
    width: 25px;
}

/* MANAGE USERS END */
/* ADD USERS */
.add-newuser-form {
    padding: 1em;
}

    .add-newuser-form form {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
        gap: 1em;
    }

        .add-newuser-form form .frm-field {
            -webkit-box-flex: 1;
            -ms-flex: 1 0 49%;
            flex: 1 0 49%;
        }

/* ADD USERS END */
/* Small To Medium only */
@media screen and (max-width: 63.9375em) {
    .three-sections {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        gap: 0.5em;
    }

        .three-sections .boffice-nav, .three-sections .main-content {
            grid-column: 1/-1;
        }

        .three-sections .two-section .logo-and-toggler {
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-flow: column wrap;
            flex-flow: column wrap;
            gap: 10px;
        }

    .change-pass-form {
        min-height: 420px;
        padding: 0.5em;
    }
}
/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
    .world-clock {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-flow: column;
        flex-flow: column;
        gap: 0.5em;
        margin-left: inherit;
        margin-right: auto;
    }

        .world-clock li .time {
            font-size: 1.4em;
        }
}
/* Small only */
@media screen and (max-width: 39.9375em) {
    .login-container .login-form {
        width: 95%;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-flow: column;
        flex-flow: column;
        padding: 1em;
    }

    .world-clock {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
        gap: 10px;
        -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
        order: 3;
        margin: inherit;
        -webkit-box-flex: 1;
        -ms-flex: 1 0 100%;
        flex: 1 0 100%;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

        .world-clock li .time {
            font-size: 14px;
        }

    .three-sections header {
        padding: 0.5em;
    }

    .three-sections .two-section .logo-and-toggler img {
        width: 70px;
    }

    .three-sections .two-section .right-sec {
        gap: 0.5em;
    }

        .three-sections .two-section .right-sec svg {
            width: 25px !important;
        }

        .three-sections .two-section .right-sec .right-2 span {
            font-size: 0.8em;
        }

        .three-sections .two-section .right-sec .right-1 .dropdown-pane.is-open {
            -webkit-transform: translateX(-40%);
            transform: translateX(-40%);
        }

    .three-sections .main-content .dash-maincon-sec .sec-one .brand-assign {
        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
        padding: 0.5em;
    }
}