@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Bold.woff2') format('woff2'),
    url('../fonts/Montserrat-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Medium.woff2') format('woff2'),
    url('../fonts/Montserrat-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Regular.woff2') format('woff2'),
    url('../fonts/Montserrat-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-SemiBold.woff2') format('woff2'),
    url('../fonts/Montserrat-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Work Sans';
  src: url('../fonts/WorkSans-Medium.woff2') format('woff2'),
    url('../fonts/WorkSans-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Work Sans';
  src: url('../fonts/WorkSans-Bold.woff2') format('woff2'),
    url('../fonts/WorkSans-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Work Sans';
  src: url('../fonts/WorkSans-Regular.woff2') format('woff2'),
    url('../fonts/WorkSans-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
    font-family: 'Proxima Nova';
    src: url('../fonts/ProximaNova-Bold.woff2') format('woff2'),
        url('../fonts/ProximaNova-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Proxima Nova';
    src: url('../fonts/ProximaNova-Regular.woff2') format('woff2'),
        url('../fonts/ProximaNova-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Proxima Nova';
    src: url('../fonts/ProximaNova-Semibold.woff2') format('woff2'),
        url('../fonts/ProximaNova-Semibold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
/*New*/
.sidebar .mobile{display:none}
.header .opener{display:none}

.main-area .open-cancel-subscription{  min-width: 214px;    padding: 10px 20px;    font-size: 17px;    font: 16px / 30px 'Montserrat', Arial, sans-serif;  text-align:center;  border-radius: 100px;-webkit-border-radius: 100px;box-shadow:none;-webkit-box-shadow:none; }
.main-area .billinginfo .btn, 
.manage-profile .main-area .btn-primary,
.main-area #payment-form #pay-button,
#collect-invite-emails{    border-color: #2F92FA;  box-shadow:none;-webkit-box-shadow:none;  background: #2F92FA;    min-width: 214px;    padding: 10px 20px;    font-size: 17px;    font: 16px / 30px 'Montserrat', Arial, sans-serif;    border-radius: 100px;-webkit-border-radius: 100px;}
.main-area #payment-form #pay-button:hover,
.main-area .billinginfo .btn:hover, 
.manage-profile .main-area .btn-primary:hover,
#collect-invite-emails:hover{background: #1046ba;  border-color: #1046ba;  color: #fff;}

.tabs-row{margin: 0 0 26px;}
.tabs-row ul{float: left;margin:0;border-bottom:1px solid #D2D4D9;padding:0;list-style:none;}
.tabs-row ul li{margin:0 15px 0 0;display:inline-block;vertical-align:top;}
.tabs-row ul li:last-child{margin-right:0;}
.tabs-row ul li a{padding-bottom: 4px;display:block;color:#202942;font-size:20px;}
.tabs-row ul li.active a{font-weight:bold;position:relative;}
.tabs-row ul li.active a:after{left:0;width:100%;content:'';position:absolute;bottom:-2px;height:3px;background:#2F63FA}
.sidebar .menu li.menu-item-new{display:none;}


@media only screen and (max-width: 980px) {
 .sidebar .menu li.menu-item-team{display:none;}
/*.sidebar .menu li.menu-item-billing{display:none;}*/
.sidebar .menu li.menu-item-invoices{display:none;}
/*.sidebar .menu li.menu-item-profile{display:none;}*/
.sidebar .menu li.menu-item-new{display:block;}
.manage-projects .hideformobile{display:none;}
.manage-projects .maintitle{background:none!important}

.footer-main{display:none;}
.main-area .sidebar{-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-ms-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;width: 80%;    position: fixed;    top: 0;    right: -100%;    padding-top: 20px;    z-index: 10;    background: #fff;    margin: 0;    height: 100vh;}
.openmenu:before{z-index:5;background:rgba(0,0,0,0.4);content:'';position:absolute;top:0;left:0;width:100%;height:100%}
.header .opener{display:block;width: 15px!important;  height:20px;  position: relative;  margin:21px 0 0 auto;  -webkit-transform: rotate(0deg);  -moz-transform: rotate(0deg);  -o-transform: rotate(0deg);  transform: rotate(0deg);  -webkit-transition: .5s ease-in-out;  -moz-transition: .5s ease-in-out;  -o-transition: .5s ease-in-out;  transition: .5s ease-in-out;float:right;  cursor: pointer;}
.header .opener span {  display: block;  position: absolute;  height: 2px;  width: 100%;  background: #26282F;  border-radius: 2px;  opacity: 1;  left: 0;  -webkit-transform: rotate(0deg);  -moz-transform: rotate(0deg);  -o-transform: rotate(0deg);  transform: rotate(0deg);  -webkit-transition: .25s ease-in-out;  -moz-transition: .25s ease-in-out;  -o-transition: .25s ease-in-out;  transition: .25s ease-in-out;}
.header .opener span:nth-child(1) {  top: 0px;}
.header .opener span:nth-child(2) {  top: 6px;}
.header .opener span:nth-child(3) {  top: 12px;}
.openmenu .header .opener span:nth-child(1) {  top: 10px;  -webkit-transform: rotate(135deg);  -moz-transform: rotate(135deg);  -o-transform: rotate(135deg);  transform: rotate(135deg);}
.openmenu .header .opener span:nth-child(2) {  opacity: 0;  left: -60px;}
.openmenu .header .opener span:nth-child(3) {  top: 10px;  -webkit-transform: rotate(-135deg);  -moz-transform: rotate(-135deg);  -o-transform: rotate(-135deg);  transform: rotate(-135deg);}
.openmenu .main-area .sidebar{right:0;overflow: auto;}
.sidebar .menu li{width: calc(100% - 30px);}
.sidebar .menu li a{border-radius:0 15px 15px 0;}
.openmenu{overflow:hidden;}
.sidebar .mobile{margin:0 0 21px;overflow: hidden;display:block}
.sidebar .mobile .l{display:block;margin:0 0 -21px}
.sidebar .menu li a{font-size:16px!important;}
.sidebar .openers{display:block;width: 15px!important;  height:20px;  position: relative;  margin:21px 0 0 auto;  -webkit-transform: rotate(0deg);  -moz-transform: rotate(0deg);  -o-transform: rotate(0deg);  transform: rotate(0deg);  -webkit-transition: .5s ease-in-out;  -moz-transition: .5s ease-in-out;  -o-transition: .5s ease-in-out;  transition: .5s ease-in-out;float:right;  cursor: pointer;}
.sidebar .openers span {  display: block;  position: absolute;  height: 2px;  width: 100%;  background: #26282F;  border-radius: 2px;  opacity: 1;  left: 0;  -webkit-transform: rotate(0deg);  -moz-transform: rotate(0deg);  -o-transform: rotate(0deg);  transform: rotate(0deg);  -webkit-transition: .25s ease-in-out;  -moz-transition: .25s ease-in-out;  -o-transition: .25s ease-in-out;  transition: .25s ease-in-out;}
.sidebar .openers span:nth-child(1) {  top: 0px;}
.sidebar .openers span:nth-child(2) {  top: 6px;}
.sidebar .openers span:nth-child(3) {  top: 12px;}
.openmenu .sidebar .openers span:nth-child(1) {  top: 10px;  -webkit-transform: rotate(135deg);  -moz-transform: rotate(135deg);  -o-transform: rotate(135deg);  transform: rotate(135deg);}
.openmenu .sidebar .openers span:nth-child(2) {  opacity: 0;  left: -60px;}
.openmenu .sidebar .openers span:nth-child(3) {  top: 10px;  -webkit-transform: rotate(-135deg);  -moz-transform: rotate(-135deg);  -o-transform: rotate(-135deg);  transform: rotate(-135deg);}
.button-create .btn.btn-primary.float-end.blue{display:none;}
.button-create .btn.white  strong{color:#2F92FA!important}
.filter-row .view.float-end{display:none!important;}
.projects-table.grid tbody tr td.first .img{border-radius:5px!important;-webkit-border-radius:5px!important;border:1px solid #CCCCCC;box-shadow:none!important;overflow: hidden;-webkit-box-shadow:none!important}
.manage-projects .maintitle{background: url(libs/images/cards.svg) no-repeat 100% 50%;}
.manage-projects .filter-row {display:none!important}
}
@media only screen and (max-width: 767px) {
	.projects-table.grid tbody tr{width:48%!important}
}
/*NEW*/
.h3, h3 {
        font-size: 1.35rem;
		margin:20px 0
    } 
.btn-primary{background-color:#2F92FA;border-color:#2F92FA}
.logged-in  .main-area{    min-height: 100vh;display: flex;max-width:100%;padding:0}
.logged-in  .header{display:none;}
.logged-in  .sidebar{position:relative;background:#F9F9F9;margin:0 30px 0 0;padding-top:110px;background-image: url(https://app.moddy.io/images/logo-colour.svg);background-position:31px 28px;background-size:106px auto;background-repeat:no-repeat;}
 .logged-in  .footer-main{display:none;}
#shareProjectModal .modal-body,
#create2DProjectModal .modal-body,
#create3DProjectModal .modal-body,
#pleaseUpgradeModal  .modal-body{padding: 14px 24px;text-align:center;border:none}
#shareProjectModal .modal-header,
#create2DProjectModal .modal-header,
#create3DProjectModal .modal-header,
#pleaseUpgradeModal  .modal-header{padding-bottom:0;text-align:center;border:none;padding:30px 25px 0}
#shareProjectModal .modal-header{display:block;text-align:left;}
#shareProjectModal .modal-footer,
#create2DProjectModal .modal-footer,
#create3DProjectModal .modal-footer,
#pleaseUpgradeModal  .modal-footer{padding: 0 24px 30px;text-align:center;border:none}
#pleaseUpgradeModal .logo,
#create2DProjectModal .logo,
.upgrade-downgrade-modal .modal-body .logo{   width: 256px;margin:0 auto 23px}
.upgrade-downgrade-modal .modal-body{    position: relative;text-align:center;max-width:505px;border:1px solid #CCC;padding:34px 32px;background:#fff;border-radius:8px;-webkit-border-radius:8px;}
#pleaseUpgradeModal  h2,
#create2DProjectModal h2,
.upgrade-downgrade-modal .modal-body h2{    padding: 0 28px;color:#202942;font-size:28px;line-height:30px;font-weight:700;margin:0 0 20px}
.upgrade-downgrade-modal .modal-body p{padding:0 7px 10px;color:#202942;font-size:16px;line-height:24px;}
.upgrade-downgrade-modal .modal-body .btn{display:block;padding: 12px;    width: 100%;}


#shareProjectModal input[type="email"].form-control,
#create2DProjectModal input[type="text"].form-control,
#create3DProjectModal input[type="text"].form-control{font-size:16px;border-color:#DFE5EB;background-color:#F9F9F9}
#create3DProjectModal .modal-footer{border-top:0}

#shareProjectModal .modal-footer .btn,
#create2DProjectModal .modal-footer .btn,
#create3DProjectModal .modal-footer .btn{border-radius:100px;-webkit-border-radius:100px;font-size:16px}
#shareProjectModal .modal-footer .btn.btn-primary,
#create2DProjectModal .modal-footer .btn.btn-primary,
#create3DProjectModal .modal-footer .btn.btn-primary{padding:8px 25px;background:#2F92FA;margin-right:0}

#shareProjectModal .modal-footer .btn.btn-secondary,
#create2DProjectModal .modal-footer .btn.btn-secondary,
#create3DProjectModal .modal-footer .btn.btn-secondary{padding:8px 25px;background:#fff;color:#5D6670;border:1px solid #EAEFF3}
#shareProjectModal  .modal-footer .btn.btn-secondary:hover,
#shareProjectModal .modal-footer .btn.btn-primary:hover,
#create2DProjectModal .modal-footer .btn.btn-primary:hover,
#create3DProjectModal .modal-footer .btn.btn-primary:hover,
#create2DProjectModal .modal-footer .btn.btn-secondary:hover,
#create3DProjectModal .modal-footer .btn.btn-secondary:hover{background:#000;border-color:#000;color:#fff}

#pleaseUpgradeModal .btn-close,
#create2DProjectModal .btn-close,
.upgrade-downgrade-modal .modal-body .close{padding: 0;opacity:1;position: absolute;    top: 20px;    right: 20px;width:24px;height:24px;text-indent:-9999px;overflow:hidden;background:url(../images/close-popup.svg) no-repeat;background-size:24px auto;background-repeat:no-repeat;}
.upgrade-downgrade-modal .modal-body div:last-child p{ margin-top: 17px;     padding-bottom: 0;   font-size: 14px;    line-height: 24px;}
.newregistration {max-width: 1000%;    width: auto;margin:0 -9999px -100px;padding:0px 9999px 90px;padding-left: calc(50vw - 50%);    padding-right: calc(50vw - 50%); margin-left: calc(50% - 50vw);    margin-right: calc(50% - 50vw);/*background:url(../images/payment-bg.jpg) no-repeat;background-size:cover;*/}
.newregistration #payment-form.register-form{max-width:100%!important;}
.newregistration #payment-form.register-form #step-1,
.newregistration #payment-form.register-form #step-2,
.newregistration #payment-form.register-form #step-3{margin:0 auto; position: relative;text-align:center;max-width:480px;border:1px solid #CCC;padding:34px 32px;background:#fff;border-radius:8px;-webkit-border-radius:8px;}
#create2DProjectModal input[type="text"],
#create3DProjectModal input[type="text"],
#shareProjectModal input[type="email"],
.newregistration #payment-form.register-form #step-1 input[type="email"],
.newregistration #payment-form.register-form #step-1  input[type="text"],
.newregistration #payment-form.register-form #step-1  input[type="password"]{margin:0 0 10px;display: block;  width: 100%;  padding: .375rem .75rem;  font-size: 1rem;  font-weight: 400;  line-height: 1.5;  color: #212529;  background-color: #fff;  background-clip: padding-box;  border: 1px solid #ced4da;  -webkit-appearance: none;  -moz-appearance: none;  appearance: none;  border-radius: .375rem;  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; color: #535454;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  box-shadow: none;
  -webkit-box-shadow: none;
  border: 1px solid #EEEEEE;
  background-color: #ECF2FC;
  font: 14px/31px 'Work Sans', Arial, sans-serif;
}
.newregistration #payment-form.register-form #step-1 select {
  margin-bottom:10px;
}
.newregistration #payment-form.register-form  .logo{   width: 256px;margin:0 auto 23px}
.newregistration #payment-form.register-form  h2{    padding: 0 ;color:#202942;font-size:28px;line-height:30px;font-weight:700;margin:0 0 20px}
.newregistration #payment-form.register-form  p{padding:0 7px 0;color:#202942;font-size:18px;line-height:30px;}
/*#create2DProjectModal .btn,*/
.newregistration #payment-form.register-form  .btn{line-height: 19px;font-size:18px;display:block;padding: 12px;    width: 100%;}
#shareProjectModal .modal-content,
#create3DProjectModal  .modal-content,
#create2DProjectModal .modal-content{border-radius:15px;-webkit-border-radius:15px}
#shareProjectModal .modal-title,
#create3DProjectModal  .modal-title,
#create2DProjectModal .modal-title{font-size:18px;color:#212329;font-weight:600}
#shareProjectModal .modal-header p{padding-top:3px;margin-bottom:0px}
/*#create2DProjectModal .btn, */.newregistration #payment-form.register-form .btn{background-color:#2F92FA;border-color:#2F92FA;border-radius:50px;-webkit-border-radius:50px;}
#create2DProjectModal .btn:hover, .newregistration #payment-form.register-form .btn:hover{
border-color: #2f63fa;
  background: #2f63fa;}
 #create3DProjectModal .modal-footer,
#create2DProjectModal  .modal-footer{display:flex;padding-top:0}
/*#create2DProjectModal .btn{width:48%}*/
.newregistration-h{display:block}
.newregistration-h .lside{float:left;width:49%}
.newregistration-h .rside{float:right;width:49%}
.newregistration-h  #payment-form.register-form  .last p {margin-bottom: 0;  margin-top:17px;  font-size: 12px;    line-height: 24px;}
.newregistration-h  #payment-form.register-form p a{text-decoration:underline;color:#2EB5EA;}
.newregistration-h  #payment-form.register-form  p a:hover{text-decoration:none}
/*Logout*/
.welcome {
  margin: 10px auto 10px;
  width: 343px;
  height: 72px;
  background: url(../images/welcome.png) no-repeat;
  background-size: 100% auto;
}
.welcome + p {
  color: #2b2f2f;
  font: 14px/31px 'Montserrat', Arial, sans-serif;
  text-align: center;
  max-width: 602px;
  margin: 0 auto 13px;
}
.button-welcome {
  text-align: center;
}
.button-welcome .btn-primary {
  margin: 0 17px;
  border-color:#2F92FA;
  background: #2F92FA;
  min-width: 214px;
  padding: 10px 10px;
  font-size: 17px;
  font: 16px/30px 'Montserrat', Arial, sans-serif;
  border-radius:100px;
}
.button-welcome .btn-primary.white {
  background: #fff;
  border-color: #2F92FA;
  color:#2F92FA;
}
.button-welcome .btn-primary:hover {
  -webkit-box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}
.welcome-login {
  margin: 10px auto 5px;
  width: 240px;
  height: 72px;
  background: url(../images/logo-colour.svg) no-repeat;
  background-size: 100% auto;
}
.welcome-login + p {
  color: #2b2f2f;
  font: 14px/31px 'Montserrat', Arial, sans-serif;
  text-align: center;
  max-width: 612px;
  margin: 0 auto 0px;
  display: none;
}
.loginform {
  padding-top: 13px;
  padding-bottom: 10px;
}
.loginform .form-label {
  display: none;
}
.loginform .form-control {
  -webkit-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
  background: #f9fbfc;
}
.loginform .form-control::-webkit-input-placeholder {
  color: #000000;
  opacity: 1;
}
.loginform .form-control::-moz-placeholder {
  color: #000000;
  opacity: 1;
}
.loginform .form-control:-ms-input-placeholder {
  color: #000000;
  opacity: 1;
}
.loginform .form-control:-moz-placeholder {
  color: #000000;
  opacity: 1;
}
.loginform + p {
  font: 16px/31px 'Work Sans', Arial, sans-serif;
}
.loginform + p a {
  color: #2f92fa;
  font-weight: bold;
}

.welcome-pass {
  margin: 42px auto 25px;
  width: 526px;
  height: 72px;
  background: url(../images/welome-pass.png) no-repeat;
  background-size: 100% auto;
}
.welcome-pass + p {
  color: #2b2f2f;
  font: 16px/31px 'Work Sans', Arial, sans-serif;
  text-align: center;
  max-width: 402px;
  margin: 0 auto 13px;
}
.status-p {
  color: #2b2f2f;
  font: 16px/31px 'Work Sans', Arial, sans-serif;
  text-align: center;
  max-width: 402px;
  margin: 0 auto 13px;
}

.banner-fix a {
  color: #fff;
}
.banner-fix a:hover {
  text-decoration: underline;
}
.banner-fix {
  z-index: 100;
  -webkit-box-shadow: 0 0 5px 4px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 5px 4px rgba(0, 0, 0, 0.2);
  position: fixed;
  top: 10px;
  font-size: 14px;
  text-align: center;
  background: #0d6efd;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  left: 10px;
  right: 10px;
  color: #fff;
  padding: 6px 10px;
}
body.register-step-1 .header > div > div > .hidden {
  display: none;
}
body.register-step-2 .header > div > div > .hidden a.tel {
  display: none;
}
#validationServerUsernameFeedbacks {
  display: none;
}
#password_confirmation.is-invalid + #validationServerUsernameFeedbacks {
  display: block;
}
.steps + .main-area .validation_errors {
  padding: 0 0 20px;
  border: none;
}
.step-3 #priceReviewTable tr td:first-child {
  width: 60%;
}
.emails.emails-input .email-chip.invalid:after {
  display: block;
  color: #f00;
  content: 'Email address is already registered with OT Sketch';
}
.steps + .main-area > .row #payment-form #collect-invite-emails:focus {
  border-color: green;
}
.main-area > .logout-btn {
  display: inline-block;
  vertical-align: top;
}
.footer-main .logo {
  width: 170px;
}
body {
  font: 17px/25px 'Proxima Nova', Arial, sans-serif;
  color: #424251;
}
.alert-success {
  margin-top: 18px;
}
.header {
  padding: 20px 0;
  border: none;
}
#payment-message {
  color: rgb(105, 115, 134);
  font-size: 16px;
  line-height: 20px;
  padding-top: 12px;
  text-align: center;
}
#payment-element {
  margin-bottom: 24px;
}
.header .tel {
  font-weight: 500;
  font-size: 16px;
  padding: 16px 27px;
  color: #fff;
  background-size: 50px;
  -webkit-border-radius: 50px;
  vertical-align: middle;
  background: rgb(254, 158, 44);
  background: -moz-linear-gradient(
    left,
    rgba(254, 158, 44, 1) 0%,
    rgba(255, 79, 34, 1) 100%
  );
  background: -webkit-linear-gradient(
    left,
    rgba(254, 158, 44, 1) 0%,
    rgba(255, 79, 34, 1) 100%
  );
  background: linear-gradient(
    to right,
    rgba(254, 158, 44, 1) 0%,
    rgba(255, 79, 34, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fe9e2c', endColorstr='#ff4f22',GradientType=1 );
}
.header .tel {
  font-weight: 500;
  font-family: Montserrat, Arial, sans-serif;
  padding: 13px 18px;
  background: #2F92FA;
  color: #fff;
  font-weight: normal;
  font-size: 17px;
  line-height: 20px;
  border-radius: 4px;
}
.header .tel:hover {
  background: #254edb;
  opacity: 1;
  -webkit-box-shadow: 3px 3px 8px #0000003b;
  box-shadow: 3px 3px 8px #0000003b;
}
.header .tel svg {
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
}
.header .tel form button {
  display: block;
  margin: -16px -27px;
  padding: 16px 27px;
}
.header .tel + .tel {
  margin-left: 15px;
}
/*.header .tel:hover{background:#ff4f22}*/
.header .justify-between > .flex:first-child {
  width: 60%;
  justify-content: space-between;
}
.header .justify-between .flex .space-x-8 {
  float: right;
}
.header .justify-between .flex .space-x-8 a {
  border: none !important;
  font: 500 17px/30px Montserrat, Arial, Sans-Serif;
  font-weight: 500;
  font-size: 17px;
  font-size: 17px;
  line-height: 22px;
  color: #38383e;
}
.mobile-error.active {
  display: block;
}
.mobile-error {
  display: none;
  padding-top: 60px;
  background: url(../images/mobile-error.png) no-repeat 50% 19px;
  background-size: 40px auto;
  color: #f00;
  font-size: 18px;
  line-height: 27px;
}
/* spinner/processing state, errors */

.header .justify-between .flex .space-x-8 a:hover {
  border: none !important;
  color: #2f92fa !important;
}
.spinner,
.spinner:before,
.spinner:after {
  border-radius: 50%;
}
.spinner {
  color: #ffffff;
  font-size: 22px;
  text-indent: -99999px;
  margin: 0px auto;
  position: relative;
  width: 20px;
  height: 20px;
  box-shadow: inset 0 0 0 2px;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
.spinner:before,
.spinner:after {
  position: absolute;
  content: '';
}
.spinner:before {
  width: 10.4px;
  height: 20.4px;
  background: #5469d4;
  border-radius: 20.4px 0 0 20.4px;
  top: -0.2px;
  left: -0.2px;
  -webkit-transform-origin: 10.4px 10.2px;
  transform-origin: 10.4px 10.2px;
  -webkit-animation: loading 2s infinite ease 1.5s;
  animation: loading 2s infinite ease 1.5s;
}
.spinner:after {
  width: 10.4px;
  height: 10.2px;
  background: #5469d4;
  border-radius: 0 10.2px 10.2px 0;
  top: -0.1px;
  left: 10.2px;
  -webkit-transform-origin: 0px 10.2px;
  transform-origin: 0px 10.2px;
  -webkit-animation: loading 2s infinite ease;
  animation: loading 2s infinite ease;
}
@-webkit-keyframes loading {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes loading {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.emails.emails-input {
  max-height: inherit;
  border-radius: 0.25rem;
  background: #fff;
  border: 1px solid #c3c2cf;
  box-sizing: border-box;
  padding: 0.375rem;
  line-height: 1.5rem;
  font-size: 0.875rem;
  cursor: text;
  overflow: auto;
}
.emails.emails-input .email-chip {
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  background: rgba(102, 153, 255, 0.2);
  vertical-align: top;
  border-radius: 6.25rem;
  padding-left: 0.625rem;
  padding-right: 1.5rem;
  margin: 0.125rem;
  max-width: 100%;
  overflow: hidden;
}
.emails.emails-input .email-chip .content {
  display: inline-block;
  vertical-align: top;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.emails.emails-input .email-chip .remove {
  text-decoration: none;
  color: inherit;
  text-align: center;
  position: absolute;
  cursor: pointer;
  width: 1rem;
  font-size: 1rem;
  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
}
.emails.emails-input .add {
  margin-left: -32px;
  background: #61a0fd;
  color: white;
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
}
.emails.emails-input .email-chip.invalid {
  background: #fff;
  border-bottom: 1px dashed #d92929;
  border-radius: 0;
  padding-left: 0;
  padding-right: 1rem;
}
.emails.emails-input input {
  min-width: 330px;
  padding-right: 30px;
  border: 0;
  line-height: inherit;
  font-size: inherit;
  color: inherit;
  margin: 0.125rem;
}
.emails.emails-input input::placeholder,
.emails.emails-input input::-ms-input-placeholder,
.emails.emails-input input:-ms-input-placeholder {
  color: #c3c2cf;
  opacity: 1;
}
.emails.emails-input input:focus {
  outline: none;
}

/*New project*/
.button-create {
  padding-bottom: 26px;
  overflow: hidden;
  width: 100%;
}
.button-create .white {
   position: relative;
    padding: 15px 40px 15px 86px;
    border: 2px solid #2f63fa;
    background: #fff;
    color: #2f63fa;
    border-radius: 6px;
    -webkit-border-radius: 6px;
}
.button-create .blue:hover,
.button-create .white:hover {
  -webkit-box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}
/*.button-create .white:hover:before{filter: brightness(0) invert(1);}
.button-create .white:hover:after{filter: brightness(0) invert(1);}*/
.button-create .blue {
  position: relative;
    padding: 15px 40px 15px 86px;
    /* border: 2px solid #ebf5ff; */
    background: #fff;
    color: #fff;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    float: left !important;
    margin-left: 10px;
    background-color: #2f63fa;
}
/*.button-create .blue:hover{color:#fff;background:#1046ba;border-color:#1046ba}*/
.button-create .btn {
    width: auto;
    text-align: left;
}
.button-create .btn:hover {
  outline: none;
}
/*.button-create .btn:focus{box-shadow:none;}*/
.button-create .btn p {
  margin: 0;
}
.button-create .blue:before {
  background: url(libs/images/d3.svg) no-repeat 50% 50%;
  background-size: 100% auto;
  content: '';
  width: 54px;
  height: 54px;
  position: absolute;
  left: 21px;
  top: 50%;
  margin: -27px 0 0;
}
.button-create .white:before {
  background: url(libs/images/d2.svg) no-repeat 50% 50%;
  background-size: 100% auto;
  content: '';
  width: 54px;
  height: 54px;
  position: absolute;
  left: 21px;
  top: 50%;
  margin: -27px 0 0;
}
/*.button-create .white:after {
  background: url(libs/images/ph_plus-thin.svg) no-repeat 50% 50%;
  background-size: 100% auto;
  content: '';
  width: 32px;
  height: 32px;
  position: absolute;
  right: 20px;
  top: 50%;
  margin: -16px 0 0;
}
.button-create .blue:after {
  filter: brightness(0) invert(1);
  background: url(libs/images/ph_plus-thin.svg) no-repeat 50% 50%;
  background-size: 100% auto;
  content: '';
  width: 32px;
  height: 32px;
  position: absolute;
  right: 20px;
  top: 50%;
  margin: -16px 0 0;
}*/
.filter-row .maintitle{float:left;margin:7px 32px 0 0}
.filter-row .list-view {
  cursor: pointer;
  width: 32px;
  height:32px;
  text-indent: -9999px;
  overflow: hidden;
  float: left;
  margin: 0 0 0 10px;
  background: url(libs/images/listview.svg) no-repeat 50% 50%;
  background-size: 90% auto;
}
.filter-row .grid-view {
  cursor: pointer;
  width: 32px;
  height: 32px;
  text-indent: -9999px;
  overflow: hidden;
  float: left;
  margin: 0 0 0 10px;
  background: url(libs/images/caartview.svg) no-repeat 50% 50%;
  background-size: 90% auto;
}
.filter-row .list-view.active {
   border-radiius: 6px;
  -webkit-border-radius: 6px;
  background-color:#EEEEEE
}
.filter-row .grid-view.active {
    border-radiius: 6px;
  -webkit-border-radius: 6px;
	background-color:#EEEEEE
}
.projects-table .more {
  width: 25px;
  height: 5px;
  text-indent: -9999px;
  overflow: hidden;
  display: inline-block;
  background: url(libs/images/ellipses.svg) no-repeat 50% 50%;
  background-size: 100% auto;
}
.projects-table .table th:last-child,
.projects-table td:last-child {
  text-align: center;
}
.projects-table .h {
  position: relative;
  text-align: center;
}
.projects-table .more-h {
  z-index: 3;
  overflow: hidden;
  background: #fff;
  left: 50%;
  margin: 0 0 0 -57px;
  display: none;
  -webkit-box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  border-radiius: 6px;
  -webkit-border-radius: 6px;
  position: absolute;
  top: 100%;
  width: 114px;
}
.projects-table .more-h a {
text-align:left;
  border: none;
  margin: 0;
  border-radius: 0;
  -webkit-border-radius: 0;
  padding: 7px 5px;
  font-size: 13px;
}
.projects-table .more-h a:hover {
  background: rgba(0, 87, 255, 0.5);
  color: #000;
}
.projects-table td:last-child:hover .more-h {
  display: block;
}
.table .project-item-name {
  padding-right: 23px;
  /*background: url(libs/images/link.svg) no-repeat 100% 50%;
  background-size: 12px auto;*/
 font-size:16px;
  line-height:20px;
  font-weight:600;
  color:#313338;
}
.projects-table:not(.grid) tbody tr td.first .img {
 width: 144px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 10px 0 0;
	border-radius:6px;
	-webkit-border-radius:6px;
	overflow:hidden;
}
.projects-table:not(.grid) tbody tr:hover{
border-radius:10px;
-webkit-border-radius:10px;

-webkit-box-shadow:inset 0 0 0 1px #2F92FA;
box-shadow:inset 0 0 0 1px #2F92FA;}
.projects-table:not(.grid) tbody tr:hover td{border-color:transparent}
.projects-table.grid thead {
  display: none;
}
.projects-table.grid .table {
  border-bottom: 2px solid #d2d4d9;
}
.projects-table.grid tbody {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.projects-table.grid tbody tr {
  margin-bottom: 30px;
  display: block;
  width: 31%;
}
.projects-table.grid tbody tr td.first {
  padding: 0;
  border: none;
  display: block;
}
.projects-table.grid tbody tr td.first .img {
  margin: 0 0 8px;
 overflow:hidden;
 -webkit-box-shadow: 0 0 0 1px #CBCACA;
box-shadow: 0 0 0 1px #CBCACA;
  border-radius: 10px;
  -webkit-border-radius: 10px;
}
.projects-table.grid tbody tr td.first:hover .img{
-webkit-box-shadow: 0 0 0 1px #2F92FA;
box-shadow: 0 0 0 1px #2F92FA;
}
.projects-table.grid tbody tr td.first .img img {
 width: 100%;
  height: auto;
}
.projects-table.grid tbody tr td.edit {
  padding: 0;
   line-height: 17px;
  border: none;
  float: left;
  width: 58%;
  display: block;
  font-size: 14px;
}
.projects-table.grid tbody tr td.edit:before {
  display: inline;
  content: 'Edited ';
}
.projects-table.grid tbody tr td .project-item-name {
  max-width: 58%;
  display: inline-block;
}
.projects-table.grid .table {
  display: block;
}
.projects-table.grid tbody tr td.second {
  display: none;
}
.projects-table.grid tbody tr td.dots {
  margin-top: -23px;
  display: block;
  padding: 0;
  width: 20%;
  float: left;
  border: none;
}
.projects-table.grid tbody tr td.name {
  margin-top: -23px;
  display: block;
  padding: 0;
  float: right;
  width: 32px;
  height: 32px;
  color: #fff;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  background: #2F92FA;
}
.projects-table.grid tbody tr td.name span {
  line-height: 32px;
  width: 20px;
  display: block;
  text-transform: uppercase;
  margin: 0 auto;
  overflow: hidden;
font-size: 13px;
    text-align: center;
}

.main-area .cont .float-start select {
  width: calc(50% - 30px);
}
.main-area {
  font: 16px/25px 'Proxima Nova', Arial, sans-serif;
  min-height: calc(100vh - 268px - 105px);
  color: #44474E;
  padding: 70px 24px 110px;
  max-width: 94rem;
  margin-left: auto;
  margin-right: auto;
}

.logged-out  .main-area{display:flex;flex-direction:column;justify-content:center}
.main-area:after {
  display: block;
  clear: both;
  content: '';
}
html,
body {
  background: #fff;
}
.sidebar {
  font: 17px/25px 'Proxima Nova', Arial, sans-serif;
  color: #424251;
  padding: 25px 30px; /*background:#1350D3;*/
  float: left;
  width: 18.5%;
  margin: 18px 7% 0 0;
}
.sidebar a {
  color: #fff;
}
.sidebar h3 {
  margin-bottom: 20px;
  font-weight: bold;
  font-size: 25px;
  line-height: 30px;
  color: #fff;
  text-align: center;
}
/*.sidebar + .cont{overflow:hidden;}*/
.sidebar + .cont {
  width: 70%;
  float: left;
  padding-top:12px;
  padding-bottom:40px;
}
.sidebar svg {
  display: block;
  margin: 0 auto 7px;
}
.sidebar .menu {
  margin: 0 -30px;
  padding: 0;
  list-style: none;
  overflow: hidden;
}
.sidebar .menu li {
  vertical-align: top;
  overflow: hidden;
  margin: 0;
  font-size: 22px;
  line-height: 22px;
  font-weight: 500;
}
.sidebar .menu li a {
  vertical-align: middle;
  border: none;
  padding: 15px 20px 15px 30px;
  color:#5D6670;
  font-size: 16px;
  line-height: 19px;
  font-weight: 500;
  display: block;
}
.sidebar .menu li button {
   width: 100%;
  text-align: left;
  color: #5D6670;
  padding: 15px 10px 15px 58px;
  border: none;
  display: block;
  border-radius: 0;
  -webkit-border-radius: 0;
  font-size: 16px;
  line-height: 19px;
  font-weight: 500;
}
.sidebar .menu li span {
  display: inline-block;
  vertical-align: middle;
}
.sidebar .menu li.logout button {
  background-image: url(libs/images/Logout.svg);
  background-repeat: no-repeat;
  background-position: 30px 50%;
  background-size:16px auto;
}
.sidebar .menu li.logout:hover button{
background-image: url(libs/images/Logout-h.svg);
  background-repeat: no-repeat;
  background-position: 30px 50%;
  background-size:16px auto;
}
.sidebar .menu li a svg {
  display: inline-block;
  vertical-align: middle;
  margin: 0 4px 0 0;
}
.sidebar .menu li a:hover,
.sidebar .menu li button:hover,
.sidebar .menu li a.current {
color:#2F92FA;

  position: relative;
}
.sidebar .menu li a.current svg  path,
.sidebar .menu li a:hover svg path,
.sidebar .menu li button:hover svg path{ fill:#2F92FA!important;}


.sidebar .menu li.menu-item-billing a.current svg  path,
.sidebar .menu li.menu-item-billing a:hover svg path,
.sidebar .menu li.menu-item-billing button:hover svg path{fill:#F9F9F9!important;stroke:#2F92FA!important;}
.sidebar .menu li.menu-item-team a.current svg  path,
.sidebar .menu li.menu-item-team a:hover svg path,
.sidebar .menu li.menu-item-team button:hover svg path{fill:#F9F9F9!important;stroke:#2F92FA!important;}
.sidebar .menu li.menu-item-tutorial a.current svg  path,
.sidebar .menu li.menu-item-tutorial a:hover svg path,
.sidebar .menu li.menu-item-tutorial button:hover svg path{fill:#F9F9F9!important;stroke:#2F92FA!important;}
.sidebar .menu li.menu-item-training a.current svg  path,
.sidebar .menu li.menu-item-training a:hover svg path,
.sidebar .menu li.menu-item-training button:hover svg path{fill:#F9F9F9!important;stroke:#2F92FA!important;}

.sidebar .menu li a.current:after {
  content: '';
  position: absolute;
  top: 17%;
  bottom: 17%;
  width: 3px;
  background: rgb(254, 158, 44);
  left: 0;
  background: -moz-linear-gradient(
    top,
    rgba(254, 158, 44, 1) 0%,
    rgba(255, 79, 34, 1) 100%
  );
  background: -webkit-linear-gradient(
    top,
    rgba(254, 158, 44, 1) 0%,
    rgba(255, 79, 34, 1) 100%
  );
  background: linear-gradient(
    to bottom,
    rgba(254, 158, 44, 1) 0%,
    rgba(255, 79, 34, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fe9e2c', endColorstr='#ff4f22',GradientType=0 );
}
body.manage-training .menu-item-training a,
body.manage-projects .menu-item-projects a,
body.manage-team .menu-item-team a,
body.manage-invoices .menu-item-invoices a,
body.manage-billing .menu-item-billing a,
body.manage-profile .menu-item-profile a {
color:#2F92FA;
  position: relative;
}
body.manage-training .menu-item-training a svg  path,
body.manage-tutorial  .menu-item-tutorial a svg  path,
 
body.manage-projects .menu-item-projects a svg  path,
body.manage-team .menu-item-team a svg  path,
body.manage-invoices .menu-item-invoices a svg  path,
body.manage-billing .menu-item-billing a svg  path,
body.manage-profile .menu-item-profile a svg  path{ fill:#2F92FA!important;}

body.manage-billing  .sidebar .menu li.menu-item-billing a svg path {fill:#F9F9F9!important;stroke:#2F92FA!important;}
body.manage-team  .sidebar .menu li.menu-item-team a svg path {fill:#F9F9F9!important;stroke:#2F92FA!important;}
body.manage-tutorial  .sidebar .menu li.menu-item-tutorial a svg path{fill:#F9F9F9!important;stroke:#2F92FA!important;}
body.manage-training .sidebar .menu li.menu-item-training a svg path{fill:#F9F9F9!important;stroke:#2F92FA!important;}


a {
  text-decoration: none;
}
.maintitle {
  margin: 0 0 0px;


    box-shadow: none;
  border-radius: none;
  -webkit-border-radius: 0;
  font-weight: 600;
  color: #202942;
  font-size: 24px;
  line-height: 30px;
}
.header + header.bg-white.shadow {
  display: none;
}
.footer-main {
  font: 17px/25px 'Proxima Nova', Arial, sans-serif;
  color: #fff;
  width: 100%;
  overflow: hidden;
  background: url(../images/footer.jpg) no-repeat 50% -80px;
  background-size: auto 120%;
}
.footer-main .continer {
  padding: 53px 0 0px;
  margin: 0 auto;
  max-width: 1460px;
  overflow: hidden;
}
.footer-main .col {
  float: left;
  width: 17%;
  padding-top: 40px;
}
.footer-main .col:first-child {
  padding-top: 0;
  float: left;
  width: 25%;
  margin: 0 7% 0 0;
}
.footer-main a {
  color: #fff;
}
.footer-main .logo {
   
  margin: 0 0 25px;
}
.footer-main .logo + p {
  margin: 0 0 1em;
  clear: both;
}
.footer-main .copy {
  display: block;
  /*padding: 7px 0 20px;*/
  padding: 0px;
  text-align: center;
  font-size: 15px;
}
.footer-main .social {
  overflow: hidden;
  margin: 0;
  padding: 10px 0 0;
  list-style: none;
  overflow: hidden;
}
.footer-main .social li {
  float: left;
  margin: 0 12px 0 0;
}
.footer-main .social li a {
  text-align: center;
  width: 26px;
  height: 26px;
  border: 1px solid #fff;
  line-height: 24px;
  vertical-align: middle;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  display: flex;
  align-items: center;
}
.footer-main .social li a:hover {
  opacity: 1;
  background: #fff;
}
.footer-main .social li a:hover svg path {
  fill: #1254e6 !important;
}
.footer-main .social li a svg {
  margin: -1px auto 0;
}
.footer-main h3 {
  font: bold 18px/25px 'Proxima Nova', Arial, sans-serif;
  margin: 0 0 26px;
}
.footer-main ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}
.footer-main ul li {
  margin: 0 0 18px;
  font-size: 18px;
  line-height: 24px;
}
.footer-main ul li a {
  color: #fff;
  font-size: 18px;
  line-height: 24px;
}
.footer-main ul li a:hover {
  opacity: 0.8;
}
.main-area .cont .clearfix.filter-row .float-start select {
  width: calc(35% - 30px);
}
.search input[type='text'] {
  width: 47%;
  height: 42px;
  padding: 8px 20px 8px 42px;
  font: 16px/24px 'Proxima Nova', Arial, sans-serif;
  background: #F9F9F9 url(../images/search.svg) no-repeat 15px 50%;
  background-size: 16px auto;
  border: 1px solid #F9F9F9;
  color: #38383e;
  margin: 0 15px 0 0;
  border-radius: 6px;
  -webkit-border-radius:6px;
}
.search select {
  height: 44px;
  border-radius: 6px;
  -webkit-border-radius: 6px;
  background-color: #F9F9F9;
  border-color: #F9F9F9;
}
.search .btn {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  background: #e8effd url(../images/filter.svg) no-repeat 25px 50%;
  background-size: 17px auto;
  height: 54px;
  vertical-align: top;
  padding: 15px 26px 15px 51px;
  vertical-align: top;
  color: #1863eb;
  border: none;
  margin: 0 0 0 10px;
  font: 16px/24px 'Proxima Nova', Arial, sans-serif;
}
.clearfix.filter-row:after {
  display: none;
}
.clearfix.filter-row {
  margin: 0 0 20px;
  display: flex;
  flex-direction: reverse;
  align-items: center;
  justify-content: space-between;
}
.clearfix.filter-row .float-start {
  width: calc(100% - 145px);
  float: none !important;
}
.footer-main .tel {
  float: left;
  margin: 0 0 22px;
  padding: 2px 0 2px 42px;
  background: url(../images/tel-i.svg) no-repeat -20px -15px;
}
.footer-main .tel + * {
  clear: both;
}
.clearfix.filter-row .float-end {
  margin-top: 0px;
}
.footer-main .mail {
  float: left;
  margin: 0 0 22px;
  padding: 2px 0 2px 42px;
  background: url(../images/add-i.svg) no-repeat -20px -15px;
}
.footer-main .mail + * {
  clear: both;
}
.footer-main address {
  float: left;
  margin: 0 0 22px;
  padding: 2px 0 2px 42px;
  background: url(../images/map-i.svg) no-repeat -20px -15px;
}
.footer-main address + * {
  clear: both;
}



.footer-main{padding-bottom:25px;padding-top: 50px;mix-blend-mode: multiply;  font: 17px/25px 'Work Sans',Arial, sans-serif;  color: #fff;  width: 100%;  overflow: hidden;  background:url(assets/img/footer.jpg) no-repeat 50% -80px;background:#FAFBFE;background-size: auto 120%;}
.footer-main .container{max-width: 1460px;}
.footer-main .col{float:left;width:23.5%;padding-top:0px}
.footer-main .col:first-child{padding-top:0;float:left;width:28%;margin:0 9.5% 0 0;}
.footer-main .col:last-child{width:15.5%}
.footer-main .logo{ margin:0 0 25px}
.footer-main .logo + *{clear:both}
.footer-main  p{font:18px/28px 'Work Sans',Arial, sans-serif;color:#44474E;}
.footer-main .center {  margin-bottom:33px;padding: 90px 0 50px;border-bottom:1px solid #2F2F2F;  margin: 0 auto 33px;     overflow: hidden;}
.footer-main  h3{font:bold 18px/25px 'Work Sans',Arial, sans-serif;margin:0 0 26px;color:#fff}
.footer-main  ul{margin:0;padding:0;list-style:none;overflow:hidden;}
.footer-main  ul li{padding:0;background:none;margin:0 0 18px;font-size:18px;line-height:24px;}
.footer-main  ul li a{color:#fff;font-size:18px;line-height:24px;padding:0;}
.footer-main  ul li a:hover{opacity:0.8}
.footer-main  ul  ul{display:none;}
.footer-main .logo{ width:170px;margin:0 auto 0px auto}
.footer-main .logo img{width:100%;height:auto;display:block;}
.footer-main .copy {margin-left:70px; float: left;  width: 50%;  text-align: left; display: block;    text-align:left;  font-size: 15px;}
 


.table {
  margin-bottom: 40px;
}
h2 {
  font-size: 22px;
}
.table th {
  padding: 12px 12px;
  box-shadow: none;
  border-top: 1px solid #d2d4d9;
  border-bottom: 1px solid #d2d4d9;
   color: #212329;
  opacity: 0.9;
  font-weight: bold;
  font-size: 18px;
}
.table th a {
 color: #212329;
}
.table td {
  vertical-align: middle;
  border-bottom: 1px solid #d2d4d9;
  padding: 12px 12px;
  color: #424251;
  font-size: 16px;
}
.table .project-item-name {
  color: #424251;
}
.projects-table .table th {
  border: none;
}
.table form button,
.project-item-share,
.project-item-rename,
.project-item-open,
.copy-link,
.btn-copy,
.download-btn,
.project-revisions,
.project-item-delete,
.project-item-duplicate {
  color: #000;
  text-align: center;
  width: 100%;
  border-radius: 0.375em;
  -webkit-border-radius: 0.375em;
  line-height: 15px;
  font-size: 11px;
  border: 1px solid #000;
  margin: 0 0 4px;
  padding: 4px 5px;
  display: block;
}
.download-btn,
.table form button {
  color: #fff;
  background-color: #2F92FA;
  border-color: #2F92FA;
}

.project-item-share {
  margin-bottom: 0;
}
.download-btn {
  max-width: 120px;
}
.project-item-rename:hover,
.btn-copy:hover,
.copy-link:hover,
.download-btn:hover,
.project-item-share:hover,
.project-item-open:hover,
.table form button:hover,
.project-revisions:hover,
.project-item-delete:hover {
  background: #000;
  color: #fff;
}
.download-btn:hover,
.table form button:hover {
  background: #1046ba;
  border-color: #1046ba;
  color: #fff;
}
.form-control:focus {
  color: #212529;
  background-color: #fff;
  border-color: #86b7fe;
  outline: 0;
  box-shadow: none;
}
.btn-check:focus + .btn,
.btn:focus {
  color: #fff;
  background-color: #ff4f22;
  border-color: #ff4f22;
  outline: 0;
  box-shadow: none;
}
.download-btn:last-child {
  margin-bottom: 0;
}
#payment-element {
  background: #f5f7fa;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  padding: 25px;
}
#payment-form {
  max-width: 658px;
}
.loginform .form-control,
.steps + .main-area > .row #payment-form .step-3 .form-control,
.billinginfo .form-control {
  padding: 15px 20px;
  color: #535454;
}
.loginform .form-control {
  border: none;
  padding: 11px 83px 11px 33px;
  border-radius:8px;
  -webkit-border-radius:8px;
  box-shadow:none;
  -webkit-box-shadow:none;
  border:1px solid #EEEEEE;
  background-color:#ECF2FC;
  font: 14px/31px 'Work Sans', Arial, sans-serif;
}
.loginform .form-control:focus {
  -webkit-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
  background: #f9fbfc;
}
.loginform .form-check-label {
  font: 16px/21px 'Work Sans', Arial, sans-serif;
}
.loginform .forgot {
  color: #2f92fa;
  float: right;
  margin: -52px 0 0;
  font: 16px/21px 'Work Sans', Arial, sans-serif;
}
.loginform + p a:hover,
.loginform .forgot:hover {
  text-decoration: underline;
}
.loginform #email.form-control {
  /*background-image: url(../images/emailbg.svg);*/
  background-repeat: no-repeat;
  background-size: 24px auto;
  background-position: calc(100% - 40px) 50%;
}
.loginform #password.form-control {
 /* background-image: url(../images/passbg.svg);*/
  background-repeat: no-repeat;
  background-size: 24px auto;
  background-position: calc(100% - 40px) 50%;
}

.loginform .form-check-input {
  width: 18px;
  height: 18px;
  border: 1px solid #EEEEEE;
  border-radius:2px;
  -webkit-border-radius:2px
 
}
.steps {
  background: #0f72d2 url(../images/step-area.jpg) repeat-x;
  background-size: auto 100%;
  background: rgb(12, 73, 226);
  background: -moz-linear-gradient(
    left,
    rgba(12, 73, 226, 1) 0%,
    rgba(49, 152, 252, 1) 100%
  );
  background: -webkit-linear-gradient(
    left,
    rgba(12, 73, 226, 1) 0%,
    rgba(49, 152, 252, 1) 100%
  );
  background: linear-gradient(
    to right,
    rgba(12, 73, 226, 1) 0%,
    rgba(49, 152, 252, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0c49e2', endColorstr='#3198fc',GradientType=1 );

  padding: 79px 0;
}
.billinginfo {
  max-width: 658px;
}
.loginform button[type='submit'],
.billinginfo .btn,
.steps + .main-area > .row #payment-form #collect-invite-emails,
#payment-form #pay-button {
  -webkit-transition: all 0s ease;
  -moz-transition: all 0s ease;
  -ms-transition: all 0s ease;
  -o-transition: all 0s ease;
  transition: all 0s ease;
  color: #fff;
  margin-top: 20px;
  -webkit-box-shadow: 0 10px 50px 5px rgba(35, 122, 242, 0.3);
  box-shadow: 0 10px 50px 5px rgba(35, 122, 242, 0.3);
  border-radius: 100px;
  -webkit-border-radius: 100px;
  padding: 20px 37px;
  background: rgb(12, 73, 226);
  background: -moz-linear-gradient(
    left,
    rgba(12, 73, 226, 1) 0%,
    rgba(49, 152, 252, 1) 100%
  );
  background: -webkit-linear-gradient(
    left,
    rgba(12, 73, 226, 1) 0%,
    rgba(49, 152, 252, 1) 100%
  );
  background: linear-gradient(
    to right,
    rgba(12, 73, 226, 1) 0%,
    rgba(49, 152, 252, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0c49e2', endColorstr='#3198fc',GradientType=1 );
}
.loginform button[type='submit'] {
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  background: #2F92FA;
  box-shadow: none;
  border-radius: 100px;
  -webkit-border-radius: 100px;
  font: 20px/25px 'Montserrat', Arial, sans-serif;
  margin: 30px auto 0;
  width: 100%;
  display: block;
}
.billinginfo .btn:hover,
.steps + .main-area > .row #payment-form #collect-invite-emails:hover,
#payment-form #pay-button:hover,
.loginform button[type='submit']:hover {
  background: #0c49e2;
  border-color: #0c49e2;
}
.loginform button[type='submit']:hover {
  border-color: #2f63fa;
  background: #2f63fa;
  -webkit-box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.steps .col {
  padding: 0 24px;
  max-width: 80rem;
  margin: 0 auto;
}
.steps .col h1 {
  text-align: center;
  color: #fff;
  font-size: 42px;
  line-height: 52px;
  font-weight: bold;
  margin: 0 0 57px;
}
.steps .col .steps-list {
  position: relative;
  max-width: 767px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  color: #fff;
}
.steps .col .steps-list div {
  text-align: center;
  width: 108px;
}
.steps .col .steps-list div.active .icon {
  background-color: #fff;
}
.steps .col .steps-list .icon {
  border: 2px solid #fff;
  width: 70px;
  height: 70px;
  display: block;
  margin: 0 auto 7px;
  background-color: #5aadfd;
  border-radius: 50%;
  -webkit-border-radius: 50%;
}
.step1 {
  background-image: url(../images/step1.svg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.step2 {
  background-image: url(../images/step2.svg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.step3 {
  background-image: url(../images/step3.svg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.min-h-screen {
  overflow: hidden;
}
.step2:before {
  width: calc(50% - 163px);
  height: 2px;
  background: #fff;
  content: '';
  position: absolute;
  top: 34px;
  right: calc(50% + 54px);
}
.step2:after {
  width: calc(50% - 163px);
  height: 2px;
  background: #fff;
  content: '';
  position: absolute;
  top: 34px;
  left: calc(50% + 54px);
}
.steps + .main-area > .row .col-7:first-child > .py-3 {
  max-width: 657px;
}
.siebarinfo ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}
.siebarinfo ul li {
  vertical-align: top;
  padding: 0 0 18px 30px;
  font-size: 20px;
  line-height: 26px;
  background: url(../images/sep.svg) no-repeat 0 5px;
  background-size: 18px auto;
}
.partners {
  max-width: 426px;
  padding: 25px 25px 10px;
  border: 1px solid #d4d8e1;
  background: #f8f9fb;
  border-radius: 10px;
  -webkit-border-radius: 10px;
}
.partners h2 {
  color: #353a4d;
  font-size: 18px;
  line-height: 24px;
  font-style: italic;
  font-weight: 100;
}
.partners h2 + div {
  padding-top: 20px;
}
.partners h2 + div div {
  text-align: center;
}

.partners img {
  max-width: 80%;
  height: auto;
  margin: 0 auto 20px;
}
.steps + .main-area > .row #payment-form > * {
  max-width: 657px;
}
.steps + .main-area > .row #payment-form {
  max-width: 100%;
}
#terms + span {
  color: #535454;
}
#terms + span a {
  text-decoration: underline;
  color: #535454;
  font-weight: 500;
}
#terms + span a:hover {
  text-decoration: none;
}
.btn-copy {
  max-width: 140px;
}
@media only screen and (max-width: 1900px) {
}
@media only screen and (max-width: 1480px) {
.footer-main .container,
  .footer-main .continer {
    max-width: 75rem;
    padding-right: 0.9375rem;
    padding-left: 0.9375rem;
  }
  .footer-main {
    padding-left: 10px;
    padding-right: 10px;
  }
  .header .justify-between {
    max-width: 73.2rem;
    margin: 0 auto;
  }
.filter-row .maintitle {
    float: none;
    margin: 7px 32px 10px 0;
}
/*.clearfix.filter-row .float-end{margin-top:48px;}*/

.clearfix.filter-row .float-start {
  width: calc(100% - 145px);
}
.main-area .cont .clearfix.filter-row .float-start select {
  width: calc(45% - 30px);
}
}
@media only screen and (max-width: 1300px) {
  .footer-main ul li {
    margin: 0 0 8px;
  }
}
@media only screen and (max-width: 1240px) {
  .footer-main .col:first-child {
    /*margin: 0 3% 0 0;*/
    
  }
}

@media only screen and (max-width: 1185px) {
  .button-create .btn p {
    font-size: 12px;
  }
  .button-create .btn strong {
    font-size: 15px;
  }
  .button-create .blue,
  .button-create .white {
    padding: 31px 41px 31px 78px;
  }
  .button-create .blue::before {
    left: 13px;
  }
  .button-create .white::before {
    left: 13px;
  }
  .button-create .blue::after {
    right: 9px;
  }
  .button-create .white::after {
    right: 9px;
  }
}
@media only screen and (max-width: 980px) {
.manage-projects .maintitle{padding-bottom:0}
.logged-in .header{display:block;}
.logged-in .main-area{display:block;}
.logged-in .sidebar{position:fixed;        margin: 0;}
.sidebar .mobile .l{display:none;}
	.newregistration{margin-bottom: -80px;padding-top: 80px ;padding-bottom: 80px ;}
  .footer-main .continer {
    padding: 44px 10px 0px;
  }
  .footer-main .col:first-child {
    width: 100%;
  }
  .footer-main .col {
    width: 24%;
  }
  .sidebar {
    width: 100%;
    margin: 0 0 20px;
  }
 .logged-in .sidebar{padding-top:16px}
  .logged-in .main-area,
  .main-area {
  padding-left:24px;padding-right:24px;
    padding-bottom: 80px;
    padding-top: 24px;
  }
  .billinginfo,
  #payment-form {
    max-width: 100%;
  }
  .sidebar + .cont {
    width: 100%;
  }
  .main-area {
    min-height: calc(100vh - 736px);
  }
  .header .justify-between .flex .space-x-8 a {
    margin-left: 10px;
  }
  .header .justify-between .flex .space-x-8 {
    margin-left: 0;
  }
  .header {
    padding: 14px 0;
  }
  .header .justify-between > .hidden {
    display: none;
  }
  .header .justify-between > .flex:first-child {
    width: 100%;
  }
  .header .justify-between .flex .space-x-8 a {
    margin-left: 0;
    font-size: 15px;
  }
  .header .justify-between > .flex:first-child .shrink-0:first-child a {
    width: 203px !important;
  }
  
  
   .footer-main .continer {
        padding-top: 50px;
		padding-bottom: 50px;
    }
	 .footer-main .continer  .col:first-child, .footer-main .continer  .col:last-child,  .footer-main .continer  .col {
        width: 31%;
        margin: 0 2% 0 0;
    }
	 .footer-main .continer  .col:first-child {
        width: 100%;
        padding-bottom: 30px;
    }
	
}
.button-create .btn .mobile {
  display: none;
}
@media only screen and (max-width: 767px) {
	.hideonmobile{display:none}
  .header .justify-between > .flex:first-child .shrink-0:first-child a {
    width: 175px !important;
  }
  .banner-fix {
    font-size: 12px;
  }
  .emails.emails-input input {
    width: calc(100% - 10px);
    min-width: calc(100% - 10px);
  }
  .clearfix.filter-row {
    display: block;
  }
  .main-area .cont .float-start select,
  .clearfix.filter-row .float-start {
    width: 100%;
  }
  .header {
    padding: 7px 0;
  }
  .footer-main .social {
    padding-bottom: 4px;
  }
  .clearfix.filter-row .float-end {
    float: none !important;
    display: block;
    margin-bottom: 20px;
  }
  .search input[type='text'] {
    width: 100%;
    margin: 0 0 20px;
  }
  .search .btn {
    float: right;
  }
  .search select {
    width: 100%;
  }
  .footer-main .col {
    width: 100%;
    padding-top: 20px;
  }
  .footer-main ul li {
    margin: 0;
  }
  .footer-main h3 {
    margin: 0 0 6px;
  }
  .steps .col h1 {
    font-size: 32px;
  }
  .table th,
  .table td {
    font-size: 14px;
  }
  .table-area {
    width: 100%;
    overflow: auto;
  }
  .steps + .main-area > .row > .col-7,
  .steps + .main-area > .row > .col-5 {
    width: 100%;
  }
  .steps + .main-area > .row > .col-7 {
    margin-bottom: 30px;
  }
  .main-area > .row > .col-5 {
    width: 100% !important;
  }
  #remember_me + label,
  .loginform .forgot {
    font-size: 14px;
  }
  .search .btn {
    padding: 15px 26px 15px 26px;
    background: #e8effd;
  }
  .footer-main .tel {
    margin: 4px 0 12px;
  }
  .footer-main .mail {
    margin-bottom: 12px;
  }
  .footer-main .copy {
    max-width: 210px;
    margin-left: auto;
    margin-right: auto;
  }
  .billinginfo .row.g-3,
  #payment-form .row.g-3 {
    display: block;
  }
  .maintitle {
    padding-bottom: 13px;
    margin: 0;
  }
  .button-create .btn {
    width: 100%;
    margin-bottom: 15px;
  }
  .button-create .btn .mobile {
    display: block;
    font-size: 10px;
    line-height: 16px;
  }
  .button-create .blue {
    padding-left: 20px;
    padding-right: 20px;
    border-color: #ff0000;
    background-color: #fff;
    color: #000;
  }
  .button-create .blue p {
    font-size: 12px;
    line-height: 24px;
    max-width: 120px;
    margin: 0 auto 20px;
  }
  .button-create .blue::before {
    top: 78px;
    filter: brightness(1) invert(1);
  }
  .button-create .blue::after {
    top: 78px;
    filter: none;
    background: url(libs/images/important.svg) no-repeat 50% 50%;
    background-size: auto;
    background-size: 100% auto;
  }
  .main-area .cont .clearfix.filter-row .float-start select {
    width: 100%;
  }
  .button-create {
    padding-bottom: 0;
  }
  .search input[type='text'] {
    width: 100%;
    margin: 0 0 16px;
  }
  .clearfix.filter-row .float-end {
    text-align: center;
    padding-top: 13px;
	margin-top:0
  }
  .filter-row .list-view,
  .filter-row .grid-view {
    display: inline-block;
    margin: 0 5px;
    float: none;
  }
  .projects-table {
    overflow: auto;
  }
  .projects-table .table-area {
    width: 600px;
  }
  .projects-table.grid tbody tr {
    width: 100%;
  }
  .projects-table.grid .table {
    border: none;
  }
  .projects-table.grid tbody tr td.first .img img {
    display: block;
    margin: 0 auto;
  }
  .projects-table.grid .table-area {
    width: auto;
    overflow: visible;
  }
  .projects-table.grid {
    overflow: visible;
  }
  .projects-table.grid tbody tr td.name span {
    width: 18px;
  }
  .projects-table.grid .table {
    margin: 0;
  }

  .welcome {
    width: 234px;
    height: 45px;
  }
  .welcome-login {
    height: 48px;
    width: 157px;
  }
  .welcome-pass {
    height: 45px;
    width: 320px;
  }
  .button-welcome .btn-primary {
    margin: 0 17px 20px;
  }
  .main-area > .row > .col-6 {
    width: 100% !important;
  }
 .footer-main .continer .col:first-child {        width: 100%;        padding-bottom: 30px;    }
  .footer-main .continer .col {        width: 100%;        padding-top: 20px;    }
  .footer-main .continer .col:last-child {        width: 100%;        padding: 20px 0 34px;    }
  .footer-main .copy{        max-width: 100%;        margin-left: 70px;        margin-right: auto;        width: 55%;}
 .footer-main .continer {        padding-top: 44px;        padding-bottom: 0;    }
}
/* validation errors */
.validation_errors {
  padding: 20px;
  border: 1px solid red;
  font-size: 1rem;
  color: red;
}
.validation_errors > div {
  font-weight: bold;
}
.validation_errors ul {
  margin: 0;
  padding: 0 1rem;
  list-style: circle;
}
#country2 {
  width: 60%;
  height: 2rem;
  line-height: 1rem;
  padding: 0 30px 0 10px !important;
  margin: 0;
  display: inline-block;
}
.add-team-bottom-info {
  border: 1px solid #c3c2cf;
  margin: 16px 0;
  padding: 10px 20px;
  text-align: center;
  font-size: 1rem;
}

.resume-subscription-wrapper {
  border: 1px solid rgb(12, 73, 226);
  padding: 10px;
  margin-top: 40px;
  max-width: 658px;
}
.resume-subscription-btn,
.resubscribe .btn {
  -webkit-transition: all 0s ease;
  -moz-transition: all 0s ease;
  -ms-transition: all 0s ease;
  -o-transition: all 0s ease;
  transition: all 0s ease;
  color: #fff;
  -webkit-box-shadow: 0 10px 50px 5px rgba(35, 122, 242, 0.3);
  box-shadow: 0 10px 50px 5px rgba(35, 122, 242, 0.3);
  border-radius: 100px;
  -webkit-border-radius: 100px;
  padding: 20px 37px;
  background: rgb(12, 73, 226);
  background: -moz-linear-gradient(
    left,
    rgba(12, 73, 226, 1) 0%,
    rgba(49, 152, 252, 1) 100%
  );
  background: -webkit-linear-gradient(
    left,
    rgba(12, 73, 226, 1) 0%,
    rgba(49, 152, 252, 1) 100%
  );
  background: linear-gradient(
    to right,
    rgba(12, 73, 226, 1) 0%,
    rgba(49, 152, 252, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0c49e2', endColorstr='#3198fc', GradientType=1);
}
.cancel-subscription-wrapper {
  border: 1px solid red;
  padding: 20px;
  margin-top: 40px;
  max-width: 658px;
}
.cancel-subscription-btn,
.open-cancel-subscription,
.cancel-form-modal .close,
.feedback-form-modal .close {
  -webkit-transition: all 0s ease;
  -moz-transition: all 0s ease;
  -ms-transition: all 0s ease;
  -o-transition: all 0s ease;
  transition: all 0s ease;
  color: #fff;
  -webkit-box-shadow: 0 10px 50px 5px rgba(35, 122, 242, 0.3);
  box-shadow: 0 10px 50px 5px rgba(35, 122, 242, 0.3);
  border-radius: 100px;
  -webkit-border-radius: 100px;
  padding: 20px 37px;
  background: red;
  border-color: white;
  display: inline-block;
}
.cancel-subscription-btn:hover,
a.open-cancel-subscription:hover {
  color: white;
  background-color: #db0000;
  border-color: white;
}
.cancel-form-modal form,
.feedback-form-modal form {
  display: inline-block;
  margin-top: 20px;
}
.cancel-form-modal .close,
.feedback-form-modal .close,
.upgrade-downgrade-modal .close {
  background: gray;
  display: inline-block;
}
.cancel-form-modal,
.feedback-form-modal,
.upgrade-downgrade-modal {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.cancel-form-modal.open,
.feedback-form-modal.open,
.upgrade-downgrade-modal.open {
  display: flex;
}
.cancel-form,
.feedback-form {
  background: white;
  padding: 40px;
  max-width: 600px;
}
.cancel-form li {
  list-style: circle;
}
.feedback-form-modal {
  z-index: 2;
}
.feedback-form-modal textarea {
  height: 200px;
  width: 100%;
  margin-bottom: 30px;
}
.feedback-form-modal p strong.big {
  font-size:22px;
}
.confirm-pass-header {
  text-align: center;
  font-style: italic;
}
.btn-danger,
table form button.btn-danger {
  color: white;
}
.btn-lg,
table form button.btn-danger {
  font-size: 1rem;
  line-height: 1.5rem;
}

.admin-validation_errors {
  padding: 1rem 2rem;
  border: 1px solid red;
  margin: 1rem 0;
  color: red;
}
.admin-validation_errors ul {
  margin: 0;
}
.two-factor-header {
  color: #333333;
  text-align: center;
  border-bottom: 1px solid darkgray;
  text-transform: uppercase;
}
.two-factor-wrapper {
  padding: 1rem;
  text-align: center;
}
.font-medium {
  font-size: medium;
}
.recovery-code-text {
  text-align: justify;
}
.recovery-codes {
  padding: 0;
  list-style: none;
}
.recovery {
  display: none;
}
.loginform .buttons {
  margin-top: 1rem;
}
.form-control.radio {
  display:inline-block;
  padding-left:0;
  padding-right:0;
  width:16px;
}

#payment-form .country-wrapper{
  border: 1px solid #EEEEEE;
  background-color: #ECF2FC;
  font: 14px/31px 'Work Sans', Arial, sans-serif;
  color: #535454;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  padding: .375rem .75rem;
  margin: 0 0 10px;
  position: relative;
}
#payment-form .country-wrapper select{
  -webkit-appearance: none; 
  -moz-appearance: none;    
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  margin:0 !important;
  font: inherit;
  color: inherit;
  width: 100%;
  height: 31px;
  outline:none;
}
#payment-form .country-wrapper select:focus,
#payment-form .country-wrapper select:focus-visible{
  border:none;
  outline:none;
  box-shadow:none !important;
}


#payment-form .country-wrapper:after {
  content: '';
  position: absolute;
  top: calc(50% - 2px);
  right: 1rem;
  width: 8px;
  height: 8px;
  border-left: 2px solid #535454;
  border-bottom: 2px solid #535454;
  transform: translateY(-50%) rotate(-45deg);
  pointer-events: none;
}


#payment-form.country-wrapper select:focus ~ :after,
#payment-form .country-wrapper select:focus-visible ~ :after {
  border-color: #007BFF; 
}

.legacy-2d {
  position:relative;
}
.legacy-2d::after {
    content: "legacy";
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: red;
    color: white;
    border-radius: 50%;
    padding: 8px;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    text-transform: uppercase;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    z-index: 100;
}

.tutorials-section h3 {
  font-weight:bold;
  margin-bottom:0;
}