/*
Theme Name: Digital Theme
Theme URI: https://getsiteleads.com
Author: Digital
Author URI: https://getsiteleads.com
Description: Digital тема для WordPress
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: digital-theme
*/
@charset "UTF-8"; 
@font-face {
    font-family: 'font-icons';
    src: url('fonts/font-icons.eot');
    src: url('fonts/font-icons.eot') format('embedded-opentype'), url('fonts/font-icons.woff') format('woff'), url('fonts/font-icons.ttf') format('truetype'), url('fonts/font-icons.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Nunito';
    src: url('https://getsiteleads.com/app/fonts/Nunito/Nunito.ttf');
    src: url('https://getsiteleads.com/app/fonts/Nunito/Nunito.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Nunito';
    src: url('https://getsiteleads.com/app/fonts/Nunito/Nunito-bold.ttf');
    src: url('https://getsiteleads.com/app/fonts/Nunito/Nunito-bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Nunito';
    src: url('https://getsiteleads.com/app/fonts/Nunito/Nunito-bold-italic.ttf');
    src: url('https://getsiteleads.com/app/fonts/Nunito/Nunito-bold-italic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: 'Nunito';
    src: url('https://getsiteleads.com/app/fonts/Nunito/Nunito-italic.ttf');
    src: url('https://getsiteleads.com/app/fonts/Nunito/Nunito-italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}
@keyframes menu-up-in {
    from {opacity: 0; transform: translateY(20px); filter: brightness(75%);}
    to {opacity: 1; transform: translateY(0);}
}
@keyframes menu-down-out {
    from {opacity: 1; transform: translateY(0px);}
    to {opacity: 0; transform: translateY(20px); filter: brightness(75%);}
}
@keyframes fade {
    from {opacity: 0;}
    to {opacity: 1;}
}
@keyframes fade-down {
    from {opacity: 0; transform: translateY(-40px);}
    to {opacity: 1; transform: translateY(0);}
}
@keyframes fade-up-out {
    from {opacity: 1; transform: translateY(0px);}
    to {opacity: 0; transform: translateY(-40px);}
}
@keyframes fade-up {
    from {opacity: 0; transform: translateY(40px);}
    to {opacity: 1; transform: translateY(0);}
}
@keyframes zoom-in {
  from {opacity: 0; transform: scale(0.5);}
  to {opacity: 1; transform: scale(1);}
}
@keyframes zoom-out {
  from {opacity: 0; transform: scale(1.5);}
  to {opacity: 1; transform: scale(1);}
}
/* Классы анимаций */
div[data-animate="fade"].animate, div[data-animate="fade"] .animate, .fade {animation: fade 1s ease forwards;}
div[data-animate="fade-up"].animate, div[data-animate="fade-up"] .animate, .fade-up{animation: fade-up 1s ease forwards;}
div[data-animate="fade-down"].animate, div[data-animate="fade-down"] .animate, .fade-down {animation: fade-down 1s ease forwards;}
div[data-animate="zoom-out"].animate, div[data-animate="zoom-out"] .animate, .zoom-out {animation: zoom-out 1s ease forwards;}
div[data-animate="zoom-in"].animate, div[data-animate="zoom-in"] .animate, .zoom-in {animation: zoom-in 1s ease forwards;}
div[data-animhover="flip-left"], div[data-animhover="flip-right"], div[data-animhover="flip-up"], div[data-animhover="flip-down"], div[data-animhover="zoom-in-hover"],
.flip-left, .flip-right, .flip-up, .flip-down, .zoom-in-hover {transition: transform 0.7s ease;}
div[data-animhover="flip-left"]:hover, .flip-left:hover {transform: rotateY(-180deg);}
div[data-animhover="flip-right"]:hover, .flip-right:hover {transform: rotateY(180deg);}
div[data-animhover="flip-up"]:hover, .flip-up:hover {transform: rotateX(-180deg);}
div[data-animhover="flip-down"]:hover, .flip-down:hover {transform: rotateX(180deg);}
div[data-animhover="zoom-in-hover"]:hover, .zoom-in-hover:hover {transform: scale(1.2);}
body {
    font-family: "Nunito", Arial, sans-serif;
    margin: 0;
    padding: 0;
	color:#444;
	background:#eff2f7;
}
small{
    font-size: 13px;
    line-height: 16px;
    color: #5d79a4;
    display: block;
    margin: 10px 0;
}
a {text-decoration:none;color:#3d80e4; transition:all 0.7s ease-in;}
a:hover {color:#0f65de; transition:all 0.7s ease-in;}
h1{margin:0;font-size:25px;}
.form-activate{color:#3d80e4;}
.form-message{color:#448344;}
.form-error{color:#cd0000;}
.button{display:grid; justify-content:center;}
.button span, .button a, button {
    margin: 0;
	cursor:pointer;
    padding: 15px 20px;
    display: block;
	width:auto;
	background:#ffffff;
    color: #3d80e4;
	border:1px solid #3d80e4;
    border-radius: 5px;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
    transition: all 0.7s ease-in;
    opacity: 0.85;
    text-align: center;
	transition:all 0.7s ease-in;
	position:relative;
	padding-left:30px;
}
.login-form-container button, .login-form-container .button a{width:100%;}
.button span:hover, .button a:hover, button:hover {transition: all 0.7s ease-in; opacity: 1; filter: brightness(1.1);}
button.button-light, .button-light a{color:#3d80e4; background: #fff; border:1px solid #3d80e4;}
button.button-light:hover, .button-light:hover a{background:#3d80e4; color: #fff;  border:1px solid #3d80e4;}
button.button-blue, .button-blue a{background:#3d80e4; color: #fff;  border:1px solid #3d80e4;}
button.button-blue:hover, .button-blue:hover a{color:#3d80e4;  background: #fff; border:1px solid #3d80e4;}
button.button-green-light,.button-green-light a{color:#96d432; color:#a3c7c7; background:#fff; border:1px solid #96d432;border:1px solid #a3c7c7;}
button.button-green-light:hover,.button-green-light:hover a{background:#a3c7c7; color:#fff; border:1px solid #96d432;border:1px solid #a3c7c7;}
button.button-green,.button-green a{background:#96d432; color:#fff; border:1px solid #96d432;}
button.button-green:hover,.button-green:hover a{color:#96d432; background:#fff; border:1px solid #96d432;}
button.button-red, .button-red a{background:#e43100;color:#fff; border:1px solid #e43100;}
button.button-red:hover, .button-red:hover a{color:#e43100;background:#fff; border:1px solid #e43100;}
.button-vk {width: 200px; height: 48px;overflow: hidden;}
.button span:before, .button a:before, button:before {font-family: 'font-icons'; position: absolute; top: 50%; left: 8px; margin-top: -7px; font-size: 14px; font-weight:normal;}
.widget-button a.edit {background: #3d80e4; color: #fff; overflow: hidden;}
.widget-button a.edit:hover {background: #ffffff; color: #3d80e4;}
.add:before{content:"+";  font-weight:normal;font-family:Times New Roman;font-size:28px; margin-top:-17px;}
.add.addwidget:before{content:"+"; left: 50%; margin-left: -90px;}
.edit:before{content:"\e635";}
.stop:before{content:"\e704";}
.play:before{content:"\e703";}
.delete:before{content:"\e617";}
.ok:before{content:"\e6c8";}
.pay:before{content:"\e629";}
.widget:before{content:"\e6ad";}
.site-header {
    background-color: #4786e5;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    z-index: 1000;
	color:#fff;
}
.header-container {
    display: grid;
    grid-template-columns: 155px 240px 1fr;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    align-content: center;
    padding: 10px 20px;
	color:#fff;
}
.header-container.guest {grid-template-columns: repeat(2, 1fr);}
.grid-child{position: relative; display: grid; align-content: center; align-items: center;}
.grid-child.account{position: relative; display: grid; align-content: center; align-items: center; grid-auto-flow: column; justify-content: end; padding-right:60px;}
.login-need{text-align:right;}
.logo{display: block; width: auto; max-width: 150px;}
.logo a {color: #fff;font-size: 25px;}
.logo img {width: 100%;filter: brightness(0) invert(0.95); margin-left:-10px;}
.grid-child .button{display:grid;justify-content:end;}
.grid-child .button .pay{color: #3d80e4; background: #eff2f7; border: 1px solid #3d80e4;}
.account-status {font-size: 14px; color: #fff; text-align: right; padding-right: 40px; letter-spacing:0.01em;}
.account-status b{font-size:16px;}
.project-widgets {background: #e2e8f1;}
.headtech {display: flex; align-content: center; flex-flow: wrap; line-height: 18px; font-size: 14px;}
.headtech a {color: #fff; padding-left: 5px; font-weight: bold;}
@media (max-width: 1200px) {
    .header-container{grid-template-columns: 155px 135px 1fr;/* padding-bottom: 25px; */}
}
.grid-child.top-menu{position: absolute; top: 0; right: 10px;  height: 100%; padding: 0; display: grid; transition: all 0.7s ease-in; align-items: center; align-content: center;}
.menu-wrapper {position: relative; padding-right: 0; cursor: pointer;}
.hamburger-menu {width: 60px; height: 60px; padding-right: 0px; padding-top: 0; cursor: pointer; position: relative;}
.hamburger-menu::before {
    content: "|||";
    transform: rotate(90deg);
    padding-left: 0px;
    display: block;
    color: #cbdcf5;
    font-size: 30px;
    line-height: 60px;
    font-weight: bold;
    transition: all 0.5s ease-in;
    width: 60px;
    text-align: center;
    margin: 0 auto;
    position: absolute;
    top: 0;
    right: 0;
	height:100%;
}
.dropdown{position: absolute; top: 48px;  right: -10px; display: block; z-index: 1;width:190px;}
.dropdown-menu {
    color: #fff;
    display: none;
    margin: 0;
    padding: 0;
    margin-top: 11px;
    list-style: none;
    background: #fff;
    border: 1px solid #1f6fe0;
    border-bottom-left-radius: 13px;
    transition: all 0.7s ease-in;
    animation: 0.3s linear 0s menu-down-out;
}
.menu-wrapper:hover .dropdown-menu{display: block; transition: all 0.7s ease-in;  animation: 0.5s linear 0s menu-up-in;}
.dropdown-menu li {
    position: relative;
    text-align: left;
    padding: 0px;
    margin: 0;
    border-top: 1px solid #d7e8ff;
    border-bottom: 1px solid #b6c8e1;
    background: #3774cf;
}
.dropdown-menu li:last-child {border-bottom-left-radius: 13px;}
.dropdown-menu li a {
    font-size: 14px;
    color: #cbdcf5;
    text-decoration: none;
    display: block;
    padding: 12px 40px;
    position: relative;
    transition: all 0.5s ease-in;
}
.dropdown-menu li a:hover {background: #4786e5; color: #fff;}
.dropdown-menu li a{position:relative;}
.dropdown-menu li a:before {
    font-family: 'font-icons';
    position: absolute;
    top: 50%;
    left: 8px;
    margin-top: -12px;
    font-size: 18px;
}
.dropdown-menu li a.panel:before {content: "\e693";}
.dropdown-menu li a.settings:before, .dropdown-menu li a.setting:before {content: "\e60f";}
.dropdown-menu li a.finance:before {content: "\e629";}
.dropdown-menu li a.help:before, .dropdown-menu li a.support:before {content: "\e61b";}
.dropdown-menu li a.logout:before {content: "\e664";}
@media (max-width:680px){
.grid-child.account{display:block;}
.account-status{padding-right:0;}
}
main{min-height:82vh;}
.welcome p{margin: 0; padding: 10px 20px; color: #8f8f8f; text-align: right;}
.projects-container {max-width: 1000px; margin: 0 auto; width:95%}
.projects-list{margin-top:20px;}
.project-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
    padding: 20px;
	background:#ffffff50;
    border-radius: 8px;
}
.project-actions-top, .project-actions {margin-top: 0px; width: 100%; display: grid; grid-auto-flow: column; align-items: center; justify-content: space-between;}
.project-actions-top h3 { margin: 0;}
.project-img{width:100%; max-width:1100px; max-height:330px;	overflow:hidden; margin: 20px 0;}
.project-screenshot {width: 100%; border-top-right-radius: 8px; border-top-left-radius: 8px;}
.project-message {opacity: 0; transition: opacity 0.5s ease-in-out; margin-top: 10px; font-size: 14px;}
.project-message .project-active {color: green; font-weight: bold;}
.project-message .project-noactive {color: red; font-weight: bold;}
.project-message .project-error {color: orange; font-weight: bold;}
.project-item.noactive .project-title, .project-item.noactive img {opacity: 0.7; filter: grayscale(0.8); transition: all ease-in 0.7s;}
.project-title span{display: block; font-size: 10px; line-height:16px; letter-spacing: 0.1em; color: #757272;}
.project-title span b{font-size: 15px; line-height: 16px; color: #1e5ab5; letter-spacing: 0;}
.btn-edit{line-height: 28px; height: 50px;}
.btn-edit a{color: #fff; text-decoration: none;}
#add-project-form{display: grid; grid-auto-flow: column; justify-content:end;}
#add-project-form input{height: 46px;  margin: 0; padding: 0 10px; width: 250px; border-top-left-radius: 4px; border-bottom-left-radius: 4px; border: 1px solid #dddddd; box-shadow: -1px 0px 1px 0px #d3d2d2;}
#add-project-form #submit-project-button{margin: 0; height: 48px; border-top-left-radius: 0; border-bottom-left-radius: 0;}
.noprojects{max-width: 100%; display: grid; height: 400px; background:#ffffff78; border-radius: 8px; align-content: space-evenly; justify-content: space-around; margin-top:10px;}
.noprojects-in{text-align:center;}
.noprojects-in p{font-size: 28px; color: #777777;}
.custom-login-form {
    max-width: 700px;
    margin: 50px auto;
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
}
.login-form-container, .custom-registration-form, .lost-password-form, .reset-password-form{
width:100%;
max-width:800px;
margin:0 auto;
text-align:center;
border:1px solid #ddd;
border-radius:8px;
padding:40px;
background:#ffffff;
}
.registration-item, .login-item, .lost-item, .reset-item {display: grid; margin: 1em 0; text-align:left; position:relative;}
.registration-item.name{opacity: 0; height: 0; padding: 0; margin: 0; position: absolute; z-index: -1; width:0;}
.registration-item label, .login-item label, .lost-item label, .reset-item label {display: block;  width: 100%;  color: #555; font-weight: bold; padding: 5px 0;line-height:30px;}
.registration-item input[type="text"], .registration-item input[type="email"], .registration-item input[type="password"],
.login-item input[type="text"], .login-item input[type="email"], .login-item input[type="password"] ,
.lost-item input[type="text"], .lost-item input[type="email"], .lost-item input[type="password"] ,
.reset-item input[type="text"], .reset-item input[type="email"], .reset-item input[type="password"] {
    color: #444;
    appearance: none;
    background-color: var(--body-bg);
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-clip: padding-box;
    padding: .6rem 1rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    display: block;
}
.password-wrapper, .login-item {display: grid; position: relative;}
.password-wrapper button, .login-password, .reset-item .toggle-password {height:45px; cursor:pointer; position: absolute; top: 0;  right: 0;  z-index: 1; border-top-left-radius: 0; border-bottom-left-radius: 0;}
.login-form-container button.login-password, .reset-item .toggle-password {width:48px;top:auto!important;bottom:0;}
button.toggle-password:before, button.login-password:before{left: 50%; margin-left: -11px; margin-top: -12px; font-size: 22px;}
button.visible:before{content:"\e724";}
button.novisible:before{content:"\e725";}
.registration-item input[type="checkbox"], .login-item  input[type="checkbox"] { width: 22px;  height: 22px; border: 1px solid #ced4da;  border-radius: 4px;  outline: none; float: left; margin-right: 10px;}
.login-link {display: block;  margin-bottom: 15px;}
.login-link.button a{width:auto;}
.submit.registration-item button:disabled {background-color: #ccc; cursor: not-allowed;}
/* Single Project*/
.single-project-page{
    display: grid;
    align-items: stretch;
    align-content: space-between;
    justify-items: stretch;
    margin: 30px 20px;
    gap: 20px;
    grid-template-columns: 3fr 1fr;
}
.widgets-in{margin: 0; padding: 0;  text-align: center; display: grid;  position: relative;align-content:start;}
.projects-container .main-title {display: grid; grid-template-columns: repeat(2, 1fr); align-items: center;
    padding: 20px; background: #ffffff50; border-radius: 8px; margin-top: 20px; display: grid;}
.widgets-title{
    display: grid;
    grid-auto-flow: column;
    justify-content: start;
    align-items: center;
    justify-items: center;
    background: #fff;
    border-top: 1px solid #cdcdcd;
    border-left: 1px solid #cdcdcd;
    border-right: 1px solid #cdcdcd;
    border-radius: 8px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    align-content: center;

}
.widgets-title a{
    display: block;
    width: auto;
    position: relative;
    padding: 15px 20px;
    font-size: 18px;
	line-height:22px;
    border-right: 1px solid #efefef;
    color: #3d80e4;
    font-weight: bold;
	cursor:pointer;
	transition:all ease-in 0.7s;
}
.widgets-title a.active, .widgets-title a:hover{
    background: #3d80e4;
    color: #fff;
}
.widgets-title a.add{
    border-top-left-radius: 8px;
    padding-left: 37px;
    position: relative;
}
.widgets-title a.add:before{
    content: "+";
    font-weight: normal;
    font-size: 26px;
    margin-top: 0;
    position: absolute;
    top: 16px;
    left: 12px;
}
.widgets-body{
    display: block;
    overflow: hidden;
	border-radius:8px;
	background:#e2e8f1;
	border:1px solid #cdcdcd;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: 0px;
    padding-bottom: 40px;
}
h1 sup {font-size: 16px; margin-left: 10px;}
h1 sup.status-active {background: #96d432;
    color: #fff;
    border: 1px solid #96d432;
    padding: 5px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    font-size: 12px;}
.project-single {
    display: block;
    border: 1px solid #cdcdcd;
    border-radius: 8px;
    padding: 40px;
	padding-top:20px;
    background: #ffffff;
	position: relative;
    margin: 0;
	min-width:280px;
}
.project-top{display: grid;  grid-template-columns: 1fr 1fr; justify-content: space-between;  align-items: start;}
.project-top .status-active{padding-left: 11px; position: relative;  color: #96d432; font-size: 12px; letter-spacing: 0.03em; line-height: 16px;}
.project-top .status-active:before {width: 8px; height: 8px; background: #00897B; content: ''; position: absolute; top: 4px; left: 0; border-radius: 50%;}
.project-top .status-noactive{padding-left: 11px; position: relative;  color: #cd0000; font-size: 12px; letter-spacing: 0.03em; line-height: 16px;}
.project-top .status-noactive:before {width: 8px; height: 8px; background: #cd0000; content: ''; position: absolute; top: 4px; left: 0; border-radius: 0;}
.project-top .date{text-align: right; font-size: 12px; color: #818181; line-height: 16px;}
.single-left h1{font-size: 22px;display: grid; grid-auto-flow: column; justify-content: space-between; align-items: center;}
.single-left h1 .h1-left{color:#3d80e4;}
.single-left h1 .h1-right{display: inline-grid;  border: 1px solid #cdcdcd;  padding: 8px 12px;  border-radius: 8px;}
.single-left p.date {
    font-size: 12px;
    font-weight: bold;
    color: #818181;
}
.single-right {
    border: 1px solid #cdcdcd;
    border-radius: 8px;
    text-align: right;
    max-height: 200px;
    overflow: hidden;
    display: grid;
    align-items: center;
    align-content: center;
    justify-items: center;
    justify-content: center;
	margin:40px 0;
}
.single-right img {
    max-width: 100%;
    border-radius: 8px;
}
.button.button-green.code-link {
    justify-content: start;
}
.code-link{display: block; margin-top: 25px;}
.code-div {
    display: none;
    background: #f1f1f1;
    padding: 0px;
    border-radius: 8px;
    border: 1px solid #e5e5e5;
	border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.comment-code {
    margin: 0;
    padding: 20px;
}
.comment-code p{margin:10px 0;}
.script-code {
    margin: 0;
    padding: 20px 10px;
    background: #fff;
    box-shadow: inset 0px 1px 4px 3px #ededed;
    border: 1px solid #e1e1e1;
    font-size: 12px;
    position: relative;
}
.script-code span{word-wrap: break-word;}
button#copy-code {
    position: relative;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding: 0;
    margin: 0;
    display: block;
    width: 100%;
    height: 48px;
}
button#copy-code:before {
    content: "\e605";
    font-size: 23px;
    text-align: center;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 100%;
    display: grid;
    align-items: center;
}
button#copy-code.copy-ok{
background:#79c142;
}
button#copy-code.copy-ok:before{
  content:"\e659";
}
.widget-types{
    padding: 0;
    text-align: center;
    display: grid;
    position: relative;}
.widget-types-in{
display:none;
border: 1px solid #cdcdcd;
    border-radius: 8px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: -4px;
    background: #fff;
}
.widget-types h2, .project-widgets h2{margin: 0; padding: 20px 0;  border-bottom: 1px solid #e5e5e5; color: #438dfb;}
.project-widgets h2{color:#5c5c5c;}
ul.widget-types-list{display: grid; grid-auto-columns: 280px; grid-auto-rows: auto; gap: 20px; padding: 0; margin: 20px;  grid-template-columns: repeat(auto-fill, 280px); justify-content: center;}
ul.widget-list{display: grid; grid-auto-columns: 300px; grid-auto-rows: auto;  gap: 20px; padding: 0; margin: 20px; grid-template-columns: repeat(auto-fill, 280px); justify-content: center;}
ul.widget-types-list li, .widget-list li{border: 1px solid #cdcdcd; background:#ffffff; border-radius: 8px; list-style: none; padding: 20px; display:grid; align-content: space-around;}
.widget-list li{ grid-template-rows:1fr 240px 40px 85px;}
ul.widget-types-list h3, .widget-list h3{margin: 0; font-size:18px;line-height:18px;}
.type-image, .widget-image {padding: 0; height: 240px; overflow: hidden; border-radius: 8px;}
.type-image img, .widget-image img {width: 100%; max-width: 100%;}
.type-text, .widget-info{font-size: 14px; padding: 0; text-align: left; line-height: 20px;}
.type-text{padding-bottom:10px;}
.widget-type-link{width:100%;margin-top:10px;}
.widget-button{display: grid; grid-auto-flow: column; gap: 4px; justify-content: space-between; align-items: center; grid-auto-columns: 50%; grid-auto-rows: 38px; grid-template-columns: repeat(auto-fill, 127px);}
.widget-button .button{display:block;} 
.widget-button a, .widget-button button{font-size: 11px; padding: 12px 0px; padding-left: 15px; line-height: 14px; text-align: center; display: block;}
.widget-button a:before, .widget-button button:before{font-size: 18px; left: 15px; top: 19px;}
.widget-bottom{display: grid; grid-template-columns: auto 40px; align-content: center; align-items: center; justify-items: stretch; padding-top:25px;}
button.btn.button-light.stop {color: #e85026; border: 1px solid #e85026;}
button.btn.button-light.stop:hover{color:#ffffff; background:#e85026;}
button.btn.button-light.play {color: #96d432; border: 1px solid #96d432;}
button.btn.button-light.play:hover{color:#ffffff;  background:#96d432;}
.widget-status, .widget-created{font-size:12px;}
.widget-status span.status-noactive{font-weight: bold; color: #7a7a7a;}
.widget-status span.status-active{font-weight: bold; color: #96d432;}
.widget-created span{font-weight: bold; color: #438dfb;}
.widget-bottom .delete{padding:18px;}
.widget-bottom .delete:before{left: 50%; margin-left: -8px;}
.nowidget{
    margin: 20px auto;
    max-width: 800px;
    border: 1px solid #cdcdcd;
    padding: 40px;
    min-height: 400px;
    display: block;
    justify-items: center;
    align-content: space-evenly;
    background: #fff;
    border-radius: 8px;
	text-align:center;
}
.nowidget i.widget{display:block;position:relative;}
.nowidget i.widget:before{content: "\e6ad"; font-family: font-icons; font-style: normal; font-size: 30px;}
.nowidget p{font-size: 22px;}
.widget-types, #widgets-current{display:none;}
.widget-types.active, #widgets-current.active{display:block;}
.breadcrumb {margin: 20px auto; justify-content: center; max-width: 880px;justify-content:normal;}
.breadcrumb a{padding:15px 0;}
.project-toggle {display: none; position: absolute; top: 0px; left: 0px;background: #3d80e4;color: #fff;border: none;border-radius: 6px;padding: 15px 16px;font-size: 15px; cursor: pointer;z-index: 1002;}
@media (max-width: 768px) {
  .single-project-page {display: block; padding-top: 55px; margin:10px 20px;position:relative;}
  .project-toggle {display: inline-block;}
  .project-single { position: fixed; top: 0;  right: -350px; width: 300px; height: 100vh; background: #fff; padding:10px 15px;
    border-left: 1px solid #d9dfe7; box-shadow: -2px 0 12px rgba(0,0,0,0.12); overflow-y: auto; border-radius: 0; z-index: 1003; transition: right .3s ease;}
  .project-single.open {right: 0;}
  body.project-menu-open::before { content: ""; position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 999;}
}
/*End Single Project*/
/*Payment Page*/
.payment_div {width: 100%; height: 100%; margin-top: 0; text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; flex-direction: column; align-content: center;}
.payment_div h1{text-align:left;     margin-top: 40px; width: 100%; max-width: 600px;}
.payment_in{width: 100%;max-width: 600px;padding: 0;background: #fff;border: 1px solid #ddd;border-radius: 8px;text-align: left;padding: 20px;box-sizing: border-box;}
.payment_tabs {display: flex;gap: 10px;margin-bottom: 20px;justify-content: space-between;border-bottom: 2px solid #3d80e4;}
.payment_tab {padding: 10px 18px;border: 1px solid #3d80e4;background: #ffffff;cursor: pointer;border-radius: 6px;width: 100%;border-bottom-left-radius: 0;border-bottom-right-radius: 0;}
.payment_tab.active, .payment_tab:hover {background: #3d80e4;border-color: #3d80e4;font-weight: 600;color: #fff;}
.payment_tab_content {display: none;}
.payment_tab_content.active {display: block;}
.div_current_tarif{display: grid;grid-auto-flow: column;justify-content: space-between;align-items: center;padding: 30px 20px;border-top-left-radius: 8px;border-top-right-radius: 8px;}
p.current_tarif, p.data_pay {font-size: 16px; letter-spacing: 0.1em; color: #757272;}
p.data_pay {text-align: right;}
p.current_tarif span, p.data_pay span {color: #3d80e4; font-weight: bold; font-size: 20px; letter-spacing: 0;}
.discount-pay {background: #f2f7ff;padding: 20px;text-align: left;font-weight: bold;color: #0c57c7;font-size: 14px;text-decoration: underline;}
.pay_tarif1 {display: flex;align-items: center;background: #f2f7ff;padding: 20px;margin: 0;padding-top: 0;gap:10px}
.pay_tarif1 label {font-size: 16px; letter-spacing: 0.1em; color: #3d80e4; font-weight: bold;}
input#agent-months, input#months {width: 50px;padding: 14px 10px; border: 1px solid #ccc;  border-radius: 4px;}
.pay_tarif1 button {width: 100%;}
.change_div {padding: 30px 20px;  border-radius: 4px; background: #fafafa;}
.change_div_grid {display: flex;align-items: center;width: 100%;}
.pay_tariff2 {display: flex;justify-content: space-between;align-items: center;gap: 20px;}
.pay_tariff2 label {font-size: 16px; letter-spacing: 0.1em; color: #3d80e4; font-weight: bold;}
.pay_tariff2 select{width:auto; max-width:150px; text-align: left;  padding: 10px; border: 1px solid #ccc;  border-radius: 4px;}
p.autopay-check {color: #3d80e4; font-weight: bold;padding-left:15px;}
.tarif_title{color: #2c64b5; font-size: 14px; margin: 10px; padding: 10px 10px; border: 1px solid #cdcdcd; border-radius: 8px; line-height: 22px;}
.tarif_title a {text-decoration: underline; font-weight: bold; transition:all 0.5s ease-in;}
.tarif_title a:hover {text-decoration: none;}
p.change_title {font-size: 12px;letter-spacing: 0.05em;color: #383838;text-align: left;}
div#subscription-options {background: #f2f7ff; padding: 10px; border-top: 4px solid #fff; border-bottom: 4px solid #fff;}
p.subscription-title {color: #4786e5; font-weight: bold;}
label.subscription-radio {padding-right: 15px;font-size: 16px;line-height: 20px;display: inline-flex; align-items: center; gap: 6px;}
.subscription-radio input[type="radio"] {margin: 0;}
p.itog_sum {font-size: 20px;letter-spacing: 0.1em;color: #757272;font-weight: bold;background: #f2f7ff;padding: 20px;text-align: right;margin: 0;border-bottom-left-radius: 8px;border-bottom-right-radius: 8px;}
p.itog_sum strong {color: #3d80e4;font-weight: bold; font-size: 24px; letter-spacing: 0;}
.payment_info {display: grid; grid-auto-flow: column;}
.agent-raschet { background: #f7faff;  padding: 20px;}
.agent-raschet p{ margin:5px 0; font-size:14px;}
.count_month { display: flex;  gap: 10px;  flex-wrap: nowrap;}
a.back_btn {margin: 10px 0; padding: 10px 20px; background: #fff; width: 100%; max-width: 560px; border-radius: 8px; color: #777;}
a.back_btn:hover{background:#3d80e4;color:#ffffff;}
@media (max-width:680px){
.div_current_tarif, .change_div_grid, .pay_tarif1{grid-auto-flow:row}
 .pay_tarif1{grid-template-columns: 1fr 150px;}
 p.change_title{text-align:left;}
.grid-child.account{display:block;}
.payment_div h1{padding-left:10px;}
}
/*End Payment Page*/
/*Finance Page*/
.user-payments {width: 100%; max-width: 1350px; margin: 40px auto; text-align: center;}
.payment-table { background: #fff; border-radius: 8px; padding: 40px; font-size:14px;}
.payment-table table {width: 100%; border-radius: 8px; border: 1px solid #cdcdcd;}
.payment-table thead {background: #e2e8f1;}
.payment-table th, .payment-table td {padding: 10px 0;}
.payment-table thead th:first-child { border-top-left-radius: 8px;}
.payment-table thead th:last-child {border-top-right-radius: 8px;}
.payment-table tbody tr:nth-child(even) {background: #f1f5fb;}
.buttons_div {display: flex; justify-content: center; align-items: center; gap: 15px; margin-bottom: 30px;}
button#cancel-subscription-btn {border: 1px solid #e43100; color: #e43100;}
button#cancel-subscription-btn:hover{background:#e43100; color:#fff;}
@media (max-width:680px){
.payment-table {padding: 20px 5px; font-size: 11px;}
}
/*End Finance Page*/
/*UserSettings Page*/
.user-settings-container {max-width: 600px; margin: 0 auto; padding: 20px;}
.user-info, .tariff-info {margin: 20px 0; padding: 15px; background: #f9f9f9; border-radius: 5px;}
.settings-form {margin: 30px 0;  padding: 20px;  border: 1px solid #ddd; border-radius: 5px;}
.settings-form input {display: block; width: 100%;  margin: 10px 0; padding: 8px;  border: 1px solid #ddd; border-radius: 4px;}
.settings-form button {background: #0073aa; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer;}
.success-message { background: #d4edda; color: #155724; padding: 10px; border-radius: 4px; margin: 10px 0;}
.error-message {background: #f8d7da;color: #721c24; padding: 10px; border-radius: 4px; margin: 10px 0;}
.user-settings-container {width: 100%; max-width: 1350px; margin: 0 auto;}
.user-settings-in {background: #e2e8f1; padding: 40px; border: 1px solid #cdcdcd;  border-radius: 4px;}
.user-info, .tariff-info, .settings-form {margin: 5px 0; padding: 20px; border: 1px solid #cdcdcd; border-radius: 4px; background: #fff;}
.user-info-in, .tariff-info-in {display: grid; grid-template-columns: repeat(2,1fr); gap:10px;}
.user-info-in p, .tariff-info-in p{background: #eff2f7; border: 1px solid #cdcdcd; border-radius: 4px; padding: 10px;}
.change-password {background: #eff2f7; padding: 20px; margin: 5px 0; border: 1px solid #cdcdcd; border-radius: 4px; display: grid; grid-template-columns: repeat(3,1fr); gap: 10px;}
.change-password input{padding: 10px 3%;  border-radius: 4px; border: 1px solid #cdcdcd; width: 94%;  outline:none;}
.change-email input {padding: 10px 3%; border-radius: 4px; border: 1px solid #cdcdcd; width: 94%; outline:none;}
input:focus{border-color:#3d80e4;}
.settings-form button { text-align: center; margin: auto; margin-top: 10px;}
.change-email {display: grid; grid-template-columns: repeat(2,1fr); border: 1px solid #cdcdcd; padding: 20px;  border-radius: 4px; background: #eff2f7; text-align: left; align-items: center;}
@media (max-width:680px){
.user-info-in, .tariff-info-in, .change-password, .change-email{grid-template-columns:repeat(1,1fr);}  
}
/*End UserSettings Page*/
.site-footer {background: #1950a3;color: #fff;text-align: center;padding: 40px 0;display: block;}
.site-footer .block-footer{display:grid;max-width:1150px;width:100%;grid-template-columns:repeat(2,1fr);justify-content:space-between;font-size:14px;margin: 0 auto;text-align: center;}
.site-footer p{margin:0;color: #93a9cd;}
.site-footer .f-left{text-align:left;}
.site-footer .f-right{text-align:right;}
.site-footer a {color: #93a9cd; border-bottom: 1px dotted #93a9cd; transition:all 0.5s ease-in;}
.site-footer a:hover{border-bottom:1px solid #93a9cd;}
.overload, #overload-cancel{display:none; width: 100%;height: 100%; position: fixed; top: 0; left: 0; z-index: 10000; background: #ffffff4d; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); align-items: center; justify-content: center; align-content: space-evenly; justify-items: center;}
#overload-cancel.visible{display:block;}
.modal-buttons {display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;}
#confirm-cancel{
    margin: 0;
    cursor: pointer;
    padding: 15px 20px;
    display: block;
    width: auto;
    background: #3d80e4;
    color: #fff;
    border-radius: 5px;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
    transition: all 0.7sease-in;
    opacity: 0.85;
    text-align: center;
    border: 0;
    transition: all 0.7sease-in;
    position: relative;
    padding-left: 28px;
}
#confirm-cancel:hover{transition: all 0.7s ease-in; opacity: 1; filter: brightness(1.1);}
#answer-message, #cancel-modal{width: 450px; height: 250px; background: #fff; max-width: 90%; padding: 40px; box-shadow: 3px -1px 5px 2px #d1d1d1; border: 2px solid #1E88E5; border-radius: 8px; display: grid; align-content: center; justify-content: center; align-items: center;  text-align: center; position: relative;padding:20px;}
#answer-message p, #cancel-modal p, #answer_text{font-size: 16px;}
div#answer-close{position: absolute;right: 0;top: 0;z-index: 1;width: 60px;height: 60px;cursor: pointer;}
div#answer-close:before, div#answer-close:after {content: '';  width: 40px;  height: 3px;  background: #3d80e4;  display: block;  position:absolute; top:25px; right:8px;}
div#answer-close:before{transform: rotate(45deg); transition:all 0.7s ease-out;}
div#answer-close:after{transform: rotate(135deg);transition:all 0.7s ease-out;}
div#answer-close:hover:before{transform: rotate(405deg);transition:all 0.7s ease-out;}
div#answer-close:hover:after{transform: rotate(495deg);transition:all 0.7s ease-out;}
div#answer_text {display: flex; gap: 10px; flex-flow: wrap; justify-content: center;max-width:100%;}
#answer_text p { width: 100%;}
#answer_text .button-add-block { width: 100%; display: flex; flex-flow: wrap;justify-content:center;gap:1%;}
#answer_text .button-add-block .button { width: 48%; display: grid; justify-content: center; align-items: stretch; align-content: stretch;}
div#answer_text .button-add-block a{display: grid; align-content: center; font-size: 12px;}
.button-ready-widget{display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top:20px;}
.confirm-load-ready-widget, .cancel-load-ready-widget{width: 100%; justify-content: stretch;}
#preloader {position: fixed; top: 0;left: 0; right: 0; bottom: 0; z-index: 9999999; opacity: 1; background: radial-gradient(#ffffff, #ffffff80););}
#preloader #status { position: absolute; left: 0; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width:200px; margin:0 auto; text-align:center;}
#preloader #status .spinner { width: 40px; height: 40px; position: absolute; top:0; left:0; right:0; margin: 0px auto;}
#preloader #status .spinner img{width:100px;height:100px; margin:0 auto; text-align:center; display:block;}
#preloader #status .spinner .double-bounce1, #preloader #status .spinner .double-bounce2 {width: 100%;height: 100%;border-radius: 50%;background-color: #6495ed;opacity: 0.6;position: absolute;top: 0;left: 0;-webkit-animation: sk-bounce 2.0s infinite ease-in-out;animation: sk-bounce 2.0s infinite ease-in-out;}
#preloader #status .spinner .double-bounce2 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s;}
#preloader p{min-width: 200px;max-width: 100%;padding: 0; text-align: center; font-size: 33px;font-family:Arial, sans-serif; margin:0 auto; position:absolute; bottom:10px; left:0;right:0;}
#preloader p i{font-style:normal;display: block;font-size: 18px; color: #40417b;}
@-webkit-keyframes sk-bounce { 0%, 100% { -webkit-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1); transform: scale(1); }}
@keyframes sk-bounce { 0%, 100% { -webkit-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1); transform: scale(1); }}
.widget-types-list li.cookie{display:none;}
@media (max-width:580px){
.projects-container .main-title {grid-template-columns:repeat(1,1fr);justify-content:center;gap:10px;}
div#add-project-form {justify-content: center; grid-template-columns: 1fr 120px;}
h1{text-align:left;}
.account-status {position: absolute;right: 10px;top: 0;width: 100vh;font-size:12px;}
.account-status b{font-size:14px;}
.grid-child.account {padding-top: 30px;}
.grid-child.top-menu{top:0px;}
.header-container {padding: 10px; grid-template-columns: 110px 1fr;padding-bottom: 35px;padding-top: 0;}
.logo a{font-size:17px;}
.headtech{position:absolute; bottom: 4px; left: 10px;}
.grid-child .button .pay{padding-right:8px;font-size:11px;}
.logo {display: grid; align-items: center;}
.logo a{display: block; padding-top: 30px;}
#add-project-form input {width: auto;}
.project-actions-top, .project-actions {grid-auto-flow: row;  gap: 10px; justify-content: center;}
.project-actions-top h3 { display: grid; grid-auto-flow: column; align-items: center; gap: 10px;}
}
.cod-manual {padding-top: 10px; font-size: 14px; font-style: italic;}
.cod-manual a {color: #272727; border-bottom: 1px dotted #353535;}
.cod-manual a:hover{color:#3d80e4;border-bottom: 1px solid #3d80e4;}