html { width: 100%; height: 100%; margin:0; padding: 0; }
body { width: 100%; height: 100%; margin:0; padding: 0; }

.SurfaceContainer               {}
.CanvasContainer                {}

.LogoContainer                  { height:60px; vertical-align: middle; }
/*.Logo                           { background-image: url('/Asset/Image/Logo/App.png'); background-repeat: no-repeat; width:360px; max-width:360px; height: 50px; cursor: pointer; }*/
.Logo                           { background-image: url('/Asset/Image/Logo/App.png'); background-repeat: no-repeat; width:270px; max-width:270px; height: 50px; cursor: pointer; }
.LogoText                       { font-family: Calibri, Helvetica, Arial; font-size: 16pt; color: #3B6ABF; font-weight: bold; }
.Wallpaper                      { background-image: url('/Asset/Theme/BlackPearlV2/Wallpaper/Wallpaper.png'); background-size:100%; background-repeat:no-repeat; width:100%; height:100%; }

.MenuContainer                  { font-family: Calibri, Helvetica, Arial; font-size: 11pt; color: #666666; }
.MenuHeaderLeft                 { width:7px; max-width:7px; }
.MenuHeaderCenter               { height: 43px; line-height:40px; width:140px; text-align:center;  }
.MenuHeaderRest                 { height: 43px; line-height:40px; }
.MenuHeaderRight                { width:7px; max-width:7px; }
.MenuHeaderContainerLink        { text-shadow: 1px 1px #b0b0b0; cursor: pointer; }
.MenuHeaderContainerLink:hover  { color: #01B0F0; }
.MenuHeaderContainerLinkSelected{ color: #01B0F0; text-shadow: 1px 1px #b0b0b0; cursor:pointer; }
.MenuBodyContainer              { margin-top: -3px; }
.MenuLineLeft                   { background-color:#d7d7d7; width: 7px; min-width: 7px; max-width: 7px; height: 2px; font-size:1pt; }
.MenuLineCenter                 { background-color:#d7d7d7; height: 2px; font-size:1pt; }
.MenuLineRight                  { background-color:#d7d7d7; width: 7px; min-width: 7px; max-width: 7px; height: 2px; font-size:1pt; }
.MenuBodyLeft                   { background-color:#d7d7d7; width: 7px; min-width: 7px; max-width: 7px; }
/*.MenuBodyCenter                 { background-color:#d7d7d7; text-align:left; }*/
.MenuBodyCenter                 { background-color:#d7d7d7; }
.MenuBodyRight                  { background-color:#d7d7d7; width: 7px; min-width: 7px; max-width: 7px; }
.MenuFooterLeft                 { background-color:#d7d7d7; width: 7px; min-width: 7px; max-width: 7px; height:3px; font-size: 1pt; }
.MenuFooterCenter               { background-color:#d7d7d7; height: 3px; font-size: 1pt; }
.MenuFooterRight                { background-color:#d7d7d7; width: 7px; min-width: 7px; max-width: 7px; height:3px; font-size: 1pt; }
.MenuSeparator                  { width: 15px;}
.MenuHeaderText                 { font-family: Calibri, Helvetica, Arial; font-size: 10pt; color: #B64E90; text-decoration: none; font-weight: bold; }
.MenuHeaderTextRow              { height: 30px; }
.MenuLinkRow                    { height: 18px; }
.MenuLinkContainer              {}
.MenuLink                       { font-family: Calibri, Helvetica, Arial; font-size: 11pt; color: #555555; text-decoration: none; }
.MenuLink:hover                 { font-family: Calibri, Helvetica, Arial; font-size: 11pt; color: #01B0F0; text-decoration: none; }

.PageContainer                  { border-radius: 7px; background-color:white; font-family: Calibri, Helvetica, Arial; font-size: 10pt; color: black; }
.PageHeaderRow                  { height:5px; max-height:5px; font-size:1pt; }
.PageHeaderLeft                 { width:5px; max-width:5px; height: 5px; max-height:5px; font-size:1pt; }
.PageHeaderCenter               { height: 5px; max-height:5px; font-size:1pt; }
.PageHeaderRight                { width:5px; max-width:5px; height: 5px; max-height:5px; font-size:1pt; }
.PageBodyRow                    { }
.PageBodyLeft                   { width:5px; max-width:5px; font-size:1pt; }
.PageBodyCenter                 { font-family: Calibri, Helvetica, Arial; font-size: 11pt; }
.PageBodyRight                  { width:5px; max-width:5px; font-size:1pt; }
.PageFooterrRow                 { height: 7px; max-height: 7px; font-size:1pt;}
.PageFooterLeft                 { width:5px; max-width:5px; height: 7px; max-height:7px; font-size:1pt; }
.PageFooterCenter               { background-repeat: repeat-x; height: 7px; max-height:7px; font-size:1pt; }
.PageFooterRight                { width:5px; max-width:5px; height: 7px; max-height:7px; font-size:1pt; }

.FooterContainer                { background-image: url('/Asset/Theme/BlackPearlV2/Footer/Footer.Center.png'); background-repeat: repeat-x; height: 29px; max-height:29px; }
.FooterText                     { font-family: Calibri, Helvetica, Arial; font-size: 10pt; color: white; }

.FieldContainer                 {}
.FieldSearchContainer           {}
.FieldSearch                    { height: 35px; }
.FieldSearchRow                 { height: 40px; }
.FieldRow                       { height: 35px; }
.FieldRowBreak                  { height: 5px; font-size:1pt; }
.FieldRowButton                 { height: 70px; }
.FieldHeaderContainer           {}
.FieldHeaderRow                 { height: 40px;}
.FieldHeaderSpace               { width: 5px; max-width: 5px; font-size: 1pt; }
.FieldHeaderText                { font-family: Calibri, Helvetica, Arial; font-size: 18pt; font-weight: bold; color: black; }
.FieldMandatory                 { font-family: Calibri, Helvetica, Arial; font-size: 10pt; text-align: left; }
.FieldNotMandatory              { font-family: Calibri, Helvetica, Arial; font-size: 10pt; text-align: left; }
.FieldText                      { font-family: Calibri, Helvetica, Arial; font-size: 10pt; }
.Link                           { font-family: Calibri, Helvetica, Arial; font-size: 10pt; text-decoration:none; }

.TextBoxContainer               { font-family: Lato, Calibri, Helvetica, Arial; font-size:11pt; border-bottom: solid 1px silver; height: 40px; }
/*.TextBox                        { font-family: Calibri, Helvetica, Arial !important; font-size: 10pt !important; border: solid 1px silver; background-color: white; color: black; }*/
.TextBox                        { border: none; outline: none; font-size:11pt;  width:99%; }
/*.TextBox:focus                  { border: solid 1px gold; background-color: #FFE699; }*/
/*.TextBox:read-only              { background-color: #d8d4d4 !important; }*/
.TextBox:disabled               { background-color: #d8d4d4 !important; }

.TextAreaContainer              { font-family: Lato, Calibri, Helvetica, Arial; font-size:10pt; height: 40px; }
.TextArea                       { font-family: Calibri, Helvetica, Arial !important; font-size: 10pt !important; border: solid 1px silver; background-color: white; color: black; resize:none; }
.TextArea:focus                 { border: solid 1px gold; background-color: #FFE699; }
.TextArea:read-only             { background-color: #d8d4d4 !important; }
.TextArea:disabled              { background-color: #d8d4d4 !important; }

/*.DropDownList                   { font-family: Calibri, Helvetica, Arial !important; font-size: 10pt !important; border: solid 1px silver; background-color: white; color: black; }
.DropDownList:focus             { border: solid 1px gold; background-color: #FFE699; }
.DropDownList:disabled          { background-color: #d8d4d4 !important; }*/

.DropDownList                   { border: none; background-color: white !important; font-family: Calibri, Helvetica, Arial !important; font-size: 12pt !important; color: black; cursor: pointer; }
.DropDownList:focus             { }
.DropDownList:disabled          { background-color: #d8d4d4 !important; }

.CheckBox                       { width:20px; height:20px; }

.UserManualContainer            { border: solid 1px white; cursor: pointer; }
.UserManualContainer:hover      { border: solid 1px #5aa9ff; }
.UserManualText                 { font-family: Lato, Calibri, Helvetica, Arial; font-size: 10pt; color: rgb(33, 33, 33); text-transform:uppercase; }
.UserManualTextDescription      { font-family: Lato, Calibri, Helvetica, Arial; font-size: 9pt; color:#acacac; }

.WidgetButton                   { border: solid 1px #01B0F0; border-radius: 10px; background-color: white; font-family: 'Segoe UI', Calibri, Tahoma, Arial; font-size: 10pt; font-weight:bold; color: #01B0F0; width: 99%; height:35px; }
.WidgetButton:hover             { border: solid 1px #01B0F0; background-color: #01B0F0; color:white; }

.LookUpAutoCompleteContainer    { border: solid 1px silver; background-color: white; }
.LookUpAutoCompleteTextBox      { border: none; font-family: Calibri, Helvetica, Arial !important; font-size: 10pt !important; color: black; width:100%; }
.LookUpAutoCompleteButton       { background-image: url('/Asset/Theme/BlackPearlV2/LookUp/LookUpAutoComplete.png'); background-repeat: no-repeat; width:22px; height:18px; cursor: pointer; }
.ui-autocomplete                { font-family: Calibri, Helvetica, Arial !important; font-size: 10pt !important; color: black; }

.ButtonAction  			        { border: none; background-color : #0070C0; font-family : Calibri, Arial, Helvetica, Tahoma, Verdana, Sans-Serif; font-size : 14pt; color : #fff; cursor : pointer; height : 40px; width : 200px; text-align : center; text-shadow : 0px -1px 0px #55830c; vertical-align : middle; }
.ButtonAction:hover 	        { background-color : #0283e0; }
.Button  			            { border: none; background-color : #A2A2A2; font-family : Calibri, Arial, Helvetica, Tahoma, Verdana, Sans-Serif; font-size : 14pt; color : #fff; cursor : pointer; height : 40px; width : 200px; text-align : center; text-shadow : 0px -1px 0px #55830c; vertical-align : middle; }
.Button:hover 	                { background-color : #C3C3C3; }

.GridContainer                  { font-family: Calibri, Helvetica, Arial; font-size: 10pt; font-weight: bold; color: #333333; width: 100%; table-layout:fixed; border: solid 1px silver; text-transform:uppercase; }
.GridColumn                     { background-color: #F2F2F2; height: 40px; }
.GridColumnNo                   { background-color: #F2F2F2; height: 40px; }
.GridColumnLast                 { background-color: #F2F2F2; height: 40px; }
.GridRowNo                      { height: 35px !important; text-align: center;  }
.GridRowContainerOdd            { background-color: #ffffff; font-weight: normal; min-height: 35px !important; height: 35px !important; cursor: pointer; overflow: hidden; text-overflow: ellipsis; text-wrap: avoid;}
.GridRowContainerOdd:hover      { background-color: #0070C0; color: white !important; }
.GridRowContainerEven           { background-color: #ffff; font-weight: normal; min-height: 35px !important; height: 35px !important; cursor: pointer; overflow: hidden; text-overflow: ellipsis; text-wrap: avoid; }
.GridRowContainerEven:hover     { background-color: #0070C0; color: white !important; }
.GridRow                        { height: 26px !important; overflow: hidden; text-overflow: ellipsis; white-space:nowrap; padding-left: 2px; padding-right: 2px; text-align: left; }
.GridRowButton                  { }
.GridRowSelected                { background-image: url('/Asset/Theme/BlackPearlV2/Grid/Grid.Row.Selected.png'); background-repeat: repeat-x; }
.GridButtonReset                { background-image: url('/Asset/Theme/BlackPearlV2/Grid/Grid.Button.Reset.png'); background-repeat: no-repeat; width:16px; height:16px; background-size: 16px; }
.GridButtonPreview              { background-image: url('/Asset/Theme/BlackPearlV2/Grid/Grid.Button.Preview.png'); background-repeat: no-repeat; width:24px; height:24px; }
.GridButtonSelect               { background-image: url('/Asset/Theme/BlackPearlV2/Grid/Grid.Button.Select.png'); background-repeat: no-repeat; width:16px; height:16px; background-size: 16px; }
.GridButtonDetails              { background-image: url('/Asset/Theme/BlackPearlV2/Grid/Grid.Button.Details.png'); background-repeat: no-repeat; width:16px; height:16px; }
.GridButtonUpload               { background-image: url('/Asset/Theme/BlackPearlV2/Grid/Grid.Button.Upload.png'); background-repeat: no-repeat; width:24px; height:24px; }
.GridButtonDownload             { background-image: url('/Asset/Theme/BlackPearlV2/Grid/Grid.Button.Download.png'); background-repeat: no-repeat; width:24px; height:24px; }
.GridButtonView                 { background-image: url('/Asset/Theme/BlackPearlV2/Grid/Grid.Button.View.png'); background-repeat: no-repeat; width:24px; height:24px; }
.GridButtonEdit                 { background-image: url('/Asset/Theme/BlackPearlV2/Grid/Grid.Button.Edit.png'); background-repeat: no-repeat; width:24px; height:24px; }
.GridButtonDelete               { background-image: url('/Asset/Theme/BlackPearlV2/Grid/Grid.Button.Delete.png'); background-repeat: no-repeat; width:24px; height:24px; }
.GridButtonCandidate            { background-image: url('/Asset/Theme/BlackPearlV2/Grid/Grid.Button.Candidate.png'); background-repeat: no-repeat; width:24px; height:24px; background-size: 24px; }
.GridButtonPeople               { background-image: url('/Asset/Theme/BlackPearlV2/Grid/Grid.Button.People.png'); background-repeat: no-repeat; width:24px; height:24px; background-size: 24px; }
.GridButtonPrint                { background-image: url('/Asset/Theme/BlackPearlV2/Grid/Grid.Button.Print.png'); background-repeat: no-repeat; width:24px; height:24px; background-size: 24px; }
.GridButtonPayment              { background-image: url('/Asset/Theme/BlackPearlV2/Grid/Grid.Button.Payment.png'); background-repeat: no-repeat; width:16px; height:16px; }

.PageNavigatorContainer         { border: solid 1px silver; border-top:none; background-color: #F2F2F2; font-family: Calibri, Helvetica, Arial; font-size: 10pt; font-weight:bold; color: #333333; width: 100%; height: 40px; line-height:35px; }
.PageNavigator                  { color: #333333; width: 35px; height: 35px; text-align: center; cursor: pointer; }
.PageNavigator:hover            { background-color: #FFFFFF; color: black; width: 35px; height: 35px; text-align: center; }
.PageNavigatorSelected          { background-color: #FFFFFF; color: black; width: 35px; height: 35px; text-align: center; cursor: pointer; }
.PageNavigatorTextBox           { font-family: Calibri, Tahoma, Verdana; font-size: 10pt; border: solid 1px silver; color: black; text-align: center; width: 35px; }
.PageNavigatorTextBox:focus     { border: solid 1px gold; background-color: #FFE699; }

.WarningContainer               { border: solid 1px #FFC000; background-color: #FFD689; }
.WarningRow                     { height:40px; }
.WarningText                    { font-family: Calibri, Tahoma, Verdana; font-size: 10pt; color: black; text-align: center; }

.LoadingContainer               { font-family: Calibri, Helvetica, Arial; font-size: 10pt; color: black; }
.Icon_Loading                   { color: #0070C0; }
.Icon_Loading, .lds-ring div    { box-sizing: border-box; }
.Icon_Loading                   { display: inline-block; position: relative; width: 80px; height: 80px; margin-top:20px; }
.Icon_Loading div               { box-sizing: border-box; display: block; position: absolute; width: 50px; height: 50px; margin: 8px; border: 4px solid currentColor; border-radius: 50%; animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; border-color: currentColor transparent transparent transparent; }
.Icon_Loading div:nth-child(1)  { animation-delay: -0.45s; }
.Icon_Loading div:nth-child(2)  { animation-delay: -0.3s;  }
.Icon_Loading div:nth-child(3)  { animation-delay: -0.15s; }

@keyframes lds-ring 
{
  0% 
  {
    transform: rotate(0deg);
  }
  100% 
  {
    transform: rotate(360deg);
  }
}

.EffectFlyIn
{
  animation: animationFlyIn 1.2s ease forwards;
  opacity: 0;
  transform: scale(2);
  filter: blur(4px);
}

@keyframes animationFlyIn {
   to {
     filter: blur(0);
     transform: scale(1);
     opacity: 1;
   }
}

.container .alert                   { transition-timing-function: ease-in; transition: 0.2s; transform: translateY(130%); }
.container .alert-is-shown .alert   { transition-timing-function: ease-out; transition: 0.25s; transform: translateY(0); }

.Icon_Close                     { background-image: url('/Asset/Theme/BlackPearlV2/Icon/Button.Close.png'); background-repeat: no-repeat; width:24px; max-width:24px; height:24px; max-height:24px; cursor: pointer; }
.Icon_Role                      { background-image: url('/Asset/Theme/BlackPearlV2/Icon/Role.png'); background-repeat: no-repeat; width:16px; max-width:16px; height:16px; max-height:16px; }
.Icon_User                      { background-image: url('/Asset/Theme/BlackPearlV2/Icon/User.png'); background-repeat: no-repeat; width:16px; max-width:16px; height:16px; max-height:16px; }
.Icon_StudentGroup              { background-image: url('/Asset/Theme/BlackPearlV2/Icon/StudentGroup.png'); background-repeat: no-repeat; width:16px; max-width:16px; height:16px; max-height:16px; }
.Icon_Student                   { background-image: url('/Asset/Theme/BlackPearlV2/Icon/Student.png'); background-repeat: no-repeat; width:16px; max-width:16px; height:16px; max-height:16px; }
.Icon_TeacherGroup              { background-image: url('/Asset/Theme/BlackPearlV2/Icon/TeacherGroup.png'); background-repeat: no-repeat; width:16px; max-width:16px; height:16px; max-height:16px; }
.Icon_Teacher                   { background-image: url('/Asset/Theme/BlackPearlV2/Icon/Teacher.png'); background-repeat: no-repeat; width:16px; max-width:16px; height:16px; max-height:16px; }
.Icon_MyProfile                 { background-image: url('/Asset/Theme/BlackPearlV2/Icon/MyProfile.png'); background-repeat: no-repeat; width:16px; max-width:16px; height:16px; max-height:16px; }
.Icon_ChangePassword            { background-image: url('/Asset/Theme/BlackPearlV2/Icon/ChangePassword.png'); background-repeat: no-repeat; width:16px; max-width:16px; height:16px; max-height:16px; }
.Icon_MessageBoard              { background-image: url('/Asset/Theme/BlackPearlV2/Icon/MessageBoard.png'); background-repeat: no-repeat; width:16px; max-width:16px; height:16px; max-height:16px; }
.Icon_Course                    { background-image: url('/Asset/Theme/BlackPearlV2/Icon/Course.png'); background-repeat: no-repeat; width:16px; max-width:16px; height:16px; max-height:16px; }
.Icon_Forum                     { background-image: url('/Asset/Theme/BlackPearlV2/Icon/Forum.png'); background-repeat: no-repeat; width:16px; max-width:16px; height:16px; max-height:16px; }
.Icon_News                      { background-image: url('/Asset/Theme/BlackPearlV2/Icon/News.png'); background-repeat: no-repeat; width:16px; max-width:16px; height:16px; max-height:16px; }
.Icon_Calendar                  { background-image: url('/Asset/Theme/BlackPearlV2/Icon/Calendar.png'); background-repeat: no-repeat; width:16px; max-width:16px; height:16px; max-height:16px; }
.Icon_Library                   { background-image: url('/Asset/Theme/BlackPearlV2/Icon/Library.png'); background-repeat: no-repeat; width:16px; max-width:16px; height:16px; max-height:16px; }
.Icon_Report                    { background-image: url('/Asset/Theme/BlackPearlV2/Icon/Report.png'); background-repeat: no-repeat; width:16px; max-width:16px; height:16px; max-height:16px; }
.Icon_Configuration             { background-image: url('/Asset/Theme/BlackPearlV2/Icon/Configuration.png'); background-repeat: no-repeat; width:16px; max-width:16px; height:16px; max-height:16px; }
.Icon_SystemUpdate              { background-image: url('/Asset/Theme/BlackPearlV2/Icon/SystemUpdate.png'); background-repeat: no-repeat; width:16px; max-width:16px; height:16px; max-height:16px; }

.ui-widget                  { background: none !important; background-color: transparent; }
.ui-widget-header           { background: none !important; background-color: #A3A3A3 !important; border: none !important; }
.ui-widget-content          { border-color: #ABABAB !important; }

.ui-datepicker              { background-color : white !important; font-family: Calibri, Tahoma, Verdana !important; font-size: 10pt !important; }
.ui-datepicker-trigger      { position: relative; top: 4px; left: 2px; cursor: pointer; }

.ui-dialog                  { width: 100% !important; height: 100% !important; }
.ui-dialog-titlebar         { display: none; }

.ui-tabs:hover              { }
.ui-tabs-nav                { font-family: Calibri, Helvetica, Arial; font-size: 10pt; color: black; }
.ui-tabs-nav:hover          { }

.ui-state-default a         { background-color: #FFFFFF !important; color : #000000 !important; font-weight: normal !important; }
.ui-state-default a:hover   { background-color: #FFFFFF !important; color: gold !important; font-weight: normal!important; }
.ui-state-active a          { color: blue !important; font-weight: bold !important; }
.ui-state-active a:hover    { color: blue !important; font-weight: bold !important; }
.ui-state-hover             { background-color: #ffffff !important; }

.ui-menu .ui-menu-item a    { font-family: Calibri, Helvetica, Arial; font-size: 10pt; color: black; background-color: #ffffff; height: 26px; cursor: pointer;  overflow: hidden; text-overflow: ellipsis; text-wrap:avoid; }
.ui-menu .ui-menu-item:hover{ background-color: #FF0000 !important; }

.ui-autocomplete            { background-color: white !important; }