.check-accent-icon{
    width: 24px;
    height: 24px;
    display: inline-block;
    background-size: cover;
    background-image: url(../../../vendor/webkul/ui/assets/images/check-accent.svg);
}
.check-box-icon{
    width: 24px;
    height: 24px;
    display: inline-block;
    background-size: cover;
    background-image: url(../../../vendor/webkul/ui/assets/images/Checkbox.svg);
}
.cross-accent-icon{
    width: 24px;
    height: 24px;
    display: inline-block;
    background-size: cover;
    background-image: url(../../../vendor/webkul/ui/assets/images/cross-accent.svg);
}
.cross-icon{
    width: 24px;
    height: 24px;
    display: inline-block;
    background-size: cover;
    background-image: url(../../../vendor/webkul/ui/assets/images/cross-icon.svg);
}
.cross-adj-icon{
    width: 24px;
    height: 24px;
    display: inline-block;
    background-size: cover;
    background-image: url(../../../vendor/webkul/ui/assets/images/cross-icon-adj.svg);
}
.calendar-icon{
    width: 24px;
    height: 24px;
    display: inline-block;
    background-size: cover;
    background-image: url(../../../vendor/webkul/ui/assets/images/Icon-Calendar.svg);
}
.icon-sales{
    width: 24px;
    height: 24px;
    display: inline-block;
    background-size: cover;
    background-image: url(../../../vendor/webkul/ui/assets/images/Icon-Sales.svg);
}
.search-dark-icon{
    width: 24px;
    height: 24px;
    display: inline-block;
    background-size: cover;
    background-image: url(../../../vendor/webkul/ui/assets/images/icon-search-dark.svg);
}
.placeholder-icon{
    width: 35px;
    height: 24px;
    display: inline-block;
    background-size: cover;
    background-image: url(../../../vendor/webkul/ui/assets/images/placeholder-icon.svg);
}
.accounts-icon {
    background-image: url(../../../vendor/webkul/ui/assets/images/icon-account.svg);
    width: 24px;
    height: 24px;
}
.maintenance-icon,
.accounting-icon,
.account-icon,
.prductsCatalog-icon,
.organization-icon,
.sales-icon,
.tasks-icon{
    width: 48px;
    height: 48px;
    display: inline-block;
    background-size: cover;
}
.search-icon {
    background-image: url(../../../vendor/webkul/ui/assets/images/icon-search.svg);
}
.maintenance-icon {
    background-image: url(../../../vendor/webkul/ui/assets/images/Maintenance.svg);
}
.account-icon {
    background-image: url(../../../vendor/webkul/ui/assets/images/Accounting.svg);
}
.prductsCatalog-icon {
    background-image: url(../../../vendor/webkul/ui/assets/images/PrductsCatalog.svg);
}
.organization-icon {
    background-image: url(../../../vendor/webkul/ui/assets/images/Qrganization.svg);
}
.sales-icon {
    background-image: url(../../../vendor/webkul/ui/assets/images/Sales.svg);
}
.tasks-icon {
    background-image: url(../../../vendor/webkul/ui/assets/images/Tasks.svg);
}
.active .maintenance-icon,
.navbar-left ul.menubar li.menu-item a:hover .maintenance-icon {
    background-image: url(../../../vendor/webkul/ui/assets/images/Maintenance_active.svg);
}
.active .account-icon,
.navbar-left ul.menubar li.menu-item a:hover .account-icon{
    background-image: url(../../../vendor/webkul/ui/assets/images/Accounting_active.svg);
}
.active .prductsCatalog-icon,
.navbar-left ul.menubar li.menu-item a:hover .prductsCatalog-icon{
    background-image: url(../../../vendor/webkul/ui/assets/images/PrductsCatalog_active.svg);
}
.active .organization-icon,
.navbar-left ul.menubar li.menu-item a:hover .organization-icon{
    background-image: url(../../../vendor/webkul/ui/assets/images/Qrganization_active.svg);
}
.active .sales-icon,
.navbar-left ul.menubar li.menu-item a:hover .sales-icon{
    background-image: url(../../../vendor/webkul/ui/assets/images/Sales_active.svg);
}
.active .tasks-icon ,
.navbar-left ul.menubar li.menu-item a:hover .tasks-icon{
    background-image: url(../../../vendor/webkul/ui/assets/images/Tasks_active.svg);
}

.active .dashboard-icon ,
.navbar-left ul.menubar li.menu-item a:hover .dashboard-icon{
    background-image: url(../../../vendor/webkul/ui/assets/images/Icon-Dashboard-Active.svg);
}
.active .settings-icon,
.navbar-left ul.menubar li.menu-item a:hover .settings-icon{
    background-image: url(../../../vendor/webkul/ui/assets/images/Icon-Settings-Active.svg);
}
.active .configuration-icon ,
.navbar-left ul.menubar li.menu-item a:hover .configuration-icon{
    background-image: url(../../../vendor/webkul/ui/assets/images/Icon-Configure-Active.svg);
}
    /******************************* RTL STYLE *****************************/


.file-btn input {
    width: 80% !important;
    float: left;
}
.btn-container {
    padding: 0 15px;
    width: 20%;
    float: left;
}
html:lang(ar) .file-btn input {
    float: right;
}
html:lang(ar) .btn-container {
    float: right;
}
.control-group.file-btn button {
    width: 100%;
    /* float: left; */
    margin-top: 10px;
}
html:lang(ar)  navbar-top .navbar-top-left .brand-logo {
    text-align: right;
}
html:lang(ar) .dashboard .card .card-info ul li .image {
    float: right;
    margin-right: 0;
    margin-left: 15px;
}
html:lang(ar)  .dashboard .card .card-info ul li .icon.angle-right-icon {
    left: 30px;
    right: auto;
}
html:lang(ar)  span.select2-selection.select2-selection--multiple {
    padding: 0 15px 0 0;
}
html:lang(ar) .profile-info .dropdown-toggle:before {
    right: -10px;
    left: auto;
}
html:lang(ar) .select-with-btn .select2-container {
    border-radius: 10px;
    float: right;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
html:lang(ar) .select-with-btn .button-content {
    float: right;
    margin-left: 0;
    margin-right: -2px;

}
html:lang(ar) .select-with-btn button#clientAddNew {
    border-radius: 10px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
html:lang(ar) .page-action.with-fixed-postion {
    left: 60px;
    right: auto;
}
html:lang(ar) .company-select-header{
    text-align: right !important;
}
html:lang(ar) .company-select-container{
    text-align: right !important;
}
html:lang(ar) .image-box-container:first-child {
    margin-left: 15px;
    margin-right: 0;
}
html:lang(ar) .media-body {
    margin: 0;
    margin-right: 16px;
}
html:lang(ar) .content-container .content-wrapper.with-no-margin{
    margin-left: 0;
    margin-right: 0;
}
html:lang(ar) .page-title .title i.fa {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}
html:lang(ar) .comment-container::after {
    right: 10px;
    left: auto;
}
html:lang(ar) .upload-options {
    margin-left: 0;
    margin-right: 4px;
}
html:lang(ar) button.btn.save-image {
    margin-left: 0;
    margin-right: 4px;
}
html:lang(ar) a#add-supplier,
html:lang(ar) a#add-discount,
html:lang(ar) a#add-unit
{
    float: left;
    left: 40px;
    right: auto;
}
html:lang(ar) .add-new {
    left: 5px;
    right: auto;
    float: left;
}
html:lang(ar) .tree-container .tree-item {
    padding-right: 30px;
    padding-left: 0;
}
html:lang(ar)  .tree-container .tree-item .expand-icon {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}
html:lang(ar) .tree-container .tree-item.active>.expand-icon {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
}

html:lang(ar) .text-left {
    text-align: right!important;
}
html:lang(ar) .checkboxStyle label::before {
    left: auto;
    margin-left: 0;
    right: -3px;
    margin-right: 12px;
}

/****************************************** Responsive Style*****************************************/
/*@media (min-width: 768px){*/
/*td.no-value {*/
/*    display: none;*/
/*}*/
/*}*/
/*@media (max-width: 1190px){*/
/*  .search-filter {*/
/*    display: block;*/
/*    position: relative;*/
/*    min-width: 100%;*/

/*    margin-bottom: 50px;*/
/*}*/
/*.search-filter .control {*/
/*    width: 100%;*/
/*}*/
/*.search-filter .icon-wrapper {*/
/*    position: absolute;*/
/*    right: 0;*/
/*    top: 0;*/

/*}*/
/*html:lang(ar) .search-filter .icon-wrapper {*/
/*    left: 0;*/
/*    right: auto;*/
/*}*/
/*.filter-row-one .per-page {*/
/*    right: auto;*/
/*    width: 260px;*/
/*    position: relative;*/
/*    float: none;*/
/*    position: absolute;*/
/*    float: none;*/
/*    display: block;*/
/*    left: 0;*/
/*    top: 60px;*/
/*}*/
/*.filter-row-one .dropdown-filters {*/
/*    top: 60px;*/
/*        right: 0;*/
/*}*/
/*.content-container .content .page-header .control-group {*/
/*    width: 180px;*/
/*    max-width: 100%;*/
/*    display: block;*/
/*    margin-bottom: 0;*/
/*    margin-left: 20px;*/
/*    margin-top: 15px;*/
/*}*/
/*}*/
/*@media (max-width: 991px){*/
/*    a#add-supplier,*/
/*    a#add-discount,*/
/*    a#add-unit{*/
/*        top: -20px;*/
/*        z-index: 99;*/
/*    }*/
/*    a#add-unit,*/
/*    .add-new {*/
/*        right: 0;*/
/*        top: -40px;*/
/*    }*/
/*    .filter-row-one .dropdown-filters {*/
/*    width: 100%;*/
/*        top: 110px;*/
/*}*/
/*.search-filter {*/
/*    margin-bottom: 90px;*/
/*}*/
/*.filter-row-one .per-page .per-page-label {*/
/*    font-size: 13px;*/
/*}*/
/*}*/
/*@media (max-width: 767px){*/
/*    .sub-header{*/
/*        font-size: 12px;*/
/*    }*/
/*    .li-points textarea, .points-area textarea {*/
/*        margin-bottom: 10px;*/
/*    }*/
/*    .with-responsive-margin{*/
/*        margin-bottom: 60px;*/
/*    }*/
/*    .li-points li {*/
/*        margin-bottom: 20px;;*/
/*    }*/
/*    .dashboard .dashboard-stats .dashboard-card {*/
/*    max-width: 200px;*/
/*    min-width: 100%;*/
/*    }*/
/*    .dashboard .dashboard-stats .dashboard-card .data {*/
/*        font-size: 20px;*/
/*        word-break: break-all;*/
/*    }*/
/*    .content-container .content .page-header .control-group {*/
/*        margin-top: 20px;*/
/*    }*/
/*    .content-container .content .page-header .control-group.date {*/
/*        display: block;*/
/*        margin-left: 0;*/
/*        width: 100%;*/
/*        margin-top: 20px;*/
/*    }*/
/*    .content-container .content .page-header .page-action>div {*/
/*        display: block;*/
/*    }*/
/*    .content-container .content .page-header .page-action {*/
/*        float: none;*/
/*    }*/
/*    .content-container .content .page-header .page-title {*/
/*        float: none;*/
/*        position: relative;*/
/*        padding: 0 15px;*/
/*    }*/
/*    .content-container .content .page-header .page-title .back-link {*/
/*        position: absolute;*/
/*        left: -5px;*/
/*    }*/
/*    html:lang(ar) .content-container .content .page-header .page-title .back-link {*/
/*        position: absolute;*/
/*        right: -20px;*/
/*        left: auto;*/
/*    }*/
/*    .content-container .aside-nav {*/
/*    width: 96%;*/
/*    position: relative;*/
/*    top: 0;*/
/*}*/
/*.content-container .content-wrapper {*/
/*    margin-left: 0;*/
/*}*/
/*html:lang(ar) .content-container .content-wrapper {*/
/*    margin: 0;*/
/*}*/
/*.content-container .aside-nav .active i {*/
/*    float: right;*/
/*    transform: rotate(90deg);*/
/*    -ms-transform: rotate(90deg);*/
/*}*/
/*.content-container .content .page-header .page-action a {*/
/*    margin-left: 0;*/
/*    margin: 10px 0;*/
/*}*/
/*.content-container .content .page-header .page-action:first-child a {*/
/*        margin-bottom: 0;*/
/*}*/
/*.content-container .content .page-header .page-action {*/
/*    float: right;*/
/*    margin-top: 30px;*/
/*}*/
/*html:lang(ar) .content-container .content .page-header .page-action {*/
/*    float: left;*/
/*    margin: 0;*/
/*    margin-left: 8px;*/
/*    margin-top: 10px;*/
/*    width: 100%*/
/*}*/
/*html:lang(ar) .content-container .content .page-header .control-group {*/
/*    margin-right: 0;*/
/*    margin-left: 0;*/
/*}*/
/*html:lang(ar) .content-container .content .page-header .page-title {*/
/*    float: none;*/
/*}*/
/*.dashboard .card .card-info {*/
/*    width: 60%;*/
/*    display: inline-block;*/
/*}*/
/*    .current-lang .lang-flag {*/
/*    top: -1px;*/
/*    left: 3px;*/
/*}*/
/*.lang-text span {*/
/*    display: none;*/
/*}*/
/*.current-lang {*/
/*    top: 2px;*/
/*    position: relative;*/
/*    border: 2px solid #324da0;*/
/*    background: #fff;*/
/*height: 38px*/
/*}*/
/*.lang-text {*/
/*    margin: 0;*/
/*}*/
/*.lang-dropdown {*/
/*    border: 2px solid #324da0;*/
/*    background: #fff;*/
/*}*/
/*html:lang(ar) .lang-flag {*/
/*    left: -3px;*/
/*}*/
/*    .pagination {*/
/*        margin: 20px auto;*/
/*        padding-bottom: 20px;*/
/*        overflow: auto*/
/*    }*/
/*    .select-org-container {*/
/*        width: 90% !important;*/
/*    }*/
/*    .navbar-top .navbar-top-right .profile-info {*/
/*        margin: 0;*/
/*        min-width: 250px;*/
/*    }*/
/*}*/
/*@media (max-width: 580px){*/
/*    .delete-stage {*/
/*        margin-top: 10px;*/
/*    }*/
/*}*/
/*@media (max-width: 450px){*/
/*    .navbar-top .navbar-top-right .profile-info {*/
/*        min-width: 50px;*/
/*        right: 0px;*/
/*    }*/
/*    .content-container .content .page-header {*/
/*        top: -25px !important;*/
/*        padding-top: 25px !important;*/
/*    }*/
/*    .dashboard .dashboard-stats .dashboard-card {*/
/*        min-width: auto;*/
/*    max-width: none;*/
/*    width: 80%;*/
/*        height: auto;*/
/*    }*/
/*    .navbar-top .navbar-top-left .brand-logo img {*/
/*    width: 155px;*/
/*    margin-top: 5px;*/
/*}*/
/*.navbar-top .navbar-top-right .profile-info .name {*/
/*    font-size: 12px;*/
/*}*/
/*.navbar-top .navbar-top-right .profile-info .role {*/
/*    font-size: 12px;*/
/*}*/
/*.table .control-group .control {*/
/*    width: 65px;*/
/*    margin: 0;*/
/*    float: left;*/
/*    margin-left: 20px;*/
/*}*/
/*.navbar-left ul.menubar li.menu-item span.icon-details {*/
/*    display: none;*/
/*}*/
/*.navbar-left ul.menubar li.menu-item span.admin-icons {*/
/*    width: 30px;*/
/*    height: 30px;*/
/*}*/
/*.navbar-left {*/
/*    width: 50px !important;*/
/*       top: 50px !important;*/
/*}*/
/*.content-container {*/
/*    padding-left: 60px;*/
/*    margin-top: 65px;*/
/*    padding-top: 20px;*/

/*}*/
/*html:lang(ar) .content-container {*/
/*    padding-right: 60px;*/
/*    padding-left: 0;*/
/*}*/
/*.content-container .content.full-page {*/
/*       padding: 50px 0;*/
/*padding-top: 0;*/
/*}*/
/*.navbar-top .navbar-top-right .profile-info .dropdown-list {*/
/*        top: 65px;*/
/*    left: auto !important;*/
/*}*/
/*.navbar-top {*/
/*    height: 60px;*/
/*}*/
/*.page-action form {*/
/*    width: 90%;*/
/*    text-align: center;*/
/*}*/
/*.page-action form .control-group {*/
/*    text-align: left;*/
/*}*/
/*html:lang(ar) .content-container .content-wrapper {*/
/*    margin: 0;*/
/*padding: 20px 5px;*/
/*}*/
/*html:lang(ar) .dropdown-toggle {*/
/*    float: right;*/
/*}*/
/*.dropdown-filters .dropdown-toggle {*/
/*    float: left;*/
/*}*/
/*.content-container .content .page-header .page-action {*/
/*    float: none;*/
/*}*/
/*!*.profile-info .dropdown-toggle {*!*/
/*!*    !*background-image: url(http://amwal.doe.net.sa/public/vendor/webkul/ui/assets/images/icon-account.svg);*!*!*/
/*!*    !*background-size: cover;*!*!*/
/*!*    background-image: none;*!*/
/*!*    width: 48px;*!*/
/*!*    height: 43px;*!*/
/*!*    overflow: hidden;*!*/
/*!*    background-color: #fff !important;*!*/
/*!*    margin-top: -4px;*!*/
/*!*}*!*/
/*!*    .profile-info .dropdown-toggle:before {*!*/
/*!*        content: "\f007";*!*/
/*!*        font-family: FontAwesome;*!*/
/*!*        color: #324da0;*!*/
/*!*        font-size: 24px;*!*/
/*!*        position: relative;*!*/
/*!*        top: 10px;*!*/
/*!*        left: -10px;*!*/
/*!*        border: 2px solid #324da0;*!*/
/*!*        padding: 5px 10px;*!*/
/*!*        border-radius: 10px;*!*/
/*!*    }*!*/
/*.navbar-top .navbar-top-right .profile-info .name,*/
/*.navbar-top .navbar-top-right .profile-info .role {*/
/*    visibility: hidden;*/
/*}*/
/*.switch-lang {*/
/*    border-radius: 10px;*/
/*    margin-top: -1px;*/
/*}*/
/*.lang-text span{*/
/*    display: none;*/
/*}*/
/*.content-container .content .page-header .control-group {*/
/*    margin-top: 20px;*/
/*    margin-left: 0;*/
/*}*/
/*.lang-dropdown {*/
/*    background: #fff;*/
/*    border: 2px solid #324da0;*/
/*    padding-bottom: 10px;*/
/*}*/
/*html:lang(ar) .content-container .content .page-header .page-action button {*/
/*    display: inline-block;*/
/*    margin-right: 10px;*/
/*}*/
/*    .profile-info .dropdown-toggle {*/
/*        padding: 0px 10px !important;*/
/*    }*/
/*    .dashboard .page-header .control-group.date:after {*/
/*        display: none;*/
/*    }*/

/*    html:lang(ar) .selectedCompany {*/
/*        margin-left: 0;*/
/*        margin-right: 0px;*/
/*        border: none;*/
/*    }*/
/*    .content-container .content-wrapper {*/
/*        padding: 0;*/
/*    }*/

/*    table#addNewItem .control-group .control {*/
/*        width: 100px !important;*/
/*        margin-bottom: 6px;*/
/*        height: 25px;*/
/*        margin-left: 0;*/
/*        position: relative;*/
/*        top: -8px;*/
/*    }*/
/*    table#addNewItem tbody td {*/
/*        margin-bottom: 15px;*/
/*    }*/
/*    table#addNewItem tbody td:first-child {*/
/*        margin-bottom: 0px;*/
/*    }*/
/*    .comment-operations .trash-icon {*/
/*        margin-top: 0px;*/
/*        outline: none;*/
/*    }*/
/*    .content-container .content .page-header .page-title h1 {*/
/*        font-size: 25px;*/
/*    }*/
/*    a#add-supplier,*/
/*    a#add-discount,*/
/*    a#add-unit{*/
/*        top: -20px;*/
/*        z-index: 99;*/
/*    }*/
/*    a#add-unit,*/
/*    .add-new {*/
/*        right: 0;*/
/*        top: -40px;*/
/*    }*/
/*    .table .control-group {*/
/*        min-width: 110px;*/
/*    }*/
/*}*/
/*.table table {
	width: 750px;
	border-collapse: collapse;
	margin:50px auto;
	}
*/
/* Zebra striping */
/* .table table tbody tr:nth-of-type(odd) {
	background: #eee;
	}

.table table th {
	background: #3498db;
	color: white;
	font-weight: bold;
	}

.table table tbody td, .table table tbody th {
	padding: 10px;
	border: 1px solid #ccc;
	text-align: left;
	font-size: 18px;
	}*/

/*
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/


@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	.table table {
	  	width: 100%;
	}

	/* Force table to not be like tables anymore */
	.table table,.table table thead, .table table tbody, .table table tbody th, .table table tbody td, .table table tbody tr {
		display: block;
	}

	/* Hide table headers (but not display: none;, for accessibility) */
.table table thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	.table table tbody tr { border: 1px solid #ccc; }

	.table table tbody td {
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee;
		position: relative;
		padding-left: 50%;
word-break: break-word;
        padding-bottom: 20px;
	}
html:lang(ar) .table table tbody td {
    padding-right: 50%;
    padding-left: 0;
}

	.table table tbody td:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 9px;
		left: 6px;
		width: 45%;
		padding-right: 10px;
		white-space: break-spaces;
		/* Label the data */
		content: attr(data-value);

		color: #000;
		font-weight: bold;
	}
html:lang(ar) .table table tbody td:before {
    right: 6px;
    left: auto;
}
.table table tbody td.no-value {
    margin-bottom: 20px;
}
html:lang(ar) .table table tbody tr.no-data td {
    padding-right: 0;
}
.table table tbody tr.no-data td {
    padding-left: 0;
}
}

@media (max-width: 1024px){

    .table table {
        width: 100%;
    }

    /* Force table to not be like tables anymore */
    .table table,.table table thead, .table table tbody, .table table tbody th, .table table tbody td, .table table tbody tr {
        display: block;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    .table table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .table table tbody tr { border: 1px solid #ccc; }

    .table table tbody td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
        word-break: break-word;
        padding-bottom: 20px;
        margin-bottom: 15px;
        width: 100% !important;
    }
    html:lang(ar) .table table tbody td {
        padding-right: 50%;
        padding-left: 0;
    }

    .table table tbody td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 9px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: break-spaces;
        /* Label the data */
        content: attr(data-value);

        color: #000;
        font-weight: bold;
    }
    html:lang(ar) .table table tbody td:before {
        right: 6px;
        left: auto;
    }
    .table table tbody td.no-value {
        margin-bottom: 20px;
    }
    html:lang(ar) .table table tbody tr.no-data td {
        padding-right: 0;
    }
    .table table tbody tr.no-data td {
        padding-left: 0;
        display: block;
    }
}



/********************** INPUT STYLE **************************/



.accordian, accordian {
    display: inline-block;
    width: 100%;
    margin-bottom: 10px;
}

.selecting-lang:hover {
    background-color: #f5f5f5
}
.selecting-lang:hover a {
    color: #324da0 !important;
}

.button-content button {
    width: 100%;
    font-size: 12px;
    padding: 9px 5px;
}


/************************************************/
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
@import url("https://fonts.googleapis.com/css?family=Raleway");

.wrapper {
}

.box {
  display: block;
    max-width: 100%;
    width: 200px;
    height: 200px;
    margin: 20px 0;
    background-color: white;
  border-radius: 5px;
  /*box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);*/
  /*-webkit-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);*/
    box-shadow: none;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow: hidden;
    margin-top: 0px;
}

.upload-options {
  position: relative;
  height: 50px;
  background-color: #324da0;
  cursor: pointer;
  overflow: hidden;
  text-align: center;
  -webkit-transition: background-color ease-in-out 150ms;
  transition: background-color ease-in-out 150ms;
    width: 191px;
    margin-left: 4px;
}
.upload-options:hover {
  background-color: #324da0;
  opacity: .9;

}
.upload-options input {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}
.upload-options label {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  width: 100%;
  height: 100%;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
}
.upload-options label::after {
right: 0;
    content: "\f067";
    font-family: 'fontawesome';
    position: absolute;
    font-size: 1.5rem;
    color: #e6e6e6;
    top: 15px;
    bottom: 0;
    left: -3px;
    margin: auto;
    z-index: 0;
}
.upload-options label span {
  display: inline-block;
  width: 50%;
  height: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: middle;
  text-align: center;
}
.upload-options button:focus {
    outline: none;
}
.upload-options label span:hover i.material-icons {
  color: lightgray;
}

.js--image-preview {
    height: 150px;
width: 100%;
  position: relative;
  overflow: hidden;
  background-color: white;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
    text-align: center;
    position: relative;
}
.js--image-preview::after {
 /* content: "\f03e";
  font-family: 'fontawesome';
  position: relative;
  font-size: 4.5em;
  color: #e6e6e6;
  top: calc(50% - 1rem);
  left: calc(50% - 2.25rem);
  z-index: 0;*/

    content: "\f03e";
    font-family: 'fontawesome';
    position: relative;
    font-size: 4.5em;
    color: #e6e6e6;
    top: -75px;
    bottom: 0;
    margin: auto;
    left: 0px;
    right: 0;
    z-index: 0;
}
button.btn.save-image {
    margin-bottom: 30px;
    width: 191px;
    margin-left: 4px;
}
.card.col-12.no-border {
    margin: 0 -10px;
}
.active.js--image-preview::after{
    display: none;
}
html:lang(ar) .js--image-preview::after {
    left: 0;
    right: 0px;
}
.js--image-preview.js--no-default::after {
  display: none;
}
.js--image-preview:nth-child(2) {
  background-image: url("http://bastianandre.at/giphy.gif");
}
.save-image {
    width: 100%;
}
.box.box-show .upload-options label span.fa.fa-download {
    line-height: 60px !important;
}
i.material-icons {
  -webkit-transition: color 100ms ease-in-out;
  transition: color 100ms ease-in-out;
  font-size: 2.25em;
  line-height: 55px;
  color: white;
  display: block;
}

.drop {
  display: block;
  position: absolute;
  background: rgba(95, 158, 160, 0.2);
  border-radius: 100%;
  -webkit-transform: scale(0);
          transform: scale(0);
}

.animate {
  -webkit-animation: ripple 0.4s linear;
          animation: ripple 0.4s linear;
}

@-webkit-keyframes ripple {
  100% {
    opacity: 0;
    -webkit-transform: scale(2.5);
            transform: scale(2.5);
  }
}

@keyframes ripple {
  100% {
    opacity: 0;
    -webkit-transform: scale(2.5);
            transform: scale(2.5);
  }
}
img#output {
    /*width: 100%;*/
    /*height: 100%;*/
    max-width: 100%;
    max-height: 100%;
    /* vertical-align: middle; */
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    border: 0;
    margin: auto;
    top: 50%;
    transform: translateY(-50%);
}

@media (max-width: 450px){
    .notifications.js-notifications {
        width: 300px;
        padding: 0px;
        left: auto;
        right: 0;
        overflow: hidden;
    }
    html:lang(ar) .notifications.js-notifications {
        right: auto;
        left: 0;
    }
    .notifications .notifications-list .item {
        width: 300px;
    }
    .notifications .notifications-list .item .details {
        width: 220px;
    }
    .notifications .show-all {
        width: 100%;
    }
}
/******************** toggle switch code***********************/