@font-face {
    font-family: 'Sans';
    src: url('../fonts/TheSans-Plain.otf');
    src: url('../fonts/TheSans-Bold.otf')
}

@font-face {
    font-family: 'SansBold';
    src: url('../fonts/TheSans-Bold.otf');
}

.field-validation-error {
    color: #b94a48;
    font-size: 12px;
}

.field-validation-valid {
    display: none;
}

input.input-validation-error, select.input-validation-error, input.ng-invalid.ng-dirty, select.ng-invalid.ng-dirty {
    border: 1px solid #b94a48;
}


    input.input-validation-error + label {
        color: #dc0808;
    }


.validation-summary-errors {
    color: #b94a48;
}

    .validation-summary-errors > ul {
        list-style: none;
        padding-left: 5px;
    }

.validation-summary-valid {
    display: none;
}

/*My styles*/
.subtitle {
    text-align: right;
    font-size: 20px;
    color: #0D92BC;
    font-weight: 700;
    margin: 20px 0 20px;
}

.subtitle-p {
    text-align: right;
}

.info-block {
    margin: 45px 0 45px;
}

/*#region Overwrites */
html, body {
    width: 100%;
    height: 100%;
    font-family: Sans !important;
    margin: 0;
    padding: 0;
}

.page-content {
    width: 70%;
    padding: 20px 20px;
    text-align: right;
    margin: 0 auto;
}

a {
    text-decoration: none !important;
    cursor: pointer;
}

.heading {
    color: #B1C315;
    font-size: 50px;
    text-align: center;
}

.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

.btn {
    border-radius: 0;
}

.navbar {
    border-radius: 0;
    min-height: 20px;
}

    .navbar.navbar-inverse {
        margin-bottom: 0;
    }

.navbar-inverse > .nav > li > a {
    color: #ffffff;
    padding: 15px 20px;
    font-size: 12px;
}

    .navbar-inverse > .nav > li > a:hover,
    .navbar-inverse > .nav > li > a:focus {
        text-decoration: none;
        color: #0d92bc;
        background-color: transparent;
    }

.nav > li > a {
    color: #595b5e;
    padding: 15px 20px;
    font-family: SansBold !important;
}

    .nav > li > a:hover,
    .nav > li > a:focus {
        text-decoration: none;
        color: #0d92bc;
        background-color: transparent;
    }

.page-header {
    width: 100%;
    height: 30px;
    margin: 0;
    padding: 0;
    margin-bottom: 10px;
    background-image: url(../Images/Colors.jpg);
    background-size: 100% 100%;
}

.navbar-toggle {
    background-color: #595b5e;
    color: #ffffff;
    float: none;
    margin: 0;
    border-radius: 0;
    vertical-align: middle;
    padding: 7px 12px;
}

/*.navbar-collapse {
    padding: 0;
    overflow: hidden;
}
*/
/*    .navbar-collapse.collapse > ul > li:nth-child(1) > a {
        padding-right: 0;
    }*/

.carousel {
    margin-top: -21px;
}

.carousel-caption > .btn {
    font-size: 24px;
    padding: 6px 50px;
}

.carousel-caption > .btn-lang {
    color: #a9cb3f;
}

.carousel-control {
    width: 3% !important;
    opacity: 0;
}

    .carousel-control .glyphicon-chevron-left, .carousel-control .icon-prev {
        margin-left: -15px;
    }

.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
    border-color: #0d92bc;
}

.modal-lg {
    width: 90%;
}

.dropdown-menu {
    border: none;
    background: #eee;
}

strong {
    font-size: 18px;
    color: #0d92bc;
}

.popover-content {
    font-family: TheSans !important;
    font-size: 14px;
}

.tooltip > .tooltip-inner {
    font-family: TheSans !important;
    font-size: 14px;
    background-color: #595b5e;
}
/*#endregion */
.translate {
    text-align: center;
    color: #b94a48;
    font-size: 20px;
    display: inline;
}

.registration .container {
    background-color: #f1f3ff;
    padding: 30px;
}

h1.title {
    color: #B1C315;
    text-align: center;
    font-size: 50px;
    margin-bottom: 30px;
}

h3.title {
    color: #0D92BC;
    font-size: 30px;
}

.registration > h1 {
    color: #B1C315;
    font-size: 50px;
    margin-bottom: 30px;
}

.registration .container > form > h2 {
    color: #1B9CC4;
    text-align: right;
}

.registration .form-horizontal {
    width: 90%;
}

.registration strong {
    text-align: right;
    width: 100%;
    display: block;
    margin-bottom: 20px;
}

.rounded {
    border-radius: 50%;
    color: white;
}

.fa-facebook.rounded {
    padding: 15px 22px !important;
    background-color: #076c92;
}

.fa-twitter.rounded {
    background-color: #0D92BC;
    padding: 15px 17px !important;
}

.btn-yellow {
    background-color: #dbe85d;
    color: #000000;
}

.btn-lang {
    background-color: #595b5e;
    color: #ffffff;
    padding: 0 6px;
    font-family: Sans !important;
    font-size: 24px !important;
}

.btn-start {
    border: solid 2px #ffffff;
    background-color: rgba(83, 83, 83, 0.76);
    color: #ffffff;
}

.header-buttons {
    padding: 10px 0;
    margin-bottom: 20px;
}

    .header-buttons > .btn {
        font-family: SansBold !important;
        font-size: 16px;
    }

        .header-buttons > .btn:first-child {
            padding: 6px 25px;
        }


.home {
    background-image: url(../Images/Home.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 50px;
    height: 50px;
}

.logo {
    display: block;
    background-image: url(../Images/Logo.png);
    background-size: contain;
    width: 105px;
    height: 110px;
    float: left;
}

.videos {
    background-color: #e3e4e7;
    text-align: center;
    width: 100%;
    padding: 50px 0;
}

    .videos p {
        text-align: right;
        font-size: 18px;
    }

    .videos > .player {
        margin: 0 auto;
        width: 95%;
        height: 450px;
        border-radius: 5px;
        padding: 15px;
        font-size: 24px;
        text-align: right;
    }

        .videos > .player h1 {
            display: inline-block;
            font-size: 24px;
            margin: 0;
            font-weight: bold;
        }

.player table td {
    padding: 0 30px;
}

.about {
    text-align: right;
    font-size: 16px;
}

.about-text {
    text-align: start;
}

.about span {
    text-decoration: underline;
    font-size: 18px;
    font-weight: bold;
}

.founders {
    float: left;
    border: 1px solid #e3e5e6;
    border-radius: 5px;
    padding: 10px;
    width: 35%;
    margin-right: 10px;
    background-color: #f9f9f9;
}

    .founders img {
        width: 120px;
        height: 120px;
        margin: 20px 0;
        border-radius: 50%;
        border: 4px solid #808080;
        border-top: none;
    }

    .founders strong {
        display: block;
        font-size: 14px;
        text-decoration: underline;
        font-weight: bold;
        color: #000000;
    }

.text-block {
    padding: 50px 0;
    text-align: center;
    font-size: 30px;
}

    .text-block > .btn {
        font-size: 30px;
        padding: 10px 70px;
        border: 1px solid #000000;
    }

.blocks {
    background-color: #ffffff;
}

    .blocks > div {
        height: 100%;
        padding: 10px 20px;
    }

        .blocks > div > img {
            height: 100%;
            width: 100%;
        }

/*footer {
    width: 100%;
}

    footer .fa {
        width: 30px;
        height: 30px;
        padding: 10px;
        margin-bottom: 3px;
    }


    footer > img {
        width: 100%;
        height: 100%;
    }

    footer .blocks {
        background-color: #076c92;
    }*/

/* footer ul {
        margin-right: 45px;
        color: #ffffff;
        text-align: right;
    }*/

/*footer a {
        color: #ffffff;
        text-decoration: none;
        cursor: pointer;
    }

        footer a:hover {
            color: #dbe85d;
            text-decoration: none;
        }

    footer p:not(.black) {
        margin: 8px 15px;
        color: #ffffff;
        direction: ltr;
    }

    footer .col-md-3 {
        height: 250px;
    }*/

.blog {
    margin-right: 70px;
    text-align: right;
}

.block-header {
    padding: 10px;
    margin-bottom: 5px;
}

    .block-header > img {
        padding: 10px;
        background-color: #343b4b;
        border-radius: 10px;
    }

    .block-header > h4 {
        display: inline;
        margin: 0;
        margin-right: 10px;
        color: white;
    }

.main {
    text-align: center;
}

.form-horizontal {
    margin: 0 auto;
    width: 80%;
}


    .form-horizontal h3, .form-horizontal h4 {
        background: #0eb1d7;
        padding: 10px 15px;
        color: #ffffff;
        text-align: right;
        border-radius: 5px;
    }

    .form-horizontal label {
        text-align: right;
    }

input[type=checkbox].css-checkbox {
    position: absolute;
    z-index: -1000;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}

    input[type=checkbox].css-checkbox + label.css-label {
        padding-right: 23px;
        height: 18px;
        display: inline-block;
        line-height: 18px;
        background-repeat: no-repeat;
        background-position: 100% 0;
        vertical-align: middle;
        cursor: pointer;
    }

    input[type=checkbox].css-checkbox:checked + label.css-label {
        background-position: 100% -18px;
    }

label.css-label {
    background-image: url(/Images/csscheckbox.png);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.form-group {
    text-align: right;
}

span.ok {
    background-color: #cbe858;
    padding: 5px 10px;
    border-radius: 5px;
    margin-left: 10px;
}

span.h3 {
    color: #cbe858;
    font-weight: bold;
}

.confirm {
    background-color: #129fc5;
    margin: 0 auto;
    width: 50%;
    padding: 30px;
    text-align: right;
    border: solid 1px #808080;
    border-radius: 7px 7px 0 0;
    border-bottom: none;
}

    .confirm p {
        color: white;
        font-size: 18px !important;
    }

.confirm-bottom {
    border: solid 1px #808080;
    border-radius: 0 0 7px 7px;
    border-top: none;
    margin: 0 auto;
    padding: 15px;
    text-align: left;
    width: 50%;
}

    .confirm-bottom > img {
        width: 80px;
        height: 60px;
        margin-right: 30px;
    }

.btn-arrow-right,
.btn-arrow-left {
    position: relative;
    padding-left: 15px;
    padding-right: 15px;
}

.btn-arrow-right {
    padding-left: 20px;
}

.btn-arrow-left {
    padding-right: 20px;
}

    .btn-arrow-right:before,
    .btn-arrow-left:before { /* make two squares (before and after), looking similar to the button */
        content: "";
        position: absolute;
        top: 4px; /* move it down because of rounded corners */
        width: 24px; /* same as height */
        height: 24px; /* button_outer_height / sqrt(2) */
        background: inherit; /* use parent background */
        border: inherit; /* use parent border */
        border-left-color: transparent; /* hide left border */
        border-bottom-color: transparent; /* hide bottom border */
        border-radius: 0px 4px 0px 0px; /* round arrow corner, the shorthand property doesn't accept "inherit" so it is set to 4px */
        -webkit-border-radius: 0px 4px 0px 0px;
        -moz-border-radius: 0px 4px 0px 0px;
    }

.btn-arrow-right:before,
.btn-arrow-right:after {
    transform: rotate(45deg); /* rotate right arrow squares 45 deg to point right */
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
}

.btn-arrow-left:before,
.btn-arrow-left:after {
    transform: rotate(225deg); /* rotate left arrow squares 225 deg to point left */
    -webkit-transform: rotate(225deg);
    -moz-transform: rotate(225deg);
    -o-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
}

.btn-arrow-right:before,
.btn-arrow-left:before { /* align the "before" square to the left */
    left: -13px;
}

.btn-arrow-right:after,
.btn-arrow-left:after { /* align the "after" square to the right */
    right: -11px;
}

.btn-arrow-right:before,
.btn-arrow-left:after { /* hide arrow tails background */
    background-color: white;
}

.pricing {
    width: 70%;
    margin: 0 auto;
}

    .pricing th {
        font-size: 20px;
    }

    .pricing > tbody {
        font-size: 18px;
        text-align: right;
    }

.hide {
    visibility: hidden;
}

.show {
    visibility: visible;
}

.img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img {
    width: 100%;
}

.account .form-group {
    margin-bottom: 30px;
}

.account > .row {
    margin-bottom: 20px;
}

strong > img {
    height: 45px;
    margin-left: 10px;
}

.partners {
    right: -500px;
    border-radius: 25px !important;
}


.features {
    right: -100px;
    border-radius: 25px !important;
}

.services {
    width: 1100px;
    right: -500px;
    border-radius: 25px !important;
}

    .services > li {
        margin: 15px 10px;
        display: block;
        float: right;
    }

        .services > li > img {
            float: right;
            margin-left: 10px;
            width: 64px;
            margin-top: 25px;
        }

        .services > li > div {
            border-right: solid #1ea5d0 1px;
            float: right;
            padding-right: 10px;
            width: 450px;
        }

            .services > li > div > h3 {
                text-align: right;
                color: #1ea5d0;
                margin-top: 2px;
            }

            .services > li > div > p {
                text-align: justify;
                margin-bottom: 2px;
            }

.training {
    padding: 40px;
}

    .training > p, .training > ul {
        text-align: right;
    }

    .training > .row {
        margin-bottom: 30px;
    }

        .training > .row > div {
            text-align: right;
        }

            .training > .row > div > img, .training > .row > div > a > img {
                height: 100px;
            }

            .training > .row > div > p {
                font-size: 16px;
                margin-right: 100px;
            }

.courses > tbody > tr {
    border-bottom: 20px solid #ffffff;
}

    .courses > tbody > tr > td {
        padding: 0 30px;
    }

        .courses > tbody > tr > td:last-child {
            border-right: solid 4px #5b9bd5;
        }

    .courses > tbody > tr:nth-child(2) > td:last-child {
        border-color: #70ad47;
    }

    .courses > tbody > tr:nth-child(3) > td:last-child {
        border-color: #ed7d31;
    }

    .courses > tbody > tr:nth-child(4) > td:last-child {
        border-color: #70ad47;
    }



    .courses > tbody > tr > td:last-child > p {
        text-align: right;
        font-size: 16px;
    }

    .courses > tbody > tr > td:last-child > ul {
        text-align: right !important;
        padding-right: 20px;
        font-size: 16px;
    }

.img-middle {
    text-align: center;
    white-space: nowrap;
    height: 100%;
}

    .img-middle > span {
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    }

    .img-middle > p {
        vertical-align: middle;
        text-align: center;
    }

        .img-middle > p > img {
            margin: 0 auto;
            height: 80px;
        }

        .img-middle > p > label {
            margin: 0 auto;
            font-size: 18px;
        }


/*#region switch */
.onoffswitch {
    position: relative;
    width: 100px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.onoffswitch-checkbox {
    display: none;
}

.onoffswitch-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid #999999;
}

.onoffswitch-inner {
    display: block;
    width: 200%;
    margin-right: -100%;
    -moz-transition: margin 0.3s ease-in 0s;
    -o-transition: margin 0.3s ease-in 0s;
    -webkit-transition: margin 0.3s ease-in 0s;
    transition: margin 0.3s ease-in 0s;
}

    .onoffswitch-inner:before, .onoffswitch-inner:after {
        display: block;
        float: left;
        width: 50%;
        height: 30px;
        padding: 0;
        line-height: 30px;
        font-size: 14px;
        color: white;
        font-weight: bold;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .onoffswitch-inner:before {
        content: "اضف";
        background-color: #a9cb3f;
        color: #FFFFFF;
        text-align: center;
    }

    .onoffswitch-inner:after {
        content: "احذف";
        background-color: #343b4b;
        color: #FFFFFF;
        text-align: center;
    }

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-right: 0;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    left: 0;
}


/*#endregion */

/*#region Responsive */

@media(max-width:1024px) and (min-width:768px) {
    .nav > li > a {
        padding: 15px 10px;
    }

    .carousel-caption {
        bottom: 10px;
        padding-bottom: 15px;
    }

    .form-horizontal label {
        font-size: 12px;
    }
}

@media(max-width:768px) and (min-width:420px) {
    .logo {
        display: none;
    }

    .blog {
        margin-right: 50px;
    }

    /*   footer ul {
        margin-right: 20px;
    }

    footer .col-md-3 {
        height: 200px;
    }*/

    .block-header {
        padding: 5px;
        margin-bottom: 5px;
    }

    .block-body a {
        font-size: 10px;
    }

    .block-header > img {
        padding: 7px;
        width: 30px;
    }

    .block-header > h4 {
        margin-right: 5px;
        font-size: 14px;
    }

    .text-block {
        padding: 25px 0;
        font-size: 18px;
    }

        .text-block > .btn {
            font-size: 18px;
            padding: 3px 10px;
        }

    .carousel-caption {
        bottom: 10px;
        padding-bottom: 10px;
    }

        .carousel-caption > .btn {
            font-size: 18px;
            padding: 6px 25px;
        }

        .carousel-caption > .btn-lang {
            font-size: 18px !important;
        }

   /* .navbar-collapse {
        padding-right: 15px;
        margin-right: 0 !important;
        z-index: 1030;
        position: fixed;
        background: #d9dbde;
        width: 100%;
    }*/

    .videos > .player {
        height: 300px;
    }

    .header-buttons {
        margin: 0;
        padding-bottom: 1px;
    }

    .navbar-collapse.collapse > ul > li:nth-child(1) > a {
        padding-right: 20px;
    }

    .nav > li > a {
        font-size: 12px;
    }

    .Moveit > a > img {
        width: 90px;
        height: 40px;
        margin-right: 10px;
    }

    .form-horizontal label {
        font-size: 12px;
    }
}

@media(max-width:420px) {

    .header-buttons > .btn {
        font-size: 10px;
    }

    /*    footer ul {
        margin-right: 15px;
    }

    footer .col-md-3 {
        height: 200px;
    }

    footer .col-xs-6 {
        width: 100%;
    }*/

    .blog {
        margin-right: 25px;
    }

    .block-header {
        padding: 5px;
        margin-bottom: 5px;
    }

    .block-body a {
        font-size: 10px;
    }

    .block-header > img {
        padding: 7px;
        width: 30px;
    }

    .block-header > h4 {
        margin-right: 5px;
        font-size: 14px;
    }

    .text-block {
        padding: 15px 0;
        font-size: 12px;
    }

        .text-block > .btn {
            font-size: 12px;
            padding: 3px 5px;
        }

    .carousel-caption {
        bottom: 5px;
        padding-bottom: 5px;
    }

        .carousel-caption > .btn {
            font-size: 10px;
            padding: 3px 15px;
        }

        .carousel-caption > .btn-lang {
            font-size: 10px !important;
        }

    .videos > .player {
        height: 150px;
    }

    .header-buttons > .btn:first-child {
        padding: 6px 10px;
    }

    .btn-lang {
        font-size: 18px !important;
    }

    .navbar-toggle {
        padding: 3px 10px;
    }

    .nav > li > a {
        font-size: 10px;
    }

    .form-horizontal label {
        font-size: 10px;
    }
}


/*#endregion */
.tab-pane {
    padding: 10px;
    border-right: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.row > label:first-child {
    padding-left: 15px;
}

.jumbotron {
    border: 1px solid #343b4b;
    text-align: left;
    padding: 15px !important;
}

.form-inline > label, .form-inline > span {
    padding: 0 5px !important;
    vertical-align: middle;
}

.employeeCost {
    position: absolute;
    top: 70px;
    left: 410px;
    width: 100px;
    margin: 15px 0;
    z-index: 2;
}

    .employeeCost > input {
        font-size: 30px !important;
        height: 50px;
        text-align: center;
    }

.cost {
    position: relative;
    background-color: #4db6ac;
    border-radius: 15px;
    border: solid 1px #076c92;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .cost > label {
        font-size: 20px !important;
        position: absolute;
        top: 100px;
        left: 520px;
    }

    .cost .note {
        position: absolute;
        top: 140px;
        left: 191px;
        margin: 20px 0;
        font-size: 18px;
        z-index: 2;
        background-color: #ffffff;
        padding: 5px 55px;
        font-weight: 900;
    }

    .cost .head {
        position: absolute;
        top: 10px;
        left: 310px;
        font-size: 20px;
        z-index: 2;
        color: black;
    }



.prices .panel {
    text-align: right;
}

.prices .panel-body label {
    color: #0D92BC;
}

.prices .panel-heading h4 {
    margin: 5px !important;
}

.prices .panel-heading.collapsed > h4 > span {
    display: inline-block;
}

.prices .panel-heading {
    cursor: pointer;
}

    .prices .panel-heading > h4 > span {
        display: none;
    }

.prices .checkbox {
    margin: 0;
}

.prices .tab-content {
    margin-right: -2px;
}

.btn-success .fa {
    margin-right: 5px;
}

label > span.text {
    margin-right: 5px;
}

@media (max-width: 768px) {
    .confirm, .confirm-bottom {
        width: 90%;
    }

        .confirm .h3 {
            font-size: 16px;
        }

        .confirm p {
            font-size: 14px !important;
        }
}



.dropdown-item {
    display: block;
    width: 100%;
    padding: .25rem 1.5rem;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent !important;
    border: 0;
}

.multiselect-container.dropdown-menu {
    background-color: white;
    width: 100%;
}

.form-check {
    position: relative !important;
    display: block !important;
    padding: 0 1.25rem !important;
    background-color: white;
}



.form-check-input {
    position: absolute;
    margin-top: .3rem;
    margin-right: -1.25rem;
}

.form-check-label {
    margin-right: 2rem;
}

.multiselect.dropdown-toggle {
    text-align: right;
    background-color: white;
    padding: 6px 12px;
    border-radius: 4px;
    border: 1px solid #ccc;
}









.silder {
    position: relative;
    width: 100%;
}

    /* Make the image responsive */
    .silder img {
        width: 100%;
        height: auto;
    }

    /* Style the button and place it in the middle of the container/image */
    .silder .btn1 {
        width: 100%;
        height: auto;
        position: absolute;
        border-radius: 30px;
        top: 70%;
        left: 90%;
        transform: translate(-90%,-70%);
        -ms-transform: translate(-90%,-70%);
        background-color: #337ab7;
        border-color: #2e6da4;
        color: white;
        font-size: 16px;
        padding: 12px 24px;
        cursor: pointer;
    }

    .silder .btn2 {
        width: 100%;
        height: auto;
        position: absolute;
        border-radius: 30px;
        background-color: white;
        border-color: black;
        border: thick;
        color: black;
        top: 70%;
        left: 78%;
        transform: translate(-100%, -70%);
        -ms-transform: translate(-100%, -70%);
        background-color: #555;
        color: white;
        font-size: 16px;
        padding: 12px 24px;
        cursor: pointer;
    }

    .silder .btn1:hover {
        background-color: black;
    }

    .silder .btn2:hover {
        background-color: black;
    }

.bs5 .dropdown-menu {
    text-align: right !important;
}