/*
@media only screen and (max-width: 480px), only screen and (max-height: 480px) { body { font-size: 10px; } }
@media only screen and (min-width: 481px) and (min-height: 481px) { body { font-size: 16px; } }
@media only screen and (min-width: 600px) and (min-height: 600px) { body { font-size: 18px; } }
@media only screen and (min-width: 700px) and (min-height: 700px) { body { font-size: 20px; } }
@media only screen and (min-width: 800px) and (min-height: 800px) { body { font-size: 24px; } }
*/

/* Background color! */
body,
.RadGrid,
.RadGrid .rgHeader,
.RadGrid .rgFooter,
.RadGrid .rgCommandRow,
.RadGrid .rgEditForm,
.RadGrid .rgRow > td,
.RadGrid .rgAltRow > td,
.RadGrid .rgEditRow > td,
.RadWindow, .rwContent, .rwTitleBar,
.resultsDialog 
{
    /* LightGrayish (with Blue) */
    background: #e1ebf4 !important;
}

/* Color! */
    body,
    .RadGrid,
    .RadGrid .rgHeader,
    .RadGrid .rgCommandRow,
    .RadGrid .rgEditForm,
    .RadGrid .rgRow > td,
    .RadGrid .rgAltRow > td,
    .RadGrid .rgEditRow > td,
    /*.RadGrid .rgFooter > td,*/
    .RadWindow, .rwContent, .rwTitleBar,
    input,
    .textBox,
    .datePicker,
    .codeTextBox,
    select.dropDownList,
    select.codeList,
    select.projectList,
    select.activityList,
    div.resultsDialog {
        color: #555555 !important;
    }

@media only screen and (max-width: 360px) { body { font-size: 10px; /*color: White !important; background-color: Blue !important;*/ } }
@media only screen and (min-width: 361px) { body { font-size: 10px; /*background-color: Yellow !important;*/ } }
@media only screen and (min-width: 768px)  and (min-height: 470px) { body { font-size: 11px; /*color: White !important; background-color: Green !important;*/ } }
@media only screen and (min-width: 768px)  and (min-height: 500px) { body { font-size: 12px; } }
@media only screen and (min-width: 768px)  and (min-height: 530px) { body { font-size: 13px; } }
@media only screen and (min-width: 768px)  and (min-height: 560px) { body { font-size: 14px; } }
@media only screen and (min-width: 768px)  and (min-height: 620px) { body { font-size: 16px; } }
@media only screen and (min-width: 1024px) and (min-height: 680px) { body { font-size: 18px; } }
@media only screen and (min-width: 1280px) and (min-height: 740px) { body { font-size: 20px; } }
@media only screen and (min-width: 1400px) and (min-height: 800px) { body { font-size: 22px; } }
@media only screen and (min-width: 1800px) and (min-height: 940px) { body { font-size: 26px; } }
@media only screen and (min-width: 1900px) and (min-height: 1100px) { body { font-size: 32px; } }

html,
body,
form 
{
    /*font-size: 10px;*/
    margin: 0;
    padding: 0;
    height: 100%;
}

#wrapper
{
    /*padding: 20px;*/
    padding-top: 1em;
}

#wrapper .header {
    /*background-color: #2a2d33;*/
    padding: 10px 0;
    margin-left: 1em;
    margin-right: 1em;
    /*margin-bottom: 40px;*/
}

/*
#wrapper .header .RadMenu {
    margin: 10px 0;
    float: none;
    background: yellow !important;
}
*/

/* Main menu item */
.rmItem
{
    font-size: 2em;
}

#wrapper .hcenter {
    display: flex;
    justify-content: center;    /* for horizontal alignment */
    text-align: center;
}

#wrapper .rightalign label {
    display: flex;
    justify-content: right;    /* for horizontal alignment */
    text-align: right;
}

#wrapper .vcenter {
    height: 100%;

    display: flex;
    align-items: center;        /* for vertical alignment */
}

#wrapper .logo img {
    max-width: 100%;
}

#wrapper .logo_userName 
{
/*
    margin: none;
    margin: 10px 0;
*/
    margin-left: 20px;
    max-width: 100%;
    font-size: 1.5em;
}

#wrapper .dateTime {
    font-size: 2em;
    text-align: right;
    white-space: nowrap;
}

#wrapper .jumbotron {
    padding: 1.875em;
    padding-top: 1em;
    background-color: #e9eaea;
}

#wrapper .jumbotron .RadButton {
    float: right;
    margin-top: .667em;
    font-size: .5em;
}

#wrapper .footer {
    width:100%;
    /*padding: 30px 15px;
    line-height: 30px;*/
    line-height: 1.3em;
    
    text-align:right;
    position: absolute;
    bottom: 5px;
    left: 0;
}

#wrapper .deviceSize {
    text-align:left;
    position: absolute;
    bottom: 13px;
    left: 10px;
}

#wrapper .idle {
    height: 100%;

    display: flex;
    flex-wrap: wrap;            /* optional. only if you want the items to wrap */
    justify-content: center;    /* for horizontal alignment */
    /*align-items: center;        / * for vertical alignment */
    text-align: center;
}

#wrapper .idleClock {
    height: 5em;
}

#wrapper .content {
    margin-top: 20px;
/*
    margin-left: 1em;
    margin-right: 1em;
*/
}

#wrapper .content {
}

@media only screen and (max-width: 480px) {
    #wrapper .content {
        margin-left: -2em;
        margin-right: -2em;
        padding-bottom: -5em;
    }
    #wrapper .footer {
        padding-top: 2em;
    }
}

@media only screen and (min-width: 481px) {
    #wrapper .content {
        margin-left: 2em;
        margin-right: 2em;
    }
    #wrapper .footer {
    }
}

/* For testing purposes */
/* * /
#wrapper
{
    background-color: Red;
}
#wrapper .content {
    background-color: Yellow;
}
#wrapper .view {
    background-color: Blue;
}
/ * */


/* To center
    display: flex;
    flex-wrap: wrap;            / * optional. only if you want the items to wrap * /
    justify-content: center;    / * for horizontal alignment * /
    align-items: center;        / * for vertical alignment * /
*/

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px !important;
 }

 /* Track */
::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3) !important;
   -webkit-border-radius: 10px !important;
   border-radius: 10px !important;
 }

 /* Handle */
 ::-webkit-scrollbar-thumb {
   -webkit-border-radius: 10px !important;
   border-radius: 10px !important;
   background: silver !important; 
   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5) !important; 

 }
 ::-webkit-scrollbar-thumb:window-inactive {
   background: silver !important; 
 }

#wrapper .view {
    overflow: auto;
    margin-top: 10px;
}

/* Center view  content */
#wrapper .view 
{
    display: flex;
    justify-content: center;
}

/* If tabstrip should be centered */
/*
.RadTabStrip
{
    text-align: center;
}
*/

.touchRadTab
{
}

.mobileRadTab
{
    font-size: 1.3em;
}

/* If tabstrip should be centered and stretched to 100% */
/**/
.rtsUL {
    display: flex;
}
.rtsLI {
    flex: 1 0 auto;
    text-align: center;
}
/**/

.RadGrid
{
    margin-top: 8px !important;
    white-space: nowrap;
}

.RadGrid .rgFooter > td,
.RadGrid .rgNoRecords > td
{
    padding-top: 2em !important;
}

div.RadGrid
{
    /*display: inline-block !important;
    background-color: Red !important;*/
}
.RadGrid .rgMasterTable
{
    /*margin-left: auto !important;
    margin-right: auto !important;*/
}

.RadGrid,
.RadGrid .rgFooter > td,
.RadGrid .rgRow > td,
.RadGrid .rgAltRow > td,
.RadGrid .rgEditRow > td {
    border: 0 !important;
    outline: none !important;
}

.RadGrid .rgHeader
{
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
}

.RadGrid .rgHeader,
.RadGrid .rgCommandRow,
.RadGrid .rgEditForm
{
    font-size: 1.5em !important;
    background-image: none !important;
    /*box-shadow: none !important;*/
}

/*.RadGrid,*/
.RadGrid .rgNoRecords > td,
.RadGrid .rgFooter > td,
.RadGrid .rgRow > td,
.RadGrid .rgAltRow > td,
.RadGrid .rgEditRow > td
/*.RadGrid .rgHeader,
.RadGrid .rgCommandRow */
{
    font-size: 1.2em !important;
    line-height: 1em !important;
    padding: 0.5em !important;
    /*background-color: Yellow !important;*/
}

.RadGrid .rgCommandCell
{
    padding-bottom: 0.6em !important;
}

/*.textBox,*/
.codeTextBox,
div.dropDownList,
div.codeList,
div.projectList,
div.activityList {
    display: inline-block;
    font-size: 1em;
}
.textBox,
.codeTextBox,
select.dropDownList,
select.codeList,
select.projectList,
select.activityList {
    /*background: transparent;*/
    border: 1px solid #7c7c7c !important;
    border-radius: 0.1em;
    background-color: #fcfcfc;
}
.riTextBox {
    padding: 0px 0px 0px 3px !important;
    font-weight: normal !important;
    border: 1px solid #7c7c7c !important;
    border-radius: 0.1em !important;
    background-color: #fcfcfc !important;
}
select.dropDownList,
select.codeList,
select.projectList,
select.activityList {
    min-width: 5em;
}
.codeTextBox
{
    width: 2.5em;
}

label span {/* <-- style the artificial checkbox */
    background-color: #fcfcfc !important;
}

div.registerViewPersInfo
{
    text-align: center;
    padding-top: 1em;
}

div.editItem
{
    /*
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 5em;
    background-color: Yellow;
    */
}

.editItem td
{
    padding: 5px;
}

div.toolBar {
    font-size: 1.875em;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 3em;
}
div.toolBarButtonSeparator {
    width: 3em;
}

div.resultsDialog,
div.errorContent
{
    height: 100%;
    display: flex;
    flex-wrap: wrap; /* optional. only if you want the items to wrap */
    justify-content: center; /* for horizontal alignment */
    align-items: center; /* for vertical alignment */
    text-align: center;
    font-size: 1.5em;
}

div.errorContent 
{
    font-size: 1.5em !important;
}

div.resultsIcon
{
    position: absolute;
    top: 40%;
    left: 15%;
    font-size: 2em;
    font-weight: bold;
}

.lblOk
{
    color: Green;
}
.lblError
{
}
.lblNotOk {
    color: red;
}

td.resultsTitle
{
    padding: 0.5em !important;
}

td.resultsText
{
    padding: 0.5em !important;
}


div.refreshExpander,
div.cancelExpander
{
    position:relative;
    height: 5em;
    width: 5em;
/*
    border-radius: 50%;
    border: 0.2em solid Yellow;
*/
}

div.refreshExpander
{
    left:-1em;
    bottom:1em;
}

div.cancelExpander
{
    right:2em;
    bottom:1em;
}

div.refresh
{
    position:absolute;
    /*left:2em;
    bottom:2.5em;*/
    left:1em;
    bottom:4em;
    height: 1.2em;
    width: 1.2em;
    /*border: 0.2em solid #e1ebf4;*/
    border: 0.2em solid #696969;
    border-right-color: transparent;
    border-radius: 50%;
}
div.refresh::after
{
    position:absolute;
    display:block;
    content:"";
	width: 0; 
	height: 0; 
    left: 1em;
    top: -0.2em;
	border-top:  0.5em solid transparent;
	border-bottom:  0.5em solid transparent;
	/*border-left:  0.5em solid #e1ebf4;*/
	border-left:  0.5em solid #696969;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
/*        
div.cancel
{
    position:absolute;
    right:2em;
    bottom:2em;
}
*/

div.cancel
{
    position:absolute;
    /*right:2em;
    bottom:2.5em;*/
    right:1.5em;
    bottom:4em;
    height: 1.5em;
    width: 1.5em;
    /*border: 0.2em solid #e1ebf4;*/
    border: 0.2em solid #696969;
    border-radius: 50%;
}

div.cancel::before,
div.cancel::after
{
    position:absolute;
    display:block;
    content:"";
    width: 1em;
    /*height: 0.1em;*/
    height: 0.05em;
    /*background-color: #e1ebf4;
    border: 0.1em solid #e1ebf4;*/
    background-color: #696969;
    border: 0.1em solid #696969;

    left: 0.15em;
    top: 0.6em;
}
div.cancel::before
{
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
div.cancel::after
{
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}


#invisibleButton
{
    width:0;
    height:0;
    border: none;
    background-color: transparent;
}
#invisibleButton:focus
{
    outline: none;
}

progress
{
    position: relative;
    bottom: -0.55em;

    background: silver;
    color: #767676;
    width: 100%;
    border: none;
    height: 2px;
    display: flex;
    justify-content: center;    /* for horizontal alignment */
}
progress::-moz-progress-bar { background: silver; }
progress::-moz-progress-value { background: #767676; }
progress::-webkit-progress-bar { background: silver; }
progress::-webkit-progress-value { background: #767676; }

.centerLoading
{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -30px; /* make this half your image/element height */
    margin-left: -30px; /* make this half your image/element width */
}

.btnIn,
.btnOut {
    font-size: 1.2em !important;
    color: White !important;
    width: 5em !important;
    height: 2.2em !important;
}

.btnIn {
    background-color: green !important;
    background-image: linear-gradient(green,green) !important;
    /*
    background-color: #060 !important;
    background-image: linear-gradient(lightgreen,#060) !important;
    */
}

.btnOut {
    background-color: #d00000 !important;
    background-image: linear-gradient(#d00000,#d00000) !important;
    /*
    background-color:#d00000 !important;
    background-image:linear-gradient(#ffb0b0,#d00000) !important;
    */
}

.btnOk,
.btnCancel
{
    font-size: 0.8em !important;
}

.btnOk {
    color: Green !important;
}

.btnCancel
{
    /*color:#d00000 !important;*/
}

.btnNew 
{
}

.btnEdit
{
}

.btnNoteEdit {
}

.btnDel
{
}

.panelNote{
    font-size: 1.2em;
}
.tableNote {
}

.tableNoteSymbolTD {
    width: 10px;
    padding-right: 12px;
}

.tableNoteTD {
}

.tableNoteBtnTD {
    width: 10px;
    padding-right: 10px;
    text-align: right;
    white-space: nowrap;
}

#overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: White;
    opacity: 0.5;
    z-index: 2;
}

/*
*/

/* Temporary fix to make confirm delete dialog to look ok */

@media only screen and (max-width: 360px) {
    .RadWindow {
        width: 240px !important;
        height: 160px !important;
    }
}

@media only screen and (min-width: 361px) {
    .RadWindow {
        width: 240px !important;
        height: 160px !important;
    }
}

@media only screen and (min-width: 768px) and (min-height: 470px) {
    .RadWindow {
        width: 280px !important;
        height: 180px !important;
    }
}

@media only screen and (min-width: 768px) and (min-height: 500px) {
    .RadWindow {
        width: 300px !important;
        height: 190px !important;
    }
}

@media only screen and (min-width: 768px) and (min-height: 530px) {
    .RadWindow {
        width: 340px !important;
        height: 200px !important;
    }
}

@media only screen and (min-width: 768px) and (min-height: 560px) {
    .RadWindow {
        width: 360px !important;
        height: 220px !important;
    }
}

@media only screen and (min-width: 768px) and (min-height: 620px) {
    .RadWindow {
        width: 380px !important;
        height: 240px !important;
    }
}

@media only screen and (min-width: 1024px) and (min-height: 680px) {
    .RadWindow {
        width: 400px !important;
        height: 250px !important;
    }
}

@media only screen and (min-width: 1280px) and (min-height: 740px) {
    .RadWindow {
        width: 400px !important;
        height: 280px !important;
    }
}

@media only screen and (min-width: 1400px) and (min-height: 800px) {
    .RadWindow {
        width: 500px !important;
        height: 300px !important;
    }
}

@media only screen and (min-width: 1800px) and (min-height: 940px) {
    .RadWindow {
        width: 600px !important;
        height: 340px !important;
    }
}

@media only screen and (min-width: 1900px) and (min-height: 1100px) {
    .RadWindow {
        width: 630px !important;
        height: 380px !important;
    }
}

.RadWindow .rwContent,
.RadWindow .rwTitleBar {
    font-size: 1.2em;
}

.RadWindow .rwDialogButtons{
    text-align: center !important;
}

.RadTabStrip_Default .rtsLevel2 .rtsSelected .rtsLink .rtsTxt,
.RadTabStrip_Default .rtsLevel2 .rtsSelected .rtsLink .rtsTxt:hover {
    color: #333 !important;
}

.RadTabStrip_Default .rtsLevel1 ~ .rtsLevel .rtsLink .rtsTxt {
    color: slategray;
}