@font-face {
    font-family: "yekan";
    font-style: normal;
    font-weight: normal;
    src: url("../fonts/web_Yekan.eot?#iefix") format("embedded-opentype"), url("../fonts/web_Yekan.woff") format("woff"), url("../fonts/web_Yekan.ttf") format("truetype");
}
@font-face {
    font-family: "yekanRegular";
    font-style: normal;
    font-weight: normal;
    src: url("../fonts/YekanWeb-Regular.woff") format("woff"), url("../fonts/YekanWeb-Regular.ttf") format("truetype");
}
body, input, textarea, select, h1,h2,h3,h4{
    font-family:yekan;
}
body{
    background-color: #eceeef;
}
a{
    color:green;
    text-decoration: none;
}
a:hover, a:active, a:focus{
    color: darkgreen;
    text-decoration: none;
}
:any-link:-moz-focusring {
    outline: none;
}
[role="button"], a, area, button, input, label, select, summary, textarea{
    touch-action: none !important;
}
.form-group {
    margin-bottom: 0;
    position: relative;
    padding-bottom: 24px;
}
.row{
    margin:0;
}
.jumbotron.main{
    min-height: 816px;
}
.alert {
    padding: 0.75rem 2.25rem;
}
.alert-error{
    background: red;
    color: #fff;
}
.table td, .table th{
    vertical-align: middle;
}
.col-xs-11.col-sm-4.alert.alert-success {
    width: auto;
}
.alert-success.alert .close {
    top: 12px !important;
}
.btn {
    font-family: yekan;
    padding: 17px 15px;
}
.btn.focus, .btn:focus {
    box-shadow: none;
}
.btn-green{
    background: green;
    color: #fff;
}
.btn-red {
    background: red;
    color: #fff;
}
.btn-red.btn.focus, .btn-red.btn:focus {
    box-shadow: none;
}
form input.form-control.not-ok, form textarea.form-control.not-ok, form select.form-control.not-ok{
    border-color: red;
}
form input.form-control.ok,form textarea.form-control.ok,form select.form-control.ok {
}
p.field-validate-error {
    position: absolute;
    width: 100%;
    color: red;
    margin: 0 !important;
    padding: 2px 0;
    font-size: 12px;
}
.form-group-title {
    width: 100%;
    margin-bottom: 23px;
    border-bottom: solid 1px #ddd;
    padding: 10px 2px;
    font-size: 17px;
    margin-top: 10px;
}
.form-control{
    transition: .5s;
    height: 45px;
}
.only-field {
    margin: 0 auto;
    float: none !important;
}
label input.form-control {
    margin-right: 5px;
}
select.form-control:not([size]):not([multiple]) {
    height: 45px;
    padding-top: 9px;
}
select.form-control{
    height: 44px;
}
select.form-control option {
    padding-left: 15px;
}
.form-group p {
    margin-top: 7px;
}
.button-sets button{
    cursor: pointer;
}
.form-control[type="radio"],.form-control[type="checkbox"] {
    width: auto;
    float: left;
    margin-top: 5px;
}
.form-control:focus{
    border-color: green;
}
.jconfirm.jconfirm-white .jconfirm-box, .jconfirm.jconfirm-light .jconfirm-box {
    text-align: center;
}
.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons {
    float: none;
    margin: 0 auto;
    padding-bottom: 11px;
}
.jconfirm .jconfirm-box .jconfirm-buttons button {
    border-radius: 3px;
    padding: 9px 25px;
}
.jconfirm .jconfirm-box div.jconfirm-content-pane {
    line-height: 35px;
    margin-top: 15px;
}
.jconfirm.jconfirm-white .jconfirm-bg, .jconfirm.jconfirm-light .jconfirm-bg {
    background-color: #000;
    opacity: 0.6;
}
.button-sets {
    float: right;
    margin-top: 21px;
    text-align: center;
    width: 100%;
    margin-bottom: 5px;
}
.ui-slider-horizontal .ui-slider-handle {
    margin-left: -3px;
    top: -8px;
}
.ui-slider .ui-slider-handle {
    border-radius: 50%;
    height: 1.7em;
    width: 1.7em;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
    background: green;
    border: 1px solid green;
}
.ui-widget-header {
    background: green;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
    border-bottom-right-radius: 0;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
    border-bottom-left-radius: 0;
}
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
    border-top-right-radius: 0;
}
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
    border-top-left-radius: 0;
}
.ui-widget.ui-widget-content {
    border: medium none transparent;
}
.switch {
    position: relative;
    display: inline-block;
    width: 60px !important;
    height: 34px;
    margin-bottom:0;
}

.switch input {display:none;}

.switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.switch-slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .switch-slider {
    background-color: green;
}

input:focus + .switch-slider {
    box-shadow: 0 0 1px green;
}

input:checked + .switch-slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}
.switch-slider.round {
    border-radius: 34px;
}

.switch-slider.round:before {
    border-radius: 50%;
}
.movable-account-list{
    min-height: 350px;
}
.move-account-popup .select-account-list ul {
    display: none;
    width: 100%;
    float: left;
}
.form-group ul.checkbox-group {
    padding-top: 30px;
}
.form-group ul.checkbox-group{
    float:left;
}
.no-item {
    float: left;
    width: 100%;
}
/* checkbox and radionbox */
.other-carpet {
    position: absolute;
    left: 0;
    top: -10px;
    width: 100%;
    height: 55px;
}

ul.radio-group {
    list-style: outside none none;
    margin: 0;
    padding: 0;
    width: 100%;
}
ul.radio-group li, .radio-item {
    color: #999;
    display: block;
    float: left;
    position: relative;
    text-align: left;
    width: 100%;
}
ul.radio-group li input[type="radio"], .radio-item input[type="radio"] {
    position: absolute;
    visibility: hidden;
}
ul.radio-group li label, .radio-item label {
    cursor: pointer;
    display: block;
    font-size: 15px;
    height: 30px;
    margin: 10px auto;
    padding: 0 0 0 30px;
    position: relative;
    transition: all 0.25s linear 0s;
    z-index: 9;
}
ul.radio-group li:hover label, .radio-item:hover label {
    color: #000;
}
ul.radio-group li .check, .radio-item .check {
    border: 3px solid #999;
    border-radius: 100%;
    display: block;
    height: 25px;
    position: absolute;
    left: 0;
    top: 7px;
    transition: border 0.25s linear 0s;
    width: 25px;
    z-index: 5;
}
ul.radio-group li:hover .check,  .radio-item:hover .check{
    border: 3px solid #000;
}
ul.radio-group li .check::before, .radio-item .check::before {
    border-radius: 100%;
    content: "";
    display: block;
    height: 13px;
    margin: auto;
    position: absolute;
    right: 3px;
    top: 3px;
    transition: background 0.25s linear 0s;
    width: 13px;
}
ul.radio-group input[type="radio"]:checked ~ .check, .radio-item input[type="radio"]:checked ~ .check {
    border: 3px solid green;
}
ul.radio-group input[type="radio"]:checked ~ .check::before, .radio-item input[type="radio"]:checked ~ .check::before {
    background: green none repeat scroll 0 0;
}
ul.radio-group input[type="radio"]:checked ~ label, .radio-item input[type="radio"]:checked ~ label {
    color: green;
}
ul.checkbox-group {
    list-style: outside none none;
    margin: 0;
    padding: 0;
    width: 100%;
}
ul.checkbox-group li {
    color: #999;
    display: block;
    float: left;
    position: relative;
    text-align: left;
    width: 100%;
    height: 48px;
}
ul.checkbox-group li input[type="checkbox"] {
    position: absolute;
    visibility: hidden;
}
ul.checkbox-group li label {
    cursor: pointer;
    display: block;
    font-size: 15px;
    font-weight: 300;
    height: 30px;
    margin: 10px auto;
    padding: 0 0 0 30px;
    position: relative;
    transition: all 0.25s linear 0s;
    z-index: 9;
    line-height: 34px;
}
ul.checkbox-group li:hover label {
    color: #000;
}
ul.checkbox-group li .check {
    border: 3px solid #999;
    border-radius: 0;
    display: block;
    height: 25px;
    position: absolute;
    left: 0;
    top: 13px;
    transition: border 0.25s linear 0s;
    width: 25px;
    z-index: 5;
}
ul.checkbox-group li:hover .check {
    border: 3px solid #000;
}
ul.checkbox-group li .check::before {
    border-radius: 0;
    content: "";
    display: block;
    height: 13px;
    margin: auto;
    position: absolute;
    right: 3px;
    top: 3px;
    transition: background 0.25s linear 0s;
    width: 13px;
}
ul.checkbox-group input[type="checkbox"]:checked ~ .check {
    border: 3px solid green;
}
ul.checkbox-group input[type="checkbox"]:checked ~ .check::before {
    background: green none repeat scroll 0 0;
}
ul.checkbox-group input[type="checkbox"]:checked ~ label {
    color: green;
}
ul.checkbox-group li.checkhere  .check {
    border: 3px solid green;
}
ul.checkbox-group li.checkhere .check::before {
    background: green none repeat scroll 0 0;
}
ul.checkbox-group li.checkhere label {
    color: green;
}
ul.checkbox-group li.other-checkbox .check {
    position:relative;
    z-index: 9;
}
.add-more {
    margin-bottom: 20px;
}
.add-more span {
    border: solid 3px;
    color: #008000;
    cursor: pointer;
    float: right;
    font-family: fantasy;
    font-size: 33px;
    font-weight: bold;
    height: 26px;
    line-height: 20px;
    padding: 0;
    text-align: center;
    width: 26px;
}
.option-group li.other-checkbox .check {
    top: -36px;
}
/* Tooltip */
.tooltip-element {
    position: relative;
}
.tooltip-element .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 1px 2px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 14px;
}

.tooltip-element .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.tooltip-element:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
/* popup */
.popup {
    background: rgba(0, 0, 0, 0.9) none repeat scroll 0 0;
    display: none;
    height: 100%;
    position: fixed;
    right: 0;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 100;
}
.popup.apps-popup {
    color: #fff;
}
.close-popup {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    background: url(../images/close.svg) no-repeat;
    margin: 20px;
    background-size: 50px;
    cursor: pointer;
    opacity: .5;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
.close-popup:hover {
    opacity: 1;
}
.apps-container {
    display: inline-flex;
    margin-top: 18%;
}
.apps-container .app-item {
    margin: 20px;
    cursor: pointer;
    height: 120px;
}
.app-image img {
    background: green none repeat scroll 0 0;
    border-radius: 10px;
    fill: #fff !important;
    height: 80px;
    margin-bottom: 15px;
    padding: 10px;
    width: 80px;
    -webkit-transition: .5s all;
    -moz-transition: .5s all;
    -ms-transition: .5s all;
    -o-transition: .5s all;
    transition: .5s all;
}
.app-item:hover img{
    padding:15px;
}
.app-image.bg-purple img {
    background: rgba(0, 0, 0, 0) linear-gradient(60deg, #ab47bc, #8e24aa) repeat scroll 0 0;
}
.app-image.bg-green img {
    background: rgba(0, 0, 0, 0) linear-gradient(0deg, #047204, #026f02) repeat scroll 0 0;
}
.app-image.bg-brown img {
    background: rgba(0, 0, 0, 0) linear-gradient(0deg, #70412D, #683925) repeat scroll 0 0;
}
.app-image.bg-orange img {
    background: rgba(0, 0, 0, 0) linear-gradient(0deg, #FF6F18, #c45714) repeat scroll 0 0;
}
.app-image.bg-blue img {
    background: rgba(0, 0, 0, 0) linear-gradient(0deg, #318D95, #216167) repeat scroll 0 0;
}
.app-image.bg-dark-blue img {
    background: rgba(0, 0, 0, 0) linear-gradient(0deg, #02416d, #033864) repeat scroll 0 0;
}
.app-image .bg-red img {
    background: rgba(0, 0, 0, 0) linear-gradient(0deg, #FF4E50, #cb3f40) repeat scroll 0 0;
}
.app-image.bg-dark-red img{
    background: rgba(0, 0, 0, 0) linear-gradient(0deg, #87244C, #7a173f) repeat scroll 0 0;
}
.app-image.bg-bright-red img{
    background: rgba(0, 0, 0, 0) linear-gradient(0deg, #b50000, red) repeat scroll 0 0;
}
.app-introduction {
    margin-top: 100px;
    color:#ddd;
    padding: 0 18%;
}
.apps-container .app-item .app-name{
    font-size: 14px;
}
/* loader */
.loader {
    display: none;
    background: rgba(0,0,0,.8);
    height: 100%;
    left: 0;
    position: fixed;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 1000;
}
.spinner {
    margin-left: auto;
    margin-right: auto;
    margin-top: 25%;
    text-align: center;
    width: 120px;
}
.spinner > div {
    width: 30px;
    height: 30px;
    background-color: green;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.spinner .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.spinner .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
    0%, 80%, 100% { -webkit-transform: scale(0) }
    40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    } 40% {
          -webkit-transform: scale(1.0);
          transform: scale(1.0);
      }
}
/* header */
.logo img {
    height: 50px;
    margin-top: 2px;
}
.back-to-base-account{
    float:right;
}
.header .top-tools {
    float: right;
    list-style: none;
    display: flex;
    margin-top:20px;
}
.header .top-tools a,.header .top-tools span {
    margin-right: 19px;
    float: right;
}
.header {
    background: #eee;
    padding: 0;
}
.top-tools li img, .top-tools li svg{
    width: 25px;
    height: 25px;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    opacity: .6;
}
.top-tools .top-help{
    cursor: pointer;
}
.top-tools li svg:hover path{
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
.top-tools li svg:hover, .top-tools li svg:hover path{
    fill: green !important;
    opacity: 1;
}
.top-tools li a,.top-tools li a {
    width: 25px;
    height: 25px;
    background-repeat: no-repeat;
    background-size: 25px;
}
/* login page */
#image-holder {
    background: rgba(0, 0, 0, 0) url("../images/login-bg-5.jpg") no-repeat scroll 0 0;
    height: 100%;
    position: absolute;
    top: 0;
    transition: background 1s linear 0s;
    width: 100%;
}
.forgot-password-form{
    display: none;
}
.login .login-box {
    background: rgba(255, 255, 255, 0.5) none repeat scroll 0 0;
    border-radius: 5px;
    margin-top: 40%;
    padding: 20px;
    text-align: center;
    max-width: 550px;
}
.login .login-box input {
    background: rgba(256,256,256,.5);
    border: 1px solid #fff;
    color: #304C19;
    opacity: 0.8;
    padding: 10px 10px;
    text-align: center;
    transition: all .5s;
    height:55px;
}
.login .login-box input:focus {
    border-color: #314D1A;
}
.login input::placeholder {
    color: #888;
}
.login input.btn {
    background: #304C19;
    color: #fff;
    border-color: #304C19;
    padding: 15px 30px;
}
.login input.btn:hover {
    background: #233f0c;
    cursor: pointer;
}
.login h2 {
    color: #fff;
    font-size: 40px;
    margin-top: 60%;
}

.login-welcome {
    float: left;
}
.login-forms {
    float: right;
}
.login-box h4 {
    margin-bottom: 25px;
}
.login-links{
    margin-top: 10px;
    font-size:14px;
}
.login-box .button-sets{
    margin-bottom: 10px;
    margin-top: 5px;
}
.auth-page .footer {
    bottom: 0;
    padding: 0 0 10px 0;
    position: fixed;
    text-align: center;
    width: 100%;
    background: rgba(0,0,0,.2);
    color: #fff;
    margin-bottom: 0;
}
.auth-page .footer a{
    color: #fff;
}
.auth-page .footer p,.auth-page .footer ul {
    margin: 9px 0 0 0;
}
.auth-page .header{
    display: none;
}
.footer ul {
    display: inline-flex;
    padding:0;
    float: right;
}
.footer ul li {
    list-style: outside none none;
    margin-left: 39px;
}
.footer ul li a {
    color: #000;
}
.footer {
    background: #eceeef;
    float: right;
    padding-top: 20px;
    text-align: center;
    width: 100%;
}
.footer .copyright{
    float:left;
}
.footer p, .footer ul {
    font-size: 14px;
}