/*------------------------------------------------------------------------
    My Digital CSS - Updated Date : 08-09-22
    Version: MD.1.22;
------------------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap');
:root,
:root.light {
    --font-family: 'Open Sans', sans-serif !important;
    --default-font-color: #00012D !important;
    --default-font-size:12px;
    --default-body-bg: #F0F8FA !important;

    --main-header-start: #005A7A;
    --main-header-end: #00B0F0;
    --main-tabs-bar: #fff;/*Main ORG/Company Tabs*/
    --content-card: #fff;/*Popups bg color*/

    --page-header-start: #005A7A;
    --page-header-end: #00B0F0;
    --page-header2-start:#005A7A;
    --page-header2-end:#00021D;
    --page-header-txt: #F0F8FA;/*Page Header Text Color*/
    --page-content: #fff;/*Page Content Background*/

    --slider-header-start: #005A7A;
    --slider-header-end: #00B0F0;

    --title-container: #E8F0F2;

    /*---------------------- MDA Branding Colors ----------------------*/
    --color1: #00012D;/*My Digital Blue*/
    --color2: #00B0F0;/*CAPRI*/
    --color3: #005A7A;/*BLUE SAPPHIRE*/
    --color4: #556F7A;/*CADET*/
    --color5: #F0F8FA;/*AZURE X*/
    --color6: #FF8900;/*DARK ORANGE*/
    /*---------------------- MDA Branding Colors ----------------------*/
    --color7: #f8f9fa;/*LIGHT GRAY*/
    --color8: #dc3545;/*RED*/
    --color9: #198754;/*Green*/
    --color10: #ffc107;/*Warning Yellow*/
    --color11: #fff;/*White*/
    --color12: #2e2f53;
    --color13:#D9EAEE; /*Oyster Bay*/
    --transparent: transparent;/*Transparent*/

    --btncolor1: #00012D;/*My Digital Blue*/
    --btncolor2: #00B0F0;/*CAPRI*/
    --btncolor3: #dc3545;/*RED*/
    --btncolor4: #198754;/*GREEN*/
    --btncolor5: #ffc107;/*Warning Yellow*/
    --btncolor6: #f8f9fa;/*LIGHT GRAY*/
    --btncolor7: transparent;/*Transparent*/
    --btncolor8: #151851;/*Filter Color*/
    --btncolor9: #d6d6d6;/*LIGHT GRAY*/
    --btncolor10: #00BB13;/*GREEN*/
    --btncolor11: #005676;/*BLUE SAPPHIRE*/
    --btncolor12: #FF8900;/*DARK ORANGE*/
    --btncolor13: #9b0715;/*DARK RED*/


    --btntxtcolor1: #F0F8FA;/*AZURE X*/
    --btntxtcolor2: #F0F8FA;/*AZURE X*/
    --btntxtcolor3: #F0F8FA;/*AZURE X*/
    --btntxtcolor4: #F0F8FA;/*AZURE X*/
    --btntxtcolor5: #00012D;/*My Digital Blue*/
    --btntxtcolor6: #00012D;/*My Digital Blue*/
    --btntxtcolor7: #00B0F0;/*CAPRI*/
    --btntxtcolor8: #F0F8FA;/*AZURE X*/
    --btntxtcolor9: #00012D;/*My Digital Blue*/


    --txtcolor1: #00012D;/*My Digital Blue*/
    --txtcolor2: #00B0F0;/*CAPRI*/
    --txtcolor3: #dc3545;/*RED*/
    --txtcolor4: #198754;/*Green*/
    --txtcolor5: #ffc107;/*Warning Yellow*/
    --txtcolor6: #f8f9fa;/*LIGHT GRAY*/
    --txtcolor7: #FF8900;/*DARK ORANGE*/

    --font-size1:8px;
    --font-size2:10px;
    --font-size3:11px;
    --font-size4:12px;
    --font-size5:14px;/*default-font-size*/
    --font-size6:16px;
    --font-size7:18px;
    --font-size8:24px;
    --font-size9:30px;
    --font-size10:36px;
    --font-size11:48px;
    --font-size12:60px;
    --font-size13:72px;
    --font-size14:84px;

    --dialog-default: #556F7A;/*My Digital Blue*/
    --dialog-success: #198754;/*Green*/
    --dialog-delete: #dc3545;/*RED*/
    --dialog-warning: #FF8900;/*Warning*/
    --dialog-info: #00B0F0;/*CAPRI*/

    --toast-success: #198754;/*Green*/
    --toast-error: #dc3545;/*RED*/
    --toast-info:  #00B0F0;/*CAPRI*/
    --toast-warning: #FF8900;/*Warning*/

    --popover-header: #005A7A;/*BLUE SAPPHIRE*/
    --footer-color: #F0F8FA;
    --menu-hover: #00012D;
    --menu-hover-txt:#F0F8FA;
    --menu-title-bg: #00B0F0;
    --logo-background-color:transparent;
    --sub-heading-color: #556F7A;/*CADET*/

}
:root.dark {
    --main-header: linear-gradient(90deg, rgba(0,2,29,1) 0%, rgba(17,24,48,1) 52%, rgba(85,111,122,1) 100%);/*Main Top Header*/
    --page-header: #53538b; /*Page Header Background*/
    --default-font-color: #F0F8FA !important;
    --default-body-bg: #F0F8FA !important;
    --title-container: #F0F8FA;
    --title-container-txt: #F0F8FA;/*AZURE X*/
    --color5: #00021D;
    --color1: #00021D;
    --main-tabs-bar: #14162f;
}
/*:root.contrast {}*/

/*------------------------------------------------------------------------
    0. Login Class
------------------------------------------------------------------------*/
.md-login .k-input-solid {border-color: #CFE8EE;color: var(--color1);background-color: #CFE8EE;width: 100%;padding: 10px;}
.md-login .k-floating-label-container{ width: 100%;}
.logo-pb{padding-bottom: 18px;}
.reg-btn{display: block;width: 100%;text-align: left;background: #fff url(../images/general/reg-arrow.svg) right 10px center no-repeat; color: #00021D;border: 2px solid #eaf1f3;
    border-radius: 5px;padding: 12px 18px;margin-bottom: 10px;height: auto;font-size: 14px;font-weight: 700;background-size: 4%;}
.reg-btn:hover{background: #00B0F0 url(../images/general/reg-arrow.svg) right 10px center no-repeat; color: #F0F8FA; border: 2px solid #00B0F0;background-size: 4%;}
.mda-af-bg{background: #00021D url(../images/general/login-banner.png) center center no-repeat; background-size: 90%;}
.mdb-ind-bg{background: #2468BD url(../images/general/MTD.png) center center no-repeat; background-size: 100%;}
.mdb-acc-bg{background: #2468BD url(../images/general/MTD-accountant.png) center center no-repeat; background-size: 165%;}
/*------------------------------------------------------------------------
    1. General
------------------------------------------------------------------------*/
html, body{font-family: var(--font-family) !important; font-size: var(--font-size4) !important; color: var(--default-font-color) !important; background: var(--default-body-bg);}
.skin-blue{min-height: 100vh !important;}/*Angular JS Body Class Overwrite*/
.main-container {display: flex;height: 100%; flex-direction: column; -ms-flex-direction: column;}
.outline-0{outline: 0;}
.pointer{cursor: pointer;}
.z-index2 { z-index: 2;}
.br0{border-radius: 0;}
.br3,.badge{border-radius: 3px;}
.pt-30p{padding-top: 30%;}
.flex1 { flex: 1;}
.wid-350px{width: 350px;}
.wid-20p{ width: 40%;}
.wid-15p{ width: 15%;}
.wid-10p{ width: 10%;}
.h-100vh{height: 100vh;}
.h-85vh{height: 85vh;}
.h-15vh{height: 14.8vh;}
.mh-250{min-height: 0px; max-height: 250px;}
.min-h15p{min-height: 15%; max-height: 75%;}
.mh-auto{min-height: auto !important;}
.pound::before{content: "£"; font-weight: 600;}
::selection {color: #f4f4f4;background: #00021D;}
form{padding: 0 !important;}
.msg-error{ background: var(--color8); color: var(--color5); padding: 2px 5px; }
md-footer.mda-in-footer{ position:fixed; width:100%; bottom:0; z-index: 2; }
.mda-footer{background-color: var(--footer-color) !important; border-top:1px solid #0000001a;}
/*------------------------------------------------------------------------
    2. Font Sizes
------------------------------------------------------------------------*/
.fs-8{ font-size: var(--font-size1);}         .fs-10{font-size: var(--font-size2);}         .fs-11{font-size: var(--font-size3);}
.fs-12{font-size: var(--font-size4);}         .fs-14{font-size: var(--font-size5);}         .fs-16{font-size: var(--font-size6);}
.fs-18{font-size: var(--font-size7);}         .fs-24{font-size: var(--font-size8);}         .fs-30{font-size: var(--font-size9);}
.fs-36{font-size: var(--font-size10);}        .fs-48{font-size: var(--font-size11);}        .fs-60{font-size: var(--font-size12);}
.fs-72{font-size: var(--font-size13);}        .fs-84{font-size: var(--font-size14);}

/*------------------------------------------------------------------------
    3. Font Weight 200;300;400;500;600;700;800;900
------------------------------------------------------------------------*/
.fw-200{font-weight: 200;}          .fw-300{font-weight: 300;}          .fw-400{font-weight: 400;}
.fw-500{font-weight: 500;}          .fw-600{font-weight: 600;}          .fw-700{font-weight: 700;}
.fw-800{font-weight: 800;}          .fw-900{font-weight: 900;}

/*------------------------------------------------------------------------
    4. Font Color
------------------------------------------------------------------------*/
.txt-color1{color: var(--txtcolor1);}/*My Digital Blue*/
.txt-color2{color: var(--txtcolor2);}/*CAPRI*/
.txt-color3{color: var(--txtcolor3);}/*RED*/
.txt-color4{color: var(--txtcolor4) !important;}/*Green*/
.txt-color5{color: var(--txtcolor5);}/*Warning Yellow*/
.txt-color6{color: var(--txtcolor6) !important;}/*LIGHT GRAY*/
.txt-color7{color: var(--txtcolor7);}/*DARK ORANGE*/

/*------------------------------------------------------------------------
    5. Background Color
------------------------------------------------------------------------*/
.bg-color1{background: var(--color1);}/*My Digital Blue*/
.bg-color2{background: var(--color2) !important;}/*CAPRI*/
.bg-color3{background: var(--color3);}/*BLUE SAPPHIRE*/
.bg-color4{background: var(--sub-heading-color) !important;}/*CADET*/
.bg-color5{background: var(--color5);}/*AZURE X*/
.bg-color6{background: var(--color6);}/*DARK ORANGE*/
.bg-color7{background: var(--color7);}/*LIGHT GRAY*/
.bg-color8{background: var(--color8);}/*RED*/
.bg-color9{background: var(--color9);}/*Green*/
.bg-color10{background: var(--color10);}/*Warning Yellow*/
.bg-color11{background: var(--color11);}/*White*/
.transparent{background: var(--transparent);}

/*------------------------------------------------------------------------
    6. Button Background and Font Color
------------------------------------------------------------------------*/
.btn-color1{background: var(--btncolor1) !important; color: var(--btntxtcolor1) !important;}/*My Digital Blue*/
.btn-color2{background: var(--btncolor2) !important; color: var(--btntxtcolor2) !important;}/*CAPRI*/
.btn-color3{background: var(--btncolor3) !important; color: var(--btntxtcolor3) !important;}/*RED*/
.btn-color4{background: var(--btncolor4) !important; color: var(--btntxtcolor4) !important;}/*GREEN*/
.btn-color5{background: var(--btncolor5) !important; color: var(--btntxtcolor5) !important;}/*Warning Yellow*/
.btn-color6{background: var(--btncolor6) !important; color: var(--btntxtcolor6) !important;}/*LIGHT GRAY*/
.btn-color7{background: var(--btncolor7) !important; color: var(--btntxtcolor7); text-decoration: none;border: 0;}/*Transparent*/
.btn.btn-color7:hover{background: var(--btncolor7) !important; color: var(--color6);}
.btn-filter{background: var(--btncolor8) !important; color: var(--btntxtcolor8) !important;}
.btn-back{ background: var(--btncolor9); color: var(--btntxtcolor9) !important;}
.btn-color9{ background: var(--btncolor9); color: var(--btntxtcolor9) !important;}
.btn-color10 {background: var(--btncolor10) !important; color: var(--btntxtcolor4) !important;}/*GREEN*/
.btn-color11 {background: var(--btncolor11) !important; color: var(--btntxtcolor4) !important;}/*BLUE SAPPHIRE*/
.btn-color12 {background: var(--btncolor12) !important; color: var(--btntxtcolor4) !important;}/*DARK ORANGE*/
.btn-color13{ background: var(--btncolor13) !important; color: var(--btntxtcolor9) !important;}/*DARK RED*/

/*------------------------------------------------------------------------
    7. Main Header
------------------------------------------------------------------------*/
.main-header{background: linear-gradient(90deg, var(--main-header-start),var(--main-header-end)); min-height: 55px;}
.mda-header-left{outline: 0;}
.mda-header-center{outline: 0;}
.mda-header-right{outline: 0;}

/*------------------------------------------------------------------------
    8. Main Menu
------------------------------------------------------------------------*/
.main-menu{padding: 11px 0;}
.main-search{padding: 16px 0;}
.main-menu-list .menu-title-bg{background: var(--menu-title-bg); color: var(--txtcolor6);}
.main-menu-list .search-bgcolor{background: var(--color1); color: var(--color5);}
.main-menu-list .menu-txt{padding: 10px 0;}
/*.main-menu-list .sub-menu-list ul {padding-left: 0;}
.main-menu-list .sub-menu-list ul li{list-style: none;padding: 3px 0; font-weight: 600;}
.main-menu-list .sub-menu-list ul li a{color: var(--default-font-color); text-decoration: none;}*/
.main-menu-list .menu-right{ overflow: auto;}
.sub-menu-ico{padding: 11px 0;}
.m-menu-icons {height: 37px; padding: 2px !important;}
.left-menu-list:hover,.active-menu,.main-menu-list .sub-menu-list:hover{background: var(--menu-hover); color: var(--menu-hover-txt);}
.md-menu-arrow{color: var(--color4); float: right;padding: 0 11px;font-size: 14px;}
.menu-mx-auto{left: 7.5%; top: 90px;}
.w-85{width: 85%;}
.child-menus{background: var(--color1);}
.child-menus ul li a{color: var(--txtcolor6) !important;}
.child-menus ul li a:hover{background: var(--color5) !important;color: var(--txtcolor1) !important;}
/*------------------------------------------------------------------------
    9. Main Search
------------------------------------------------------------------------*/
.top-search,.top-search-bg{background: var(--color1); color: var(--color5);}
.top-search-c{background: var(--color1); color: var(--color5); border-radius: 0; padding: 15px; border: 0;}
.top-search-c:active,.top-search-c:hover{background: var(--color6);}
.recent-search{background: var(--color3); color: var(--color5);}
.content-card{background: var(--content-card);box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 0, rgba(0, 0, 0, 0.06) 0 1px 2px 0;}
.content-card-menu{background: var(--content-card);box-shadow: rgba(17, 17, 26, 0.1) 0 4px 16px, rgba(17, 17, 26, 0.1) 0 8px 24px, rgba(17, 17, 26, 0.1) 0 16px 56px;}
.bottom-br{border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;}
/*------------------------------------------------------------------------
    10. Main Tabs
------------------------------------------------------------------------*/
.main-tabs{min-height: 30px;background: var(--main-tabs-bar);-webkit-box-shadow: -1px 1px 1px 0 rgb(0 0 0 / 5%);
    -moz-box-shadow: -1px 1px 1px 0 rgb(0 0 0 / 5%);box-shadow: -1px 1px 1px 0 rgb(0 0 0 / 5%);}
.tabs{background: #00021D; color: #fff; border-top: 3px solid #556F7A; border-right: 1px solid #ffffff20; padding: 5px; margin-right: 0; opacity: .7;}
.tabs.active-tab{background: #00021D; color: #fff; border-top: 3px solid #FF8900; border-right: 1px solid #ffffff20; padding: 0; margin-right: 0;opacity: 1;}

/*------------------------------------------------------------------------
    11. Top Quick Menu
------------------------------------------------------------------------*/
.quick-menu-ico,.sub-menu-ico,.main-search.k-button-solid-base, .sub-menu-ico .k-button-solid-base {background: transparent; border: 0; outline: 0 !important; box-shadow: 0 0 0 0.25rem rgb(228 231 235 / 0%);}
.quick-menu-ico.k-button-md,.sub-menu-ico.k-button-md{padding: 11px 0;}
.quick-menu-ico:hover,.sub-menu-ico:hover,.sub-menu-ico .k-button-solid-base:hover {background: transparent; border: 0;}
.main-menu:hover,.quick-menu-ico:hover,.sub-menu-ico:hover,.m-search-hover:hover,.profile:hover{background: var(--color1); border-radius: 0;}
/*------------------------------------------------------------------------
    12. Page Title and Button Container
------------------------------------------------------------------------*/
.title-container{background: var(--title-container);  padding: 5px 10px; z-index: 1;}
.title-container .title-container-l{color: var(--title-container-txt);font-size: 18px;padding: 5px 0 !important;}
.urls{font-size: 12px; font-weight: 500;}
.title-container .title-container-r{font-size: 18px;padding: 5px 0 !important;}

/*------------------------------------------------------------------------
    13. Page Header/Content/Footer (Content Area)
------------------------------------------------------------------------*/
.page-heading{ background: linear-gradient(90deg, var(--page-header-start),var(--page-header-end)); /*background: rgb(0,90,122);
background: linear-gradient(90deg, rgba(0,90,122,1) 35%, rgba(0,176,240,1) 100%); */color: var(--page-header-txt); font-weight: 600; }

.page-heading2{background: rgb(0,90,122);
    background: linear-gradient(90deg, var(--page-header2-start),var(--page-header2-end)); color: var(--page-header-txt); font-weight: 600;}
.search-bg{background: rgb(0,2,29) !important;
    background: linear-gradient(90deg, rgba(0,2,29,1) 0%, rgba(85,111,122,1) 100%) !important;}

.red-bg{background: rgb(0,2,29) !important;
    background: linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(0,2,29,1) 100%) !important;}

.blue-bg{background: rgb(0,2,29) !important;
    background: linear-gradient(90deg, rgb(0 175 239) 0%, rgb(0 122 167) 100%) !important;}

.brown-bg{background: rgb(73 10 8) !important;
    background: linear-gradient(90deg, rgb(73 10 8) 0%, rgb(154 53 20) 100%) !important;}

.md-edit .page-heading2{background: rgb(0,176,240);
    background: linear-gradient(90deg, var(--page-header2-start),var(--page-header2-end)); color: var(--page-header-txt);}

.page-content{background: var(--page-content); min-height: 100px; padding: 10px;box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;}
.page-a-footer{background: var(--color7);}
.content-container{padding: 15px;margin-bottom: 50px; padding-top:5px;}

.page-heading .left,.page-heading2 .left{padding: 10px !important;}
.page-heading .right,.page-heading2 .right{padding: 10px !important;}

.md-login md-footer .mda-footer, .md-reset md-footer .mda-footer{ border:0px solid #000 !important;}

/*------------------------------------------------------------------------
    14. Slider Header/Content/Footer
------------------------------------------------------------------------*/
.page-s-heading{ background: linear-gradient(90deg, var(--slider-header-start),var(--slider-header-end)); color: var(--page-header-txt); padding: 15px; font-weight: 600; z-index: 99; }
.page-s-content{min-height: 150px; margin-bottom: 62px !important;}
.page-s-footer{background: var(--color7);}
.light-bg{background: var(--color5);padding: 15px;}
.dark-bg-60p{background: var(--color13);padding: 15px;}
.white-bg{background: var(--color11);padding: 15px;}

/*------------------------------------------------------------------------
    15. Grid
------------------------------------------------------------------------*/
.md-grid-view{padding: 0;}

/*------------------------------------------------------------------------
    16. Toast
------------------------------------------------------------------------*/
.toast-top-center{top: 10%}

/*------------------------------------------------------------------------
    17. Company
------------------------------------------------------------------------*/
.active-company, .active-company:hover{background: var(--color1) !important; color: var(--color5);}
.psc-list:hover,.um-list:hover{background: var(--color5);}
.company-type{font-size: var(--font-size2);}


/*Setting*/
/*.setting-name{padding: 5px 0 !important;}*/

/*------------------------------------------------------------------------
    0. Animation
------------------------------------------------------------------------*/
@keyframes fadeInUp {from {transform: translate3d(0,40px,0) } to {transform: translate3d(0,0,0);opacity: 1 }}
@-webkit-keyframes fadeInUp {from {transform: translate3d(0,40px,0)}to {transform: translate3d(0,0,0);opacity: 1}}
.animated {animation-duration: 1s;animation-fill-mode: both;-webkit-animation-duration: 1s;-webkit-animation-fill-mode: both}
.animatedFadeInUp {opacity: 0}
.fadeInUp {opacity: 0;animation-name: fadeInUp;-webkit-animation-name: fadeInUp;}
.fade-in-down {animation: fade-in-move-down 0.7s;}
.fade-in-down2 { animation: fade-in-move-down 1s;}
@keyframes fade-in-move-down {0% {opacity: 0;transform: translateY(-3rem);}100% {opacity: 1;transform: translateY(0);}}
.fade-in {animation: fadeIn ease 2s;-webkit-animation: fadeIn ease 2s;-moz-animation: fadeIn ease 2s;
    -o-animation: fadeIn ease 2s;-ms-animation: fadeIn ease 2s;}
@keyframes fadeIn{0% {opacity:0;} 100% {opacity:1;}}
@-moz-keyframes fadeIn {0% {opacity:0;}100% {opacity:1;}}
@-webkit-keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;}}
@-o-keyframes fadeIn {0% {opacity:0;}100% {opacity:1;}}
@-ms-keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;}}

.shake-ani {
    animation: shake 150ms 6 linear;
    -moz-animation: shake 150ms 6 linear;
    -webkit-animation: shake 150ms 6 linear;
    -o-animation: shake 150ms 6 linear;
    opacity: 1;
}

@keyframes shake {
    0% {
        transform: translate(3px, 0);
    }
    50% {
        transform: translate(-3px, 0);
    }
    100% {
        transform: translate(0, 0);
    }
}

@-moz-keyframes shake {
    0% {
        -moz-transform: translate(3px, 0);
    }
    50% {
        -moz-transform: translate(-3px, 0);
    }
    100% {
        -moz-transform: translate(0, 0);
    }
}

@-webkit-keyframes shake {
    0% {
        -webkit-transform: translate(3px, 0);
    }
    50% {
        -webkit-transform: translate(-3px, 0);
    }
    100% {
        -webkit-transform: translate(0, 0);
    }
}

@-ms-keyframes shake {
    0% {
        -ms-transform: translate(3px, 0);
    }
    50% {
        -ms-transform: translate(-3px, 0);
    }
    100% {
        -ms-transform: translate(0, 0);
    }
}

@-o-keyframes shake {
    0% {
        -o-transform: translate(3px, 0);
    }
    50% {
        -o-transform: translate(-3px, 0);
    }
    100% {
        -o-transform: translate(0, 0);
    }
}

/*.page-t-padding,*/app-not-found div.container-fluid,.container-fluid {padding-top: 100px; padding: 15px;}
.bg-pending{background: #5f00a5;}
.org-logo{background-size: contain !important;}