html, body, div, a, p, table, pre, td, tr, th, ul, ol, li, h1, h2, h3, h4, h5, h6, form, textarea, fieldset, img, blockquote, iframe, label {margin: 0; padding: 0; border: 0; white-space: normal; line-height: normal; text-decoration: none; font-family: "play"; font-weight: normal; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;} //-webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; 

html {scrollbar-gutter: stable;}
body {font-size: 1rem; background-color: white; overflow-y: scroll; text-align: center; overscroll-behavior: contain;}
h1 {font-size: 1.5rem; font-weight: bold; text-align: right}
h2 {font-size: 1.4rem; font-weight: normal; margin-bottom: 1rem}
h3 {font-size: 1.2rem; font-weight: normal; margin-top: 1rem; margin-bottom: 0.5rem}
h4 {font-size: 0.8rem}

pre {white-space: pre-wrap; font-family: monospace; font-size: 14px; text-align: left; background: #f4f4f4; padding: 10px}

label {display: inline-block; font-size: 0.8rem; color: gray}

button, select, input, a {cursor: pointer}

.dateMask {width: 6rem}
.timeMask {width: 3rem}

a {color: blue}
a:hover {color: #AAF}
.hide {display: none !important}
.bold {font-weight: bold !important}
.red {color: red !important}
.blue {color: blue !important}
.black {color: black !important}
.green {color: green !important}
.gray {color: gray !important}
.striked {text-decoration: line-through}
.underlined {text-decoration: underline}
.sub {font-size: 0.8rem}
.baseFont {color: black; font-size: 1rem}
.center {text-align: center}
.right {text-align: right}
.left {text-align: left}
.border {border: 1px solid #CCC; border-radius: 0.5rem}

.textBlock {overflow-wrap: break-word; white-space: normal;}

.backWhite {background-color: white}
.backLightGray {background-color: #F5F5F5}

.fakeLink {color: blue; cursor: pointer}
.fakeLink:hover {color: #AAF}

.iconClose {color: red; font-size: 1.5rem; cursor: pointer}
.iconClose::after {content: '×'}

.iconCopy {color: blue; font-size: 1.2rem; cursor: pointer}
.iconCopy::after {content: '⧉'}

.iconEdit {color: blue; font-size: 1rem; cursor: pointer}
.iconEdit: hover {color: #AAF}
.iconEdit::after {content: 'Изменить'}

.quoteBigOpen {font-size: 1.5rem; margin-right: 0.2rem}
.quoteBigOpen::after {content: '“'}

.quoteBigClose {font-size: 1.5rem; margin-left: 0.2rem}
.quoteBigClose::after {content: '„'}

.rub {font-size: 0.8rem}
.rub::after {content: '₽'}

.mult {font-size: 0.8rem}
.mult::after {content: '×'}

.iconInfinity {font-size: 1.5rem}
.iconInfinity::after {content: '∞'}

.withHeader {border: 1px solid #CCC; position: relative; padding: 0.5rem; padding-top: 1rem;
  > h3 {position: absolute; top: -1.65rem; left: 1rem; font-size: 1.1rem; background-color: white; max-width: calc(100% - 3rem - 2px); overflow: hidden; padding: 0 0.5rem; white-space: nowrap; text-align: left}
}

.noDataMessage {color: red; font-size: 1rem; width: 100%; text-align: center; margin: 1rem auto}

.inputError {background-color: #FFDDDD}

input[type=text].inputSearch {background: url("/img/iconSearch.png") no-repeat scroll 7px 7px; padding-left: 35px; background-size: 20px; background-color: white}

input:disabled {opacity: 0.25; background-color: #F5F5F5}
select:disabled {opacity: 0.25; background-color: #F5F5F5}
option:disabled {color: #CCC}

div {border-radius: 0.5rem}
li {border-radius: 0.5rem}
img {border-radius: 0.5rem}

input::placeholder {color: #CCC}  
button, input[type=submit] {border: 1px solid gray; background-color: #E5E5E5; font-size: 1rem; border-radius: 0.25rem; padding: 0.5rem; font-family: "play"}
input[type=text], input[type=number], input[type=password], input[type=email], textarea, input {border: 1px solid gray; border-radius: 0.25rem; padding: 0.5rem; font-size: 1rem; font-family: "play"; box-sizing: content-box; resize: none}
textarea {border: 1px solid gray; border-radius: 0.25rem}
textarea::placeholder {color: #CCC}
input[type=checkbox] {zoom: 2; width: 0.8rem; margin: 0; padding: 0}
input[type=radio] {zoom: 1.5; width: 0.8rem; margin: 0; padding: 0}
select {border: 1px solid gray; background-color: white; border-radius: 0.3rem; font-family: "play"; font-size: 1rem; padding: 0.5rem; box-sizing: content-box;}
ul {list-style: none; border-radius: 0.5rem}
ul li {text-align: left}

.nowrap {white-space: nowrap}

.buttonsBox {display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1rem}

.toggleSwitch {position: relative; display: inline-block; width: 2rem; height: 0.5rem; margin: 0; vertical-align: top; background: white; border: 1px solid #bbc1e1; border-radius: 30px; outline: none; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; transition: all 0.3s cubic-bezier(0.2, 0.85, 0.32, 1.2);}
.toggleSwitch::after {content: ""; display: inline-block; position: absolute; left: 1px; top: 1px; width: calc(0.5rem - 2px); height: calc(0.5rem - 2px); background-color: red; border-radius: 50%; transform: translateX(0); transition: all 0.3s cubic-bezier(0.2, 0.85, 0.32, 1.2);}
.toggleSwitch:checked::after {transform: translateX(calc(100% - 2px)); background-color: white;}
.toggleSwitch:checked {background-color: green;}


.speechBubble { position: relative; background: #F5F5F5; padding: 0.5rem 1rem; padding-right: 2rem; border: 1px solid #CCC; margin: 2rem 0; border-radius: 1rem; text-align: right; font-size: 0.8rem}
.speechBubble::before, .speechBubble::after { content: ''; position: absolute; border: 11px solid transparent; top: 100%; right: 19px; border-top-color: #CCC;}
.speechBubble::after { border: 10px solid transparent; right: 20px; border-top-color: #F5F5F5; }
.speechBubble > .iconClose {position: absolute; top:0; right: 0.5rem;}

div.phoneInputBox { display: flex; justify-content: center; align-items: center; border: 1px solid gray; width: 11rem; overflow: hidden; border-radius: 0.25rem;
  > input {width: 7rem; text-align: left; border: 0}
  > input:focus {outline: none}
  > select.phonePrefix {width: 4rem; text-align: right; border: 0}
  > select.phonePrefix:focus {outline: none}
}

@media only screen AND (max-width: 500px) 
{
  h1 {margin-top: 7px}
}

@media only screen AND (orientation: landscape) AND (max-width: 1024px) 
{
}