:root {
    --background-block: #fbfbfb; --background-block-DT: color-mix(in srgb, var(--background-main-DT) 18%, rgb(60, 60, 60));
    --background-blockShade: #f0f0f0; --background-blockShade-DT: color-mix(in srgb, var(--background-main-DT) 35%, rgb(60, 60, 60));
    --background-blockBorder: #b7b7b754; --background-blockBorder-DT: color-mix(in srgb, var(--background-main-DT) 50%, rgb(122, 122, 122));

    --background-innerBlock: color-mix(in srgb, var(--background-main) 10%, rgba(0, 0, 0, 0.07)); 
    --background-innerBlock-DT: rgba(0, 0, 0, 0.15); 
    --background-innerBlockShade: color-mix(in srgb, var(--background-main) 10%, rgba(0, 0, 0, 0.15)); 
    --background-innerBlockShade-DT: rgba(0, 0, 0, 0.30);
}


.mainBlock {
    border-radius: var(--radius-block) var(--radius-block) var(--radius-block) var(--radius-block); 
    border: 1px solid var(--background-blockBorder);
    background-color: var(--background-block); 
}
.mainBlock > :first-child {border-top-left-radius: var(--radius-block); border-top-right-radius: var(--radius-block);}
.mainBlock > * {border-bottom: 1px solid var(--background-blockBorder);}
.mainBlock > :last-child, .hr > :last-child {border-bottom-left-radius: var(--radius-block); border-bottom-right-radius: var(--radius-block); border-bottom: none;}

.innerBlock {background-color: rgba(255, 211, 127, 0.5); border-radius: var(--radius-block);}
a.innerBlock:hover {background-color: rgba(255, 211, 127, 0.75);}
/* .innerBlock {background-color: var(--background-innerBlock); border-radius: var(--radius-block);} */
/* a.innerBlock:hover {background-color: var( --background-innerBlockShade);} */


.hr > * {border-bottom: 1px solid var(--background-blockBorder);}
.hr > :last-child {border-bottom: none !important;}
.vr > * {border-right: 1px solid var(--background-blockBorder);}
.vr > :last-child {border-right: none !important;}

.center {text-align: center;}
.right {text-align: right;}
.left {text-align: left;}

.flexRow, .flexRow_R, .flexRow_Column, .flexRow_ColumnR {display: flex; flex-direction: row;}
.flexColumn, .flexColumn_R, .flexColumn_Row, .flexColumn_RowR {display: flex; flex-direction: column;}
.flexRowR, .flexRowR_R, .flexRowR_Column, .flexRowR_ColumnR {display: flex; flex-direction: row-reverse;}
.flexColumnR, .flexColumnR_R, .flexColumnR_Row, .flexColumnR_RowR {display: flex; flex-direction: column-reverse;}

.ai-center {align-items: center;}
.ai-start {align-items: flex-start;}
.ai-end {align-items: flex-end;}
.jc-between {justify-content: space-between;}
.jc-around {justify-content: space-around;}
.jc-center {justify-content: center;}

.wrapFlex {flex-wrap: wrap;}
.centerFlex {justify-content: center; align-items: center;}

.pointer {cursor: pointer;}

.scroll {overflow: auto; scrollbar-width: thin;}
.scroll-x {overflow-x: auto; scrollbar-width: thin;}
.scroll-y {overflow-y: auto; scrollbar-width: thin;}

.hidden, .hiddenDesctop {display: none !important;}

.bold {font-weight: bold;}
.italic {font-style: italic;}

.relative {position: relative;}
.absolute {position: absolute;}
.static {position: static;}

.inline {display: inline;}
.block {display: block;}
.inlineBlock {display: inline-block;}

.floatLeft {float: left;}
.floatRight {float: right;}
.clearBoth {clear: both;}








.width-400_ {margin: 0 auto; width: 100%; max-width: 400px;}
.width-600_ {margin: 0 auto; width: 100%; max-width: 600px;}
.width-900_ {margin: 0 auto; width: 100%; max-width: 900px;}
.width-1200_ {margin: 0 auto; width: 100%; max-width: 1200px;}
.width-max {width: 100%; display: block;}

.padding-6, .padding-6_ {padding: 6px;}
.padding-10, .padding-10_ {padding: 10px;}
.padding-20, .padding-20_ {padding: 20px;}
.padding-50, .padding-50_ {padding: 50px;}

.img-12, .img-12_ {width: 12px;}
.img-16, .img-16_ {width: 16px;}
.img-20, .img-20_ {width: 20px;}
.img-24, .img-24_ {width: 24px;}
.img-30, .img-30_ {width: 30px;}
.img-40, .img-40_ {width: 40px;}
.img-50, .img-50_ {width: 50px;}
.img-80, .img-80_ {width: 80px;}
.img-100, .img-100_ {width: 100px;}
.img-120, .img-120_ {width: 120px;}
.img-140, .img-140_ {width: 140px;}

.size-10, .size-10_ {font-size: 10px !important;}
.size-12, .size-12_ {font-size: 12px !important;}
.size-14, .size-14_ {font-size: 14px !important;}
.size-16, .size-16_, BODY {font-size: 16px !important;}
.size-18, .size-18_ {font-size: 18px !important;}
.size-20, .size-20_ {font-size: 20px !important;}
.size-24, .size-24_ {font-size: 24px !important;}
.size-28, .size-28_ {font-size: 28px !important;}
.size-32, .size-32_ {font-size: 32px !important;}
.size-40, .size-40_ {font-size: 40px !important;}
.size-50, .size-50_ {font-size: 50px !important;}
.size-60, .size-60_ {font-size: 60px !important;}
.size-80, .size-80_ {font-size: 80px !important;}
.size-100, .size-100_ {font-size: 100px !important;}

.border-2 {border-style: solid; border-width: 2px;}
.border-6, .border-6_ {border-style: solid; border-width: 6px;}

.maxSize-80, .maxSize-80_ {max-width: 80px; max-height: 80px;}
.maxSize-60, .maxSize-60_ {max-width: 60px; max-height: 60px;}

.radius-6, .radius-6_ {border-radius: 6px;}
.radius-12, .radius-12_ {border-radius: 12px;}
.radius-16, .radius-16_ {border-radius: 16px;}
.radius-40, .radius-40_ {border-radius: 40px;}
.radius {border-radius: 50%;}
.radius-top {border-top-left-radius: var(--radius-block); border-top-right-radius: var(--radius-block);}
.radius-bottom {border-bottom-left-radius: var(--radius-block); border-bottom-right-radius: var(--radius-block);}

.gap-5, .gap-5_ {gap: 5px;}
.gap-10, .gap-10_ {gap: 10px;}
.gap-20, .gap-20_ {gap: 20px;}
.gap-30, .gap-30_ {gap: 30px;}

.flex-1 {flex: 1;}
.flex-1-0-auto {flex: 1 0 auto;}

.borderColor-white {border-color: white;}


/* Цвет */
.c-red, .c-red_L, .c-red_D {color: var(--color-red);} 
.c-red-L {color: var(--color-red-L);} 
.c-red-D {color: var(--color-red-D);}

.c-green, .c-green_L, .c-green_D {color: var(--color-green);} 
.c-green-L {color: var(--color-green-L);} 
.c-green-D {color: var(--color-green-D);}

.c-orange, .c-orange_L, .c-orange_D {color: var(--color-orange);} 
.c-orange-L {color: var(--color-orange-L);} 
.c-orange-D {color: var(--color-orange-D);}

.c-blue, .c-blue_L, .c-blue_D {color: var(--color-blue);} 
.c-blue-L {color: var(--color-blue-L);} 
.c-blue-D {color: var(--color-blue-D);}

.c-pink, .c-pink_L, .c-pink_D {color: var(--color-pink);} 
.c-pink-L {color: var(--color-pink-L);} 
.c-pink-D {color: var(--color-pink-D);}

.c-gray, .c-gray_L, .c-gray_D {color: var(--color-gray);}
.c-white {color: var(--color-white);}
.c-black {color: var(--color-black);}
.c-main_white {color: var(--color-main);}
/* Цвет */


/* Багруанд */
.b-red, .b-red_ {background: var(--color-red);} 
.button.b-red:hover, .button.b-red_:hover {background: var(--color-red-D);}
.b-red-D, .b-red-D_ {background: var(--color-red-D);} 
.button.b-red-D:hover, .button.b-red-D_:hover {background: var(--color-red-DD);} 
.b-red-L, .b-red-L_ {background: var(--color-red-L);} 
.button.b-red-L:hover, .button.b-red-L_:hover {background: var(--color-red);} 

.b-green, .b-green_ {background: var(--color-green);} 
.button.b-green:hover, .button.b-green_:hover {background: var(--color-green-D);}
.b-green-D, .b-green-D_ {background: var(--color-green-D);} 
.button.b-green-D:hover, .button.b-green-D_:hover {background: var(--color-green-DD);} 
.b-green-L, .b-green-L_ {background: var(--color-green-L);} 
.button.b-green-L:hover, .button.b-green-L_:hover {background: var(--color-green);} 

.b-orange, .b-orange_ {background: var(--color-orange);} 
.button.b-orange:hover, .button.b-orange_:hover {background: var(--color-orange-D);}
.b-orange-D, .b-orange-D_ {background: var(--color-orange-D);} 
.button.b-orange-D:hover, .button.b-orange-D_:hover {background: var(--color-orange-DD);} 
.b-orange-L, .b-orange-L_ {background: var(--color-orange-L);} 
.button.b-orange-L:hover, .button.b-orange-L_:hover {background: var(--color-orange);} 

.b-blue, .b-blue_ {background: var(--color-blue);} 
.button.b-blue:hover, .button.b-blue_:hover {background: var(--color-blue-D);}
.b-blue-D, .b-blue-D_ {background: var(--color-blue-D);} 
.button.b-blue-D:hover, .button.b-blue-D_:hover {background: var(--color-blue-DD);} 
.b-blue-L, .b-blue-L_ {background: var(--color-blue-L);} 
.button.b-blue-L:hover, .button.b-blue-L_:hover {background: var(--color-blue);} 

.b-pink, .b-pink_ {background: var(--color-pink);} 
.button.b-pink:hover, .button.b-pink_:hover {background: var(--color-pink-D);}
.b-pink-D, .b-pink-D_ {background: var(--color-pink-D);} 
.button.b-pink-D:hover, .button.b-pink-D_:hover {background: var(--color-pink-DD);} 
.b-pink-L, .b-pink-L_ {background: var(--color-pink-L);} 
.button.b-pink-L:hover, .button.b-pink-L_:hover {background: var(--color-pink);} 
 
.b-success {background: var(--background-success);}
.b-error {background: var(--background-error);}
.b-main {background-color: var(--background-main);}
/* Багруанд */







/*/////////////////////////////////*/
/*////////// ТЁМНАЯ ТЕМА //////////*/
/*/////////////////////////////////*/
body.dark-theme .innerBlock {background-color: rgba(132, 98, 47, 0.5);}
body.dark-theme a.innerBlock:hover {background-color: rgba(132, 98, 47, 0.75);}
/* body.dark-theme .innerBlock {background-color: var(--background-innerBlock-DT);}
body.dark-theme a.innerBlock:hover {background-color: var(--background-innerBlockShade-DT);} */

body.dark-theme .mainBlock {background-color: var(--background-block-DT); border-color: var(--background-blockBorder-DT);}
body.dark-theme .mainBlock > * {border-bottom-color: var(--background-blockBorder-DT);}

body.dark-theme .hr > * {border-bottom: 1px solid var(--background-blockBorder-DT);}
body.dark-theme .vr > * {border-right: 1px solid var(--background-blockBorder-DT);}

/* цвета */
body.dark-theme .c-main_white {color: var(--color-white);}
body.dark-theme .c-gray_L {color: var(--color-gray-L);}
body.dark-theme .c-gray_D {color: var(--color-gray-D);}
body.dark-theme .c-green_L {color: var(--color-green-L);} 
body.dark-theme .c-green_D {color: var(--color-green-D);}
body.dark-theme .c-red_L {color: var(--color-red-L);} 
body.dark-theme .c-red_D {color: var(--color-red-D);}
body.dark-theme .c-orange_L {color: var(--color-orange-L);} 
body.dark-theme .c-orange_D {color: var(--color-orange-D);}
body.dark-theme .c-blue_L {color: var(--color-blue-L);} 
body.dark-theme .c-blue_D {color: var(--color-blue-D);}
body.dark-theme .c-pink_L {color: var(--color-pink-L);} 
body.dark-theme .c-pink_D {color: var(--color-pink-D);}
/* цвета */


/* баграунды */
body.dark-theme .b-red {background: var(--color-red);} body.dark-theme .button.b-red:hover {background: var(--color-red-L);}
body.dark-theme .b-red_ {background: var(--color-red-D);} body.dark-theme .button.b-red_:hover {background: var(--color-red);}
body.dark-theme .b-red-D {background: var(--color-red-D);} body.dark-theme .button.b-red-D:hover {background: var(--color-red);}
body.dark-theme .b-red-D_ {background: var(--color-red-DD);} body.dark-theme .button.b-red-D_:hover {background: var(--color-red-D);}
body.dark-theme .b-red-L {background: var(--color-red-L);} body.dark-theme .button.b-red-L:hover {background: var(--color-red-LL);}
body.dark-theme .b-red-L_ {background: var(--color-red);} body.dark-theme .button.b-red-L_:hover {background: var(--color-red-L);}

body.dark-theme .b-green {background: var(--color-green);} body.dark-theme .button.b-green:hover {background: var(--color-green-L);}
body.dark-theme .b-green_ {background: var(--color-green-D);} body.dark-theme .button.b-green_:hover {background: var(--color-green);}
body.dark-theme .b-green-D {background: var(--color-green-D);} body.dark-theme .button.b-green-D:hover {background: var(--color-green);}
body.dark-theme .b-green-D_ {background: var(--color-green-DD);} body.dark-theme .button.b-green-D_:hover {background: var(--color-green-D);}
body.dark-theme .b-green-L {background: var(--color-green-L);} body.dark-theme .button.b-green-L:hover {background: var(--color-green-LL);}
body.dark-theme .b-green-L_ {background: var(--color-green);} body.dark-theme .button.b-green-L_:hover {background: var(--color-green-L);}

body.dark-theme .b-orange {background: var(--color-orange);} body.dark-theme .button.b-orange:hover {background: var(--color-orange-L);}
body.dark-theme .b-orange_ {background: var(--color-orange-D);} body.dark-theme .button.b-orange_:hover {background: var(--color-orange);}
body.dark-theme .b-orange-D {background: var(--color-orange-D);} body.dark-theme .button.b-orange-D:hover {background: var(--color-orange);}
body.dark-theme .b-orange-D_ {background: var(--color-orange-DD);} body.dark-theme .button.b-orange-D_:hover {background: var(--color-orange-D);}
body.dark-theme .b-orange-L {background: var(--color-orange-L);} body.dark-theme .button.b-orange-L:hover {background: var(--color-orange-LL);}
body.dark-theme .b-orange-L_ {background: var(--color-orange);} body.dark-theme .button.b-orange-L_:hover {background: var(--color-orange-L);}

body.dark-theme .b-blue {background: var(--color-blue);} body.dark-theme .button.b-blue:hover {background: var(--color-blue-L);}
body.dark-theme .b-blue_ {background: var(--color-blue-D);} body.dark-theme .button.b-blue_:hover {background: var(--color-blue);}
body.dark-theme .b-blue-D {background: var(--color-blue-D);} body.dark-theme .button.b-blue-D:hover {background: var(--color-blue);}
body.dark-theme .b-blue-D_ {background: var(--color-blue-DD);} body.dark-theme .button.b-blue-D_:hover {background: var(--color-blue-D);}
body.dark-theme .b-blue-L {background: var(--color-blue-L);} body.dark-theme .button.b-blue-L:hover {background: var(--color-blue-LL);}
body.dark-theme .b-blue-L_ {background: var(--color-blue);} body.dark-theme .button.b-blue-L_:hover {background: var(--color-blue-L);}

body.dark-theme .b-pink {background: var(--color-pink);} body.dark-theme .button.b-pink:hover {background: var(--color-pink-L);}
body.dark-theme .b-pink_ {background: var(--color-pink-D);} body.dark-theme .button.b-pink_:hover {background: var(--color-pink);}
body.dark-theme .b-pink-D {background: var(--color-pink-D);} body.dark-theme .button.b-pink-D:hover {background: var(--color-pink);}
body.dark-theme .b-pink-D_ {background: var(--color-pink-DD);} body.dark-theme .button.b-pink-D_:hover {background: var(--color-pink-D);}
body.dark-theme .b-pink-L {background: var(--color-pink-L);} body.dark-theme .button.b-pink-L:hover {background: var(--color-pink-LL);}
body.dark-theme .b-pink-L_ {background: var(--color-pink);} body.dark-theme .button.b-pink-L_:hover {background: var(--color-pink-L);}

body.dark-theme .b-success {background: var(--background-success-DT);}
body.dark-theme .b-error {background: var(--background-error-DT);}
body.dark-theme .b-main {background-color: var(--background-main-DT);}
/* баграунды */




/*/////////////////////////////////*/
/*////////// АДАПТИВНОСТЬ //////////*/
/*/////////////////////////////////*/
@media screen and (max-width: 1380px) {
    .width-900_ {max-width: 800px;}
    .width-1200_ {max-width: 1000px;}
}



@media screen and (max-width: 1024px) {
    .width-900_ {max-width: 700px;}
    .width-1200_ {max-width: 900px;}
}



@media screen and (max-width: 768px) {
    .width-900_, .width-1200_ {max-width: 600px;}

    .img-12_ {width: 11px;}
    .img-16_ {width: 15px;} 
    .img-20_ {width: 18px;} 
    .img-24_ {width: 22px;} 
    .img-30_ {width: 27px;} 
    .img-40_ {width: 36px;} 
    .img-50_ {width: 45px;} 
    .img-80_ {width: 71px;} 
    .img-100_ {width: 89px;} 
    .img-120_ {width: 107px;} 
    .img-140_ {width: 125px;} 

    .size-10_  {font-size: 9.4px !important;} /* 6% */
    .size-12_  {font-size: 11.2px !important;} 
    .size-14_  {font-size: 13.0px !important;} 
    .size-16_, BODY {font-size: 14.8px !important;}  
    .size-18_  {font-size: 16.5px !important;} 
    .size-20_  {font-size: 18.3px !important;}  
    .size-24_  {font-size: 21.7px !important;}  
    .size-28_  {font-size: 25.0px !important;}  
    .size-32_  {font-size: 28.2px !important;}   
    .size-40_  {font-size: 34.4px !important;} 
    .size-50_  {font-size: 41.7px !important;} 
    .size-60_  {font-size: 48.4px !important;} 
    .size-80_  {font-size: 60.2px !important;}  
    .size-100_ {font-size: 70px !important;}  /* 30% */

    .radius-6_ {border-radius: 5px;}
    .radius-12_ {border-radius: 10px;}
    .radius-16_ {border-radius: 14px;}
    .radius-40_ {border-radius: 36px;}


    .maxSize-80_ {max-width: 72px; max-height: 72px;}
    .maxSize-60_ {max-width: 54px; max-height: 54px;}

    
    
}



@media screen and (max-width: 640px) {
    .width-900_, .width-600_, .width-400_ {margin: 0 auto; max-width: 480px;}

    .padding-6_ {padding: 5px;}
    .padding-10_ {padding: 8px;}
    .padding-20_ {padding: 16px;}
    .padding-50_ {padding: 40px;}

    .img-12_ {width: 10px;} 
    .img-16_ {width: 13px;}
    .img-20_ {width: 16px;} 
    .img-24_ {width: 19px;} 
    .img-30_ {width: 24px;} 
    .img-40_ {width: 32px;} 
    .img-50_ {width: 39px;} 
    .img-80_ {width: 62px;} 
    .img-100_ {width: 78px;} 
    .img-120_ {width: 94px;} 
    .img-140_ {width: 109px;} 

    
    .size-10_  {font-size: 9.2px !important;} /* 8% */
    .size-12_  {font-size: 11.0px !important;} 
    .size-14_  {font-size: 12.7px !important;} 
    .size-16_, BODY {font-size: 14.4px !important;}  
    .size-18_  {font-size: 16.0px !important;} 
    .size-20_  {font-size: 17.7px !important;}  
    .size-24_  {font-size: 20.9px !important;}  
    .size-28_  {font-size: 24.0px !important;}  
    .size-32_  {font-size: 26.9px !important;}   
    .size-40_  {font-size: 32.5px !important;} 
    .size-50_  {font-size: 38.9px !important;} 
    .size-60_  {font-size: 44.5px !important;} 
    .size-80_  {font-size: 53.7px !important;}  
    .size-100_ {font-size: 60px !important;} /* 40% */

    .radius-6_ {border-radius: 4px;}
    .radius-12_ {border-radius: 8px;}
    .radius-16_ {border-radius: 12px;}
    .radius-40_ {border-radius: 32px;}

    .border-6_ {border-width: 5px;}
    
    .gap-5_ {gap: 4px;}
    .gap-10_ {gap: 8px;}
    .gap-20_ {gap: 16px;}
    .gap-30_ {gap: 24px;}

    .maxSize-80_ {max-width: 66px; max-height: 66px;}
    .maxSize-60_ {max-width: 48px; max-height: 48px;}

    .hiddenMobile {display: none !important;}
    .hiddenDesctop {display: unset !important;}
    
    .flexRowR_R, .flexColumnR_Row, .flexColumn_Row {flex-direction: row;}
    .flexRow_R, .flexColumn_RowR, .flexColumnR_RowR {flex-direction: row-reverse;}
    .flexColumnR_R, .flexRow_Column, .flexRowR_Column {flex-direction: column;}
    .flexColumn_R, .flexRow_ColumnR, .flexRowR_ColumnR {flex-direction: column-reverse;}
    .flexRow_Column.ai-start, .flexRowR_Column.ai-start, .flexRow_ColumnR.ai-start, .flexRowR_ColumnR.ai-start {align-items: stretch !important;}
}



@media screen and (max-width: 480px) {
    .width-1200_, .width-900_, .width-600_, .width-400_ {margin: 0 5px; width: auto;}

    .padding-6_ {padding: 4px;}
    .padding-10_ {padding: 6px;}
    .padding-20_ {padding: 12px;}
    .padding-50_ {padding: 30px;}

    .img-12_ {width: 8px;} 
    .img-16_ {width: 11px;} 
    .img-20_ {width: 13px;} 
    .img-24_ {width: 16px;} 
    .img-30_ {width: 20px;}
    .img-40_ {width: 27px;} 
    .img-50_ {width: 33px;} 
    .img-80_ {width: 53px;} 
    .img-100_ {width: 67px;} 
    .img-120_ {width: 80px;} 
    .img-140_ {width: 93px;} 

    .size-10_  {font-size: 9px !important;}  /* 10% */
    .size-12_  {font-size: 10.7px !important;} 
    .size-14_  {font-size: 12.3px !important;} 
    .size-16_, BODY {font-size: 14px !important;}  
    .size-18_  {font-size: 15.6px !important;} 
    .size-20_  {font-size: 17.1px !important;}  
    .size-24_  {font-size: 20.1px !important;}  
    .size-28_  {font-size: 23px !important;}  
    .size-32_  {font-size: 25.7px !important;}   
    .size-40_  {font-size: 30.7px !important;} 
    .size-50_  {font-size: 36.1px !important;} 
    .size-60_  {font-size: 40.7px !important;} 
    .size-80_  {font-size: 47.1px !important;}  
    .size-100_ {font-size: 50px !important;}  /* 50% */

    .radius-6_ {border-radius: 3px;}
    .radius-12_ {border-radius: 6px;}
    .radius-16_ {border-radius: 10px;}
    .radius-40_ {border-radius: 28px;}

    .border-6_ {border-width: 4px;}

    .gap-5_ {gap: 3px;}
    .gap-10_ {gap: 6px;}
    .gap-20_ {gap: 12px;}
    .gap-30_ {gap: 18px;}

    .maxSize-80_ {max-width: 52px; max-height: 52px;}
    .maxSize-60_ {max-width: 42px; max-height: 42px;}

    .mainBlock {border-radius: 10px;}
}