@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(../lib/material-icons/MaterialIcons-Regular.eot); /* For IE6-8 */
    src: local('Material Icons'), local('MaterialIcons-Regular'), 
         url(../lib/material-icons/MaterialIcons-Regular.woff2) format('woff2'),
         url(../lib/material-icons/MaterialIcons-Regular.woff) format('woff'), 
         url(../lib/material-icons/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px; /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
}


html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #0366d6;
}

.btn-primary {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

app {
    position: relative;
    display: flex;
    flex-direction: column;
}

.top-row {
    height: 3.5rem;
    display: flex;
    align-items: center;
}

.main {
    flex: 1;
}

.main .top-row {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
}

.main .top-row > a {
    margin-left: 1.5rem;
}

.sidebar {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.sidebar .top-row {
    background-color: rgba(0,0,0,0.4);
}

.sidebar .navbar-brand {
    font-size: 1.1rem;
}

.sidebar .oi {
    width: 2rem;
    font-size: 1.1rem;
    vertical-align: text-top;
    top: -2px;
}

.nav-item {
    font-size: 0.9rem;
}

.sidebar .nav-item:first-of-type {
    padding-top: 1rem;
}

.sidebar .nav-item:last-of-type {
    padding-bottom: 1rem;
}

.sidebar .nav-item a {
    color: #d7d7d7;
    border-radius: 4px;
    height: 3rem;
    display: flex;
    align-items: center;
    line-height: 3rem;
}

.sidebar .nav-item a.active {
        background-color: rgba(255,255,255,0.25);
        color: white;
    }

.sidebar .nav-item a:hover {
        background-color: rgba(255,255,255,0.1);
        color: white;
    }

.content {
    padding-top: 1.1rem;
}

.navbar-toggler {
    background-color: rgba(255, 255, 255, 0.1);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

@media (max-width: 767.98px) {
    .main .top-row {
        display: none;
    }
}

@media (min-width: 768px) {
    app {
        flex-direction: row;
    }

    .sidebar {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .main .top-row {
        position: sticky;
        top: 0;
    }

    .main > div {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }

    .navbar-toggler {
        display: none;
    }

    .sidebar .collapse {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
}



:root {
    --blue-color: #7386D5;
    --blue-hover-color: #6d7fc1;
}

a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    position: relative;
    min-height: 100%;
}

body {
    /* Margin bottom by footer height */
    /*margin-bottom: 60px;*/
    background: #fafafa;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    /* Set the fixed height of the footer here */
    height: 60px;
    line-height: 60px; /* Vertically center the text there */
}


/* ---------------------------------------------------
    SIDEBAR & CONTENT STYLE
----------------------------------------------------- */


p {
    font-size: 1em;
    font-weight: 300;
    line-height: 1.7em;
    color: #999;
}


#sidebar
a,
a:hover,
a:focus {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;
}

.navbar {
    padding: 15px 10px;
    background: #fff;
/*    margin: 10px;*/
    border: none;
    border-radius: 0;
    margin-bottom: 40px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

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

.line {
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #ddd;
    margin: 40px 0;
}

#sidebar {
    /*height: 100vh;*/
}

.sidebar-shadow {
    -webkit-box-shadow: 0px 0px 21px -5px rgba(0,0,0,0.71);
    -moz-box-shadow: 0px 0px 21px -5px rgba(0,0,0,0.71);
    box-shadow: 0px 0px 21px -5px rgba(0,0,0,0.71);
}

#sidebar .sidebar-header {
    padding: 20px;
    background: var(--blue-hover-color);
}


#sidebar ul.components {
    padding: 20px 0;
    border-bottom: 1px solid #47748b;
}

#sidebar ul p {
    color: #fff;
    padding: 10px;
}

#sidebar ul li a {
    padding: 10px;
    font-size: 1em;
    display: block;
}

    #sidebar ul li a:hover {
        color: var(--blue-color);
        background: #fff;
    }

#sidebar ul li.active > a,
a[aria-expanded="true"] {
    color: #fff;
    background: var(--blue-hover-color);
}

a[data-toggle="collapse"] {
    position: relative;
}


#sidebar ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
    background: var(--blue-hover-color);
}



.overlay {
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    z-index: 998;
    opacity: 0;
    transition: all 0.5s ease-in-out;
    /*overflow: hidden;*/
}

#dismiss {
    display: none;
}



/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */

.wrapper {
    display: flex;
    width: 100%;
    /*align-items: stretch;*/
}

/*Desktop*/
@media (min-width: 768px) {

    #sidebar.active {
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }

    #sidebarCollapseDesktop {
        display: block;
    }

    #sidebarCollapse {
        display: none;
    }


    #content.active {
        width: 100%;
    }
}


/*Mobile*/
@media (max-width: 768px) {

    .sidebar-shadow:not(.active-mobile) {
        -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
        box-shadow: none !important;
    }

    #sidebarCollapseDesktop {
        display: none;
    }

    #sidebarCollapse {
        display: block;
    }


    /* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */
    #sidebar {
        width: 250px;
        position: fixed;
        top: 0;
        height: 100%;
        z-index: 999;
        background: var(--blue-color);
        color: #fff;
        transition: all 0.3s;
        overflow-y: scroll;
        box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
    }


    #dismiss {
        display: block;
        width: 35px;
        height: 35px;
        line-height: 35px;
        text-align: center;
        background: var(--blue-color);
        position: absolute;
        top: 21px;
        cursor: pointer;
        -webkit-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
    }

        #dismiss:hover {
            background: #fff;
            color: var(--blue-color);
        }



    .overlay.active-mobile {
        display: block;
        opacity: 1;
        overflow: hidden;
    }


    /* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */

    #content {
        /*padding: 0px !important;*/
        width: 100%;
        min-height: 100vh;
        transition: all 0.3s;
        position: absolute;
        top: 0;
        right: 0;
    }
}


/*------------------------- bootstrap-select ------------------------- */


.dropdown-toggle {
    border: 1px solid #ced4da;
    background: white;
}

.filter-option-inner-inner {
    color: black;
}


/*---------------------- ./. bootstrap-select ------------------------- */






/* ------------------------- Custom Checkbox and raduio btn ------------------------- */
/*Demo*/
/*
        <div class="container">
        <div class="d-block my-3">
            <label class="custom-control material-checkbox">
                <input type="checkbox" class="material-control-input">
                <span class="material-control-indicator"></span>
                <span>Material checkbox</span>
            </label>
            <label class="custom-control fill-checkbox">
                <input type="checkbox" class="fill-control-input">
                <span class="fill-control-indicator"></span>
                <span>Fill checkbox</span>
            </label>
            <label class="custom-control overflow-checkbox">
                <input type="checkbox" class="overflow-control-input">
                <span class="overflow-control-indicator"></span>
                <span>Overflow checkbox</span>
            </label>
        </div>

        <div class="d-block my-3">
            <label class="custom-control material-switch">
                <span>Off</span>
                <input type="checkbox" class="material-switch-control-input">
                <span class="material-switch-control-indicator"></span>
                <span>On</span>
            </label>
            <label class="custom-control ios-switch">
                <span>Off</span>
                <input type="checkbox" class="ios-switch-control-input">
                <span class="ios-switch-control-indicator"></span>
                <span>On</span>
            </label>
            <label class="custom-control border-switch">
                <span>Off</span>
                <input type="checkbox" class="border-switch-control-input">
                <span class="border-switch-control-indicator"></span>
                <span>On</span>
            </label>
            <label class="custom-control teleport-switch">
                <span>Off</span>
                <input type="checkbox" class="teleport-switch-control-input">
                <span class="teleport-switch-control-indicator"></span>
                <span>On</span>
            </label>
        </div>
    </div>
</div>
*/







.checkbox-d-none:before {
    display: none;
}

.checkbox-d-none:after {
    display: none;
}



.custom-control.material-checkbox {
    --color: #26a69a;
}

    .custom-control.material-checkbox .material-control-input {
        display: none;
    }

        .custom-control.material-checkbox .material-control-input:checked ~ .material-control-indicator {
            border-color: var(--color);
            -webkit-transform: rotateZ(45deg) translate(1px, -5px);
            transform: rotateZ(45deg) translate(1px, -5px);
            width: 10px;
            border-top: 0px solid #fff;
            border-left: 0px solid #fff;
        }

    .custom-control.material-checkbox .material-control-indicator {
        display: inline-block;
        position: absolute;
        top: 4px;
        left: 0;
        width: 16px;
        height: 16px;
        border: 2px solid #aaa;
        transition: 0.3s;
    }

.custom-control.fill-checkbox {
    --color: #26a69a;
}

    .custom-control.fill-checkbox .fill-control-input {
        display: none;
    }

        .custom-control.fill-checkbox .fill-control-input:checked ~ .fill-control-indicator {
            background-color: var(--color);
            border-color: var(--color);
            background-size: 80%;
        }

    .custom-control.fill-checkbox .fill-control-indicator {
        border-radius: 3px;
        display: inline-block;
        position: absolute;
        top: 4px;
        left: 0;
        width: 16px;
        height: 16px;
        border: 2px solid #aaa;
        transition: 0.3s;
        background-size: 0%;
        background-position: center;
        background-repeat: no-repeat;
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");
    }

.custom-control.overflow-checkbox .overflow-control-input {
    display: none;
}

    .custom-control.overflow-checkbox .overflow-control-input:checked ~ .overflow-control-indicator::after {
        -webkit-transform: rotateZ(45deg) scale(1);
        transform: rotateZ(45deg) scale(1);
        top: -6px;
        left: 5px;
    }

    .custom-control.overflow-checkbox .overflow-control-input:checked ~ .overflow-control-indicator::before {
        opacity: 1;
    }

.custom-control.overflow-checkbox .overflow-control-indicator {
    border-radius: 3px;
    display: inline-block;
    position: absolute;
    top: 4px;
    left: 0;
    width: 16px;
    height: 16px;
    border: 2px solid #aaa;
}

    .custom-control.overflow-checkbox .overflow-control-indicator::after {
        content: "";
        display: block;
        position: absolute;
        width: 16px;
        height: 16px;
        transition: 0.3s;
        -webkit-transform: rotateZ(90deg) scale(0);
        transform: rotateZ(90deg) scale(0);
        width: 10px;
        border-bottom: 4px solid #aaa;
        border-right: 4px solid #aaa;
        border-radius: 3px;
        top: -2px;
        left: 2px;
    }

    .custom-control.overflow-checkbox .overflow-control-indicator::before {
        content: "";
        display: block;
        position: absolute;
        width: 16px;
        height: 16px;
        transition: 0.3s;
        width: 10px;
        border-right: 7px solid #fff;
        border-radius: 3px;
        -webkit-transform: rotateZ(45deg) scale(1);
        transform: rotateZ(45deg) scale(1);
        top: -4px;
        left: 5px;
        opacity: 0;
    }

.custom-control.material-switch {
    --color: #26a69a;
    padding-left: 0;
}

    .custom-control.material-switch .material-switch-control-input {
        display: none;
    }

        .custom-control.material-switch .material-switch-control-input:checked ~ .material-switch-control-indicator::after {
            background-color: var(--color);
            left: 17px;
        }

    .custom-control.material-switch .material-switch-control-indicator {
        display: inline-block;
        position: relative;
        margin: 0 10px;
        top: 4px;
        width: 32px;
        height: 16px;
        background: #ddd;
        border-radius: 16px;
        transition: 0.3s;
    }

        .custom-control.material-switch .material-switch-control-indicator::after {
            content: "";
            display: block;
            position: absolute;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            transition: 0.3s;
            top: -1px;
            left: -1px;
            background: #fdfdfd;
            box-shadow: 0 2px 10px #aaa;
        }

.custom-control.ios-switch {
    --color: #4cd964;
    padding-left: 0;
}

    .custom-control.ios-switch .ios-switch-control-input {
        display: none;
    }

        .custom-control.ios-switch .ios-switch-control-input:active ~ .ios-switch-control-indicator::after {
            width: 20px;
        }

        .custom-control.ios-switch .ios-switch-control-input:checked ~ .ios-switch-control-indicator {
            border: 10px solid var(--color);
        }

            .custom-control.ios-switch .ios-switch-control-input:checked ~ .ios-switch-control-indicator::after {
                top: -8px;
                left: 4px;
            }

        .custom-control.ios-switch .ios-switch-control-input:checked:active ~ .ios-switch-control-indicator::after {
            left: 0px;
        }

    .custom-control.ios-switch .ios-switch-control-indicator {
        display: inline-block;
        position: relative;
        margin: 0 10px;
        top: 4px;
        width: 32px;
        height: 20px;
        background: #fff;
        border-radius: 16px;
        transition: 0.3s;
        border: 2px solid #ddd;
    }

        .custom-control.ios-switch .ios-switch-control-indicator::after {
            content: "";
            display: block;
            position: absolute;
            width: 16px;
            height: 16px;
            border-radius: 16px;
            transition: 0.3s;
            top: 0px;
            left: 0px;
            background: #fff;
            box-shadow: 0 0 2px #aaa, 0 2px 5px #999;
        }

.custom-control.border-switch {
    --color: #4cd964;
    padding-left: 0;
}

    .custom-control.border-switch .border-switch-control-input {
        display: none;
    }

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

            .custom-control.border-switch .border-switch-control-input:checked ~ .border-switch-control-indicator::after {
                left: 14px;
                background-color: var(--color);
            }

    .custom-control.border-switch .border-switch-control-indicator {
        display: inline-block;
        position: relative;
        margin: 0 10px;
        top: 4px;
        width: 32px;
        height: 20px;
        background: #fff;
        border-radius: 16px;
        transition: 0.3s;
        border: 2px solid #ccc;
    }

        .custom-control.border-switch .border-switch-control-indicator::after {
            content: "";
            display: block;
            position: absolute;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            transition: 0.3s;
            top: 2px;
            left: 2px;
            background: #ccc;
        }

.custom-control.teleport-switch {
    --color: #4cd964;
    padding-left: 0;
}

    .custom-control.teleport-switch .teleport-switch-control-input {
        display: none;
    }

        .custom-control.teleport-switch .teleport-switch-control-input:checked ~ .teleport-switch-control-indicator {
            border-color: var(--color);
        }

            .custom-control.teleport-switch .teleport-switch-control-input:checked ~ .teleport-switch-control-indicator::after {
                left: -14px;
            }

            .custom-control.teleport-switch .teleport-switch-control-input:checked ~ .teleport-switch-control-indicator::before {
                right: 2px;
                background-color: var(--color);
            }

    .custom-control.teleport-switch .teleport-switch-control-indicator {
        display: inline-block;
        position: relative;
        margin: 0 10px;
        top: 4px;
        width: 32px;
        height: 20px;
        background: #fff;
        border-radius: 16px;
        transition: 0.3s;
        border: 2px solid #ccc;
        overflow: hidden;
    }

        .custom-control.teleport-switch .teleport-switch-control-indicator::after {
            content: "";
            display: block;
            position: absolute;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            transition: 0.3s;
            top: 2px;
            left: 2px;
            background: #ccc;
        }

        .custom-control.teleport-switch .teleport-switch-control-indicator::before {
            content: "";
            display: block;
            position: absolute;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            transition: 0.3s;
            top: 2px;
            right: -14px;
            background: #ccc;
        }


/* ---------------------- ./. Custom Checkbox and raduio btn ------------------------- */



.red-text-color {
    color: red !important;
}

.green-text-color {
    color: green !important;
}


/*------------------------- Ej2 Toast ------------------------- */



@font-face {
    font-family: 'Toast_icons';
    src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj0gSRkAAAEoAAAAVmNtYXDnM+eRAAABsAAAAEpnbHlmzVnmlwAAAhgAAAZAaGVhZBEYIl8AAADQAAAANmhoZWEHlgN3AAAArAAAACRobXR4LvgAAAAAAYAAAAAwbG9jYQnUCGIAAAH8AAAAGm1heHABHQBcAAABCAAAACBuYW1lfUUTYwAACFgAAAKpcG9zdAxfTDgAAAsEAAAAggABAAADUv9qAFoEAAAAAAAD6AABAAAAAAAAAAAAAAAAAAAADAABAAAAAQAACcU5MF8PPPUACwPoAAAAANcI7skAAAAA1wjuyQAAAAAD6APoAAAACAACAAAAAAAAAAEAAAAMAFAABwAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQPqAZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnCgNS/2oAWgPoAJYAAAABAAAAAAAABAAAAAPoAAAD6AAAA+gAAAPoAAAD6AAAA+gAAAPoAAAD6AAAA+gAAAPoAAAD6AAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAA2AAAABAAEAAEAAOcK//8AAOcA//8AAAABAAQAAAABAAIAAwAEAAUABgAHAAgACQAKAAsAAAAAAAAAQgB8AMIA4gEcAZQCBgJwAo4DAAMgAAAAAwAAAAADlAOUAAsAFwAjAAABFwcXNxc3JzcnBycFDgEHLgEnPgE3HgEFHgEXPgE3LgEnDgEBTXh4L3h4L3h4L3h4AbwDt4qKtwMDt4qKt/0eBeuxsesFBeuxsesCbHh4L3h4L3h4L3h4p4q3AwO3ioq3AwO3irHrBQXrsbHrBQXrAAAAAwAAAAADlAOUAAUAEQAdAAABJwcXAScXDgEHLgEnPgE3HgEFHgEXPgE3LgEnDgEBr2UylwEbMqADt4qKtwMDt4qKt/0eBeuxsesFBeuxsesBrGQylgEcMqKKtwMDt4qKtwMDt4qx6wUF67Gx6wUF6wAAAAAFAAAAAAOUA5cABQARAB0AIQAlAAABFzcnNSMFDgEHLgEnPgE3HgEFHgEXPgE3LgEnDgElFzcnBRc3JwHKxiCnPwFOA6V8fKUDA6V8fKX9aATToJ/UBATUn5/UAh7ANsD9fja/NQGedzNj29F8pAMDpHx8pQMDpXyf1AQE1J+g0wQE0/GhQKGhQKFAAAQAAAAAA74DfgADAAcACgANAAAlMzUjNTM1IwEhCQEhAQHLUlJSUgFj/YwBOv42A5T+NuZUUqf+igIc/ZADFgAEAAAAAAOUA5QAAwAHABMAHwAAATM1IzUzNSMFDgEHLgEnPgE3HgEFHgEXPgE3LgEnDgEBylRUVFQBbgO3ioq3AwO3ioq3/R4F67Gx6wUF67Gx6wEk+lNT0Iq3AwO3ioq3AwO3irHrBQXrsbHrBQXrAAAAAAcAAAAAA+gDMQALABUAJQAuADcAQQBLAAABFhcVITUmJz4BMxYFFhcVITU+ATcWJQYHFSE1LgEjIgYHLgEjIgEWFAYiJjQ2MgUWFAYiJjQ2MiUGFBYXPgE0JiIFBhQWFz4BNCYiA1xEBP6sAxUeRiRX/qxEBP45BIlXV/7xZQsD6AvKUypvMzNvKlMCKxozTTMzTP6CGTNMNDRMAQItWUREWlqI/jstWkREWVmIAWMbFjc3IBgKDwQcGxY3NxY3BAQjJUt7e0tKFxgYFwEMGU01NU0zGhlNNTVNMxYthloCAlqGWy4thloCAlqGWwAAAAQAAAAAA5wCxwAIABQANABFAAABFBYyNjQmIgYXDgEHLgEnPgE3HgEfAQcOAQ8BNz4BNS4BJw4BBxQWHwEnLgEvATc+ATc2FiUOAQ8BFx4BNz4BPwEnJiciAb8fLR4eLR+wAkU0NEUBAUU0NEX8BgEemG0FBB8kAlZBQFcBKyUCCkeVTAYBH76RVMP+3bDPBwcKZclcu/AGCwrM2AoBxxYfHy0eHhc0RQEBRTQ1RQEBRSgEARpWGAECFUIoQVcCAldBLEYUAQEIQkAGASJsBwFCoRbFFAoJW0sBCo8LCgztAQAAAAIAAAAAA4ADbAA4AEEAAAEEJCcmDgEWFx4BHwEVFAYHDgEnJg4BFhcWNjc2Fx4BBx4BFzc+ASc2JicmJzUzPgE3PgEnJicjIiUUFjI2NCYiBgNM/tz+pwwMGxEDDAaMfAcSETKEQw8WBg8Og80hNSg4JwICEw0FDhECAjFJEBICPYhKDQgGChQCB/5dMUgxMUgxAuB/ZRcIAxgbCQdHEQGTGi8TOVgKAw8dFwMNuDUFHTGDCA0QAQECFQ8Mnz8LCasJKiUHGg0SATMkMDBJMDAAAAAAAgAAAAAC/QMkAAMADQAAAQchJxMeATMhMjY3EyEC2x3+bB0kBCQZAQQZJARH/ewDBuDg/fcZICAZAicAAwAAAAACzwPoACwAQwBPAAABERQfARYfAzMVHgE7ATI2NRE0JisBNTEWOwEyNjQmJyMiJi8BLgErAQ4BAxUzNTQ2NzMeARcVMzUuAScjIgcjESM1HgEXPgE3LgEnDgEBVQEBAwQCCAjXARENOg0REQ2zDROVExoaE2UQGAQfAxAKYg0RPR8RDZcNEQEeASIalxANAR8CTTo6TQEBTTo6TQJ8/nYEBQIGBAIFArYNERENARENEUoNGicZARMPfQoNARH98Hl5DREBARENeXkaIgEIAe3FOk0CAk06Ok0BAU0AAAAAAgAAAAAC5gMyAAkAEQAAJRQWMyEyNjURITcjFSE1IycjASApHgEaHin+WFBuAeR+JLD8HigoHgGfeT09HgAAAAAAEgDeAAEAAAAAAAAAAQAAAAEAAAAAAAEAEgABAAEAAAAAAAIABwATAAEAAAAAAAMAEgAaAAEAAAAAAAQAEgAsAAEAAAAAAAUACwA+AAEAAAAAAAYAEgBJAAEAAAAAAAoALABbAAEAAAAAAAsAEgCHAAMAAQQJAAAAAgCZAAMAAQQJAAEAJACbAAMAAQQJAAIADgC/AAMAAQQJAAMAJADNAAMAAQQJAAQAJADxAAMAAQQJAAUAFgEVAAMAAQQJAAYAJAErAAMAAQQJAAoAWAFPAAMAAQQJAAsAJAGnIEZpbmFsIFRvYXN0IE1ldHJvcFJlZ3VsYXJGaW5hbCBUb2FzdCBNZXRyb3BGaW5hbCBUb2FzdCBNZXRyb3BWZXJzaW9uIDEuMEZpbmFsIFRvYXN0IE1ldHJvcEZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmNmdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAARgBpAG4AYQBsACAAVABvAGEAcwB0ACAATQBlAHQAcgBvAHAAUgBlAGcAdQBsAGEAcgBGAGkAbgBhAGwAIABUAG8AYQBzAHQAIABNAGUAdAByAG8AcABGAGkAbgBhAGwAIABUAG8AYQBzAHQAIABNAGUAdAByAG8AcABWAGUAcgBzAGkAbwBuACAAMQAuADAARgBpAG4AYQBsACAAVABvAGEAcwB0ACAATQBlAHQAcgBvAHAARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAdQBzAGkAbgBnACAAUwB5AG4AYwBmAHUAcwBpAG8AbgAgAE0AZQB0AHIAbwAgAFMAdAB1AGQAaQBvAHcAdwB3AC4AcwB5AG4AYwBmAHUAcwBpAG8AbgAuAGMAbwBtAAAAAAIAAAAAAAAACgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAECAQMBBAEFAQYBBwEIAQkBCgELAQwBDQAFRXJyb3IHU3VjY2VzcwVBbGFybQdXYXJuaW5nBEluZm8HTWVldGluZwVCbGluawdTdHJldGNoA1NpcANTaXQFVHJhc2gAAAAA) format('truetype');
    font-weight: normal;
    font-style: normal;
}

#toast_types button {
    margin: 5px;
    min-width: 160px;
    max-width: 160px;
}


.toast-icons {
    font-family: 'Toast_icons' !important;
    speak: none;
    font-size: 55px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#toast_type .e-toast-icon.e-icons {
    height: auto;
    font-size: 30px;
}

.toast-icons.e-success::before {
    content: "\e701";
}

.toast-icons.e-error::before {
    content: "\e700";
}

.toast-icons.e-info::before {
    content: "\e704";
}

.toast-icons.e-warning::before {
    content: "\e703";
}


/*---------------------- ./. Ej2 Toast ------------------------- */


/*---------------------- Override Style ------------------------- */

.btn-info {
    color: #fff;
    background-color: #3498db;
    border-color: #3498db;
}

    .btn-info:hover {
        color: #fff;
        background-color: #2980b9;
        border-color: #2980b9;
    }

    .btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active, .show > .btn-info.dropdown-toggle {
        color: #fff;
        background-color: #2980b9;
        border-color: #2980b9;
    }

    .btn-info:focus, .btn-info.focus {
        box-shadow: 0 0 0 0.2rem rgba(41, 128, 185, 0.5);
    }




.btn-outline-info {
    color: #3498db;
    border-color: #3498db;
}

    .btn-outline-info:hover {
        color: #fff;
        background-color: #2980b9;
        border-color: #2980b9;
    }


    .btn-outline-info:focus, .btn-outline-info.focus {
        box-shadow: 0 0 0 0.2rem rgba(41, 128, 185, 0.5);
    }

    .btn-outline-info:not(:disabled):not(.disabled):active, .btn-outline-info:not(:disabled):not(.disabled).active, .show > .btn-outline-info.dropdown-toggle {
        color: #fff;
        background-color: #2980b9;
        border-color: #2980b9;
    }
/*---------------------- Override Style ------------------------- */