:root {
    /*primary color:  blue*/
    --primary-color: rgba(62,80,180,1); /*primary label/caption color*/
    /*lighter primary color*/
    --primary-color-30: rgba(62,80,180, 0.7); /* 30% lighter*/
    --primary-color-50: rgba(62,80,180, 0.5); /* 50% lighter*/
    /*accent light blue color*/
    --accent-color: rgba(0,184,212,1);
    --accent-color-30: rgba(0,184,212, 0.7); /* 30% lighter*/
    --accent-color-50: rgba(0,184,212, 0.5); /* 50% lighter*/
    --accent-color-70: rgba(0,184,212, 0.3); /* 70% lighter*/
    --accent-color-90: rgba(0,184,212, 0.1); /* 90% lighter*/
    /*black*/
    --dark-color: rgba(0,0,0,1); /*black*/
    --dark-color-30: rgba(0,0,0,0.7); /*black lighter 70%*/
    --dark-color-50: rgba(0,0,0,0.5); /*black lighter 50%*/
    /*white*/
    --white-color: rgba(255,255,255,1); /*white*/
    /*warning color*/
    --warning-color: rgba(255,0,0,1); /*black*/
    --warning-color-50: rgba(255,0,0,0.5); /*black lighter 50%*/
    --warning-color-70: rgba(255,0,0,0.3); /*black lighter 70%*/
    --warning-color-90: rgba(255,0,0,0.1); /*black lighter 90%*/
    /*Hover Color*/
    --hover-color: rgba(104,160,210,1); /*silver blue*/
    --hover-color-30: rgba(104,160,210,0.7); /*30% lighter silver blue*/
    --hover-color-50: rgba(104,160,210,.5); /*50% lighter silver blue*/
}

/* Edit Form*/
.form-group {
    margin-bottom: 0.5rem;
}


.e-grid .e-headercelldiv {
    font-size: 0.9rem !important;
    /*	line-height: 27px !important;*/
}

.e-grid .e-rowcell {
    font-size: 1.2rem !important;/*neo change from font-size: 0.9rem !important;*/
    /*padding: 0px 10px !important;*/
}

.e-grid .e-gridheader {
    /*height: 35px;*/
}

/* Edited By Shi Xin

.e-checkbox-wrapper, .e-css.e-checkbox-wrapper {
    margin: -2px 0px -6px 0px;
}*/

/* Module Title*/
.moduletitle {
    color: var(--primary-color) !important;
    font-size: 0.8rem !important;
}

/*Field label at ADD/Edit */
label {
    margin-bottom: 0rem !important;
}

.captionstyle {
    font-family: Roboto, 'Playfair Display';
    font-size: 0.9rem !important;
    /*color: var(--accent-color) !important;*/
    color: var(--primary-color) !important;
    font-style: italic;
    text-align: left;
    text-transform: uppercase;
    /*margin-bottom: 0.1rem;*/
}

.requiredfield:after {
    color: red;
    content: "*";
    font-size: small;
    padding: 0px 3px;
}

/* Dropdown ActionFailure Event (API data fetch failed)*/
.norecord {
    color: red;
    font-style: italic;
    font-size: 0.8rem !important;
}

/* all input font-size*/
.e-input-group input.e-input, .e-input-group textarea.e-input, .e-input-group input.e-input:hover:not(.e-success):not(.e-warning):not(.e-error):not([disabled]):not(:focus), .e-input-group textarea.e-input:hover:not(.e-success):not(.e-warning):not(.e-error):not([disabled]), .e-input-group.e-control-wrapper input.e-input, .e-input-group.e-control-wrapper textarea.e-input, .e-input-group.e-control-wrapper input.e-input:hover:not(.e-success):not(.e-warning):not(.e-error):not([disabled]):not(:focus), .e-input-group.e-control-wrapper textarea.e-input:hover:not(.e-success):not(.e-warning):not(.e-error):not([disabled]) {
    font-family: Roboto, 'Playfair Display';
    font-size: 0.9rem !important;
    padding: 0px 5px !important;
}

/*.e-input-group:not(.e-float-icon-left), .e-input-group.e-success:not(.e-float-icon-left), .e-input-group.e-warning:not(.e-float-icon-left), .e-input-group.e-error:not(.e-float-icon-left), .e-input-group.e-control-wrapper:not(.e-float-icon-left), .e-input-group.e-control-wrapper.e-success:not(.e-float-icon-left), .e-input-group.e-control-wrapper.e-warning:not(.e-float-icon-left), .e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left) {*/
/*	border: inset lightgray;
	border-width: 0 0 0.5px 0;*/
/*}*/

/* Object Input on Focus */
.e-input-group:not(.e-float-icon-left):not(.e-float-input)::before, .e-input-group:not(.e-float-icon-left):not(.e-float-input)::after, .e-input-group.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::before, .e-input-group.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::after, .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::before, .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::after, .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::before, .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::after {
    background: #22b24b;
}

.e-input-group, .e-input-group.e-control-wrapper, .e-float-input, .e-float-input.e-input-group, .e-float-input.e-control-wrapper, .e-float-input.e-input-group.e-control-wrapper {
    background: transparent;
    color: rgba(0, 0, 0, 0.87);
    height: -webkit-fill-available;
    /*height: 35px;
	margin-top: -5px;*/
    /*margin-bottom: 2px;*/
}

/*.e-grid > .e-gridpager > .e-pagesizes > e-control-container {
	margin-top: -5px;
}*/

/*validation-message*/
.validation-message {
    color: var(--warning-color) !important;
    float: right;
    font-style: italic;
    font-size: smaller;
    height: auto;
    /*	text-align: center;
	background-color: #fcdbe4;
	border-color: #fcdbe4;
	color: red;
	padding: 0 16px;
	border-radius: 4px;*/
    /*color: var(--warning-color) !important;
    background: var(--warning-color-90) !important;
    padding: 5px !important;
    border-radius: 5px !important;
    position: relative;
    display: inline-block !important;
    margin-top: 8px;*/
}

/*.validation-message:before {
    content: '';
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid var(--warning-color-90);
    position: absolute;
    top: -10px;
    margin-left: 4%;
}*/

/*.validation-message:after {*/
/*color: #fcdbe4 !important;*/
/*color: var(--warning-color-90) !important;
}*/

/* toast content*/
.e-toast-container .e-toast .e-toast-message .e-toast-content {
    padding: 2px 0 2px 0;
}

.e-toast-container .e-toast.e-toast-success .e-toast-message .e-toast-content {
    font-size: 0.8rem !important;
}

.e-toast-title {
    font-size: 0.8rem !important;
}

.e-toast-danger {
    font-size: 0.8rem !important;
}

.e-toast-info {
    font-size: 0.8rem !important;
}

/* Login Screen*/
.loginDiv {
    border-radius: 5px;
    box-shadow: 0.5rem 0.5rem 16px var(--dark-color-50);
}

.login-register-link {
    padding: 0px !important;
    color: var(--dark-color);
}

    .login-register-link a, .login-register-link li {
        color: var(--dark-color);
    }

        .login-register-link a:hover, .login-register-link li:hover {
            color: var(--primary-color);
        }

.radio-control {
    display: inline-flex;
}

/* Synfucsion Grid Toolbar Item
	When using material.css, the toolbal layout has become issue.
	So, we overwrite the laoyout style to make it back to normal
*/

.e-toolbar .e-toolbar-items {
    /*display: table-caption !important;*/ <<<--- remark display: table-caption;
    <<<--- add this
}

.e-tbar-btn-text {
    font-size: 1.5rem !important;/*neo change from font-size: 0.9rem !important;*/
    font-weight: 700;
}

.e-btn-icon:before {
    font-size: 0.9rem !important;
}

/*20230823>>remove for pivot table*/
/*.e-btn {
    font-size: 0.9rem !important;
    min-width: 72px;*/
    /*color: var(--white-color) !important;*/
    /* background-color: var(--primary-color-30) !important; */
/*}*/

    .e-btn[disabled] {
        /*background-color: lightgray !important;*/
    }

    .e-btn:hover {
        color: rgba(0, 0, 0, 1) !important;
        /*background-color: var(--hover-color) !important;*/
    }

.e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
    /* background-color: transparent !important; */
    /* min-width: 25px; */
    /* bottom: 5px !important; */
}

    .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:hover {
        /* background-color: var(--hover-color) !important; */
    }

.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn {
    background-color: transparent !important;
}

    .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:hover {
        background-color: var(--hover-color) !important;
    }

.e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
    color: var(--white-color) !important;
    /*background-color: transparent !important;*/
}

.e-toast-container .e-toast .e-toast-close-icon.e-blazor-toast-close-icon {
    background-color: transparent !important;
}

.e-dialog .e-footer-content .e-btn {
    font-size: 0.9rem !important;
    /*	color: var(--dark-color-30) !important;
	background-color: var(--accent-color-70) !important;*/
}

    .e-dialog .e-footer-content .e-btn:hover {
        background-color: var(--hover-color) !important;
    }

.e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
    /* left: -10px; */
}

#editformheader {
    font-size: 0.9rem !important;
    margin: -5px 0px;
}

    #editformheader::before {
        font-family: 'e-icons';
        content: '\e7a3';
        font-size: 0.9rem;
        padding: 12px;
        color: var(--primary-color);
    }

/* Grid Header background Color and Text Decoration*/
.e-grid .e-gridheader tr th {
    /*color: var(--primary-color) !important;*/
    text-transform: uppercase !important;
    font-size: 0.9rem !important;
    color: var(--dark-color) !important;
    background-color: var(--bs-gray-200) !important;
    /*border-block-color:white !important;*/
    /*border:groove white !important;*/
}

.e-gridheader .e-headercell {
    padding: 5px 0px 0px 2px !important;
}

.e-headertext {
    color: var(--dark-color) !important;
    text-transform: uppercase !important;
    font-weight: 700;
}
/* Grid Insert/Edit Template*/
.edittemplate {
    min-height: 400px;
    min-width: 400px;
}

.edittemplateheader {
    font-size: 0.8rem;
}

.edittemplatebutton {
    font-size: 0.9rem;
}

.e-dialog .e-footer-content {
    padding: 16px !important;
    border-radius: 5px !important;
}

/* Content Body*/
.control-section {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

/* Grid Tab content classes*/
.griddetailtab {
    display: inline-flex;
}

    .griddetailtab .itemphoto {
        float: left;
        padding: 20px;
    }

        .griddetailtab .itemphoto .userphoto {
            width: 100px;
            height: 100px;
            border-radius: 50px;
            box-shadow: inset 0 0 1px #e0e0e0, inset 0 0 14px rgba(0,0,0,0.2);
        }

    .griddetailtab .itemcontent {
        padding-top: 8px;
    }

        .griddetailtab .itemcontent .itemcontent-header {
            padding-bottom: 5px;
            padding-left: 5px;
            font-size: 0.9rem;
            font-weight: bold;
        }

        .griddetailtab .itemcontent .itemcontent-title {
            padding-right: 173px;
            padding-left: 5px;
        }

            .griddetailtab .itemcontent .itemcontent-title .position {
                font-size: 0.75rem;
            }

        .griddetailtab .itemcontent .itemcontent-table-section {
            padding-top: 5px;
        }

            .griddetailtab .itemcontent .itemcontent-table-section .itemcontent-table {
                font-size: 0.75rem;
            }

            .griddetailtab .itemcontent .itemcontent-table-section .itemcontent-table {
                width: 100%;
                color: black;
            }

            .griddetailtab .itemcontent .itemcontent-table-section .itemcontent-table, .itemcontent-table td, .itemcontent-table th {
                padding: 0.2rem 0.1rem !important;
                vertical-align: baseline;
                font-size: 0.9rem;
                border-top: 1px solid #dee2e6;
                border-bottom: 1px solid #dee2e6;
            }

            .griddetailtab .itemcontent .itemcontent-table-section .itemcontent-table, .itemcontent-table th {
                font-weight: 500;
                color: var(--primary-color);
            }

            .griddetailtab .itemcontent .itemcontent-table-section .itemcontent-table, .itemcontent-table td {
                width: auto;
                padding: -1px 50px 0 5px !important;
                min-width: 100px;
                font-weight: 400;
                color: black;
            }

.e-grid .e-icon-grightarrow {
    font-size: 10px;
    text-indent: 12px;
    margin-top: 4px !important;
}

.e-grid-min-height .e-gridheader .e-headercell, .e-grid-min-height .e-gridheader .e-detailheadercell, .e-grid-min-height .e-gridheader .e-headercell .e-headercelldiv {
    height: auto;
    /*text-indent: 5px;*/
    /*font-weight:700 !important*/
}

/*	.e-grid-min-height .e-gridheader .e-headercell, .e-grid-min-height .e-gridheader .e-detailheadercell, .e-grid-min-height .e-gridheader .e-headercell .e-headercelldiv {
		height: auto;
		text-indent: 5px;
	}*/

.e-grid.e-wrap .e-rowcell, .e-grid.e-wrap .e-columnheader .e-stackedheadercelldiv, .e-grid.e-wrap .e-columnheader .e-headercelldiv {
    text-indent: 2px;
}

/* Edit Form Style*/
.e-dialog .e-dlg-header-content {
    /*    background-color: var(--accent-color-50);
    border-bottom: none;
    padding: 9px 20px 8px 12px;*/
}

.e-dialog .e-dlg-header {
    position: relative;
}

.e-dialog .e-footer-content, .highcontrast.e-bigger .e-dialog .e-footer-content {
    padding: 15px;
}

.e-dialog .e-dlg-header-content + .e-dlg-content {
    padding-top: 12px;
}

.e-dialog .e-dlg-content {
    padding: 20px;
}

.e-popup.e-popup-open {
    /* 	border-radius: 13px;
*/
    border-radius: 5px;
}

.e-dialog .e-dlg-header-content {
    /*  border-radius: 5px 5px 0 0;
    line-height: 22px;
    height: 38px;*/
}

#EditFormtarget {
    min-height: 500px !important;
    max-height: 800px;
    height: 100%;
}

#EditFormSaveDefectButton {
    top: 2px;
    position: relative;
}

    #EditFormSaveDefectButton[disabled] {
        cursor: default;
        pointer-events: none;
    }

#EditFormCancelButton {
    top: -2px;
    position: relative;
    float: right;
    background-color: var(--accent-color);
    color: var(--white-color);
    margin: 0 5px;
}

#EditFormSaveButton {
    top: -2px;
    position: relative;
    float: right;
    margin: 0 5px;
}

.ddlTable {
    font-size: inherit;
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray
}

    .ddlTable thead {
        display: table-header-group;
        vertical-align: middle;
        border-color: inherit
    }

    .ddlTable tbody {
        display: table-row-group;
        vertical-align: middle;
        border-color: inherit
    }

    .ddlTable tfoot {
        display: table-footer-group;
        vertical-align: middle;
        border-color: inherit
    }

..ddlTable > tr {
    vertical-align: middle;
}

.ddlTable col {
    display: table-column
}

.ddlTable colgroup {
    display: table-column-group
}

.ddlTable tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit
}

.ddlTable td, .ddlTable th {
    display: table-cell;
    vertical-align: inherit;
    padding-top: 9px;
}

.ddlTable th {
    font-weight: bold
}

.ddlTable caption {
    display: table-caption;
    text-align: -webkit-center
}

.main-treeview .e-list-text {
    font-size: 13px;
    color: #fbfdfe !important;
}

.main-treeview .e-list-item .e-fullrow:hover {
    /*color: #fbfdfe !important;*/
    opacity: 50%;
    border-radius: 10px;
    width: 72%;
    margin: 0px 0px 0px 58px;
}

.main-treeview .e-list-item.e-active > .e-fullrow {
    background-color: #f1f1f196 !important;
    border-radius: 10px;
    border-color: grey;
    width: 72%;
    margin: 0px 0px 0px 58px;
}

.main-treeview .e-list-item.e-hover > .e-fullrow {
    background-color: #f1f1f196 !important;
    border-radius: 10px;
    border-color: grey;
    width: 72%;
    margin: 0px 0px 0px 58px;
}

.main-treeview .e-list-item.e-active > .e-text-content .e-list-text {
    color: var(--dark-color) !important;
    opacity: 50%;
    font-weight: 700;
}

.main-treeview .e-list-icon.e-active {
    color: var(--dark-color) !important;
}

.e-treeview .e-list-item.e-active > .e-text-content .e-list-text {
    color: #080808;
    font-weight: 700;
}

.main-treeview .e-list-item div.e-icons.interaction {
    margin-top: 4px;
}
/*
.e-treeview.e-fullrow-wrap .e-text-content {
	border-color: transparent;
	color: aliceblue;
}

.e-treeview .e-list-item .e-fullrow:hover {
	background-color: #f1f1f196;
	border-color: grey;
	border-radius: 10px;
	width: 72%;
	margin: 0px 0px 0px 58px;
}

.e-treeview .e-list-item.e-active > .e-text-content .e-icon-collapsible, .e-treeview .e-list-item.e-active > .e-text-content .e-icon-expandable {
	color: rgb(238 244 249);
}

.e-treeview .e-list-item div.e-icons.interaction {
	-webkit-transition: -webkit-transform .3s ease-in-out;
	border-radius: 15px;
	transition: transform .3s ease-in-out;
	color: aliceblue;
}
*/
.main-treeview .e-list-item.e-active > .e-text-content .e-icon-collapsible, .e-treeview .e-list-item.e-active > .e-text-content .e-icon-expandable {
    color: rgb(238 244 249) !important;
}

.sidebar-treeview .main-treeview .icon.e-active {
    color: black !important;
}
/*
.e-treeview .e-list-item {
	list-style: none;
	padding: 0px 0px;
}

	.e-treeview .e-list-item.e-active > .icon {
		color: aliceblue;
	}
*/
.sidebar-treeview .main-treeview .icon {
    font-family: 'myfontello';
    font-size: 16px;
    margin-top: -4px;
    color: aliceblue;
}

#header-section.main-header .icon-menu::before {
    content: '\e801';
    font-family: 'myfontello';
    font-size: 27px;
}

.sidebar-treeview .main-treeview .icon-barchart::before {
    content: '\e801';
}

.sidebar-treeview .main-treeview .icon-microchip::before {
    content: '\e806';
}

.sidebar-treeview .main-treeview .icon-component-alt::before {
    content: '\e805';
}

.sidebar-treeview .main-treeview .icon-docs::before {
    content: '\e802';
}

.sidebar-treeview .main-treeview .icon-th::before {
    content: '\e803';
}

.sidebar-treeview .main-treeview .icon-code::before {
    content: '\e804';
}

.sidebar-treeview .main-treeview .icon-chrome::before {
    content: '\e807';
}

.sidebar-treeview .main-treeview .icon-up-hand::before {
    content: '\e810';
}

.sidebar-treeview .main-treeview .icon-bookmark-empty::before {
    content: '\e811';
}

.sidebar-treeview .main-treeview .icon-help-circled::before {
    content: '\e813';
}

.sidebar-treeview .main-treeview .icon-doc-text::before {
    content: '\e812';
}

.sidebar-treeview .main-treeview .icon-page-thin::before {
    content: '\e865';
}

/* For "Plus" sign (Add icon)*/
.e-addicon::before {
    content: '\e805';
}

/*For "trash" sign (delete icon)*/
.e-deleteicon::before {
    content: '\e820';
}

/* For "post/update" sign (post icon)*/
.e-posticon::before {
    content: '\e835';
}

/* For "check all" sign (tick all icon)*/
.e-checkallicon::before {
    content: '\e78e';
}

/* For "uncheck all" sign (untick all icon)*/
.e-uncheckallicon::before {
    content: '\e815';
}

/*  For "refresh" sign (refresh icon)*/
.e-refreshicon::before {
    content: '\e706';
}
/* custom code start */
.e-lib.e-grid .e-groupheadercell {
    font-size: 13px !important;
}

.e-lib.e-grid.e-wrap .e-rowcell, .e-lib.e-grid.e-wrap .e-columnheader .e-stackedheadercelldiv, .e-lib.e-grid.e-wrap .e-columnheader .e-headercelldiv {
    /*line-height:14px !important;*/
}

.e-grid .e-groupheadercell, .e-grid .e-groupheadercell:hover {
    font-size: 14px;
    font-weight: normal;
    margin-left: 10px;
    padding: 0px !important;
    cursor: pointer;
    height: 25px !important;
    border: 0px white solid !important;
}

    .e-grid .e-groupheadercell, .e-grid .e-groupheadercell:hover {
        width: 160px;
    }

        .e-grid .e-groupheadercell span {
            /*padding: 0px !important;*/
        }

.e-grid.e-wrap .e-gridheader .e-sortnumber {
    margin: 0px 8px 0 2px !important;
    margin: 0px 8px 0 2px !important;
    font-size: x-small;
    color: brown;
}

.e-grid .e-groupdroparea .e-icons {
    color: #f8f9fa !important;
}

.e-grid .e-groupheadercell {
    border-radius: 5px !important;
}

    .e-grid .e-groupheadercell .e-icons::before {
        /*margin-right: -12px !important;*/
    }

.e-grid .e-columnheader.e-wrap .e-sortfilterdiv, .e-grid.e-wrap .e-columnheader .e-sortfilterdiv {
    /*margin: -18px 2px !important;*/
}

.e-grid .e-groupdroparea {
    background: linear-gradient(to bottom,#f0f4f6,#2962932b) !important;
}

.e-grid td.e-active, .e-grid .e-form-titlebar {
    background: linear-gradient(to bottom,#e4e6ef9c,#b5b5c3c4) !important;
}

element.style {
    height: 28px;
}

.e-grid.e-resize-lines.e-default table th[rowspan], .e-grid.e-resize-lines.e-rtl.e-default table th[rowspan] {
    border-left: 0;
}

.e-grid.e-resize-lines th.e-headercell.e-stackedheadercell, .e-grid.e-resize-lines th.e-headercell.e-firstcell, .e-grid.e-resize-lines.e-rtl th.e-headercell.e-stackedheadercell, .e-grid.e-resize-lines.e-rtl th.e-headercell.e-firstcell {
    border-left: 0;
    border-right: 0;
    border-top: 0;
}

.e-grid.e-default .e-gridheader th.e-firstcell, .e-grid.e-default .e-gridheader th.e-laststackcell {
    border-left-style: solid;
    border-left-width: 1px;
}

.e-grid.e-default table th[rowspan] {
    border-width: 0 0 0 1px;
}

.e-grid .e-gridheader table th[rowspan], .e-grid.e-device .e-gridheader table th[rowspan] {
    vertical-align: middle !important;
}

.svg-icon-success {
    filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
}


.svg-icon-danger {
    filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
}

.badge {
    font-weight: 400 !important;
}

.e-lib.e-grid .e-rowcell {
    padding: 0px 5px !important;
}

.e-sortnumber {
    /*margin: 0px 4px 0px 2px !important;*/
}

.form-inline {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}

    .form-inline label {
        margin: 5px 10px 5px 0;
    }

    .form-inline input {
        vertical-align: middle;
        margin: 5px 10px 5px 0;
        padding: 10px;
        background-color: #fff;
        border: 1px solid #ddd;
    }

    .form-inline button {
        padding: 10px 20px;
        background-color: dodgerblue;
        border: 1px solid #ddd;
        color: white;
        cursor: pointer;
    }

        .form-inline button:hover {
            background-color: royalblue;
        }

/*
	Combo box dropdown template
*/
.header-label {
    text-transform: uppercase;
    font-size: 0.9rem;
    padding-left: 5px;
}

.body-label {
    font-size: 0.9rem;
    padding-left: 5px;
}

.e-input[disabled], .e-input-group .e-input[disabled], .e-input-group.e-control-wrapper .e-input[disabled], .e-input-group.e-disabled, .e-input-group.e-disabled input, .e-input-group.e-disabled input.e-input, .e-input-group.e-disabled textarea, .e-input-group.e-disabled textarea.e-input, .e-input-group.e-control-wrapper.e-disabled, .e-input-group.e-control-wrapper.e-disabled input, .e-input-group.e-control-wrapper.e-disabled input.e-input, .e-input-group.e-control-wrapper.e-disabled textarea, .e-input-group.e-control-wrapper.e-disabled textarea.e-input, .e-float-input.e-disabled input, .e-float-input.e-disabled textarea, .e-float-input input[disabled], .e-float-input input.e-disabled, .e-float-input textarea[disabled], .e-float-input textarea.e-disabled, .e-float-input.e-control-wrapper.e-disabled input, .e-float-input.e-control-wrapper.e-disabled textarea, .e-float-input.e-control-wrapper input[disabled], .e-float-input.e-control-wrapper input.e-disabled, .e-float-input.e-control-wrapper textarea[disabled], .e-float-input.e-control-wrapper textarea.e-disabled, .e-input-group.e-disabled span, .e-input-group.e-control-wrapper.e-disabled span {
    background-color: var(--bs-grey-100) !important;
}

.customdatepicker {
    font-family: Roboto, 'Playfair Display';
    height: inherit !important;
    padding: 5px !important;
    border-width: 1px !important;
    border-top-width: 1px !important;
    border-right-width: 1px !important;
    border-bottom-width: 1px !important;
    border-left-width: 1px !important;
    /*font: inherit;*/
    border-color: #ced4da !important;
    border-top-color: rgb(206, 212, 218) !important;
    border-right-color: rgb(206, 212, 218) !important;
    border-bottom-color: rgb(206, 212, 218) !important;
    border-left-color: rgb(206, 212, 218) !important;
    width: 100%;
    display: block;
    line-height: 1.908em;
    font-weight: 300;
    border-radius: 4px !important;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}

.txtcolor-warning {
    color: blue;
    font-weight: 900;
}
/* end of icon styles */


.e-reportviewer-viewer {
    height: 100% !important;
}

/* bold report theme correction */
.e-input-group.e-ddl {
    height: -webkit-fill-available !important; /*31px*/
}

.e-ddl.e-input-group .e-input-group-icon, .e-ddl.e-input-group .e-input-group-btn button {
    padding: 0px !important;
}

.e-toolbar {
    border: 0px;
}

.e-grid .e-groupdroparea {
    color: var(--bs-active-dark) !important;
    font-size: 13px !important;
}
/*Spinner background*/
.e-spinner-pane.e-spin-overlay {
    /*background-color: rgb(192,192,192,0.2) !important;*/
    background-color: rgba(0, 0, 0, 0.3) !important;
}

    .e-spinner-pane.e-spin-overlay .e-spinner-inner .e-spin-label {
        color: var(--bs-active-info) !important;
    }

    .e-spinner-pane.e-spin-overlay .e-spinner-inner .e-spin-bootstrap {
        /*fill: var(--warning-color-90);
        stroke: var(--warning-color-90);*/
        fill: #dc4949;
        stroke: #dc4949;
    }

.form-control {
    font-size: 0.9rem !important;
    font-weight: 400 !important;
    /* padding: inherit !important; */
    padding: 4px !important;
    min-height: 40px;
}

.input-group-text {
    padding: 0.375rem 0.75rem !important;
    font-size: 1.2rem !important;/*neo change from font-size: 0.9rem !important;*/
    font-weight: 700 !important;
    width: 30%;
    white-space: normal;
    text-align: left;
}
span.input-group-text.requiredfield:after {
    display: contents;
}
.input-group {
    /*margin-bottom: 0.5px;*/
    height: 100%;
}

wrapper input, .e-input-group input.e-input, .e-input-group.e-control-wrapper input.e-input {
    box-sizing: border-box;
    /*height: 10px;*/
}

.e-ddl.e-input-group {
    border-width: 0.5px !important;
    border-color: darkgray !important;
    font-weight: 400 !important;
    font-size: inherit !important;
}


.e-reportviewer-scrollcontainer {
    line-height: inherit !important;
}


.e-numeric.e-control-wrapper.e-input-group .e-input-group-icon {
    width: fit-content;
}


.e-tab {
    background: transparent;
    border: solid 0.3px var(--primary-color-50) !important;
}

    .e-tab .e-tab-header {
        background: #f5f8fa !important;
    }

        .e-tab .e-tab-header .e-toolbar-items {
            border-bottom: 1px solid blue;
        }

        .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
            /*color: var(--primary-color) !important;*/
        }

        .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
            color: #7e8299 !important;
        }

            .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover {
                background: #e8fff3 !important;
            }

        .e-tab .e-tab-header .e-toolbar-item.e-active.e-ileft .e-tab-text, .e-tab .e-tab-header .e-toolbar-item.e-active.e-iright .e-tab-text {
            color: var(--primary-color) !important;
            font-weight: 800 !important;
        }

.e-numeric, .e-percent, .e-currency, .e-mask {
    /*min-width: 120px !important;*/
}

.e-input-group .e-input-group-icon, .e-input-group.e-control-wrapper .e-input-group-icon {
    /*min-height: 25px !important;*/
}

/*Title Words Flipping Animation
    See "Enterprise resource Planning" in Index.razor
*/
.waviytext {
    position: relative;
    margin-top: -8px !important;
}

    .waviytext span {
        position: relative;
        display: inline-block;
        text-transform: uppercase;
        animation: flip 10s infinite;
        animation-delay: calc(.2s * var(--i))
    }

@keyframes flip {
    0%,80% {
        transform: rotateY(360deg)
    }
}

/* Tutorial on https://fossheim.io/writing/posts/css-text-gradient. */

.gradient-text-green {
    /* Fallback: Set a background color. */
    background-color: red;
    /* Create the gradient. */
    background-image: linear-gradient(360deg, #ffffff, #faff76, #17f700);
    /* Set the background size and repeat properties. */
    background-size: 100%;
    background-repeat: repeat;
    /* Use the text as a mask for the background. */
    /* This will show the gradient as a text color rather than element bg. */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
}

.page-title {
    margin-top: 1px !important;
    margin-bottom: 1px !important;
    background-color: #f0f2f5;
    padding: 2px 2px 2px 2px;
    font-size: large;/*neo change from font-size: large;*/
    text-transform: uppercase;
    font-weight: 600 !important;
}

/*Syncfusion popup dialog-header title*/
.dialogHeaderTitle {
    display: flex;
    align-items: center;
}

.e-toolbar .e-tbar-btn:focus .e-icons, .e-toolbar .e-tbar-btn:focus .e-tbar-btn-text {
    color: #f80018 !important;
    padding-bottom: 4px;
    font-weight: 600 !important;
}
/*
.e-virtualtable {
    position: sticky !important;
}*/


.e-dropdownbase .e-list-item, .e-dropdownbase .e-list-item.e-item-focus {
    font-size: 0.9rem !important;
}

.form-label {
    font-size: 0.9rem !important;
}

.gridSizeMasterFile {
    /* width: calc(100vw - 12rem); */
    height: calc(100vh - 18rem);
}

/Sticky content scroll control (For general listing grid)/
.gridSizeTransaction {
    /* width: calc(100vw - 12rem); */
    height: calc(100vh - 14rem);
}

/Sticky content scroll control (For Pre-Plan listing grid)/
.gridSizePrePlan {
    /* width: calc(100vw - 12rem); */
    height: calc(100vh - 25rem);
}

.e-search-icon::before {
    content: '\e754';
    font-family: e-icons;
}

/*Pivot Table custom*/
.e-pivotview .e-group-row .e-group-rows {
    display: grid;
    -ms-flex: inherit;
    flex: none;
    width: 100%;
    height: 100%;
}

.e-pivotview .e-grid .e-rowcell {
    font-size: 0.9rem !important;
}

.e-pivotview .e-grouping-bar .e-pivot-button .e-content, .e-pivotview .e-group-rows .e-pivot-button .e-content {
    font-size: 0.9rem;
}

e-pivotview .e-grid .e-rowcell {
    font-size: 0.9rem !important;
}

.e-pivotview .e-stackedheadercelldiv, .e-pivotview .e-stackedheadertext, .e-pivotview .e-headertext, .e-pivotview .e-rowsheader .e-cellvalue {
    font-size: 0.8rem;
}

.e-pivotview .e-grouping-bar .e-pivot-button, .e-pivotview .e-group-rows .e-pivot-button {
    padding: 5px 5px !important;
}	

.word-sharp {
    margin-top: 1px !important;
    margin-bottom: 1px !important;
    background-color: #f0f2f5;
    padding: 2px 2px 2px 2px;
    font-size: medium;
    text-transform: uppercase;
    font-weight: 1000 !important;
}

/*2023 10 06*/
/*Overwrite behavior of the Expand arrow in grid column*/
.e-grid .e-recordpluscollapse>div, .e-grid .e-detailrowcollapse>div, .e-grid .e-recordplusexpand>div, .e-grid .e-detailrowexpand>div {
    height: 2px !important;
    padding: 0px 0px 0px 5px !important;  
	font-size: 12px !important;
}

/*Special search button css*/
.mySearchButton {
    background-color: transparent;
    border-color: #ccc;
    height: 42px;
    width: 42px;
}

.blink_text {
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: blinker;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    animation-name: blinker;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    color: red;
}
.red_text {
    color: red;
}


/* Edited By Shi Xin */
.col-lg-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
}
.text {
    padding: 0.775rem 1rem !important;
}
span.input-group-text.input-group-text.col-xs-5.col-sm-5.col-lg-5.col-md-5.text {
    width: 41.66666667%;
}

span.input-group-text.input-group-text.col-xs-6.col-sm-6.col-lg-6.col-md-6.text {
    width: 50%;
}

span.input-group-text.col-xs-2.col-sm-2.col-lg-2.col-md-2 {
    width: 16.66666667%;
}

span.input-group-text.col-xs-1.col-sm-1.col-lg-1.col-md-1 {
    width: 7.4% !important;
    justify-content: center;
}

span.input-group-text.col-xs-5.col-sm-5.col-lg-5.col-md-5, span.input-group-text.col-xs-6.col-sm-6.col-lg-6.col-md-6 {
    padding: 0.775rem 1rem;
}
.e-customsize.e-checkbox-wrapper .e-frame {
    height: 25px;
    width: 25px;
    padding: 8px 0;
    border-color: #212121;
}

.e-customsize.e-checkbox-wrapper .e-check {
    font-size: 15px;
}

.e-customsize.e-checkbox-wrapper .e-ripple-container {
    height: 52px;
    top: -11px;
    width: 47px;
}

.e-customsize.e-checkbox-wrapper .e-label {
    line-height: 25px;
    font-size: 15px;
}

.col-7 {
    margin: auto !important;
}

/* radio button */
.radio-group {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.e-radio-wrapper.e-wrapper {
    width: -webkit-fill-available;
}

p.tnc {
    text-align: justify;
    margin: 3px 20px 4px 0px;
}

.e-ddl.e-input-group .e-clear-icon {
    justify-content: center !important;
}

.e-info {
    align-items: center;
    display: flex;
    height: 100%;
}

/* table list */
.e-grid.e-device .e-rowcell:first-child, .e-grid.e-device .e-summarycell:first-child {
    padding: 0px !important;
}

.e-grid.e-wrap .e-rowcell, .e-grid.e-wrap .e-columnheader .e-stackedheadercelldiv, .e-grid.e-wrap .e-columnheader .e-headercelldiv {
    text-indent: 1px;
}

/* dropdown list height */
.e-ddl.e-input-group input.e-combobox.e-input/*, input.e-control.e-textbox.e-lib.e-input*/ {
    height: 100% !important;
}

/* date picker */
input.e-control.e-datepicker.e-lib.e-input,
input.e-control.timepicker.e-lib.e-input,
input.e-control.e-timepicker.e-lib.e-input,
input.e-control.e-combobox.e-lib.e-input,
input.e-control.e-textbox.e-lib.e-input,
textarea.e-control.e-textbox.e-lib.e-input,
input.e-control.e-numerictextbox.e-lib.e-input,
input.e-control.e-dropdownlist.e-lib.e-input {
    /*text-indent: 4px !important;*/
    height: auto;
    min-height: 30px;
}

span.e-input-group-icon.e-spin-down,
span.e-input-group-icon.e-spin-up {
    height: 100%;
}

input.e-control.e-textbox.e-lib.e-searchinput.e-input,
input.e-search-icon.e-icons {
    height: 30px !important;
}

.cb {
    display: flex;
    justify-content: center;
    align-items: center;
}

    .cb .e-icons.e-frame {
        display: flex;
        justify-content: center;
    }

span.e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper.e-error.modified.invalid,
span.e-numeric.e-valid-input.e-input-group.e-control-container.e-control-wrapper.modified.invalid.e-error,
span.e-input-group.e-control-container.e-control-wrapper.e-valid-input.e-error.modified.invalid,
span.e-input-group.e-control-container.e-control-wrapper.e-append.e-error.modified.invalid,
span.e-input-group.e-control-container.e-control-wrapper.e-append.e-error.invalid,
span.e-control-container.e-control-wrapper.e-multi-line-input.e-input-group.e-error.invalid {
    /*height: calc(100% - 15px) !important;*/
    height: auto !important;
    margin-bottom: auto;
}

    span.e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper.e-error.modified.invalid input.e-control,
    span.e-numeric.e-valid-input.e-input-group.e-control-container.e-control-wrapper.modified.invalid.e-error input.e-control,
    span.e-input-group.e-control-container.e-control-wrapper.e-valid-input.e-error.modified.invalid input.e-control {
        height: auto; /* Allows input to take its natural height */
        min-height: 28px;
    }

    span.e-numeric.e-valid-input.e-input-group.e-control-container.e-control-wrapper.modified.invalid.e-error span.e-input-group-icon,
    span.e-input-group.e-control-container.e-control-wrapper.e-valid-input.e-error.modified.invalid span.e-input-group-icon {
        height: auto; /* Allows input to take its natural height */
    }



/* End */

@-moz-keyframes blinker {
    0% {
        opacity: 1.0;
    }

    50% {
        opacity: 0.03;
    }

    100% {
        opacity: 1.0;
    }
}

@-webkit-keyframes blinker {
    0% {
        opacity: 1.0;
    }

    50% {
        opacity: 0.03;
    }

    100% {
        opacity: 1.0;
    }
}

@keyframes blinker {
    0% {
        opacity: 1.0;
    }

    50% {
        opacity: 0.03;
    }

    100% {
        opacity: 1.0;
    }
}

@media (min-height: 500px) {
    .backgroundimg {
        min-height: 345px !important
    }
}

@media (min-height: 600px) {
    .backgroundimg {
        min-height: 420px !important
    }
}

@media (min-height: 700px) {
    .backgroundimg {
        min-height: 600px !important
    }
    /*20221007-remove tis css, cz it will show a duplicate record at bottom record list at grid when delete record
        after put EnableVirtualization="true" at each sfgrid
    */
    /*.e-virtualtrack {
         height: 450px !important;
    }*/
}

@media (min-height: 800px) {
    .backgroundimg {
        min-height: 616px !important
    }
    /*syncfusion enablestickyheader */
    /*20221007-remove tis css, cz it will show a duplicate record at bottom record list at grid when delete record
        after put EnableVirtualization="true" at each sfgrid
    /*.e-virtualtrack {
         height: 550px !important;
    }*/
}

@media (min-height: 900px) {
    .backgroundimg {
        min-height: 718px !important
    }
    /*20221007-remove tis css, cz it will show a duplicate record at bottom record list at grid when delete record
        after put EnableVirtualization="true" at each sfgrid
   /* .e-virtualtrack {
         height: 750px !important;
    }*/
}

@media (min-height: 992px) {
    .backgroundimg {
        min-height: 895px !important
    }

    /*20221007-remove tis css, cz it will show a duplicate record at bottom record list at grid when delete record
        after put EnableVirtualization="true" at each sfgrid
    /*.e-virtualtrack {
        height: 750px !important;
    }*/
}

@media (min-height: 1180px) {
    .backgroundimg {
        min-height: 1016px !important
    }
    /*20221007-remove tis css, cz it will show a duplicate record at bottom record list at grid when delete record
        after put EnableVirtualization="true" at each sfgrid
    /*.e-virtualtrack {
         height: 950px !important;
    }*/
}

@media (max-width: 800px) {
    .form-inline input {
        margin: 10px 0;
    }

    .form-inline {
        flex-direction: column;
        align-items: stretch;
    }
}


/* Edited By Shi Xin */

/* Mobile */
@media screen and (min-width: 320px) and (max-width: 480px) {

    /* login - layout */
    .p-10 {
        padding: 2% 3% !important;
    }

    /* login - form layout */
    .p11 {
        padding: 1rem 1.3rem !important;
    }

    .card.overflow-hidden {
        margin: -0.3rem 0;
    }

    /* login - welcome back layout */
    .text-active-dark.p-4.mt-3 {
        margin: 0.75rem 0 1rem 0.25rem;
    }

    /* login - company name layout */
    form.form-horizontal {
        margin: -8px;
    }

    /* login - welcome back image */
    @media screen and (min-width: 320px) and (max-width: 351px) {
        .img-fluid {
            z-index: 1;
            position: relative;
            margin: 0 -45%;
            min-width: 140%;
            max-width: 150%;
        }
    }

    /*@media screen and (min-width: 352px) and (max-width: 382px) {
        .img-fluid {
            z-index: 1;
            position: relative;
            margin: 0 -35%;
            max-width: 140%;
        }
    }*/

    @media screen and (min-width: 352px) and (max-width: 382px) {
        .img-fluid {
            z-index: 1;
            position: relative;
            margin: 0 -40%;
            min-width: 130%;
            max-width: 140%;
        }
    }

    /*@media screen and (min-width: 352px) and (max-width: 382px) {
        .img-fluid {
            z-index: 1;
            position: relative;
            margin: 0 -20%;
            max-width: 120%;
        }
    }*/

    @media screen and (min-width: 383px) and (max-width: 413px) {
        .img-fluid {
            z-index: 1;
            position: relative;
            margin: 0 -30%;
            min-width: 100%;
            max-width: 130%;
        }
    }

    /* login - term of use checkbox */
    .e-customsize.e-checkbox-wrapper .e-frame {
        height: 20px !important;
        width: 20px !important;
        padding: 3px 0 !important;
    }

    /* login - term of use checkbox */
    .e-customsize.e-checkbox-wrapper .e-label {
        line-height: 14px;
        margin-left: 6px;
    }

    /* login - term of use checkbox */
    span.e-icons.e-frame.e-check::before {
        font-size: 13px !important;
    }

    /* login - term of use text */
    p.tnc {
        font-size: 11px;
        letter-spacing: -0.5px;
    }

    /* login - system logo */
    img.rounded-circle {
        height: 45px;
    }

    .avatar-md {
        height: 3.5rem !important;
        width: 3.5rem !important;
    }

    .mb-4 {
        margin-bottom: 0.75rem !important;
    }

    /* login - company name */
    label.e-headertext {
        font-size: 11px;
    }

    /* login - input fields */
    input#UserIdInput, input#PasswordInput {
        height: 30px !important;
        min-height: auto;
    }

    /* login - unhide password button */
    button#password-addon {
        padding: calc(0.25rem + 1px) calc(1.5rem + 1px);
    }

    /* login - login button */
    button#kt_sign_in_submit {
        padding: calc(0.5rem + 1px) calc(1.75rem + 1px);
    }

    .mb-5 {
        margin-bottom: 0 !important;
    }

    .pb-4 {
        padding-bottom: 0 !important;
    }

    .mt-2.text-left.pb-4 {
        margin-bottom: 0.6rem !important;
    }

    /* left side bar */
    .svg-icon.svg-icon-1 svg {
        width: 1.5rem !important;
        height: 1.5rem !important;
    }

    .me-2 {
        margin-right: 0 !important;
    }

    /* navbar system logo */
    .h-30px {
        height: 30px !important;
    }

    /* navbar company name */
    @media screen and (min-width: 320px) and (max-width: 409px) {
        #comName {
            font-size: 9px;
            white-space: normal;
            max-width: 125px; /* 30% */
            text-align: right;
        }
    }

    @media screen and (min-width: 320px) and (max-width: 435px) {

        /* hide theme icon */
        a.btn.btn-icon.btn-custom.btn-icon-muted.btn-active-light.btn-active-color-primary.w-35px.h-35px.w-md-40px.h-md-40px {
            display: none;
        }

        /* user icon */
        .symbol.symbol-35px > img {
            margin-left: 10px;
            width: 30px;
            height: 30px;
        }
    }

    .menu.menu-sub.menu-sub-dropdown.menu-column.menu-rounded.menu-gray-800.menu-state-bg.menu-state-primary.fw-semibold.py-4.fs-6.w-275px.show {
        inset: 0px 0px auto 65px !important;
    }

    /* WIP - layout */
    .app-container {
        padding: 0 10px !important;
    }

    /* WIP - footer */
    div#kt_app_footer {
        display: none;
    }

    /* WIP - input label */
    .input-group-text {
        width: 95px; /* 34% */
        white-space: normal;
        text-align: left;
    }

    .form-control {
        min-height: 40px;
    }

    /* WIP - required field */
    .requiredfield:after {
        display: contents;
    }

    /* WIP - input field */
    .e-input-group, .e-input-group.e-control-wrapper, .e-float-input, .e-float-input.e-input-group, .e-float-input.e-control-wrapper, .e-float-input.e-input-group.e-control-wrapper {
        height: 100%;
    }

    /* WIP - dropdown list content */
    .form-output {
        max-width: 70px;
    }

    /* WIP - search list button */
    #EditFormCancelButton, #EditFormSaveButton {
        top: 5px;
        padding: calc(0.775rem) calc(1.5rem);
    }

    /* WIP - search list search icon */
    span.e-search-icon.e-icons {
        margin-left: 13px;
    }

    /* WIP - search list page selection */
    .e-pager.e-adaptive .e-pagerdropdown {
        min-width: 60px;
        margin: 10px 2px 0 -14px;
    }

    .e-pager .e-spacing, .e-pager .e-numericitem:hover, .e-pager .e-currentitem {
        margin: 0px -5px !important;
    }

    /* Preplan - checkbox */
    .e-info {
        /*margin: 18px 9px;*/
    }

    span.input-group-text.mm {
        justify-content: right;
        width: auto;
    }

    .e-radio + label .e-label {
        font-size: 0.9rem;
    }
}


/* Tablet */
@media screen and (min-width: 481px) and (max-width: 768px) {

    /* login - layout */
    .p-10 {
        padding: 5% !important;
    }

    /* login - textbox form layout */
    .p11 {
        padding: 5% 6% !important;
    }

    /* login - welcome back layout */
    .mt-3 {
        vertical-align:middle;
        margin: 1.25rem 0 1.25rem 0;
    }

    /* login - term of use checkbox */
    .e-customsize.e-checkbox-wrapper .e-frame {
        height: 20px !important;
        width: 20px !important;
        padding: 4px 0 !important;
    }

    /* login - term of use checkbox */
    .e-customsize.e-checkbox-wrapper .e-label {
        line-height: 14px;
    }

    /* login - term of use checkbox */
    span.e-icons.e-frame.e-check::before {
        font-size: 13px !important;
    }

    /* login - term of use text */
    p.tnc {
        font-size: 13px;
        text-align: justify;
        margin: 3px 20px 5px 0px;
    }
}


/* Laptop */
@media screen and (min-width: 769px) and (max-width: 1024px) {
}


/* Desktop */
@media screen and (min-width: 1025px) and (max-width: 1200px) {
}


/* TV */
@media screen and (min-width: 1200px) {
}