/*----------------------------------------------------------
The base color for this template is #5c87b2. If you'd like
to use a different color start by replacing all instances of
#5c87b2 with your new color.
----------------------------------------------------------*/
body {
   
    font-size: .85em;
    font-family: Trebuchet MS, Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
    color: #000000;
}

a:link {
    color: #999999;
    text-decoration: none;    
}

a:visited {
    color: #666666;
}

a:not(.disabledButton):hover {
    color: #ff0000 !important;
    text-decoration: none;    
}

a:active {
    color: red;
}

p, ul {
    margin-bottom: 20px;
    /*line-height: 1.6em;*/
}

header,
footer,
nav,
section {
    display: block;
}

/* HEADINGS   
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
    font-size: 1.5em;
    color: #000;
}

h1 {
    font-size: 1.5em;
    padding-bottom: 0;
    padding-left:15px;
    margin-bottom: 15px;     
    background-image: url(../Content/Images/icons.png);    
    background-repeat:no-repeat;
    background-position: -10px -70px;
}

h2 {
    font-size: 1em;
}

h3 {
    font-size: 1em;    
}

h4 {
    font-size: 0.3em;
}

h5, h6 {
    font-size: 0.2em;
}

/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

/* you can specify a greater or lesser percentage for the 
page width. Or, you can specify an exact pixel width. */
.page {
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width: 1024px) {
    .page {
        width: 98%;
    }
}

header, #header {
    position: relative;    
    margin-bottom: 0px;
    color: #000;
    padding: 0;
}

header h1, #header h1 {
    font-weight: bold;
    padding: 5px 0;
    margin: 0;
    color: #fff;
    border: none;
    line-height: 2em;
    font-size: 38px !important;
    text-shadow: 1px 1px 2px #111;
}

#main {
    padding: 10px 5px 10px 5px;    

    /* DO NOT REMOVE THIS */
    border-left: 1px solid rgba(2, 2, 2, 0.28);
    border-right: 1px solid rgba(2, 2, 2, 0.28);
    border-top: 1px solid #2fb88a;
    border-radius: 10px 10px 0 0;    
    box-shadow: 0 0 5px rgba(1, 1, 1, 0.7);
}

footer, 
#footer {
    background-color: #fff;
    color: #999;
    padding: 10px 0 10px 0;
    text-align: center;
    line-height: normal;
    margin: 0 0 30px 0;
    margin-top: 20px;
    font-size: .9em;
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;
    border-top: 1px solid #ccc;
    display: table;
    width: 100%;
}

    #footer .section {
        display: table-cell;
        padding: 2px;
        vertical-align: top;
    }

@media screen and (max-width: 600px) {
    #footer {
        display: block;
    }

        #footer .section {
            display: block;
            width: 100%;
            padding-top: 6px;
        }
}

/* TAB MENU   
----------------------------------------------------------*/
ul#menu {   
    padding: 0 10px 0 0;
    position: relative;
    margin: 0;    
    text-align: right;
    background-color: white; 
    list-style: none;
}

ul#menu li {
    display: inline;    
}

ul#menu li#greeting {
    padding: 10px 20px;
    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    color: #fff;
}

ul#menu li a {
    padding: 10px 10px;
    font-weight: bold;
    text-decoration: none;
    line-height: 2.7em;    
    color: #999999;
}

    ul#menu .currentPage {
        color: #2fb88a; /*#0070C0;*/
        
        border-right: 1px solid #2fb88a;
        border-left: 1px solid #2fb88a;
        border-top: 1px solid #2fb88a;
        border-bottom: 2px solid white;
    }

ul#menu li a:hover {
    background-color: #2fb88a; /*#0070C0;*/
    color:#FFFFFF !important;
    text-decoration: none;
}

ul#menu li a:active {  
    text-decoration: none;
}

ul#menu li.selected a {
    background-color: #fff;
    color: #000;
}

/*Sub-menu comes here*/
ul#menu li ul {
    display:none;
    position:absolute;     
    right:10px;    
    padding: 0;
    background-color:rgba(216, 234, 213, 0.9);    
    
    border-bottom: 1px solid rgba(2, 2, 2, 0.28);
    border-left: 1px solid rgba(2, 2, 2, 0.28);
    border-right: 1px solid rgba(2, 2, 2, 0.28);    
    border-radius: 5px 0 10px 10px;    
    box-shadow: 2px 2px 5px rgba(1, 1, 1, 0.7);
    z-index:9999;
}

ul#menu li ul li {    
    display:block;    
    position:relative;   
    /*border-top: dashed 1px yellow;*/    
}

ul#menu li:hover ul {
    display: block;    
}

ul#menu li:hover li {        
}

ul#menu li:hover li:hover {
    background-color:#2fb88a;    
    /*padding: 5px 5px;
    line-height:2.7em;*/
}

ul#menu li:hover li a {    
    color:#7f62c1;
    font-size: 12px;
}

ul#menu li:hover li a:hover {
    background-color: #2fb88a;    
    font-size:12px; 
    line-height:none;   
    padding-top:0px;
    padding-bottom:0px;
}

ul#menu li:hover li a.currentPage {      
    border:none;
    padding-top:0px;
    padding-bottom:0px;  
}

.adminMenu {
    background-image: url("../Content/Images/icons.png");
    background-position: 93px -73px;
    background-repeat: no-repeat;        
}


/* Site Path Nagivation
----------------------------------------------------*/

.divSitePath {
    border-bottom:solid 1px #ccc;
}

.breadcrumb {
    /*font: 18px Helvetica,Arial,Sans-Serif;*/
    list-style: none outside none;
    overflow: hidden;

    line-height: none;    
    padding-left:2px;        
    margin-top:0px;
    margin-bottom:6px;    
}

.breadcrumb li {
    float: left;
}
.breadcrumb li a {
    background: none repeat scroll 0 0 #2fb88a; /*#0070C0; */
    color: #FFFFFF;
    display: block;
    float: left;
    padding: 4px 0 4px 40px;
    position: relative;
    text-decoration: none;
}   

.breadcrumb li a:after {
    border-bottom: 50px solid rgba(0, 0, 0, 0);
    border-left: 30px solid #2fb88a;
    border-top: 50px solid rgba(0, 0, 0, 0);
    content: " ";
    display: block;
    height: 0;
    left: 100%;
    margin-top: -50px;
    position: absolute;
    top: 50%;
    width: 0;
    z-index: 2;
}
.breadcrumb li a:before {
    border-bottom: 50px solid rgba(0, 0, 0, 0);
    border-left: 30px solid #FFFFFF;
    border-top: 50px solid rgba(0, 0, 0, 0);
    content: " ";
    display: block;
    height: 0;
    left: 100%;
    margin-left: 1px;
    margin-top: -50px;
    position: absolute;
    top: 50%;
    width: 0;
    z-index: 1;
}
.breadcrumb li:first-child a {
    padding-left: 10px;
}
.breadcrumb li:nth-child(2) a {
    background: none repeat scroll 0 0 #7f62c1; /*#0082E1; */
}
.breadcrumb li:nth-child(2) a:after {
    border-left-color: #7f62c1;
}
.breadcrumb li:nth-child(3) a {
    background: none repeat scroll 0 0 #977ecf; 
}
.breadcrumb li:nth-child(3) a:after {
    border-left-color: #977ecf; 
}
.breadcrumb li:nth-child(4) a {
    background: none repeat scroll 0 0 #b4a5d6;  
}
.breadcrumb li:nth-child(4) a:after {
    border-left-color: #b4a5d6;
}
.breadcrumb li:nth-child(5) a {
    background: none repeat scroll 0 0 #e5daff;
}
.breadcrumb li:nth-child(5) a:after {
    border-left-color: #e5daff;
}
.breadcrumb li:last-child a {
    background: none repeat scroll 0 0 #e5daff;
    cursor: default;    
    pointer-events: none;
    color:black !important;    

    /*background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
    color: #000000;
    cursor: default;    
    pointer-events: none;*/    
}

    /*.breadcrumb li:last-child a:first-letter {
        font-family: 'Great Vibes', cursive !important;
        font-size: 19px !important;
    }*/
.breadcrumb li:last-child a:after {
    border-left-color: #e5daff;
    /*border: 0 none;*/
}
.breadcrumb li a:hover {
    background: none repeat scroll 0 0 #DFF1FF;
    color:red !important;
}
.breadcrumb li a:hover:after {
    border-left-color: #DFF1FF !important;
}


/* FORM LAYOUT ELEMENTS   
----------------------------------------------------------*/

fieldset {
    border: 1px solid #ddd;
    margin-bottom: 10px;    
}

legend {
    font-size: 1.2em;
    font-weight: bold;
}

.expandCollapseLegend {    
    color: #999999;
    text-decoration: none;    
    padding-left:24px;
}

.expandCollapseLegend:hover {    
    color: red;
    text-decoration: none;
    cursor:pointer;
}

textarea {
    min-height: 75px;
}

input[type="text"], 
input[type="password"] {
    border: 1px solid #ccc;
    padding: 2px;
    /*font-size: 1.2em;*/
    color: #444;
    width: 200px;
}

input[type="checkbox"], input[type="radio"] {
    cursor: pointer;    
}

select {
    border: 1px solid #ccc;
    padding: 2px;
    /*font-size: 1.2em;*/
    color: #444;    
    background: white;
}
select:disabled, input:disabled{
  background: lightgray;
}

select.maxWidth{
    max-width:300px;
    
}
    select.maxWidth option {
        /* wrap text in compatible browsers */
        -moz-white-space: pre-wrap;
        -o-white-space: pre-wrap;
        white-space: pre-wrap;
        /* hide text that can't wrap with an ellipsis */
        overflow: hidden;
        text-overflow: ellipsis;
        /* add border after every option */
        border-bottom: 1px solid #DDD;
    }
/* TABLE
----------------------------------------------------------*/

.Grids {
    border: solid 0px #e8eef4;
    border-collapse: collapse;
}
    .Grids td {
        padding: 5px;   
    }

    .Grids tr:hover {
        background-color: #f2f3e3; /*#f2f3e3;*/
    }

    .Grids tr:hover td {
        background-color: transparent; 
    }

    .Grids .odd {
        background-color: #eeeeee; /*#eeeeee*/
        height: 30px;
    }

    .Grids .even {
        background-color: #dddddd; /*#dddddd;*/
        height: 30px;
    }

#deletedProjects.Grids .odd {
    background-color: #f7d6d0;
}

#deletedProjects.Grids .even {
    background-color: #ffbdb0;
}

    .Grids th {
        padding: 5px; 
        text-align: left;
        background-color: #fff; /*#fff;*/
        color: #7f62c1; /*#0070c0;*/
        border: 0px;
        font-weight: bold;
        text-transform: uppercase;
        white-space:nowrap;
    }

    .Grids .noinfo {
        text-align:center;
        background-color: [[grid-odd]];
    }


.GridForm th {
    padding: 6px 5px;
    text-align: left;
    color:#000;
    background-color: #e8eef4;
    border: solid 0px #e8eef4;
}

.GridForm td {
     padding: 5px;
     border: solid 0px #fff;
     background-color:#fff;     
}

.GridForm table{
     border: solid 0px #fff;
    border-collapse: collapse;
    background-color: #fff;
}
.GridForm {
    width:100%;

}

.versions td {
    padding: 5px;
}


    .versions tr:hover td {
        background-color: transparent; 
    }

    .versions .odd {
        background-color: #e8eef4;
        height: 30px;
    }
    .versions .even {
        background-color: #d8dde4;
        height: 30px;
    }

.published.odd {
    background-color: #d8ead5; /*#d8ead5;*/
}

.published.even{
    background-color: #bdecb6;
}
    .versions th {
        text-align: left;
        color:[[grids-th]];
        background-color: #fff;
        white-space:nowrap;
    }


/* MISC  
----------------------------------------------------------*/
.clear {
    clear: both;
}

.error {
    color: Red;
}

nav, 
#menucontainer {
    margin-top: 90px;
}

div#title {
    text-align: left;
}

#logindisplay {
    /*font-size: 1.1em;*/
    display: block;
    text-align: right;
    margin: 5px;
    float: right;    
}

#logindisplay a:link {
    text-decoration: none;
}

#logindisplay a:visited {
    text-decoration: underline;
}

#logindisplay a:hover {
    text-decoration: none;
}

.colorSqr {
    width:20px;
    height:20px;    
    margin-left:15px;
}

/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
    color: #ff0000;
}

.field-validation-valid {
    display: none;
}

.input-validation-error {
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

.validation-summary-errors {
    font-weight: bold;
    color: #ff0000;
    border: solid 1px #CCCCCC;
	background-color: #ebeff9;	 
    background-image: url(../Content/Images/error.gif);    
    background-position: 5px 50%;
    background-repeat:no-repeat;
}

    .validation-summary-errors ul, .validation-summary-errors ul li {
        list-style:none;
        margin-bottom:10px;
    }

.validation-summary-valid {
    display: none;
}

/* Styles for editor and display helpers
----------------------------------------------------------*/
.display-label, 
.editor-label {
    margin: 1em 0 0 0;
}

.display-field, 
.editor-field {
    margin: 0.5em 0 0 0;
}

.text-box {
    width: 30em;
}

.text-box.multi-line {
    height: 6.5em;
}

.tri-state {
    width: 6em;
}

.odd {
    background-color: #eeeeee;
}
.even {
    background-color: #dddddd;
}
.indent50 {
    margin-left: 40px;
    margin-bottom: 10px;
}

/* Styles for common button
----------------------------------------------------------*/
.myButton,
.linkButton, .linkBtnNew, .linkBtnEdit, .linkBtnView, .linkBtnRefresh, .linkBtnSave, .linkBtnDel, .linkBtnImport, .linkBtnExport, .linkBtnPDF, .linkBtnShare, .linkBtnBrowse, .linkBtnUpload, .linkBtnReport, .linkBtnImg, .linkBtnPano, .linkBtnCrop, .linkBtnCache, .linkBtnBack {
    background-color: #CCCCCC; /*#cccccc;*/
    border: 1px solid #7f62c1; /*#0070C0;*/
    border-radius: 5px 5px 5px 5px;
    color: #7f62c1 !important;
    text-decoration: none !important;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    margin-left: 1px;
    padding: 5px 5px 5px 23px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: 2px 50%;
    background-image: url(../Content/Images/icons.png);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2)
}

.orderup {
    background-image: url(../Content/Images/uparrow.png);
    width:32px;
    height:32px;
}

.orderdown {
    background-image: url(../Content/Images/downarrow.png);
   width:32px;
    height:32px;

}

.disabledButton {
    color: #A9A9A9 !important;
     background-color:#D3D3D3; 
     cursor: default;
}

    .myButton:hover, input[type="submit"]:hover, 
                    .linkBtnNew:not(.disabledButton):hover, .linkBtnEdit:hover, .linkBtnView:hover, .linkBtnRefresh:hover, 
                    .linkBtnSave:hover, .linkBtnDel:hover, .linkBtnImport:hover, .linkBtnExport:hover, .linkBtnPDF:hover, .linkBtnShare:hover, .linkBtnBrowse:hover, .linkBtnUpload:hover, .linkBtnReport:hover, .linkBtnImg:hover, .linkBtnPano:hover, .linkBtnCrop:hover, .linkBtnCache:hover  {     
        color: red !important;        
        background-color:lightblue;
        box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2)
    }

.linkBtnNew {      
    background-position: -8px -104px;
}

.linkBtnEdit {
    background-position: -8px -138.5px;
}    

.linkBtnView {
    background-position: -6px -175px;
}

.linkBtnSave {    
    background-position: -8px -36px;
}

.linkBtnDel {
    background-position: -9px -217px;
}

.linkBtnImport {
    background-position: -7px -260px;
}

.linkBtnExport {
    background-image: url(../Content/Images/icon_csv.gif);    
}

.linkBtnPDF {
    background-image: url(../Content/Images/icon_pdf.gif);    
}

.linkBtnPano {
    background-image: url(../Content/Images/icon_panorama.gif);
}

.linkBtnCrop {
    background-image: url(../Content/Images/icon_crop.png);
}

.linkBtnCache {
    background-image: url(../Content/Images/tilecache.ico);
}

.linkBtnShare {
    background-image: url(../Content/Images/icon_share.png);    
}

.linkBtnUpload {
    background-image: url(../Content/Images/icon_upload.png);    
}

.linkBtnBrowse {
    background-image: url(../Content/Images/icon_browse.png);    
}

.linkBtnRefresh {
    background-image: url(../Content/Images/icon_refresh.gif);    
}

.linkBtnReport {
    background-image: url(../Content/Images/icon_report.gif);
}

.linkBtnImg {
    background-image: url(../Content/Images/jpg.png);
}

.linkBtnBack {
    background-image: url(../Content/Images/back.png);
}

.myButton {   
    padding: 5px 5px 5px 5px !important;
    background-position: 500px -500px;
    background-color:#CCCCCC; /*#cccccc;*/
    border: 1px solid #7f62c1; /*#0070C0;*/
    color: #7f62c1 !important;
}


/* Styles for Project list
----------------------------------------------------------*/
.accountName {
    font-weight: bold;
    /*color: #0070C0 !important;*/
    text-decoration:underline !important;
}

.colorBlue {
   color: #0070C0 !important;
}

.expand {
    cursor:pointer;
}

.mySection {
    margin: 13px 0 13px 0;
}

.newSection {
    margin: 13px 0 13px 0;
}

.prjLine {
    padding: 5px 0 5px 0;
}

.prjIntro {
    font-size: smaller;        
}

.prjIntro2 {    
    font-style: italic;
    padding: 5px 0 0 0;
}

.prjIntro3 {    
    font-style: italic;    
}

.table1 {
    width: 100%;
    margin-bottom:20px;
}

.table2 {
    width: 100%;    
}

.txt2 {
    width: 150px !important;
}
.nowrap {
    white-space:nowrap;
}
.sepSpace {    
    clear: both;
    padding: 10px;
}
.sepSpace2 {    
    clear: both;
    padding: 5px;
}
.width200 {
    width: 200px;
}
.width100 {
    width: 100px !important;
}
.width120 {
    width: 120px;
}
.width150 {
    width: 150px !important;
}

.desc {
    font-style:italic;
    font-size:12px;
    padding-top:5px;
    padding-left:5px;    
}

.hidRow {
    height:1px;
}
.hidRow:hover {
    background-color:white !important;
}

.map {
    float: right;
    margin-top:10px;
}

tr .noinfo {
    text-align:center;
    background-color:lightyellow;
}

.divH {
    margin-top:10px;
}

.shortdesc {
    color:#808080;
}

.subTotal {
    font-weight: bold;
    text-decoration:underline;
}

p.des, div.des {
    color:#808080;
    font-size:12px;
}

/*Loading -------------------*/
.lockOff {
         display: none;
         visibility: hidden;
      }

.lockOn {
    display: block;
    visibility: visible;
    position: absolute;
    z-index: 999;
    top: 0px;
    left: 0px;
    width: 105%;
    height: 105%;
    background-color: #ccc;
    text-align: center;
    padding-top: 100%;
    filter: alpha(opacity=75);
    opacity: 0.75;
    background-image: url(../Content/Images/loading.gif);    
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;    
} 

.imgPreview {
    display: block;
    visibility: visible;
    position: absolute;
    z-index: 999;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;    
    background-color: #ccc;
    text-align: center;    
    padding-top: 100%;
    filter: alpha(opacity=75);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;    
}

.imgPreviewCloseBtn {
    position:absolute; 
    top: 1px; right:1px;    
    display:none; 
    z-index: 1000;
    cursor:pointer;    
}

.imgExpand {
    border:0px;
}

.editable {
    cursor: pointer;
    border-bottom: 1px dashed #ccc;
    width:80%;
}

.hide {
    display:none;
}

div.divTblHead {
    padding: 0px 1px 10px 1px;
}

.reload, .reloadRun {
    display:inline-block;
    cursor:pointer;
    width:16px;
    height:16px;    
    background-repeat:no-repeat;    
}

.reload {
    background-image: url(../Content/Images/refresh_icon.png);
}

.reloadRun {
    background-image: url(../Content/Images/processing.gif);
}

.done {
    background-image: url(../Content/Images/succ.png);
}

.rowRun {
        background-color: #e9c5c5; /*#0070c0; #e9c5c5;*/        
        color:#0070c0;
}

.rowDone {
        background-color: #dff1ff;  /*#eeeeee;*/        
}

.showToolTips {
    cursor:pointer;
}

.ui-tooltip {
    white-space: pre-line;
}

.tooltip {
    cursor:pointer;
    background-image: url(../Content/Images/icon_tooltip.png);
    display: inline-block;
    width: 15px;
    height:13px;
}

td.tdPrjBtn {
    width: 200px; 
    text-align: right !important; 
    padding-right: 5px;
}

td.tdVrsBtn {
    text-align: right !important; 
    padding-right: 5px;
}

td.tdOvlPrev {
    width: 100px; 
    text-align: right !important;
}

table.versions th, table.versions td {
    text-align:left;
}

.txtLeft {
    text-align: left !important;
}

.txtRight {
    text-align: right !important;
}

.txtCenter {
    text-align: center !important;
}

table.Grids td.tdIcn {
    width: 27px; 
    text-align: center;
}

table.Grids td.tdPrj {
    width: 197px;
}

table.Grids td {
    text-align:left;
}

table.Grids td.imgExpand {
    width: 27px; 
    height:28px; 
    text-align: center;
}

.pinpoint {
    background-image: url(../Content/Images/pin2.png);    
    background-repeat:no-repeat;
    padding-left:20px;        
}

.bottom0 {
    margin-bottom:5px; 
    padding-bottom:0px;
}

.noinfo {
    text-align: center;
    background-color: #eeeeee;
}

/*-------------------*/
#msgInfo, .msgInfo
{
	 border: solid 1px #CCCCCC;
	 background-color: lightyellow;	 
     padding-top:6px;
     padding-bottom:10px;     
}

.error
{
    color:#ff0000;
    font-weight:bold;
	text-align:center;
}

.succ
{
	color:#7F62C1;
	font-weight:bold;
	text-align:center;
}

/*---Help sidebar--------------------*/
#sidebar_help {
    position: fixed;
    right: 0;
    top: 200px;
    z-index: 999;
}

#backToTop 
{ 
    background: url("../Content/Images/back-to-top.png") no-repeat scroll;
    bottom: 150px;
    cursor: pointer;
    display: none;
    height: 55px;
    position: fixed;
    right: 0;
    text-align: center;
    text-indent: -999999px;
    width: 48px;
    display:none;
}

/*---Upload template------------------------*/
.selFName {
    font-weight:bold;
}
.selFSize {
    color:#808080;
}

.fileDoneName, .fileDoneSize {
    font-weight:normal;
    color:#ccc;
}

/*--CheckBox--*/
.checkBox
{
    background-position: 0px -4px;
}

.checkBoxClear
{
    background-position: -21px -4px;
}

.checkBox, .checkBoxClear
{
    background-image: url("../Content/Images/checkbox.png");
    background-repeat: no-repeat;
    display: inline-block;
    /*float: left;*/
    width: 21px;
    height: 21px;
    padding: 0px;
    margin: 0px;
    cursor: pointer;
}

.defaultColor {
    color: #2fb88a;
}


td.hiddenSpan span {
    display: none;
}

/* -- Login -- */
.loginForm {
    width: 510px;
    float: left;
}

.loginLogo {
    width: 500px;
    height: 280px;
    float: left;
}

    .loginLogo img {
        max-width: 500px;
        max-height: 280px;
        margin-left: 6px;
    }

.loginForm input[type="text"], .loginForm input[type="password"] {
    width: 96%;
}


@media screen and (max-width: 1024px) {
    .page{
        width:98%;
    }

    .loginLogo {
        display: none;
    }

    .loginForm {
        width: 100%;
    }
}