body { 
	background: url(../../images/ipad/pifagor-background.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	font: 400 16px Georgia, Times, serif;	
}
div.container { 
}
div.box { 
	height: 702px; 
	width: 960px;
	margin: 0 auto;
	background: url(../../images/ipad/main-border.png) no-repeat center center; 
	position: relative; 
	vertical-align: middle;
}
form#search-anagram { 
    /*margin-bottom: 25px;*/
} 
div.left-box { 
	width: 314px;
	float: left; 
	height: 690px;
	overflow: hidden;
} 
div.left-box-header {
	background: url(../../images/ipad/left-top.png) no-repeat center center; 
	height: 38px;
	margin-top:14px;
	margin-left: 14px;
}
div.left-box-next-item { 
	background: url(../../images/ipad/left-content.png) repeat-y left top; 
	min-height: 634px;
	margin-left: 14px; 
	margin-top: 0px;
} 
div.left-box-last-panel { 
	background: url(../../images/ipad/left-panel.png) no-repeat center center; 
	width: 295px;
 	height: 140px;	
	bottom: 10px;
	margin-left: 10px;
	position: absolute;
    z-index: -1;
}
div.separator {
	height: 676px;
	width: 14px; 
	margin-top: 14px;
	margin-left: -1px;
	background: url(../../images/ipad/vertical-split.png) no-repeat center center; 
	float: left;
}
div.like-buttons { 
	position: absolute;
	height: 250px;
	width: 58px;
	top: 200px;
	border-radius: 6px;
    display: table-column;
    overflow: hidden;
} 

span.b-share-btn__wrap { 
    margin-top: 5px;
    margin-left: 0px !important;
    width: 54px;
  float:none !important;
  display:block !important;
  padding:2px !important;
}

.b-share__handle, .b-share-icon {
}

div.right-box { 
	float: right;
	width: 623px;
	height: 674px;
	position: relative;
	margin-right:10px;
	margin-top: 15px;
	text-overflow: ellipsis;
	background: url(../../images/ipad/leather-background.png);
}
div.right-box-header { 
	width: 623px; 
	height: 42px;
	background: url(../../images/ipad/right-bar.png) no-repeat center center; 
	margin-top: -3px;
	margin-left: -2px;
	float: left;
}
div.right-box-first-item { 
	background: url(../../images/ipad/right-header.png) no-repeat center center; 
	width: 623px;
	height: 28px;
	float: left; 
	margin-left: -2px;
} 
div.right-box-next-item { 
	background: url(../../images/ipad/right-content.png) repeat-y center center; 
	width: 623px;
	height: 430px;
	float: left; 
	margin-left: -2px;
	margin-top: -1px;
	overflow-y: scroll;
} 
div.right-box-content { 
	font: 15px Arial, Helvetica, sans-serif;
	margin-left: 63px;
}
div.right-box-empty-item { 
	background: url(../../images/ipad/right-content.png) repeat-y center center; 
	width: 623px;
	height: 160px;
	float: left; 
	margin-left: -2px;
	margin-top: -1px;
} 

div.right-box-last-panel { 
	background: url(../../images/ipad/right-bottom.png) no-repeat center center; 
	width: 623px;
	height: 49px;
	float: left; 
	margin-left: -1px;
	position: absolute;
	bottom: -3px;
} 
div.right-box-header h1 { 
	color: white;
	margin-top: 10px;
	font-size: 22px;
	margin-left: 10px;
	font: 24px 'Ubuntu Condensed', 'Arial', 'Helvetica', sans-serif;
}
div.right-box-next-item p { } 
div.left-box-next-item p, div.left-box-header p { 
	margin: 0 0 -4px 26px; 
	height: 21px; 
	font-style: italic;
	width: 240px;
	font-family: Georgia, Times, serif;
	overflow: hidden;
	white-space:nowrap;
	text-overflow: ellipsis;
} 
div.ad300x250{ 
	/*background: url(../../images/ipad/leather-background.png);*/
	width: 300px;
	min-height: 250px;
	margin-left: 0px;
	margin-top: 1px;
	float: left;
	border-radius: 6px;
	/*box-shadow: inset 0 0 50px #400;*/
	/*box-shadow: inset 0 0 30px #000;*/
	color: #BBB;
} 
div.leftadvert { 
margin-left:1px;
display: inline-block; } 
div.ad600x170{ 
	background: url(../../images/ipad/leather-background.png);
	width: 600px;
	height: 170px;
	margin-left: 10px;
	float: left;
	position: absolute;
	bottom: 4px;
	border-radius: 6px;
	box-shadow: inset 0 0 30px #000;
	color: #BBB;
} 
div.top-buttons { 
	height: 33px;
	width: 100%;
	margin-left: 4px;
	margin-top: 6px;
	float: left;
}
.top-buttons a img { margin-left: 10px; border: 0; } 

.scroll::-webkit-scrollbar {
    width: 12px;
}

.scroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}

.scroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
input, textarea, select {
            padding: 2px;
            border: 1px solid #AAA;
            outline: 0;
            box-shadow: rgba(0,0,0,0.1) 0px 0px 8px;
            -moz-box-shadow: rgba(0,0,0,0.1) 0px 0px 8px;
            -webkit-box-shadow: rgba(0,0,0,0.1) 0px 0px 8px;
            background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #E2E3E5), to(#EEE));  
            background: -moz-linear-gradient(top, #FFFFFF, #E2E3E5 1px, #EEE 25px);
	    cursor:pointer;
	    border-radius:4px;
}

input.cell { 
	width: 300px; 
	height: 34px; 
	margin: 0 0 0 0; 
	font-size: 18px;
	padding: 2px;
	padding-left: 8px;
} 

.left { float: left; }

select.birth-day, select.birth-month, select.birth-year { 
	float: left;
}

select.birth-month, select.birth-year { 
	margin-left: 4px;
}

input.left { margin-left: 15px; } 
.button {
	padding: 2px 10px;
	background: #2664cf;
	font-family: Arial, sans-serif;
	color: #ffffff;
	text-align: center;
	display: block;
	cursor: pointer;
	font-size:18px;
	}
.button {
    border: 1px solid #ebebeb;
	/*border: 1px solid #4cadfc;*/
    /*border: 1px solid #6d3d00;*/
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	}
.button {
	/*background: -webkit-gradient(linear, left top, left bottom, from(#3b89c5), to(#124f7e));
	background: -moz-linear-gradient(top, #3b89c5, #124f7e);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3b89c5', endColorstr='#124f7e');
    background-image: -o-linear-gradient(90deg,rgb(18,79,126),rgb(59,137,197));*/

    /*background: -webkit-gradient(linear, left top, left bottom, from(#867d71), to(#2f1b00)); */ /* brown button */
    background: -webkit-gradient(linear, left top, left bottom, from(#41778f), to(#41778f));
    box-shadow: 2px 2px 2px #dfdcbc;
	}
.red-button {
	border: 1px solid #fcb1ab;
	background: -webkit-gradient(linear, left top, left bottom, from(#f5491d), to(#8d1212));
	background: -moz-linear-gradient(top, #f5491d, #8d1212);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5491d', endColorstr='#8d1212');
    background-image: -o-linear-gradient(90deg,rgb(141,18,18),rgb(245,73,29)) !important;
	}

.span9, .inr { 
	margin-right: 10px; 
    float: left;
    /*text-align: justify;*/
}
h2 { text-align: left !important; }
.span3 p { 
    color: #BBB;
    margin: 0; padding: 0; }
.span3 { 
    width: 180px; 
    border-radius: 4px;
    float: left;
    margin-left: 15px;
    background: #444;
}
p.people-about { 
    font-size: 14px;
    text-align: justify;
    padding: 10px;
    color: #EEE;
}
div.span10 h2 { color: #EEE; } 
.introduction { 
	font-size: 16px;
	text-shadow: 0 1px 1px #CCC;
	font-weight: 500;
	border-bottom: 3px solid #779977;
	padding-bottom: 10px;
	margin-top: -2px;
}
#introduction { 
    min-width: 94%;
    padding-bottom: 15px;
}
.warn { 
    color: #C44900;
    font-size: 16px;
    padding: 10px;
}
#yandex_ad_inline { 
    width: 100%;
    clear: both;
}
span.bold { font-weight: bold; font-size: 18px; } 

div.helpdiv {
    text-align: left;
    margin-right: 15px;
    border: 1px solid rgb(204, 204, 204); 
    padding: 6px; 
    margin-bottom: 15px; 
    background-color: rgb(51, 51, 51); 
    background-position: initial initial; 
    background-repeat: initial initial;
    border-radius: 4px;
    float: left;
    color: #ddd;
    font-size: 14px;
    font-weight: normal;
    position: relative;
    width: 95%;
} 


div.helpdiv span.wd { 
    position: absolute;
    top: 5px;
    right: 15px;
    color: #777;
}
.helpdiv img { 
    width: 120px;
    height: 120px;
}
.ahint { 
    text-transform: lowercase;
    font-size: 1.2em;
    /*color: #0015b5;*/
    color: #0707ec;
    overflow: hidden;
    text-overflow: ellipsis;
    text-underline-offset: 0.2em;
    text-decoration-color: #a1a1a1;
    font-weight: bold;
}
.hidden { 
    display: none;
} 
a.mytop { float: right; display: block; } 
ul.images{ list-style: none !important; } 
ul.images li { float: left; height: 123px; } 
.red { color: red; } 
.result-message {
    color: #ffffff;
    font-size: 16px;
    border: 1px solid white;
    padding: 10px;
    border-radius: 3px;
    background-color: #6c8a99;
}
.blue { color: blue; } 
.green { color: green; }
.crossinput { 
    padding: 5px 0 5px 10px;
    cursor: text;
    border: 1px solid rgb(78, 102, 146);
}
input.wide345 { 
   width: 345px; 
}

input.wide59p{ 
   width: 59%; 
}

div.inputs { 
    width: 100%;
    display: block;
    padding-bottom: 5px;
}
label.mask { 
    width: 35%;
    display: inline-block;
    margin-left: 5px;
    font-size: 14px;
    color: rgb(88, 88, 88);
}
input.mask { 
    font-weight: bold;
    width: 34%;
}
input.desc { 
    color: rgb(45, 46, 49);
}
label.desc { 
    display: inline-block;
    margin-left: 5px;
    font-size: 14px;
    color: rgb(53, 64, 126);
    width: 54%;
}

button.wide100p { 
   width: 98.5%;
}

div.lparam { 
    display: block;
    margin-top: 10px;
}

div.lparam select { 
    font-size: 14px;
}
span.inword { 
    color: rgb(9, 131, 9);
    font-size: 16px;
    font-weight: bold;
    text-decoration: underline;
}
span.inword-cross { 
    color: rgb(115, 26, 26);
    font-size: 16px;
    font-weight: bold;
    text-decoration: underline;
}
.col-md-12 { 
    width: 98%;
}
.glad-block { 
    clear: both;
    min-width: 95%;
    display: inline-block;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 15px;
    margin-bottom: 15px;
    /*border: 1px solid black;*/
}
/********************* MEDIA SCREEN *************************/

/* ---------- spinner start ------------*/
#loading { display:none; 
           position:fixed; 
           z-index: 1000;
           left:0; 
           top:0; 
           width:100%; 
           height:100%;            
           background-color: rgba(31, 21, 0, 0.7);
}
#loading p { 
    font-size: 36px;
    color: white;
    text-align: center;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#loading img { 
    max-width: 40%;
}

.spinner-container {
}

.spinner-wrap {
  display: block;
  text-align: center;
}

.spinner-kbd { 
    background-color: transparent;
    border: none;
    box-shadow: none;
}

@-webkit-keyframes rotate {
  100% {-webkit-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
    transform: rotate(360deg);}
}

@keyframes rotate {
  100% {-webkit-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
    transform: rotate(360deg);}
}

.spinner-element {
  color: white;
  -webkit-animation: rotate 2s linear infinite;
  animation: rotate 2s linear infinite;
}

.spinner-element-1 {
  background: none;
  margin-top: 10%;
}
.clear-button { 
    position: relative;
    top: 8px;
    display: inline-block;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    float: right;
    display: none;
}
a.clear-button  img { 
    width: 36px;
}
a.mitem { 
    margin-left: 10px;
}

.clearBtn {
    position: absolute;
    margin-right: 6px;
    bottom: 0px;
    right: -15px;
    display: none;
    transition: right 0.2s;
    color: gray;
    border: 1px solid #d3ced8;
    border-radius: 10px;
    padding: 1px 5px 1px 5px;
    background-color: #dcdcdc;
    cursor: pointer;
}

.show {
  right: 5px;
  display:initial;
}

.text-container {
  display: inline;
  position: relative;
  overflow: hidden;
}
#id_nouns  { 
    position: relative;
    top: 3px;
}

div.field-box { 
    width: 100%;
    overflow: hidden;
    margin: 2px 0px 0px 0px;
    display: inline-block;
}
div.lfilter { 
    margin-top: 5px;
    border-top: 1px solid #c0ad8b;
    border-bottom: 1px solid #c0ad8b;
    padding: 10px;
    padding-left: 3px;
    max-width: 95%;
}
div.lfilter label  { 
    font-size: 13px;
    margin-left: 6px;
}
a.advanced-params, a.clear-advanced-params, a.clear-all-params  { 
    font-size: 14px;
    float: right;
    color: #73787b;
}

.hint {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
  z-index: 1000;
  max-width: 300px;
}

#maskLabel {
  cursor: pointer;
  text-decoration: underline;
}

.filter-link {
    line-height: 2em;
}

.advanced-params-link {
    font-size: 16px !important;
    color: #0f8f1b !important;
    text-decoration: underline;
    text-underline-offset: 4px;
	margin-right: 5px;
}
.alert-message { 
    color: #9f7800;
}
#id_count_letters, #id_required_letters, #id_exclude_letters, #id_mask_letters { 
    font-size: 16px;
}
div.hidden { 
    display: none;
}

p.adnotation { color: gray;  font-size: 14px; display: none; } 

.charcount { 
    width: 100%;
    display: inline-block;
    float: none;
    color: #55575a;
    font-size: 14px;
    /*margin-left: 5px;*/
    padding-top: 2px;
}

ul#id_answer_type { 
    list-style: none;
    padding: 0;
} 

ul#id_anser_type, label  { 
    color: #293852;
    font-size: 16px;
}

li a.pop {
    position: relative;
}

li a.pop::before {
    content: "";
    position: absolute;
    right: 0;
    width: 30px; /* Задайте желаемую ширину и высоту для изображения */
    height: 30px;
    /*background-image: url('../images/hand.png');*/
    background-image: url( '../../images/ipad/hand.png');
    background-size: cover;
    background-position: center;
    z-index: 1; /* чтобы изображение находилось над содержимым <a> */
}

.button-43 {
  background-image: linear-gradient(-180deg, #37AEE2 0%, #1E96C8 100%);
  border-radius: .5rem;
  box-sizing: border-box;
  color: #FFFFFF;
  display: flex;
  font-size: 16px;
  justify-content: center;
  padding: 1rem 1.75rem;
  text-decoration: none;
  width: 100%;
  border: 0;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-43:hover {
  background-image: linear-gradient(-180deg, #1D95C9 0%, #17759C 100%);
}

@media (min-width: 768px) {
  .button-43 {
    padding: 1rem 2rem;
  }
}

/********************* MEDIA SCREEN *************************/
@media screen and (max-width: 770 ) { 
    div.right-box-next-item { 
        background-size: cover;
    }
    p.adnotation { display: initial; } 
}

@media screen and (max-width: 360px) { 

    #id_count_letters, #id_required_letters, #id_exclude_letters, #id_mask_letters { 
        max-width: 171px;
    }
}

@media screen and (max-width: 620px) {

    .glad-block { 
        min-width: 95%;
        display: inline-block;
        padding-top: 0;
        padding-bottom: 10px;
        margin-top: 20px;
        margin-bottom: 15px;
        min-height: 230px;
        /*border: 1px solid;*/
    }
    
    p.adnotation { display: initial; } 
    div.ad300x250 {  display: none; } 
    div.lparam select {  width: 100% } 

  body { 
    margin: 0px; 
  }
  a.clear-button {  
    top: 18px;
  }
  a.clear-button  img { 
      width: 24px;
  }
  div.container { 
      width: 100%;
	  margin: 0 auto;
  } 
  div.like-buttons { 
    display: none; 
  }
  div.right-box-content { 
    margin-left: 10px; 
  }
  div.right-box-next-item { 
    margin-top: -20px;  
  } 
  div.box { 
    width: 100%;
	/*background: url(../../images/ipad/main-border-small.png) no-repeat left top; */
	background: none; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	height: auto;
}
  div.right-box-header { 
    background: none; 
    width: 100%;
    height: auto !important;
  }
  div.right-box-last-panel { 
    display: none; 
  }
  div.right-box-next-item { 
        height: auto !important; 
        width: 100%;
        /*background-size: cover;*/
  }
    div.right-box-empty-item { 
        width: auto !important;
    }
  input.cell { 
    width: 60%; 
  }
  div.right-box-first-item { 
    width: 100%;
	background: url(../../images/ipad/right-header_mobile.png) no-repeat center center; 
    background-size: cover;
  }
  div.right-box-header h1 { 
	font-size: 18px;
    margin-top: 15px;
}
 
  div.right-box {
    margin: 0;
    width: 100%; 
    height: auto !important;
    margin-left: 0px !important;
}
  div.left-box { 
        display: none;
  }
.scroll::-webkit-scrollbar-track { 
    -webkit-box-shadow: none;
     border-radius: none; 
}
  div.separator {
	display: none;
 }
 #result-boy { 
     margin-bottom: 20px;
     margin-right: 15px;
 }
 #result-girl { 
    margin-left: 0px !important; 
 }

 .ahint { 
    font-size: 1.2em;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: bold;
    /* color: #5a5f68; */
    text-decoration-color: #a39f9f;
    }
    div.right-box-next-item { 
        background-color: #f1efc1; 
        background-image: none;
    }
}