div#container
{
   width: 1250px;
   position: relative;
   margin: 0 auto 0 auto;
   text-align: left;
}
body
{
   background-color: #FFFFFF;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-size: 13px;
   line-height: 1.1875;
   margin: 0;
   text-align: center;
}
.visibility-hidden
{
   visibility: hidden;
}
#wb_Image3
{
   vertical-align: top;
}
#Image3
{
   border: 0px solid #000000;
   border-radius: 0px;
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#wb_Image1
{
   vertical-align: top;
}
#Image1
{
   border: 0px solid #000000;
   border-radius: 0px;
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#wb_Heading1
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   margin: 0;
   padding: 0;
   text-align: left;
}
#Heading1
{
   color: #DC143C;
   font-family: Arial;
   font-weight: bold;
   font-style: normal;
   font-size: 64px;
   margin: 0;
   text-align: left;
   text-transform: none;
}
#Heading1 a
{
   color: inherit;
   text-decoration: none;
}
#wb_Text1 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text1 div
{
   text-align: left;
}
#wb_Image2
{
   vertical-align: top;
}
#Image2
{
   border: 0px solid #000000;
   border-radius: 0px;
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#Text3 
{
   border: 0px #000000 solid;
   margin: 0;
}
#wb_Image4
{
   vertical-align: top;
}
#Image4
{
   border: 0px solid #000000;
   border-radius: 0px;
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#wb_Text4 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text4 div
{
   text-align: left;
}
#SlideShow1 .image
{
   border-width: 0;
   border-radius: inherit;
   left: 0;
   top: 0;
   width: auto;
   height: 100%;
}
#SlideShow1
{
   border: 0px solid #000000;
   border-radius: 0px;
}
#wb_CssMenu1
{
   border: 0px solid #C0C0C0;
   border-radius: 0px;
   background-color: transparent;
   margin: 0;
   text-align: left;
}
#wb_CssMenu1 ul
{
   list-style-type: none;
   margin: 0;
   padding: 0;
   position: relative;
   display: inline-block;
}
#wb_CssMenu1 li
{
   display: inline-block;
   margin: 0;
   padding: 0px 8px 0px 0px;
   width: 165px;
}
#wb_CssMenu1 a
{
   display: block;
   color: #333333;
   border: 2px solid #CCCCCC;
   border-radius: 0px;
   background-color: #D3D3D3;
   background-image: none;
   font-family: Arial;
   font-weight: normal;
   font-size: 16px;
   font-style: normal;
   text-decoration: none;
   text-transform: none;
   text-align: center;
   vertical-align: middle;
}
#wb_CssMenu1 > ul > li > a
{
   width: 151px;
   height: 26px;
   padding: 0 5px 0px 5px;
   line-height: 26px;
}
#wb_CssMenu1 li:hover a, #wb_CssMenu1 a:hover
{
   color: #FFFFFF;
   border: 2px solid #2E6DA4;
   background-color: #337AB7;
   background-image: none;
}
#wb_CssMenu1 li.firstmain
{
   padding-left: 0px;
}
#wb_CssMenu1 li.lastmain
{
   padding-right: 0px;
}
#wb_CssMenu1 br
{
   clear: both;
   font-size: 1px;
   height: 0;
   line-height: 0;
}
#Breadcrumb1
{
   list-style: none;
   padding: 8px 15px 8px 15px;
   background-color: transparent;
   background-image: none;
   border: 1px solid transparent;
   border-radius: 4px;
   font-family: Arial;
   font-weight: normal;
   font-style: normal;
   font-size: 0;
   margin: 0;
   text-align: left;
}
#Breadcrumb1 > li
{
   display: inline-block;
   font-size: 13px;
   text-transform: none;
}
#Breadcrumb1 a
{
   color: #337AB7;
   text-decoration: none;
}
#Breadcrumb1 a:hover
{
   color: #23527C;
   text-decoration: underline;
}
#Breadcrumb1 > .active
{
   color: #777777;
}
#Breadcrumb1 > .active a
{
   color: inherit;
   pointer-events: none;
}
#Breadcrumb1 > li + li:before
{
   content: "/";
   padding: 0 5px;
   color: #C0C0C0;
}
#Layer1
{
   background-color: #F8F9FA;
   background-image: none;
   border-radius: 0px;
}
#wb_Text15 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text15 div
{
   text-align: left;
}
#SiteSearch1
{
   line-height: 30px;
   margin: 0;
   border: 1px solid #DDDDDD;
   border-radius: 4px;
   background-color: #FFFFFF;
   background-image: none;
   color: #333333;
   font-family: Arial;
   font-weight: normal;
   font-style: normal;
   font-size: 13px;
   text-align: left;
   padding: 4px 4px 4px 4px;
}
#SiteSearch1:focus
{
   outline: 0;
}
.search-item, .search-text
{
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-size: 13px;
   padding: 4px 4px 4px 4px;
}
.search-text
{
   margin: 0 0 4px 0;
}
.search-title, .search-title:active, .search-title:hover, .search-title:visited
{
   color: #1A0DAB;
}
.search-url, .search-url:active, .search-url:hover, .search-url:visited
{
   color: #006621;
   text-decoration: none;
}
.search-highlight
{
   font-weight: bold;
   font-style: normal;
}
.clickable
{
   cursor: pointer;
}
#search-pagination
{
   display: inline-block;
   list-style: none;
   padding: 0;
   border-radius: 4px;
   font-family: Arial;
   font-weight: normal;
   font-size: 0;
   margin: 8px 0 0 4px;
}
#search-pagination > li
{
   display: inline;
   font-size: 13px;
}
#search-pagination > li > a, #search-pagination > li > span
{
   position: relative;
   float: left;
   padding: 4px 10px 4px 10px;
   text-decoration: none;
   background-image: none;
   border: 1px #DDDDDD solid;
   color: #000000;
   margin-left: -1px;
}
#search-pagination > li:first-child > a, #search-pagination > li:first-child > span
{
   margin-left: 0;
   border-bottom-left-radius: 4px;
   border-top-left-radius: 4px;
}
#search-pagination > li:last-child > a, #search-pagination > li:last-child > span
{
   border-bottom-right-radius: 4px;
   border-top-right-radius: 4px;
}
#search-pagination > li > a:hover, #search-pagination > li > span:hover, #search-pagination > li > a:focus, #search-pagination > li > span:focus 
{
   background-color: #CCCCCC;
   color: #23527C;
}
#search-pagination > .active > a, #search-pagination > .active > span, #search-pagination > .active > a:hover, #search-pagination > .active > span:hover, #search-pagination > .active > a:focus, #search-pagination > .active > span:focus
{
   z-index: 2;
   background-color:#000000;
   border-color:#000000;
   color: #FFFFFF;
   cursor: default;
}
#search-pagination > .disabled > span, #search-pagination > .disabled > span:hover, #search-pagination1 > .disabled > span:focus, #search-pagination > .disabled > a, #search-pagination > .disabled > a:hover, #search-pagination > .disabled > a:focus 
{
   background-color: #FFFFFF;
   color: #777777;
   cursor: not-allowed;
}
#SiteSearch1-dialog.modal
{
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 9999;
   display: none;
   overflow: hidden;
   -webkit-overflow-scrolling: touch;
   outline: 0;
}
#SiteSearch1-dialog .modal-open .modal
{
   overflow-x: hidden;
   overflow-y: auto;
}
#SiteSearch1-dialog .modal-open
{
   overflow: hidden;
}
#SiteSearch1-dialog .modal-dialog
{
   position: relative;
   width: 600px;
   margin: 30px auto;
}
#SiteSearch1-dialog .modal-content
{
   position: relative;
   -webkit-background-clip: padding-box;
   background-clip: padding-box;
   outline: 0;
}
#SiteSearch1-dialog .modal-header
{
   min-height: 16px;
   padding: 15px 15px 15px 15px;
   border-bottom: 1px solid #ECEEEF;
}
#SiteSearch1-dialog .modal-footer
{
   padding: 15px 15px 15px 15px;
   border-top: 1px solid #ECEEEF;
}
#SiteSearch1-dialog .modal-body
{
   position: relative;
   width: 600px;
   height: 400px;
}
#SiteSearch1-dialog .close
{
   float: right;
   font-size: 21px;
   font-weight: 700;
   line-height: 1;
   color: #292B2C;
   text-shadow: 0px 1px 0px #fff;
   opacity: 0.5;
   -webkit-appearance: none;
   padding: 0;
   cursor: pointer;
   background: 0 0;
   border: 0;
   margin-top: -2px;
}
.modal-backdrop
{
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 1040;
   background-color: #000;
}
.modal-backdrop.fade
{
   opacity: 0;
   transition: opacity .15s linear;
}
.modal-backdrop.show
{
   opacity: 0.5 !important;
}
.modal-open
{
   overflow: hidden;
}
#SiteSearch1-dialog .modal-title
{
   color: #292B2C;
   font-size: 16px;
   font-weight: 500;
   margin: 0;
}
#SiteSearch1-dialog .modal-body
{
   overflow: auto;
}
#SiteSearch1-dialog .modal-content
{
   position: relative;
   background-color: #fff;
   border: 1px solid rgba(0, 0, 0, .2);
   border-radius: 6px;
   outline: 0;
   box-shadow: 0px 5px 15px rgba(0,0,0,0.5);
   text-align: left;
   pointer-events: all;
}
#SiteSearch1-dialog .modal-header
{
   cursor: move;
}
#SiteSearch1-dialog .modal-dialog-centered
{
   display: flex;
   align-items: center;
   margin: 1.75rem auto;
   min-height: calc(100% - 3.5rem);
   pointer-events: none;
}
#SiteSearch1-dialog .modal-dialog-centered::before
{
   display: block;
   height: calc(100vh - 3.5rem);
   content: "";
}
#Button1
{
   border: 1px solid #C5C5C5;
   border-radius: 4px;
   background-color: #F6F6F6;
   background-image: none;
   color: #454545;
   font-family: Arial;
   font-weight: normal;
   font-style: normal;
   font-size: 13px;
   padding: 1px 6px 1px 6px;
   text-align: center;
   -webkit-appearance: none;
   margin: 0;
}
#Button1:focus
{
   outline: 0;
}
#Shape3
{
   border-width: 0;
   vertical-align: top;
}
#wb_Image17
{
   vertical-align: top;
}
#Image17
{
   border: 0px solid #000000;
   border-radius: 0px;
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#Image17:hover
{
   transform: rotate(0deg) scale(1.08,1.08) ;
   transition: transform 500ms linear 0ms;
}
#wb_Text33 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text33 div
{
   text-align: left;
}
#wb_Text53 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: right;
}
#wb_Text53 div
{
   text-align: right;
}
#wb_Text160 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text160 div
{
   text-align: left;
}
#wb_Text161 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text161 div
{
   text-align: left;
}
#wb_Text162 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text162 div
{
   text-align: left;
}
#wb_Text163 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text163 div
{
   text-align: left;
}
#wb_Image252
{
   vertical-align: top;
}
#Image252
{
   border: 0px solid #000000;
   border-radius: 0px;
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#wb_Image259
{
   vertical-align: top;
}
#Image259
{
   border: 0px solid #000000;
   border-radius: 0px;
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#wb_Image264
{
   vertical-align: top;
}
#Image264
{
   border: 0px solid #000000;
   border-radius: 0px;
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#wb_Text164 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text164 div
{
   text-align: left;
}
#wb_Image265
{
   vertical-align: top;
}
#Image265
{
   border: 0px solid #000000;
   border-radius: 0px;
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#wb_Text166 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text166 div
{
   text-align: left;
}
#wb_Text167 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text167 div
{
   text-align: left;
}
#wb_Image267
{
   vertical-align: top;
}
#Image267
{
   border: 0px solid #000000;
   border-radius: 0px;
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#wb_Text165 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text165 div
{
   text-align: left;
}
#wb_Text2 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text2 div
{
   text-align: left;
}
#wb_Image13
{
   vertical-align: top;
}
#Image13
{
   border: 0px solid #000000;
   border-radius: 0px;
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#PhotoGallery1
{
   box-sizing: border-box;
   font-size: 0;
   width: 100%;
   height: 100%;
   table-layout: fixed;
   display: table;
   margin: 0;
}
#PhotoGallery1 .thumbnails
{
   margin: 0;
}
#PhotoGallery1 .thumbnail
{
   position: relative;
   min-height: 1px;
   box-sizing: border-box;
   float: left;
   padding: 3px 3px 3px 3px;
   width: 11.11111111%;
   text-align: center;
   vertical-align: top;
}
#PhotoGallery1 .thumbnail img
{
   border: 0px solid #000000;
   display: block;
   width: 100%;
   height: auto;
   max-width: 100%;
   box-sizing: border-box;
   border-radius: 0px;
}
#PhotoGallery1 .clearfix:before,
#PhotoGallery1 .clearfix:after,
#PhotoGallery1 .thumbnails:before,
#PhotoGallery1 .thumbnails:after
{
   display: table;
   content: " ";
}
#PhotoGallery1 .clearfix:after,
#PhotoGallery1 .thumbnails:after
{
   clear: both;
}
#PhotoGallery1 .visible-col9
{
   display: block;
}
#wb_TextMenu1
{
   background-color: transparent;
   background-image: none;
   color: #FFFFFF;
   font-family: Arial;
   font-weight: normal;
   font-style: normal;
   text-decoration: none;
   text-transform: none;
   font-size: 16px;
   margin: 0;
   text-align: center;
   overflow: hidden;
}
#wb_TextMenu1 span
{
   margin: 0 8px 0 0px;
}
#wb_TextMenu1 a
{
   color: inherit;
   text-decoration: inherit;
}
#wb_Pagination1
{
   text-align: center;
}
#Pagination1
{
   display: inline-block;
   list-style: none;
   padding: 0;
   border-radius: 0px;
   font-family: Arial;
   font-weight: normal;
   font-style: normal;
   font-size: 0;
   margin: 0;
}
#Pagination1 > li
{
   display: inline;
   font-size: 13px;
}
#Pagination1 > li > a, #Pagination1 > li > span
{
   position: relative;
   float: left;
   padding: 6px 12px 6px 12px;
   text-decoration: none;
   text-transform: none;
   background-color: #F6F6F6;
   background-image: none;
   border: 1px solid #C5C5C5;
   color: #454545;
   margin-left: -1px;
}
#Pagination1 > li:first-child > a, #Pagination1 > li:first-child > span
{
   margin-left: 0;
   border-bottom-left-radius: 0px;
   border-top-left-radius: 0px;
}
#Pagination1 > li:last-child > a, #Pagination1 > li:last-child > span
{
   border-bottom-right-radius: 0px;
   border-top-right-radius: 0px;
}
#Pagination1 > li > a:hover, #Pagination1 > li > span:hover, #Pagination1 > li > a:focus, #Pagination1 > li > span:focus 
{
   background-color: #CCCCCC;
   color: #23527C;
}
#Pagination1 > .active > a, #Pagination1 > .active > span, #Pagination1 > .active > a:hover, #Pagination1 > .active > span:hover, #Pagination1 > .active > a:focus, #Pagination1 > .active > span:focus
{
   z-index: 2;
   background-color: #337AB7;
   border-color: #337AB7;
   color: #FFFFFF;
   cursor: default;
}
#Pagination1 > .disabled > span, #Pagination1 > .disabled > span:hover, #Pagination1 > .disabled > span:focus, #Pagination1 > .disabled > a, #Pagination1 > .disabled > a:hover, #Pagination1 > .disabled > a:focus
{
   background-color: #FFFFFF;
   color: #777777;
   cursor: not-allowed;
   pointer-events: none;
}
#wb_Image5
{
   vertical-align: top;
}
#Image5
{
   border: 0px solid #000000;
   border-radius: 0px;
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#Image5:hover
{
   transform: rotate(0deg) scale(1.08,1.08) ;
   transition: transform 500ms linear 0ms;
}
#wb_Image6
{
   vertical-align: top;
}
#Image6
{
   border: 0px solid #000000;
   border-radius: 0px;
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#wb_Text5 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text5 div
{
   text-align: left;
}
#wb_Image7
{
   vertical-align: top;
}
#Image7
{
   border: 0px solid #000000;
   border-radius: 0px;
   box-sizing: border-box;
   padding: 0;
   transform: rotate(180deg);
   transform-origin: 50% 50%;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#wb_Image8
{
   vertical-align: top;
}
#Image8
{
   border: 0px solid #000000;
   border-radius: 0px;
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#wb_Text6 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text6 div
{
   text-align: left;
}
#wb_Image9
{
   vertical-align: top;
}
#Image9
{
   border: 0px solid #000000;
   border-radius: 0px;
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#wb_Image10
{
   vertical-align: top;
}
#Image10
{
   border: 0px solid #000000;
   border-radius: 0px;
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#wb_Text19 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text19 div
{
   text-align: left;
}
#wb_Image11
{
   vertical-align: top;
}
#Image11
{
   border: 0px solid #000000;
   border-radius: 0px;
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#wb_Image12
{
   vertical-align: top;
}
#Image12
{
   border: 0px solid #000000;
   border-radius: 0px;
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#wb_Text7 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text7 div
{
   text-align: left;
}
#wb_Image14
{
   vertical-align: top;
}
#Image14
{
   border: 0px solid #000000;
   border-radius: 0px;
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#wb_Text8 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text8 div
{
   text-align: left;
}
#wb_Image15
{
   vertical-align: top;
}
#Image15
{
   border: 0px solid #000000;
   border-radius: 0px;
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#wb_Image16
{
   vertical-align: top;
}
#Image16
{
   border: 0px solid #000000;
   border-radius: 0px;
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#wb_Text9 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text9 div
{
   text-align: left;
}
#wb_Text10 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text10 div
{
   text-align: left;
}
#wb_Image18
{
   vertical-align: top;
}
#Image18
{
   border: 0px solid #000000;
   border-radius: 0px;
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
/* =========================================================
   UPS CALCULATOR - VARIABLES
   ========================================================= */

:root {
  --tups-primary: #f36c21;
  --tups-primary-hover: #d9560c;
  --tups-dark: #222222;
  --tups-bg: #ffffff;
  --tups-card-bg: #ffffff;
  --tups-text: #333333;
  --tups-accent: #28a745;
  --tups-radius: 12px;
}


/* =========================================================
   OPEN BUTTON
   ========================================================= */

.btn-open-ups-modal {
  font-family: 'Kanit', 'Prompt', 'Segoe UI', Tahoma, sans-serif;

  background-color: var(--tups-primary);
  color: #ffffff;

  border: none;

  padding: 14px 28px;

  font-size: 1.1rem;
  font-weight: 600;

  border-radius: 8px;

  cursor: pointer;

  box-shadow: 0 4px 12px rgba(243, 108, 33, 0.3);

  transition: all 0.3s ease;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  line-height: 1.4;
}

.btn-open-ups-modal:hover {
  background-color: var(--tups-primary-hover);

  transform: translateY(-2px);

  box-shadow: 0 6px 16px rgba(243, 108, 33, 0.4);
}


/* =========================================================
   FULL SCREEN MODAL OVERLAY
   สำคัญมาก:
   ใช้ z-index สูงสุดเพื่อป้องกันสิ่งอื่นมาบัง
   ========================================================= */

.ups-modal-overlay {

  position: fixed !important;

  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;

  width: 100vw !important;
  height: 100vh !important;

  min-width: 100vw !important;
  min-height: 100vh !important;

  background-color: rgba(0, 0, 0, 0.65) !important;

  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  display: none;

  justify-content: center;
  align-items: center;

  padding: 15px;

  box-sizing: border-box;

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  /*
     VERY HIGH Z-INDEX
     เพื่อไม่ให้ Header / Sticky Menu /
     Floating Widget / Banner มาบัง
  */

  z-index: 2147483647 !important;

  isolation: isolate;

  transition:
    opacity 0.25s ease,
    visibility 0.25s ease;
}


/* =========================================================
   MODAL ACTIVE
   ========================================================= */

.ups-modal-overlay.active {

  display: flex !important;

  opacity: 1 !important;

  visibility: visible !important;

  pointer-events: auto !important;

  z-index: 2147483647 !important;
}


/* =========================================================
   MODAL WRAPPER
   ========================================================= */

.ups-calc-wrapper {

  position: relative !important;

  z-index: 2147483647 !important;

  isolation: isolate;

  font-family:
    'Kanit',
    'Prompt',
    'Segoe UI',
    Tahoma,
    Geneva,
    Verdana,
    sans-serif;

  width: 100%;

  max-width: 800px;

  max-height: 90vh;

  overflow-y: auto;

  overflow-x: hidden;

  background: var(--tups-card-bg);

  padding: 30px;

  border-radius: var(--tups-radius);

  box-shadow:
    0 10px 50px rgba(0,0,0,0.5);

  color: var(--tups-text);

  border-top: 5px solid var(--tups-primary);

  box-sizing: border-box;

  transform: translateY(-20px);

  transition: transform 0.3s ease;

  -webkit-overflow-scrolling: touch;
}


/* =========================================================
   MODAL ANIMATION
   ========================================================= */

.ups-modal-overlay.active .ups-calc-wrapper {

  transform: translateY(0);
}


/* =========================================================
   FORCE BOX SIZING
   ========================================================= */

.ups-calc-wrapper *,
.ups-calc-wrapper *::before,
.ups-calc-wrapper *::after {

  box-sizing: border-box;
}


/* =========================================================
   CLOSE BUTTON X
   ========================================================= */

.btn-modal-close-x {

  position: absolute !important;

  top: 15px !important;
  right: 20px !important;

  width: 40px;
  height: 40px;

  background: transparent;

  border: none;

  font-size: 1.8rem;

  font-weight: bold;

  color: #999999;

  cursor: pointer;

  line-height: 1;

  padding: 0;

  z-index: 2147483647 !important;

  transition: color 0.2s ease,
              background 0.2s ease;

  border-radius: 50%;
}

.btn-modal-close-x:hover {

  color: var(--tups-primary);

  background: #f5f5f5;
}


/* =========================================================
   HEADER
   ========================================================= */

.ups-calc-header {

  text-align: center;

  margin-bottom: 25px;

  padding-right: 30px;
}

.ups-calc-header h2 {

  color: var(--tups-dark);

  margin: 0 0 8px 0;

  font-size: 1.6rem;

  font-weight: 700;
}

.ups-calc-header h2 span {

  color: var(--tups-primary);
}

.ups-calc-header p {

  color: #666666;

  margin: 0;

  font-size: 0.9rem;

  line-height: 1.5;
}


/* =========================================================
   NAVIGATION TABS
   ========================================================= */

.ups-calc-nav {

  display: flex;

  gap: 8px;

  margin-bottom: 25px;

  background: #f1f3f5;

  padding: 6px;

  border-radius: 10px;
}

.ups-nav-btn {

  flex: 1;

  padding: 10px 6px;

  border: none;

  background: transparent;

  color: #555555;

  font-weight: 600;

  font-size: 0.9rem;

  border-radius: 8px;

  cursor: pointer;

  transition: all 0.3s ease;

  text-align: center;

  line-height: 1.3;

  font-family: inherit;
}

.ups-nav-btn:hover {

  background: #e2e5e8;
}

.ups-nav-btn.active {

  background: var(--tups-primary);

  color: #ffffff;

  box-shadow:
    0 3px 10px rgba(243, 108, 33, 0.3);
}


/* =========================================================
   TAB CONTENT
   ========================================================= */

.ups-tab-pane {

  display: none;
}

.ups-tab-pane.active {

  display: block;
}


/* =========================================================
   FORM
   ========================================================= */

.form-group {

  margin-bottom: 18px;
}

.form-group label {

  display: block;

  margin-bottom: 8px;

  font-weight: 600;

  color: var(--tups-dark);

  font-size: 0.95rem;
}


/* =========================================================
   INPUT
   ========================================================= */

.input-wrapper {

  position: relative;

  display: flex;

  align-items: center;
}

.input-wrapper input,
.input-wrapper select {

  width: 100%;

  padding: 12px 15px;

  border: 1px solid #ced4da;

  border-radius: 8px;

  font-size: 0.95rem;

  outline: none;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;

  background: #ffffff;

  color: #333333;

  font-family: inherit;
}

.input-wrapper input:focus,
.input-wrapper select:focus {

  border-color: var(--tups-primary);

  box-shadow:
    0 0 0 3px rgba(243, 108, 33, 0.15);
}

.unit-text {

  position: absolute;

  right: 15px;

  color: #888888;

  font-weight: 500;

  pointer-events: none;
}


/* =========================================================
   TIME INPUT
   ========================================================= */

.time-input-group {

  display: flex;

  gap: 10px;
}


/* =========================================================
   DEVICE LIST
   ========================================================= */

.device-row {

  display: flex;

  gap: 10px;

  margin-bottom: 10px;

  align-items: center;
}

.device-row input {

  padding: 10px 12px;

  border: 1px solid #ced4da;

  border-radius: 6px;

  font-size: 0.9rem;

  font-family: inherit;

  outline: none;
}

.device-row input:focus {

  border-color: var(--tups-primary);

  box-shadow:
    0 0 0 3px rgba(243, 108, 33, 0.1);
}

.device-name {

  flex: 2;
}

.device-watts {

  flex: 1;
}

.device-qty {

  flex: 0.8;
}


/* =========================================================
   REMOVE DEVICE
   ========================================================= */

.btn-remove {

  background: #dc3545;

  color: #ffffff;

  border: none;

  padding: 10px 14px;

  border-radius: 6px;

  cursor: pointer;

  font-weight: bold;

  transition: background 0.2s;

  font-family: inherit;

  flex-shrink: 0;
}

.btn-remove:hover {

  background: #bd2130;
}


/* =========================================================
   ADD DEVICE
   ========================================================= */

.btn-add {

  background: var(--tups-dark);

  color: #ffffff;

  border: none;

  padding: 10px 16px;

  border-radius: 6px;

  cursor: pointer;

  font-size: 0.85rem;

  margin-top: 5px;

  transition: background 0.2s;

  font-family: inherit;
}

.btn-add:hover {

  background: #000000;
}


/* =========================================================
   CALCULATE BUTTON
   ========================================================= */

.btn-calculate {

  width: 100%;

  background: var(--tups-primary);

  color: #ffffff;

  border: none;

  padding: 14px;

  font-size: 1rem;

  font-weight: bold;

  border-radius: 8px;

  cursor: pointer;

  margin-top: 15px;

  transition: background 0.3s ease;

  font-family: inherit;
}

.btn-calculate:hover {

  background: var(--tups-primary-hover);
}


/* =========================================================
   RESULT BOX
   ========================================================= */

.result-container {

  margin-top: 25px;

  background: #fff8f4;

  border: 1px solid #ffe2d1;

  border-left: 5px solid var(--tups-primary);

  padding: 20px;

  border-radius: 0 8px 8px 0;

  display: none;
}

.result-container h3 {

  margin: 0 0 15px 0;

  color: var(--tups-dark);

  font-size: 1.1rem;
}


/* =========================================================
   RESULT GRID
   ========================================================= */

.result-grid {

  display: grid;

  grid-template-columns:
    repeat(auto-fit, minmax(160px, 1fr));

  gap: 12px;
}


/* =========================================================
   RESULT CARD
   ========================================================= */

.result-card {

  background: #ffffff;

  padding: 12px;

  border-radius: 8px;

  text-align: center;

  box-shadow:
    0 2px 6px rgba(0,0,0,0.04);

  border: 1px solid #eeeeee;
}

.result-card .val {

  font-size: 1.4rem;

  font-weight: bold;

  color: var(--tups-primary);

  margin: 5px 0;
}

.result-card .lbl {

  font-size: 0.8rem;

  color: #666666;

  line-height: 1.4;
}


/* =========================================================
   NOTE
   ========================================================= */

.note-info {

  font-size: 0.8rem;

  color: #666666;

  margin-top: 15px;

  line-height: 1.5;
}


/* =========================================================
   CTA
   ========================================================= */

.cta-box {

  margin-top: 15px;

  padding: 12px;

  background: var(--tups-dark);

  color: #ffffff;

  border-radius: 6px;

  font-size: 0.85rem;

  text-align: center;

  line-height: 1.5;
}


/* =========================================================
   BOTTOM CLOSE
   ========================================================= */

.btn-modal-close-bottom {

  width: 100%;

  background: #e9ecef;

  color: #495057;

  border: none;

  padding: 12px;

  font-size: 0.95rem;

  font-weight: 600;

  border-radius: 8px;

  cursor: pointer;

  margin-top: 20px;

  transition: background 0.2s;

  font-family: inherit;
}

.btn-modal-close-bottom:hover {

  background: #dee2e6;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

  .ups-modal-overlay {

    padding: 8px !important;

    align-items: center;

  }

  .ups-calc-wrapper {

    max-height: 95vh;

    padding: 20px 15px;

    border-radius: 10px;
  }

  .ups-calc-header {

    padding-right: 35px;

    margin-bottom: 18px;
  }

  .ups-calc-header h2 {

    font-size: 1.3rem;
  }

  .ups-calc-header p {

    font-size: 0.8rem;
  }

  .ups-calc-nav {

    flex-direction: column;

    gap: 5px;

    margin-bottom: 20px;
  }

  .ups-nav-btn {

    width: 100%;

    padding: 11px 8px;

    font-size: 0.85rem;
  }

  .device-row {

    flex-direction: column;

    align-items: stretch;

    gap: 7px;
  }

  .device-name,
  .device-watts,
  .device-qty {

    flex: none;

    width: 100%;
  }

  .btn-remove {

    width: 100%;
  }

  .time-input-group {

    flex-direction: column;

    gap: 8px;
  }

  .result-grid {

    grid-template-columns: 1fr;
  }

  .result-card {

    width: 100%;
  }

  .btn-modal-close-x {

    top: 8px !important;

    right: 8px !important;
  }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

  .ups-calc-wrapper {

    padding: 18px 12px;

    max-height: 96vh;
  }

  .ups-calc-header h2 {

    font-size: 1.15rem;
  }

  .result-card .val {

    font-size: 1.2rem;
  }
}


/* =========================================================
   PREVENT WEBSITE ELEMENTS FROM INTERFERING
   ========================================================= */

body.ups-modal-open > *:not(#upsModalOverlay) {

  /*
     ไม่จำเป็นต้องซ่อน Content
     เพียงให้ Modal อยู่บนสุด
  */
}

html.ups-modal-html-lock,
body.ups-modal-body-lock {

  overflow: hidden !important;

  height: 100% !important;
}


/* =========================================================
   IMPORTANT:
   ทำให้ Modal อยู่เหนือ Widget ของ Third Party
   ========================================================= */

body > .ups-modal-overlay {

  position: fixed !important;

  z-index: 2147483647 !important;
}

body > .ups-modal-overlay .ups-calc-wrapper {

  z-index: 2147483647 !important;
}

