:root{
    --bodyMainBackColor: #FBFFF7;
    --bodyPadding: 10px;
    --bodyMainColumnMaxWidth: 1400px;
}

.main{
    max-width:var(--bodyMainColumnMaxWidth); 
    width:calc(100% - calc(var(--bodyPadding) * 2));
    margin:0 auto;
    padding-top: var(--bodyPadding);
    padding-left: var(--bodyPadding);
    padding-bottom: calc(var(--bodyPadding) + 5px);
    background:var(--bodyMainBackColor);color:#000000; 
    overflow-wrap: anywhere;
    height: max-content;
    overflow-x: hidden;
    display: flex;
    min-height: calc(calc(100vh - var(--headHeight)) - var(--FooterHeight));
}
.main.block{
    display: block !important;
}
.ua-mobile .main{ 
    width:100%;
 }
@media (max-width: 1070px) {
    .main{
        margin: 0;
    }
  }
@media (max-width: 1400px) {
    html.ua-desktop .main{ 
        width:calc(calc(100% - calc(var(--bodyPadding) * 4)) + 4px);
        padding-right: var(--bodyPadding);
     }
    html.ua-mobile .main{ 
        width:calc(calc(100% - calc(var(--bodyPadding) * 1.5)) + 4px);
        padding-right: var(--bodyPadding);
     }
    html .main ~ fieldset{ 
        width:100% !important;
        padding: 0;
     }
 }
.main h1{ padding-bottom:15px; font-size: 30px; }
.main h2{ font-size: 25px; margin-top:10px; margin-bottom:10px; }
.main p{ margin-top:10px; margin-bottom:10px; }

.col-50{
    flex-basis: initial;
    flex-grow: initial;
    flex-shrink: initial;
    order: initial;
    align-self: initial;
    box-sizing: border-box;
    word-wrap: break-word;
    position: relative;
    min-height: 1px;
    display: flex;
    width: 50%;
    padding:20px;
}
@media (max-width: 600px) {
    .main{display: block;}
    .col-50{
        flex-basis:auto;
        flex-grow:unset;
        flex-shrink: unset;
        position: inherit;
        min-height: 1px;
        display: block;
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        padding:10px;
    }
 }