.HelpSection {display:inline-block; max-width:960px; width:100%;}
.HelpSection h1 {max-width:960px;width:100%; font-size:36px;font-family:Noto Sans; font-weight:bold; color:#004B7F;padding-top:5px; margin:0px; padding-bottom:0px; text-align:left;}
.HelpSection h2 {max-width:960px;width:100%; padding-top:0px;font-size:18px; margin-top:5px; margin-bottom:10px;text-align:left;font-weight:normal;}

/* <editor-fold defaultstate="collapsed" desc="Video Tutorials"> */
.VideoTutorials a , .VideoTutorials a:visited{color:#004B7F !important;text-decoration: none;}
.VideoTutorials {width: 100%; max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; padding: 10px 10px 30px 10px;}
.VideoTutorials .Tutorial {flex: 1 1 300px; max-width: 340px; min-width: 260px; background: #fff; border: 1px solid #e0e0e0; border-radius: 16px; box-shadow: 0 6px 24px 0 rgba(0,0,0,0.10); margin: 0; transition: box-shadow 0.2s, transform 0.2s, opacity 0.2s; display: flex; flex-direction: column; align-items: stretch;}
.VideoTutorials .Tutorial:hover {opacity: 0.95; transform: translateY(-5px) scale(1.03); box-shadow: 0 10px 28px 0 rgba(52, 99, 189, 0.11);}
.VideoTutorials .Tutorial .Image {width: 100%; border-top-left-radius: 16px; border-top-right-radius: 16px; overflow: hidden;}
.VideoTutorials .Tutorial .Image img {width: 100%; height: 180px; object-fit: cover; border: 0; display: block;}
.VideoTutorials .Tutorial .Title {font-size: 1.1rem; text-align: center; font-weight: bold; margin: 0; padding: 16px 8px;}
.VideoTutorials .Tutorial a, .Tutorials .Tutorial a:visited {text-decoration: none; color: inherit; display: block; height: 100%;}
@media (max-width: 900px) 
{ 
    .VideoTutorials {gap: 16px;} 
    .VideoTutorials .Tutorial {flex: 1 1 46%; max-width: 100%;} .
    .VideoTutorials .Tutorial .Image img {height: 160px;} 
}
@media (max-width: 600px) 
{ 
    .VideoTutorials {gap: 12px; padding: 8px 2px 22px 2px;} 
    .VideoTutorials .Tutorial {flex: 1 1 100%; min-width: 0; max-width: 100%; border-radius: 12px;} 
    .VideoTutorials .Tutorial .Image img {height: 140px;} 
    .VideoTutorials .Tutorial .Title {font-size: 1rem; padding: 10px 4px;} 
}
/* </editor-fold> */

/* <editor-fold defaultstate="collapsed" desc="Help Section Items"> */
.HelpSectionSmallIcons a,.HelpSectionSmallIcons a:visited{color:#004B7F !important;text-decoration:none;}
.HelpSectionSmallIcons .Objects{width:100%;max-width:960px;margin:0 auto;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;}
.HelpSectionSmallIcons .Objects .Object{background:#fff;border:1px solid rgba(0,0,0,.10);border-radius:14px;overflow:hidden;box-shadow:0 6px 24px 0 rgba(0,0,0,0.10);transition:box-shadow .2s,transform .2s,opacity .2s,border-color .2s;}
.HelpSectionSmallIcons .Objects a:hover .Object{opacity:.95;transform:translateY(-5px) scale(1.03);box-shadow:0 10px 28px 0 rgba(52,99,189,0.11);border-color:rgba(0,0,0,.18);}
.HelpSectionSmallIcons .Objects a:focus-visible .Object{opacity:.95;transform:translateY(-5px) scale(1.03);box-shadow:0 10px 28px 0 rgba(52,99,189,0.11);border-color:rgba(0,0,0,.18);outline:3px solid rgba(120,90,255,.25);outline-offset:2px;}
.HelpSectionSmallIcons .Objects a{display:block;color:inherit;text-decoration:none;}
.HelpSectionSmallIcons .Objects .Object .Image{width:100%;aspect-ratio:1/1;background:linear-gradient(180deg,rgba(0,0,0,.03),rgba(0,0,0,0));display:flex;align-items:center;justify-content:center;}
.HelpSectionSmallIcons .Objects .Object .Image img{width:100%;height:100%;object-fit:cover;border:0;display:block;}
.HelpSectionSmallIcons .Objects .Object .Title{font-size:14px;font-weight:700;text-align:center;padding:10px 10px 12px;line-height:1.25;min-height:48px;display:flex;align-items:center;justify-content:center;}

/* Responsive breakpoints */
@media (max-width:1024px){
  .HelpSectionSmallIcons .Objects{grid-template-columns:repeat(4,minmax(0,1fr));}
}
@media (max-width:768px){
  .HelpSectionSmallIcons .Objects{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
}
@media (max-width:520px){
  .HelpSectionSmallIcons .Objects{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .HelpSectionSmallIcons .Objects .Object .Title{font-size:12px;min-height:44px;}
}
/* </editor-fold> */


.TutorialContainer {max-width:960px;min-height:500px;margin-left:auto;margin-right:auto;}
.TutorialContainer h1{font-family:Noto Sans; font-weight:bold;font-size:30px; color:#004B7F; line-height:30px; padding-top:5px; text-align:left; text-shadow: 0px 2px 0px rgba(255, 255, 255, 1);}
.TutorialContainer .MainImage{ width:256px;float:left;padding-right:20px;padding-bottom:20px; margin-top:5px; }
.TutorialContainer .MainImage img{float:left; width:256px; border:1px silver solid;}

.TutorialContainer .ImagePlaceHolder{ width:100%; text-align: center;}
.TutorialContainer .ImagePlaceHolder a img{margin-left:auto;margin-right:auto; border:1px silver solid; max-width:800px;}
.TutorialContainer .ImagePlaceHolder .ImageTitle {font-size:14px; padding-bottom: 16px;}

.UsefullFilesContainer {max-width:960px;min-height:250px;margin-left:auto;margin-right:auto;}
.UsefullFilesContainer h1{font-family:Noto Sans; font-weight:bold;font-size:30px; color:#004B7F; line-height:30px; padding-top:5px; text-align:left; text-shadow: 0px 2px 0px rgba(255, 255, 255, 1);}

.BackToHelpLink{color:black;}
.BackToHelpLink a,a:visited{color:black;}

@media screen and (max-width: 960px) {
    .TutorialContainer {width:95%}
    .TutorialContainer .MainImage{ width:110px;float:left;padding-right:20px;padding-bottom:20px;}
    .TutorialContainer .MainImage img{float:left; width:110px;}
    .TutorialContainer .ImagePlaceHolder a img{margin-left:auto;margin-right:auto; border:1px silver solid; width:90%;}
    .TutorialContainer .ImagePlaceHolder .ImageTitle {font-size:14px; padding-bottom: 16px;}
}