﻿
/*Common Forms CSS*/

@font-face {
    font-family: MyFontsJeff;
    src: url('../vendor/font-awesome/fonts/jefferies.otf');
}

.jconfirm-content {
    padding-left: 2px;
}

.bounceInForm {
    animation-duration: 1.2s;
    animation-name: zoomInUp;
}

.px-2 {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.pr-4p{
    padding-right:4%!important;
}

/*.SectionTitle {
    margin-bottom: 8px;
}*/

    .BorderTitle {
        /*border-bottom: 1px solid white;
    position: absolute;
    width: 100%;*/
        /*margin-top: 11px;*/
    }
/*Order Status CSS*/
.OrderStatus-Body {
}

.bg-order {
    background-color: #cf6325 !important;
}

.OrderStatus-IconsBody {
    margin-top: 7px;
    border: 1px solid white;
    padding: 45px 49px;
    background-image: linear-gradient(to bottom left, rgb(247, 163, 46) 0%, rgb(189, 71, 34) 100%);
    border-radius: .25rem;
    padding-bottom: 0px;
}

.OrderStatus-InnerBody {
    padding: 0px 12px;
    /*border-right: 1px solid white;*/
}

.OrderStatus-Icon {
    text-align: center;
}

    .OrderStatus-Icon i {
        color: white;
        font-size: 70px;
    }

.OrderStatus-Details{
    text-align:center;
}
    .OrderStatus-Details p {
        font-size: 12px;
        margin-top: 10px;
        margin-bottom: 0px;
        color: white;
        font-family: inherit;
        font-weight: 500;
    }

.progressText p {
    font-weight: 600;
    font-size: 13px;
    color: white;
    text-align: center;
    margin-top: 5px;
}

    .progressText p::before, .progressText p::after{
        content: "•";
        margin-right: 5px;
        margin-left: 5px;
        font-size: 10px;
    }

.RatioWidthProgressBarTitle {
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
}

/*Pop Alert Css*/
/*Whole body CSS width and height*/
.ui-dialog {
    position: absolute !important;
    padding: 0.2em;
    width: 300px !important;
    overflow: hidden;
    left: 40% !important;
    top: 40% !important;
}

/*header css*/

/*.ui-widget-header {
    border: none !important;
    background: none !important;
    background-image: linear-gradient(to bottom left, rgba(5,5,5, 0.80) 0%, rgba(100,53,105, 0.80) 40%, rgba(206, 115, 161, 0.80) 70%) !important;
    color: #ffffff;
    font-weight: bold;
}*/

    /*btn css*/

    /*.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
        border: none !important;
        background: none !important;
        background-image: linear-gradient(to bottom left, rgba(5,5,5, 0.80) 0%, rgba(100,53,105, 0.80) 40%, rgba(206, 115, 161, 0.80) 70%) !important;
        font-weight: 500 !important;
        color: white !important;
    }*/

/*header cross button*/

.navbar-brand {
    padding-top: .5125rem!important;
}
    .ui-icon {
    width: 16px;
    height: 16px;
    color: white;
    /*background-image: none !important;*/
}
.ui-dialog .ui-dialog-titlebar-close span {
    display: block;
     margin: auto!important; 
}
.ui-widget .ui-widget {
    font-size: 13px !important;
    font-family: sans-serif !important;
}

.ui-button-text-only .ui-button-text {
    padding: 0.4em 1em;
    width: 80px !important;
}

/*middle text body css*/

.ui-dialog .ui-dialog-content {
    min-height: 39.4px !important;
    height: auto !important;
}

.ui-dialog .ui-dialog-content {
    position: relative;
    border: 0;
    border: none !important;
    margin: auto 0px !important;
    overflow-y: hidden !important;
    padding: .7em .3em .7em .7em !important;
}

/*middle body text css*/

.ui-widget-content {
    border: 1px solid #a6c9e2;
    background: #fcfdfd url(images/ui-bg_inset-hard_100_fcfdfd_1x100.png) 50% bottom repeat-x;
    color: #727272 !important;
    font-family: unset !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

.ui-dialog .ui-dialog-title {
    float: left;
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
}

.ui-dialog .ui-dialog-titlebar {
    padding: .3em .5em !important;
}

.ui-widget {
    font-family: unset !important;
    font-size: 16px !important;
}

/*button bottom body css*/

.ui-dialog .ui-dialog-buttonpane {
    text-align: left;
    border-width: 1px 0 0 0;
    background-image: none;
    margin: 0 !important;
    padding: .1em .1em .1em .1em !important;
}

.ui-widget-content {
    border: none !important;
    border-top: 1px solid #dbdbdb !important;
    background: #fcfdfd url(images/ui-bg_inset-hard_100_fcfdfd_1x100.png) 50% bottom repeat-x;
    color: #222222;
}

/*Pop Alert Css*/

.OnlineSaleColorGridBtnClass {
    bottom: 70px !important;
    position: absolute;
    padding: 1px;
    left: 22px !important;
    width: 68px;
    font-size: 12px;
    background-color: #1d98ab !important;
}

.DashboardContainersHeight360px {
    height: 360px!important;
}

.DashboardContainersHeight311px {
    height: 311px!important;
}

.display-5{
    font-size: 2.5rem!important;
}

.bg-info-gradient {
    box-shadow: 14px 14px 0px 0px rgba(23, 162, 184, 0.20)!important;
    background-image: radial-gradient(farthest-side at 150% 150%, rgba(23, 162, 184, 0.10) 30%, rgba(255, 255, 255, 0.95) 100% )!important;
}


.bg-danger-gradient {
    box-shadow: 14px 14px 0px 0px rgba(220, 53, 69, 0.20)!important;
    /*background-image: linear-gradient(to bottom left, rgba(220, 53, 69, 0.10) 0%, rgba(255, 255, 255, 0.95) 30%, rgba(220, 53, 69, 0.22) 200% );*/
    background-image: radial-gradient(farthest-side at 150% 150%, rgba(220, 53, 69, 0.10) 30%, rgba(255, 255, 255, 0.95) 100% )!important;
}


.bg-success-gradient {
    box-shadow: 14px 14px 0px 0px rgba(40, 167, 69, 0.20)!important;
    /*background-image: linear-gradient(to bottom left, rgba(40, 167, 69, 0.10) 0%, rgba(255, 255, 255, 0.95) 30%, rgba(40, 167, 69, 0.22) 200% );*/
    background-image: radial-gradient(farthest-side at 150% 150%, rgba(40, 167, 69, 0.10) 30%, rgba(255, 255, 255, 0.95) 100% )!important;
}


.bg-warning-gradient {
    box-shadow: 14px 14px 0px 0px rgba(255, 193, 7, 0.20)!important;
    /*background-image: linear-gradient(to bottom left, rgba(255, 193, 7, 0.10) 0%, rgba(255, 255, 255, 0.95) 30%, rgba(255, 193, 7, 0.22) 200% );*/
    background-image: radial-gradient(farthest-side at 150% 150%, rgba(255, 193, 7, 0.10) 30%, rgba(255, 255, 255, 0.95) 100% )!important;
}

.bg-info-gradient-rounded {
    border-top-left-radius: 50px;
    border-bottom-right-radius: 50px;
    box-shadow: 38px 38px 0px -35px rgba(23, 162, 184, 0.40), -38px -38px 0px -35px rgba(23, 162, 184, 0.40) !important;
    background-image: radial-gradient(farthest-side at 150% 150%, rgba(23, 162, 184, 0.10) 30%, rgba(255, 255, 255, 0.95) 100% ) !important;
}


.bg-danger-gradient-rounded {
    border-top-left-radius: 50px;
    border-bottom-right-radius: 50px;
    box-shadow: 38px 38px 0px -35px rgba(220, 53, 69, 0.40), -38px -38px 0px -35px rgba(220, 53, 69, 0.40) !important;
    /*background-image: linear-gradient(to bottom left, rgba(220, 53, 69, 0.10) 0%, rgba(255, 255, 255, 0.95) 30%, rgba(220, 53, 69, 0.22) 200% );*/
    background-image: radial-gradient(farthest-side at 150% 150%, rgba(220, 53, 69, 0.10) 30%, rgba(255, 255, 255, 0.95) 100% ) !important;
}


.bg-success-gradient-rounded {
    border-top-left-radius: 50px;
    border-bottom-right-radius: 50px;
    box-shadow: 38px 38px 0px -35px rgba(40, 167, 69, 0.40), -38px -38px 0px -35px rgba(40, 167, 69, 0.40) !important;
    /*background-image: linear-gradient(to bottom left, rgba(40, 167, 69, 0.10) 0%, rgba(255, 255, 255, 0.95) 30%, rgba(40, 167, 69, 0.22) 200% );*/
    background-image: radial-gradient(farthest-side at 150% 150%, rgba(40, 167, 69, 0.10) 30%, rgba(255, 255, 255, 0.95) 100% ) !important;
}


.bg-warning-gradient-rounded {
    border-top-left-radius: 50px;
    border-bottom-right-radius: 50px;
    box-shadow: 38px 38px 0px -35px rgba(255, 193, 7, 0.40), -38px -38px 0px -35px rgba(255, 193, 7, 0.40) !important;
    /*background-image: linear-gradient(to bottom left, rgba(255, 193, 7, 0.10) 0%, rgba(255, 255, 255, 0.95) 30%, rgba(255, 193, 7, 0.22) 200% );*/
    background-image: radial-gradient(farthest-side at 150% 150%, rgba(255, 193, 7, 0.10) 30%, rgba(255, 255, 255, 0.95) 100% ) !important;
}

.bg-info-progress {
    background-color: rgba(23, 162, 184, 0.10)!important;
}


.bg-danger-progress {
    background-color: rgba(220, 53, 69, 0.10)!important;
}


.bg-success-progress {
    background-color: rgba(40, 167, 69, 0.10)!important;
}


.bg-warning-progress {
    background-color: rgba(255, 193, 7, 0.10)!important;
}

/*Grid for Blue*/

.table-info tbody tr:nth-of-type(odd) {
    background-color: none !important;
    background-image: linear-gradient(to bottom right, rgba(69, 203, 203, 0.15) 20%, rgba(69, 203, 203, 0.15) 80% );
    color: white !important;
}

.RadGrid.table-info .rgHeader, .RadGrid.table-striped th.rgResizeCol {
    padding-top: 5px;
    padding-bottom: 4px;
    background-color: rgba(140, 178, 183, 0.95) !important;
    text-align: left;
    font-weight: normal;
    color: white !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
}

/*Grid for Yellowish*/

.table-warning tbody tr:nth-of-type(odd) {
    background-color: none !important;
    background-image: linear-gradient(to bottom right, rgba(255, 193, 7, 0.15) 20%, rgba(255, 193, 7, 0.15) 80% );
    color: white !important;
}

.RadGrid.table-warning .rgHeader, .RadGrid.table-striped th.rgResizeCol {
    padding-top: 5px;
    padding-bottom: 4px;
    background-color: rgba(255, 193, 7, 0.95) !important;
    text-align: left;
    font-weight: normal;
    color: white !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
}

/*Grid for Redish*/

.table-danger tbody tr:nth-of-type(odd) {
    background-color: none !important;
    background-image: linear-gradient(to bottom right, rgba(220, 53, 69, 0.15) 20%, rgba(220, 53, 69, 0.15) 80% );
    color: white !important;
}

.RadGrid.table-danger .rgHeader, .RadGrid.table-striped th.rgResizeCol {
    padding-top: 5px;
    padding-bottom: 4px;
    background-color: rgba(220, 53, 69, 0.95) !important;
    text-align: left;
    font-weight: normal;
    color: white !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
}

/*Grid for Greenish*/

.table-success tbody tr:nth-of-type(odd) {
    background-color: none !important;
    background-image: linear-gradient(to bottom right, rgba(40, 167, 69, 0.15) 20%, rgba(40, 167, 69, 0.15) 80% );
    color: white !important;
}

.RadGrid.table-success .rgHeader, .RadGrid.table-striped th.rgResizeCol {
    padding-top: 5px;
    padding-bottom: 4px;
    background-color: rgba(40, 167, 69, 0.95) !important;
    text-align: left;
    font-weight: normal;
    color: white !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
}

/*Gradient Colors*/

.bg-gradient-blue {
    background-image: linear-gradient(to bottom, rgba(5,5,5,.5) -20%, rgba(0,128,128,.95) 80% );
}

.bg-gradient-red {
    background-image: linear-gradient(to bottom, rgba(5,5,5,.9) -60%, rgba(220,53,69,1) 60% );
}

.bg-gradient-green {
    background-image: linear-gradient(to bottom, rgba(5,5,5,.5) -20%, rgba(0,128,0,.95) 80% );
}

.bg-gradient-orange {
    background-image: linear-gradient(to bottom, rgba(170,56,30,.8) -20%, rgba(255, 69, 0, .95) 80% );
}

.bg-gradient-pink {
    background-image: linear-gradient(to bottom, rgba(5,5,5,.5) -20%, rgba(205, 92,92,.95) 80% );
}

body, html {
    overflow-x: hidden;
}

nav.navbar a {
    font-size: .8rem;
    color: white;
    position: relative;
}

    nav.navbar a.logout:hover {
        color: #17a2b8;
    }

    nav.navbar a.logout i {
        margin-left: 5px;
    }

    nav.navbar a.navbar-brand {
        margin-top: 0px !important;
        margin-bottom: 10px;
    }

nav.navbar .brand-text {
    margin-top: 0;
    font-size: 1.6rem;
    font-weight: 700;
    font-family: 'Open Sans', sans-serif !important;
    color: rgba(250,250,250,1);
}

#logoText {
    color: rgba(250,250,250,1);
}

.nav-menu .nav-link {
    margin-top: 10px;
}

nav.navbar a.menu-btn:hover {
    color: #ccc;
}

.nav-link {
    color: white;
    padding: 0.5rem 1rem;
}

#external {
    color: rgba(250,250,250,.8);
}

/*for Scrollbar*/

.scrollbar {
    /*width: .25px !important;*/
    overflow: auto;
}

.style-1::-webkit-scrollbar {
    display: none;
    height: 2px !important;
    width: 3px;
    background-color: #F5F5F5;
}

.style-1::-webkit-scrollbar-thumb {
    background-color: #117a8b;
    border-radius: 1rem;
}

.style-1::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
    border-radius: 1rem;
}

.style-1::-webkit-scrollbar-button {
    border-radius: .25rem;
    width: 2%;
    height: 5px;
    background-color: #27a2ff;
}

/*IFrame CSS*/

.Iframe-Container {
    min-width: 46%;
}

.IframeHeader {
    text-align: right !important;
    position: absolute;
    z-index: 10001;
    padding: 5px;
    margin-top: 0px;
    width: 29%;
    /*background-color: rgba(23,83,83,.9);*/
}

#FormIframe {
    transition: .5s all;
    left: 0%;
    top: 0px;
    width:100%;
    z-index: 1000;
    border-radius: .25rem;
    border: none !important;
}

.FormIframe-btn {
    white-space: normal !important;
    word-wrap: break-word;
    opacity: 1;
    color: white;
}

    .FormIframe-btn i {
        background-color: rgba(23,83,83,.9);
        transition: all .2s ease-in-out;
        border-radius: .25rem;
        font-size: 14px;
        padding: 12px;
        color: white;
    }

        .FormIframe-btn i:focus, .FormIframe-btn i:hover {
            color: white;
            background-color: rgba(23,83,83,.9);
        }

/*Tax Cards CSS*/
.CardImgs {
    height: 70px;
    width: auto;
    opacity: .9;
    transition: all 0.3s;
}

a .CardImgs:hover {
    opacity: 1;
}

.TaxBody a:hover{
    text-decoration:none;
}

.NavigationLinkBody {
    padding: 0 !important;
    padding-top: 10px !important;
}

.NavigationLinkBody h5{
    text-align:center;
    font-size:13px!important;
}

/*Online Payment Media CSS*/

.PaymentMenu-Body:hover {
    text-decoration:none;
}

    .PaymentMenu-Img img {
        background: white;
        border: 1px solid white;
        border-radius: .25rem;
        padding: 3px;
        height: 55px;
        width: 55px;
        opacity: 1;
        transition: all .4s;
    }

.PaymentMenu-Text h5 {
    transition: all .4s;
    padding-top: 16px;
    padding-left: 5%;
    color: white;
    vertical-align: central;
    text-align: left;
    font-size: 15px !important;
}


.PaymentMenu-Body:hover .PaymentMenu-Img img {
    background: rgba(255,255,255,.8);
    /*border: 1px solid white;*/
}

.PaymentMenu-Body:hover .PaymentMenu-Text h5 {
    color: rgba(255,255,255,.8);
    font-size: 16px !important;
}

/*Header Dropdown Menu*/
.header {
    transition: all .6s;
}

.header:hover {
    cursor:pointer;
}

.HeaderDropDown-Section {
    /*visibility: hidden;
    opacity: 0;
    position: relative;
    transition: visibility .1s, top .6s, opacity 0.1s ease-in-out;
    top: -100px;*/
    max-height: 84vh !important;
    display: none;
    top: 60px;
    overflow-y: auto;
    -webkit-transition: max-height .2s;
    -moz-transition: max-height .2s;
    transition: max-height .2s;
    position: absolute;
    z-index: 999;
    /*background-image: linear-gradient(to bottom, rgba(223,235,249,.9) 30%, rgba(241,248,243,.9) 60%);*/
    /*height: 650px;*/
    width: 45%;
    margin: auto 30%;
}

.HeaderDropDown {
    /*border-top: 2px solid white;
    border-bottom: 3px solid white;
    border-bottom-left-radius: .25px;
    border-bottom-right-radius: .25px;*/
}

/*.HeaderDropDown .border-bottom{
        border-color: rgba(0,0,0,.0);
    }*/

/*.HeaderDropDown-SectionShow{
    max-height: 655px;
    -webkit-transition: max-height 5s;
    -moz-transition: max-height 5s;
    transition: max-height 5s;
}

    .HeaderDropDown-Section:hover ~ .DivDisplay, .header:hover ~ .DivDisplay {
        display: none;
    }*/
.DivDisplay {
    padding-bottom: 6%;
}
.HeaderDropDown a:hover {
    text-decoration: none;
}

    .SectionTitle p {
        padding: 6px;
        margin-bottom: 0px;
        color: rgba(250,250,250,.9);
        font-weight: bold;
        font-size: 12.5px;
        font-family: 'Open Sans', sans-serif !important;
    }

        /*.SectionTitle p:before {
        content: "\2022  "
    }*/

        .SectionTitle p span {
            /*color: #ff9900;*/
        }

.HeaderDropDown section .row {
    margin: 0px 2px;
}

.DropDownBox {
    width: 100%;
    margin-top: 7px;
    /*margin-bottom: 7px;*/
    /*padding-bottom: 3px;*/
    word-wrap: break-word;
    background-clip: border-box;
    height: 72px;
    /*transition: .5s;*/
    /*background-color: white;*/
    /*border-radius: 5px;*/
    /*box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);*/
}

    .DropDownBox:hover {
        /*animation: mymove .7s;*/
    }

@keyframes mymove {
    0% {
        transform: scale(1,1);
    }

    50% {
        transform: scale(1.1,1.1);
    }

    100% {
        transform: scale(1,1);
    }
}

/*.DropDownBox-Img img {
    height: 40px;
    width: auto;
    margin-top: 10px;
    transition: all .3s;
    margin-bottom: 10px;
}*/

.DropDownBox-Title h5 {
    margin: 6% 0;
    font-family: sans-serif, 'Lucida Calligraphy';
    padding: 0px 0px;
    font-size: 10.7px;
    background-color: transparent;
    color: rgba(240,240,240,1);
}

/*
* ==========================================================
*       MAIN FOOTER
* ==========================================================
*/

.LimitedHeight {
    max-height: 425px;
}

.Form-InnerBody {
    min-height: initial !important;
    max-height: 68vh !important;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 20px;
}

/*.FormTreeBody {
    max-height: 68vh !important;
}*/

.FormTree {
    max-height: 38vh !important;
}

.FormTree {
    max-height: 63vh !important;
}

    .Form-InnerBody::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        background-color: transparent;
    }

    .Form-InnerBody::-webkit-scrollbar-thumb {
        background-color: transparent;
    }

    .Form-InnerBody::-webkit-scrollbar {
        width: 6px;
        background-color: transparent;
    } 

.page {
    /*height: 100vh !important;*/
    background-size: cover !important;
    /*min-height: 880px!important;*/
    /*min-height: 100vh !important;*/
    /*padding-bottom: 63px;*/
    height:100vh;
    min-height:initial!important;
}

.OverlayBG {
    /*height: 100vh!important;*/
    /*min-height: 100vh !important;*/
    min-height: initial !important;
}

footer.main-footer {
    /*position: relative!important;*/
    /*position: initial!important;*/
} 


.FooterOverlayBG {
    background-color: rgba(11,18,28,.0);
    width: 100%;
    min-height: 45px;
}

    footer.main-footer p {
        font-size: .9em !important;
        font-weight: 500;
        color: rgba(250,250,250,.9);
        margin: 0;
    }

/* MAIN FOOTER MEDIAQUERIES ------------------------- */
@media (max-width: 575px) {
    footer.main-footer div[class*="col-"] {
        text-align: center !important;
    }
}

@media (min-width: 768px) {
    footer.main-footer p {
        font-size: 0.9em;
    }
}

.RadGrid_Vista .rgRow td, .RadGrid_Vista .rgAltRow td {
    /*border: inherit !important;*/
     text-align: left !important;
}

.RadGrid_Vista .rgAltRow td {
    /*border: inherit !important;*/
    color: white !important;
}

.RadComboBox_Default .rcbInputCellLeft, .RadComboBox_Default .rcbInputCellRight, .RadComboBox_Default .rcbArrowCellLeft, .RadComboBox_Default .rcbArrowCellRight {
    background-image: none !important;
}

/*RadComboBox Arrow*/

.RadComboBox .rcbArrowCell a {
    position: relative !important;
    outline: 0 !important;
    overflow: hidden !important;
    display: block !important;
    left: 0;
    width: 14px !important;
    height: 22px !important;
    cursor: default !important;
    text-decoration: none !important;
    text-indent: 0px !important;
    font-size: 8px !important;
    line-height: 18px !important;
}

.FormGrid.RadGrid_Vista .rgHeader, .FormGrid.RadGrid_Vista th.rgResizeCol {
    border: 1px solid;
    border-radius: 0px !important;
    /*border-color: rgba(251,210,0,.8) #dcf2fc #3c7fb1 #8bbdde;*/
    border-top-width: 0;
    background: transparent !important;
    color: White!important;
    font-weight: 500;
    font-family: 'Open Sans', sans-serif !important;
    font-size: 12px;
    transition: 0.4s ease all;
    /*text-align: center;*/
    height:35px;
}

.RadGrid .rgHeader, .RadGrid th.rgResizeCol {
    padding-top: 5px;
    padding-bottom: 4px;
    background-color: rgba(250,250,250,.95) !important;
    text-align: left;
    font-weight: normal;
    font-weight: 700 !important;
}

/*Rad Panels Customization*/

.RadTabStrip_Metro .rtsLevel1 .rtsLI {
    color: #ffffff;
    border: 3px solid transparent !important;
}

.RadTabStrip_Metro .rtsLevel1 .rtsLink {
    color: #ffffff;
    border: 3px solid transparent !important;
}
.rtsSelected {
    border-radius: .25rem !important;
    text-transform: capitalize !important;
}

.RadTabStripTop_Metro .rtsLevel1 {
    background: transparent !important;
    border-top-left-radius: .50rem !important;
    border-top-right-radius: .50rem !important;
}

.RadTabStripTop_Metro .rtsUL .rtsLI, .RadTabStripBottom_Metro .rtsUL .rtsLI {
    padding: 0 0 5px 1px !important;
    background: #17a2b8 !important;
}

.RadTabStrip_Metro .rtsLevel1 .rtsLI {
    background: transparent !important;
    color: #ffffff;
}

.RadTabStrip_Metro .rtsLevel1 .rtsUL {
    background-color: transparent !important;
}

.RadTreeView .rtTemplate, .RadTreeView input img {
    height: 10px;
    width: 24px;
}

.RadUpload .ruBrowse {
    border-radius: .5rem !important;
    font-size: 12px;
    width: 100%;
    opacity: .8;
    margin-left: 0px !important;
}

.RadUpload .ruFileWrap {
     height: auto!important; 
}

.RadUpload .ruFileWrap {
    color: white!important;
}

    /*.RadUpload .ruStyled .ruFileInput, .RadUpload .ruFakeInput {
    display: none;
}*/
    .RadUpload_Outlook input.ruFakeInput {
    display: none;
    /* border-color: #abc1de; */
    /* color: #000; */
    /* background-image: url(WebResource.axd?d=Lo0hMcbdjvCyz18glqJbh1p3xacNilesoQxP9PDXjIaTA-g0HM3Bsn_he…ryGW5vwHFeGcqWUa3ESdYxxHKV6-AWMJ8DXu7CwtZxLDQ94TWvwk1&t=634613324100000000); */
}

.RadUpload2 input[type=text] {
    display: none;
}

.file-upload{
    overflow: hidden;
    text-align: center;
    vertical-align: middle;
    font-family: Arial;
    border: none;
    background: transparent;
    color: #fff;
    border-radius: 6px;
    -moz-border-radius: 6px;
    padding: 10px;
    cursor: pointer;
    text-shadow: #000 1px 1px 2px;
    -webkit-border-radius: 6px;
}

    .file-upload:hover {
        background: transparent;
    }

/* The button size */
.file-upload {
    font-size: 12px;
    padding: 3px;
}

    .file-upload, .file-upload span {
        min-width: 90px;
    }

        .file-upload input {
            top: 0;
            left: 0;
            margin: 0;
            font-size: 11px;
            font-weight: bold;
            /* Loses tab index in webkit if width is set to 0 */
            opacity: 0;
            filter: alpha(opacity=0);
        }

        .file-upload strong {
            font: normal 12px Tahoma,sans-serif;
            text-align: center;
            vertical-align: middle;
        }

        .file-upload span {
            top: 0;
            left: 0;
            display: inline-block;
            /* Adjust button text vertical alignment */
            padding-top: 5px;
        }

.RadPicker_Default input {
    padding: 2px !important;
    background-color: transparent !important;
    border: 1px solid transparent !important;
    height: 25px !important;
}

    .RadPicker_Default input:focus, .RadPicker_Default input:hover {
        border: none !important;
        outline: none !important;
        padding: 3px !important;
    }

.RadComboBox, .RadComboBox .rcbInput, .RadComboBoxDropDown {
    font-size: 11px;
    text-align: left;
    background: white;
    border-radius: 3px;
}

    .RadComboBoxDropDown .rcbHovered {
        background: rgba(204,204,204,0.75) !important;
    }

    .RadComboBox table td.rcbInputCell {
        height: 24px !important;
        line-height: 1px !important;
    }

    .RadComboBox table td.rcbInputCell, .RadComboBox .rcbInputCell .rcbInput {
        padding-bottom: 2px !important;
    }

        .RadComboBoxDropDown {
            position: absolute;
            cursor: default;
            font-size: 11px;
            border: 1px solid #e9e9e9 !important;
            box-shadow: 0 4px 4px -5px #ccc;
        }

/*inputBox/ComboBox Without Width Defined*/

.ForminputboxWithoutWidth {
    padding-left: 4px !important;
    font-size: 11.5px;
    color: #111111 !important;
    transition: .3s all;
    min-height: 25px;
    height: auto !important;
    background-color: white;
    outline: none !important;
    border-radius: .25rem !important;
    border: 1px solid #e9e9e9 !important;
    box-shadow: 0 4px 4px -5.5px #ccc;
}

    .ForminputboxWithoutWidth:hover, .ForminputboxWithoutWidth:focus {
        border: 1px solid #128ec4 !important;
        outline: none !important;
    }


/*Reports*/

/*fieldset command Checkbox CSS Reports*/

legend {
    display: block;
    width: auto;
    padding: 3px;
    font-size: 1.5rem;
    line-height: inherit;
    color: inherit;
    white-space: normal;
    margin-bottom: 0px;
    padding-bottom: 0px;
}

fieldset {
    width: 100% !important;
    min-width: 10% !important;
    padding: 5px 20px;
    padding-top: 0px;
    padding-bottom: 10px;
    border-radius: .25rem !important;
    border: 1px solid #dbdbdb !important;
}

.FieldsetBottom-Label {
    float: right !important;
    font-size: 12px;
    color: rgb(34, 136, 170);
    font-weight: 600;
    line-height: 40px;
    margin-bottom: 0px;
}

.Report-Checkbox-Labels {
    font-size: 12px;
}

/*.Fieldset-DataFields {
    margin-top: -5.5%;
}

.Fieldset-DataFields-Single {
    margin-top: 0%;
}*/

.Fieldset-Single-Div fieldset {
    width: 100% !important;
    min-width: 10% !important;
    /*padding: 10px;*/
    border-radius: .25rem !important;
    border: 1px solid #dbdbdb !important;
}

.Fieldset-DataFields-Dual {
    /*margin-top: -4% !important;*/
}

.Checkbox-Report {
    float: left !important;
    background-color: transparent;
    outline: none !important;
    border: none !important;
}

.CheckboxReport:hover {
    box-shadow: 0px 0px 3px 5px #2288AA;
}

.Checkbox-Report label {
    float: right !important;
    font-size: 12px;
    margin-left: 10px;
    color: white;
    font-weight: 600;
    line-height: 40px;
    margin-bottom: 0px;
}

.ReportLegend-Label {
    float: right !important;
    font-size: 12px;
    color: white;
    font-weight: 600;
    line-height: 40px;
    margin-bottom: 0px;
}

/*Form*/
.Form-Header {
    padding-top: 5px!important;
}

.FormTitle {
    color: white;
    font-weight: 500;
    font-family: 'Open Sans', sans-serif !important;
    margin-top: 2%;
    font-size: 21px;
}

    .FormTitle strong {
        color: white;
    }

    .FormTitle i {
        margin-right: 6px;
        font-size: 27px;
        background-image: linear-gradient(to bottom left, rgba(182,0,0,.8) 0%, rgba(0, 0, 0, .8) 100%, rgba(251, 210, 8, .91) 100%); /* Standard syntax; must be last */
        color: white;
        -webkit-background-clip: text;
        background-clip: text;
        transition: .1s;
    }

.RadTreeView .rtTop, .RadTreeView .rtMid, .RadTreeView .rtBot {
    padding: 0px 0 0px 20px !important;
}

.FormTree {
    padding-top: 10px;
    max-height: 310px;
}

    .FormTree .RadTreeView {
        color: White;
        font-weight: 500;
        font-family: 'Open Sans', sans-serif;
        font-size: 11px;
        transition: 0.4s ease all;
    }

.RadTreeView .rtIn {
    color: white;
}

.RadTreeView .rtIn {
    margin-left: 3px !important;
}

.RadTreeView_Default .rtPlus, .RadTreeView_Default .rtMinus, .RadTreeView_Default .rtLines, .RadTreeView_Windows7 .rtPlus, .RadTreeView_Windows7 .rtMinus {
    background: none !important;
}

.rtTemplate img {
    display: none;
}

.rtTemplate {
    font-size: 11px;
    margin-left: 3px !important;
}

.RadTreeView_Default .rtSelected .rtIn, .RadTreeView_Default .rtHover .rtIn {
    background-color: transparent !important;
    background-image: none !important;
    border: 1px solid transparent !important;
    cursor: pointer !important;
    color: rgba(210,210,210,.75) !important;
}

.RadTreeView_Windows7 .rtSelected .rtIn, .RadTreeView_Windows7 .rtSelected .rtTop, .RadTreeView_Windows7 .rtHover .rtIn {
    background-color: transparent !important;
    background-image: none !important;
    border: 1px solid transparent !important;
    cursor: pointer !important;
    color: rgba(210,210,210,.95);
}

.RadUpload2 {
    transition: all 3s ease-in-out;
    display: none;
}

.Form-ImgSection:hover .RadUpload2 {
    display: block;
    position: absolute;
    z-index: 1000;
    bottom: 4px;
    left: 15px;
}

.Form-Labels {
    color: White;
    font-weight: 500;
    font-family: 'Open Sans', sans-serif !important;
    font-size: 12px;
    transition: 0.4s ease all;
}

.Forminputbox {
    padding-left: 4px !important;
    font-size: 11.5px;
    color: #111111 !important;
    width: 100% !important;
    transition: .3s all;
    min-height: 25px !important;
    max-height: 27px;
    height: auto !important;
    background-color: white;
    outline: none !important;
    border-radius: .25rem !important;
    border: 1px solid #e9e9e9 !important;
    box-shadow: 0 4px 4px -5.5px #ccc;
}

    .Forminputbox:hover, .Forminputbox:focus {
        border: 1px solid #128ec4 !important;
        outline: none !important;
    }

.riTextBox.Forminputbox {
    height: 27px !important;
}

html body .RadInput .riTextBox, html body .RadInputMgr {
    vertical-align: initial !important;
}

.Form-img {
    background-image: radial-gradient(closest-side, rgba(255,255,255,.6), rgba(255,255,255,1)) !important;
    border-radius: .25rem;
}

.Form-Video {
    height: 263px!important;
    width: 240px!important;
    background-image: radial-gradient(closest-side, rgba(255,255,255,.6), rgba(255,255,255,1)) !important;
    border-radius: .25rem;
}

.Form-Video video {
    background-image: radial-gradient(closest-side, rgba(255,255,255,.6), rgba(255,255,255,1)) !important;
    border-radius: .25rem;
    height:100%!important;
    width:100%!important;
}


.FormGrid.RadGrid_Vista .FormCheckbox, .RadGrid_Vista .rgRow a {
    /*text-align: center !important;*/
    margin-left:0px!important;
}

.FormCheckbox {
    background-color: transparent;
    outline: none !important;
    border-bottom: 1px solid transparent !important;
}

    .FormCheckbox:hover {
        border-bottom: 1px solid #ccc !important;
        outline: none !important;
    }

    .FormCheckbox label {
        color: White;
        font-weight: 500;
        font-family: 'Open Sans', sans-serif !important;
        font-size: 12px;
        transition: 0.4s ease all;
        outline: none !important;
        border-bottom: none !important;
        margin-bottom:0px!important;
        margin-left: 5px;
    }

.Form-btn {
    font-size: 14px;
    white-space: normal !important;
    word-wrap: break-word;
    opacity: .8;
    color: white;
}

    .Form-btn i {
        font-style:inherit!important;
        transition: all .2s ease-in-out;
        border-radius: .25rem;
        font-size: 20px;
        border: 1px solid white;
        padding: 6px;
        /*background-color: rgba(23,83,83,.5);*/
        color: white;
    }

    .Form-btn:focus {
        color: white;
    }

a:hover {
    color: #0056b3;
    text-decoration: none!important;
}

/*Icons for Form*/
.FormIcons {
    font-family: FontAwesome;
    transition: all .2s ease-in-out;
    font-size: 19px;
    color: white;
}

.IconAdd:after {
    content: "\f067" !important;
}

.IconModify:after {
    content: "\f040" !important;
}

.IconDelete:after {
    content: "\f171" !important;
}

.IconReset:after {
    content: "\f0e2" !important;
}

.IconPrint:after {
    content: "\f02f" !important;
}

.IconReport:after {
    content: "\f0f6" !important;
}

.IconSearch:after {
    content: "\f002" !important;
}

.IconLog:after {
    content: "\f2c0" !important;
}

.IconDocument:after {
    content: "\f115" !important;
}

.IconVoucher:after {
    content: "\f155" !important;
}

.IconCross:after {
    content: "\f00d" !important;
}

.IconRate:after {
    content: "\f295" !important;
}

.IconBarCode:after {
    content: "\f02a" !important;
}

.IconQRCode:after {
    content: "\f029" !important;
}

.IconGridRefresh:after {
    content: "\f021" !important;
}

.IconLoad:after {
    content: "\f0c7" !important;
}

.IconSearchMaster:after {
    content: "\f149" !important;
}

.IconEraser:after {
    content: "\f12d" !important;
}

.RadUpload_Outlook .ruButton, .RadUploadProgressArea_Outlook .ruButton {
    background-color: #138496 !important;
}

    .FormInner-btn, .RadUpload_Outlook .ruButton, .RadUploadProgressArea_Outlook .ruButton {
    background-image: none !important;
    padding: 3px 6px;
    width: 100%;
    border: none !important;
    border-radius: .25rem!important;
    font-size: 12px;
    color: white!important;
    transition: all .5s;
}

    .FormInner-btn:hover, .RadUpload_Outlook .ruButton:hover, .RadUploadProgressArea_Outlook .ruButton:hover {
        cursor: pointer;
    }

.Form-Multilines {
    padding-left: 24px !important;
}

.FormRemarks {
    padding-left: 4px !important;
    transition: .3s all;
    font-size: 11.5px;
    background-color: white !important;
    outline: none !important;
    border-radius: .25rem !important;
    border: 1px solid #e9e9e9 !important;
    box-shadow: 0 4px 4px -5.5px #ccc;
    width: 100% !important;
}

    .FormRemarks:hover, .FormRemarks:focus {
        border: 1px solid #128ec4 !important;
        outline: none !important;
    }

.FormRemarks-mic img {
    position: absolute;
    top: 7px;
    right: 22px;
    height: 15px;
    width: 12px;
}

/*Form Grid CSS*/

.FormGrid {
    overflow: auto;
    transition: .3s all;
    outline: none !important;
    border-radius: .25rem !important;
    border: 1px solid #e9e9e9 !important;
    box-shadow: 0 4px 4px -5.5px #ccc;
    width: 100% !important;
    /*text-align: center !important;*/
    /*height: 160px;*/
}

.RadGrid_Vista .rgFooter td {
    text-align: left!important;
}

    .FormGrid .Form-Labels {
        text-align: left !important;
        font-size:10px;
    }

    .FormGrid .Form-Labels a {
        color: White!important;
        font-weight: 500!important;
        font-family: 'Open Sans', sans-serif !important;
        font-size: 12px!important;
        transition: 0.4s ease all;
        text-align: left !important;
    }

.RadGrid_Vista .rgGroupHeader td p, .RadGrid_Vista .rgGroupHeader td div div {
     background: transparent!important;
}

.RadGrid .rgGroupHeader td p {
     padding: 0px!important; 
}
.RadGrid_Vista .rgGroupHeader .rgGroupCol {
     background: none!important; 
}

.RadGrid_Vista .rgGroupHeader td {
    padding: 0 !important;
    column-count: 3 !important;
}

.RadGrid_Vista .rgGroupItem {
    border: none!important;
    padding-right:1%!important;
    padding-left:1%!important;
    border-right: 2px solid !important;
    border-color: white !important;
    background: none !important;
}
.RadGrid_Vista .rgGroupPanel td td td {
     padding: 4px!important; 
}

.RadGrid .rgAdd, .RadGrid .rgRefresh, .RadGrid .rgEdit, .RadGrid .rgDel, .RadGrid .rgDrag, .RadGrid .rgFilter, .RadGrid .rgPagePrev, .RadGrid .rgPageNext, .RadGrid .rgPageFirst, .RadGrid .rgPageLast, .RadGrid .rgExpand, .RadGrid .rgCollapse, .RadGrid .rgSortAsc, .RadGrid .rgSortDesc, .RadGrid .rgUpdate, .RadGrid .rgCancel, .RadGrid .rgUngroup, .RadGrid .rgExpXLS, .RadGrid .rgExpDOC, .RadGrid .rgExpPDF, .RadGrid .rgExpCSV {
    background-color: transparent !important;
}

.RadGrid .rgGroupItem {
     padding: 2px 4px!important;
}

.RadGrid .rgClipCells .rgHeader, .RadGrid .rgClipCells .rgFilterRow > td, .RadGrid .rgClipCells .rgRow > td, .RadGrid .rgClipCells .rgAltRow > td, .RadGrid .rgClipCells .rgEditRow > td, .RadGrid .rgClipCells .rgFooter > td {
    text-align: left;
    overflow: hidden;
}

    .FormGrid .rgHeader {
        text-align: left !important;
    }

.RadGrid .rgRow td, .RadGrid .rgEditRow td, .RadGrid .rgFooter td, .RadGrid .rgHeader, .RadGrid th.rgResizeCol {
    font-family: 'Open Sans', sans-serif !important;
    font-size: 11px !important;
    color: #686868 !important;
    padding: 2px;
}

.RadGrid .rgAltRow td {
    font-family: 'Open Sans', sans-serif !important;
    font-size: 11px !important;
    color: white !important;
    padding: 2px;
}

.FormGrid.RadGrid_Vista .rgAltRow .ForminputboxWithoutWidth {
    padding-left: 0px !important;
    color: white !important;
    transition: .3s all;
    height: auto !important;
    font-weight: 500;
    font-family: 'Open Sans', sans-serif !important;
    font-size: 10px;
    transition: 0.4s ease all;
    background-color: transparent !important;
    outline: none !important;
    border-radius: .25rem !important;
    border: 1px solid transparent !important;
    box-shadow: 0 4px 4px -5.5px #ccc;
}

    .FormGrid.RadGrid_Vista .rgAltRow .ForminputboxWithoutWidth:hover, .FormGrid.RadGrid_Vista .rgAltRow .ForminputboxWithoutWidth:focus {
        border: 1px solid transparent !important;
        outline: none !important;
    }

    .FormGrid.RadGrid_Vista .rgRow .ForminputboxWithoutWidth:hover, .FormGrid.RadGrid_Vista .rgRow .ForminputboxWithoutWidth:focus {
        border: 1px solid transparent !important;
        outline: none !important;
    }

        .FormGrid.RadGrid_Vista .rgRow span {
            color: white !important;
        }

.RadGrid_Vista .rgAltRow a, .RadGrid_Vista .rgAltRow .RadComboBox .rcbInputCell .rcbInput {
    color: white !important;
    margin-left:0px!important;
}


/*.FormGrid.RadGrid_Vista .rgRow td {
        border-color: transparent !important;
    }*/

.CodeImageIframe {
    display: inline-block;
    height: 103px;
    width: 100%;
    padding: 4% 8%;
    background-color: whitesmoke;
}

#Form-Body{
    margin-top:1%!important;
}

@media(min-width: 992px) {
    .FormTitle i {
        margin-right: 6px;
        font-size: 22px !important;
    }

    .FormTitle {
        margin-top: 8px;
        font-size: 19px !important;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }

    .Form-btn i {
        font-size: 18px !important;
    }

    .HeaderTitleWidth {
        overflow: hidden;
        text-align: left;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 44%;
        flex: 0 0 44%;
        max-width: 44%;
    }

    .ButtonsWidth {
        text-align: right;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 56%;
        flex: 0 0 56%;
        max-width: 56%;
        margin-top: .5rem !important;
    }
}

@media(max-width:1250px) and (min-width: 992px) {
    #Form-Body {
        min-width:40%!important;
        width: 83%;
    }

    .HeaderDropDown-Section {
        width: 60%;
        margin: 0px 22%;
    }
    .Form-img{
        width:100%;
    }
}

@media(max-width: 991px) and (min-width: 788px) {
    .Form-Multilines2 {
        padding-left: 15px !important;
        margin-top: 2px;
    }
    .IframeBody {
        width: 100%;
    }

    .Iframe-Container {
        width: 100%;
    }

    .FormTitle {
        font-size: 18px;
    }

    #Form-Body {
        width: 60%!important;
        min-width: 60%!important;
    }

    .HeaderDropDown-Section {
        width: 50%;
        margin: 0px 25%;
    }
    .Form-img {
        width: 100%;
    }

    nav.navbar .brand-text {
        margin-top: .7%;
        font-size: 1.2rem;
    }
}

@media(max-width:787px) and (min-width:575px) {
    .Form-Multilines2 {
        padding-left: 15px !important;
        margin-top: 2px;
    }
    legend {
        margin-bottom: .7rem;
        padding-bottom: initial;
    }
    .IframeBody {
        width: 100%;
    }

    .Iframe-Container {
        width: 100%;
    }

    .FormTitle {
        font-size: 15px;
    }

    #Form-Body {
        min-width:60%!important;
        max-width: 70%!important;
        width: auto;
    }

    .HeaderDropDown-Section {
        width: 60%;
        margin: 0px 22%;
    }
    .Form-img {
        width: 100%;
    }

    nav.navbar .brand-text {
        margin-top: .7%;
        font-size: 1rem;
    }

}

@media(max-width:575px) and (min-width:376px) {
    .FormGrid {
        width: 100% !important;
    }
    .Form-Multilines2 {
        padding-left: 15px !important;
        margin-top: 2px;
    }
    .Form-InnerBody {
        max-height: 485px!important;
    }

    legend {
        margin-bottom: .7rem;
        padding-bottom: initial;
    }
    nav.navbar .brand-text {
        margin-top: 1.5%;
    }
        .IframeBody {
        width: 100%;
    }
    
    .login-page .form-outer, .register-page .form-outer{
        padding:60px!important;
    }

    .Iframe-Container {
        width: 100%;
    }

    .nav-item a.nav-link span{
        display: none;
    }

    .SendMail-Modal .SendMail-Modal-Dialog {
        position: relative;
        width: 100%;
        margin-top: 2%;
        margin-left: 0px;
    }

    .FormTitle {
        font-size: 13px;
    }

        .FormTitle i {
            font-size: 18px;
        }

    #Form-Body {
        min-width: 90% !important;
        max-width: 98%!important;
        margin-left: 10px;
        margin-right: 10px;
        width: auto;
    }

    .Form-btn i {
        font-size: 15px;
        padding: 4px;
    }

    .HeaderDropDown-Section {
        width: auto;
        margin: auto;
        margin-left: 2%;
    }
    .Form-img {
        width: 100%;
    }
    nav.navbar .brand-text {
        margin-top: .7%;
        font-size: 1.2rem;
    }
}

@media(max-width:375px) {
    .FormGrid {
        width: 100% !important;
    }

    .Form-Multilines2 {
        padding-left: 15px !important;
        margin-top: 2px;
    }
    legend {
        margin-bottom: .7rem;
        padding-bottom: initial;
    }
    nav.navbar .brand-text {
        margin-top: 1.5%;
    }
    .IframeBody {
        width: 100%;
    }

    .Iframe-Container {
        width: 100%;
    }

    .PaymentMenu-Text h5 {
        transition: all .4s;
        padding-top: 6px;
        padding-left: 5%;
        color: white;
        vertical-align: central;
        text-align: left;
        font-size: 9px !important;
    }

    .PaymentMenu-Img img {
        background: white;
        border: 1px solid white;
        border-radius: .25rem;
        padding: 3px;
        height: 25px;
        width: auto;
        opacity: 1;
        transition: all .4s;
    }

    .PaymentMenu-Body:hover .PaymentMenu-Text h5 {
        color: rgba(255,255,255,.8);
        font-size: 9px !important;
    }

    .SendMail-Modal .SendMail-Modal-Dialog {
        position: relative;
        width: 100%;
        margin-top: 2%;
        margin-left: 0px;
    }

    .FormTitle {
        font-size: 10px;
    }

        .FormTitle i {
            font-size: 15px;
        }

    #Form-Body {
        min-width: 90% !important;
        width: 90%;
        max-width: 90%;
        margin-left: 10px;
        margin-right: 10px;
        width: auto;
    }

    .Form-btn i {
        font-size: 15px;
        padding: 4px;
    }

    .HeaderDropDown-Section {
        width: auto;
        margin: auto;
        margin-left: 2%;
    }
    .Form-img {
        width: 100%;
    }
    nav.navbar .brand-text {
        margin-top: .7%;
        font-size: 1.2rem;
    }
}


.MenuHeadingSecond {
    color: white;
    text-align: left;
    font-size: 14px;
    /* border-top-right-radius: 0.41rem; */
    font-family: Candara;
    font-weight: 600;
    margin-top: 0;
    padding: 3px 6px 5px;
    border-bottom: 1px solid #ffffff42;
    margin-bottom: 0;
}

    .MenuHeadingSecond i {
        margin-right: 2px;
    }
