@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
@import url('variable.css');
@import url('bootstrap-override.css');
@import url('syncfusion.css');
@import url('app-animation.css');
@import url('font-faces.css');

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

a, .btn-link {
    color: var(--twn-dark-gray-color);
}

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

.table-scrollable {
    overflow-y: auto;
    overflow-x: auto;
    max-height: 600px;
}

.sticky-header {
    position: sticky;
    top: 0;
    z-index: 2;
}

.small-logo-2 {
    height: 30px !important;
    width: 70px !important;
}

.e-menu-wrapper ul .e-menu-item .e-menu-url {
    color: white !important;
}


@media (max-width: 400px) {
    #header.header-section {
        height: 100px !important; /* increased header size from 50 to 65 to match with logo*/
    }
}

.body-content {
    margin: 20px;
}

.logo {
    text-align: center;
    height: 5rem;
    padding-top: 10px;
}
/*

/**Top Row Navigation bar*/
.top-row {
    height: 5rem;
    display: flex;
    align-items: center;
}

.main {
    flex: 1;
}



.sidebar-item {
    padding: 15px;
}

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

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

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

    .sidebar-item span {
        color: #d7d7d7
    }

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

/**Small device css*/
@media (max-width: 767.98px) {

    .main .top-row:not(.auth) {
        display: none;
    }

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

    .main .top-row a, .main .top-row .btn-link {
        margin-left: 80px;
    }
}

/**large device css*/
@media (min-width: 768px) {
    app {
        flex-direction: row;
    }

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

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

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

/**large device css*/
@media (min-width: 768px) {
    .top-row {
        justify-content: center;
    }
}

/**Small device css*/
@media screen and (max-width : 768px) {
    .img-fluid {
        height: 3rem !important;
    }
}

/*/For syncfusion  menu*/
.main > div {
    padding: 0 !important;
}

.img-fluid {
    height: 4rem;
}

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

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

ul {
    list-style-type: none;
}


/*Blzor Toast Override start*/
.blazored-toast-container {
    z-index: 999999 !important;
}
/*Blzor Toast Override End*/
/* Dashboard css*/
.dashboard-icon {
    color: var(--twn-dark-green-color);
}

.dashboard-btn {
    color: white;
    background-color: var(--twn-blue-color);
}

.btn.dashboard-btn:hover {
    color: white !important
}
/* END Dashboard css*/

/* CustomerAccount css*/
.td-hand-onhover:hover {
    cursor: pointer;
}

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

    .tooltip .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        /* Position the tooltip */
        position: absolute;
        z-index: 1;
    }

    .tooltip:hover .tooltiptext {
        visibility: visible;
    }

/* END CustomerAccount css*/

/* Start - Pagination override*/
.page-item.active .page-link {
    background-color: var(--twn-blue-color) !important;
}

.page-item:not(.active) .page-link {
    color: var(--twn-blue-color) !important;
}
/*End - Pagination override*/
.input[type=text] {
    width: 100%;
    border: 2px solid var(--twn-blue-color);
    border-radius: 4px;
}

    .input[type=text]:focus {
        border: 3px solid var(--twn-dark-green-color);
    }

.imageThumbnail {
    height: 200px;
    width: auto;
}


/*Helper classses start*/

.hand-on-hover :hover {
    cursor: pointer;
}

/*Helper classes end*/

.validation-message {
    color: red;
}



.scrollbar-deep-purple::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #F5F5F5;
    border-radius: 10px;
}

.scrollbar-deep-purple::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

.scrollbar-deep-purple::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #512da8;
}

.scrollbar-deep-purple {
    scrollbar-color: #512da8 #F5F5F5;
}

.bordered-deep-purple::-webkit-scrollbar-track {
    -webkit-box-shadow: none;
    border: 1px solid #512da8;
}

.bordered-deep-purple::-webkit-scrollbar-thumb {
    -webkit-box-shadow: none;
}



.thin::-webkit-scrollbar {
    width: 6px;
}

.blue-scroll {
    position: relative;
    overflow-y: scroll;
    height: 500px;
}

/*Start - syncfusion override*/
/*This css important to fixed modal issue.
    When trasform added by syncfusion library, Bootstrap modal will be effected by scrolling down the page. 
    Bootstrap modal will scroll up along with fade area*/
.e-content-animation {
    -webkit-transform: none !important;
}

/*End - syncfusion override*/


/*Start slider*/
.switch {
    position: relative;
    display: inline-block;
    width: 90px;
    height: 34px;
}

    .switch input {
        display: none;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ca2222;
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slider {
    background-color: #2ab934;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(55px);
    -ms-transform: translateX(55px);
    transform: translateX(55px);
}

/*------ ADDED CSS ---------*/
.on {
    display: none;
}

.on, .off {
    color: white;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    font-size: 10px;
    font-family: Verdana, sans-serif;
}

input:checked + .slider .on {
    display: block;
}

input:checked + .slider .off {
    display: none;
}

/*--------- END --------*/

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

    .slider.round:before {
        border-radius: 50%;
    }

/*END slider*/


.green-under-line {
    border-bottom: 2px solid;
    border-color: var(--twn-light-green-color);
}

.blue-under-line {
    border-bottom: 2px solid;
    border-color: var(--twn-blue-color);
}

.twn-blue-color {
    color: var(--twn-blue-color);
}
.twn-light-green-color {
    color: var(--twn-light-green-color);
}
.twn-dark-green-color {
    color: var(--twn-dark-green-color);
}
.twn-light-gray-color {
    color: var(--twn-light-gray-color);
}
.twn-dark-gray-color{
    color: var(--twn-dark-gray-color);
}

.card.dashboard-page-bg {
    background-color: #efefef;
    border: none;
    min-height: 760px;
}

/*datalist start*/

datalist {
    position: absolute;
    max-height: 20em;
    border: 0 none;
    overflow-x: hidden;
    overflow-y: auto;
}

    datalist option {
        font-size: 0.8em;
        padding: 0.3em 1em;
        background-color: #ccc;
        cursor: pointer;
    }

        datalist option:hover, datalist option:focus {
            color: #fff;
            background-color: #036;
            outline: 0 none;
        }

/*datalist start*/

.in-vaild-border {
    border-color: #dc3545 !important;
}

/*Newleadcontact page*/
.new-lead-todo {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}