/*
 Theme Name:     Solo Portal
 Theme URI:      https://www.elegantthemes.com/gallery/divi/
 Description:    Divi Child Theme
 Author:         Elegant Themes
 Author URI:     https://www.elegantthemes.com
 Template:       Divi
 Version:        1.0.0
*/
 
 
/* =Theme customization starts here
------------------------------------------------------- */

/*
Theme Name: wpbootstraptheme
Theme URI: https://wordpress.org/
Description: Custom WordPress Theme built with bootstrap
Version:1.1
Author: admin
Author URI: https://wordpress.org/
*/




@font-face {
    font-family: 'Roboto Lt';
    src: url('http://54.252.62.26/wp-content/themes/solo-child-portal/fonts/Roboto-Medium.eot');
    src: url('http://54.252.62.26/wp-content/themes/solo-child-portal/fonts/Roboto-Medium.eot?#iefix') format('embedded-opentype'),
        url('hhttp://54.252.62.26/wp-content/themes/solo-child-portal/fonts/Roboto-Medium.woff2') format('woff2'),
        url('http://54.252.62.26/wp-content/themes/solo-child-portal/fonts/Roboto-Medium.woff') format('woff'),
        url('http://54.252.62.26/wp-content/themes/solo-child-portal/fonts/Roboto-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Century Gothic Paneuropean';
    src: url('http://54.252.62.26/themes/solo-child-portal/fonts/CenturyGothicPaneuropean-Light.eot');
    src: url('http://54.252.62.26/wp-content/themes/solo-child-portal/fonts/CenturyGothicPaneuropean-Light.eot?#iefix') format('embedded-opentype'),
        url('http://54.252.62.26/wp-content/themes/solo-child-portal/fonts/CenturyGothicPaneuropean-Light.woff2') format('woff2'),
        url('http://54.252.62.26/wp-content/themes/solo-child-portal/fonts/CenturyGothicPaneuropean-Light.woff') format('woff'),
        url('http://54.252.62.26/wp-content/themes/solo-child-portal/fonts/CenturyGothicPaneuropean-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Century Gothic';
    src: url('http://54.252.62.26/wp-content/themes/solo-child-portal/fonts/CenturyGothic.eot');
    src: url('http://54.252.62.26/wp-content/themes/solo-child-portal/fonts/CenturyGothic.eot?#iefix') format('embedded-opentype'),
        url('http://54.252.62.26/wp-content/themes/solo-child-portal/fonts/CenturyGothic.woff2') format('woff2'),
        url('http://54.252.62.26/wp-content/themes/solo-child-portal/fonts/CenturyGothic.woff') format('woff'),
        url('http://54.252.62.26/wp-content/themes/solo-child-portal/fonts/CenturyGothic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Century Gothic';
    src: url('http://54.252.62.26/wp-content/themes/solo-child-portal/fonts/CenturyGothic-Bold.eot');
    src: url('http://54.252.62.26/wp-content/themes/solo-child-portal/fonts/CenturyGothic-Bold.eot?#iefix') format('embedded-opentype'),
        url('http://54.252.62.26/wp-content/themes/solo-child-portal/fonts/CenturyGothic-Bold.woff2') format('woff2'),
        url('http://54.252.62.26/wp-content/themes/solo-child-portal/fonts/CenturyGothic-Bold.woff') format('woff'),
        url('http://54.252.62.26/wp-content/themes/solo-child-portal/fonts/CenturyGothic-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}



/**********app page css start**********/
.app_menu ul li a img {
    max-height: 20px;
}
.app_menu {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 76%;
    background: #fff;
    box-shadow: 3px 5px 20px rgba(0,0,0,0.2);
    z-index: 99;
    padding-top: 50px;
    margin-left: -100%;
    transition: all 0.5s;
}
.app_menu.menu_toggle {
    margin-left: 0;
}
.menu_icon svg {
    cursor: pointer;
}
.app_menu ul li a {
    display: flex;
    align-items: center;
    font-size: 20px;
    line-height: 1;
}
.app_menu ul li a span:last-child {
    margin-left: 20px;
}
span.app_menu_icon {
    flex: 0 0 25px;
    justify-content: center;
    display: flex;
    max-width: 25px;
}
.app_menu ul li {
    margin-bottom: 55px;
}
.menu_icon .close_menu {
    display: none;
}
.menu_icon.openmenu .hamburger_menu {
    display: none;
}
.menu_icon.openmenu .close_menu {
    display: block;
}

.app_screen_wrap {
    margin: 60px 0;
}
.app_inner {
    max-width: 428px;
    margin: 0 auto;
    border: 1px solid #e4e4e4;
}
.app_header {
    background: #213d30;
    padding: 15px 35px;
}
.header-rgt span img {
    max-height: 26px;
}
.header-rgt span {
    margin-left: 20px;
}
.header-left {
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    font-weight: 600;
}
.header-left svg {
    margin-right: 30px;
}

.app_logo img {
    max-height: 130px;
}
.app_logo {
    text-align: center;
}
.header-left {
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    font-weight: normal;
    font-family: 'Roboto Lt';
    letter-spacing: 0.8px;
}
.app-body {
    padding: 15px 35px;
    min-height: 800px;
    position: relative;
    overflow: hidden;
}
.upcmg_rmndr {
    text-align: center;
    background: #f2f2f2;
}
.upcmg_rmndr h2 {
    font-size: 24px;
    background: #bad80a;
    color: #1a1b1c;
    font-family: 'Century Gothic';
    padding: 10px;
    border-radius: 3px;
    margin-bottom: 0;
}
.upcmg_rmndr p {
    color: #000;
    padding: 25px 30px !important;
    font-size: 16px;
    font-family: 'Century Gothic';
    font-weight: normal;
    margin-bottom: 0;
}

.app_logo {
    text-align: center;
    margin-bottom: 16px;
    margin-top: 5px;
}
.rmndr_list {
    background: #f2f2f2;
    padding: 12px;
    box-shadow: 1px 2px 10px rgb(0 0 0 / 20%);
    margin-bottom: 16px;
}

.Set_reminder h2 {
    font-size: 24px;
    color: #1a1b1c;
    font-family: 'Century Gothic';
    padding: 10px;
    border-radius: 3px;
    margin-bottom: 0;
    text-align: center;
    margin-top: 25px;
}
.rmndr_lst_left img {
    max-height: 35px;
}
.rmndr_lst_left {
    font-size: 20px;
    font-family: 'Century Gothic';
}
.rmndr_lst_left img {
    margin-right: 18px;
}
span.rmndr-tgl {
    margin-right: 20px;
    position: relative;
    top: 2px;
}


/**=======toggle btn css strt=======**/
.switch {
    position: relative;
    display: inline-block;
    width: 45px;
    height: 20px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

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

.slider:before {
    position: absolute;
    content: "";
    height: 30px;
    width: 30px;
    left: 0;
    bottom: -5px;
    background-color: #1a1b1c;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #bad80a;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(15px);
  -ms-transform: translateX(15px);
  transform: translateX(15px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
/**=======toggle btn css ends=======**/


/**********app page css ends**********/


.dashnavwrap .tab-content .form-group span.required {
    color: #f00;
}

.page-id-556 h1.entry-title.main_title, .page-id-581 h1.entry-title.main_title, .page-id-532 h1.entry-title.main_title{
    display: none;
}
.login_wraper, .dash_wraper {
    max-width: 600px;
    margin: 0 auto;
    background: #f9f9f9;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #eee;
    margin-bottom: 80px;
}
.dash_wraper {
    max-width: 1170px;
}
.login_wraper .cleanlogin-container, .dash_wraper .cleanlogin-container{
    max-width: 100%;
    background: #fff;
    box-shadow: none;
    border: 1px solid #eee;
}
.login_wraper .cleanlogin-container label, .dash_wraper .cleanlogin-container label {
    text-align: left;
    margin-bottom: 10px;
    font-weight: 500;
}
.login_wraper .cleanlogin-container input[type="text"], .login_wraper .cleanlogin-container input[type="password"] {
    background-color: #f9f9f9;
    min-height: 42px;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.dash_wraper .cleanlogin-container input[type="text"], .dash_wraper .cleanlogin-container input[type="password"] {
    background-color: #f9f9f9;
    min-height: 42px;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.login_wraper .cleanlogin-container input[type="submit"], .dash_wraper .cleanlogin-container input[type="submit"]  {
    background: #a9c21b;
    color: #fff;
    border: 1px solid #a9c21b;
    font-size: 16px;
    text-transform: uppercase;
    min-height: 42px;
}
.dash_wraper .cleanlogin-container input[type="submit"] {
    width: auto;
    display: flex;
    margin: 0 auto;
    padding: 10px 30px;
    height: auto;
}

.login_wraper .cleanlogin-form-bottom a, .dash_wraper .cleanlogin-form-bottom a {
    width: 100%;
    text-align: center;
    color: #a9c21b;
}

.login_wraper .cleanlogin-form-bottom a, .dash_wraper .cleanlogin-form-bottom a {
    width: 100%;
    text-align: center;
    color: #ffffff;
}

.login_wraper > h2, .dash_wraper > h2  {
    text-align: center;
    text-transform: uppercase;
    font-size: 22px;
    color: #607d8b;
}
.login_wraper_outer, .dash_wraper_outer {
    min-height: calc(100vh - 224px);
}
.login_wraper .cleanlogin-field.cleanlogin-field-remember label {
    position: relative;
    top: -3px;
}




#footer-bottom #footer-info {
    padding: 0;
    margin: 0 !important;
    color: #fff;
}
#footer-bottom {
    padding-top: 28px;
}
#footer-bottom #footer-info a {
    color: #fff;
}
.et-social-icons a.icon {
    color: #fff;
}


#layoutMessage ,#appIconMessage , #updateCourseMessage, #updateContactMessage{display:none}


/**********dashbord page css start**********/

.solo-dash .container {
    max-width: 1170px !important;
}
.solo-dash {
    padding: 50px 0;
    background: #f0f0f1;
}
.dashnavwrap {
    background: #fff;
    box-shadow: 0 5px 30px rgba(0,0,0,.1);
}
.dashnavwrap ul.nav {
    background: #bad80a;
}
.dashnavwrap ul.nav button.nav-link {
    color: #fff;
    padding: 15px 30px;
    border-radius: 0;
}
.dashnavwrap ul.nav button.nav-link.active {
    background: #a9c21b;
}
.dashnavwrap ul.nav button.nav-link:hover {
    background: #c0de0e;
}
.dashnavwrap ul.nav button.nav-link.active:hover{
    background: #a9c21b;
}
.dashnavwrap .tab-content {
    padding: 15px 30px;
}
.dashnavwrap .tab-content .form-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 2rem;
}
.dashnavwrap .tab-content .form-group label {
    flex: 0 0 30%;
    max-width: 30%;
    margin-bottom: 0;
}
.frm_inpt_nd_btn {
    display: flex;
    align-items: center;
}
.form-grp-inpt {
    flex: 1 1;
}
.frm_inpt_nd_btn .upload-btn-wrapper {
    flex: 0 0 auto;
}
.form-grp-inpt input {
    background: #F1F5F9;
    border-radius: 0;
    border: 0;
    min-height: 38px;
    padding: 0 20px;
}
.form-grp-inpt input:focus{
    box-shadow:none ;
    background: #F1F5F9;
}
.form-grp-inpt .form-btn-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex: 0 0 auto;
}
.form-grp-inpt .upload-btn-wrapper button.btn, button.rstbtn {
    background: #343c46;
    color: #fff;
    border-radius: 3px;
    min-height: 38px;
    margin-left: 20px;
    padding: 5px 35px;
    border: 1px solid #343c46;
} 
.form-group.save-btnfrmgrp {
    border-top: 1px solid #ddd;
    margin-top: 40px;
    padding-top: 30px;
    justify-content: center;
}
.form-group.save-btnfrmgrp button {
    background: #a9c21b;
    color: #fff;
    border-radius: 0;
    padding: 10px 30px;
    margin: 0 15px;
}
.form-group.save-btnfrmgrp button:focus{
    box-shadow: none;
}
.form-group.save-btnfrmgrp button.savedraft {
    background: #004026;
}
/**===upload btn css start===**/
.upload-btn-wrapper {
  position: relative;
  overflow: hidden;
  display: inline-block;
}
.btn {
  border: 2px solid gray;
  color: gray;
  background-color: white;
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 20px;
  font-weight: bold;
}
.upload-btn-wrapper input[type=file] {
  font-size: 100px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

/**===upload btn css ends===**/

.dashnavwrap .tab-content .form-group.navgtn-list-form {
    align-items: flex-start;
}
.navgtn-list-form ul.ui-sortable {
    flex: 1 1;
}
.navgtn-list-form ul li {
    background: #F1F5F9;
    margin-bottom: 25px;
}
.navgtn-list-form ul li {
    background: #F1F5F9;
    margin-bottom: 20px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.navgtn-list-form ul li .icon-img {
    width: 60px;
    height: 60px;
    background: #fff;
    display: flex;
    padding: 10px;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
}
.navgtn-list-form ul li .icon-img img {
    height: 25px;
    width: auto;
}
.navgtn-list-form ul li .icon-img {
    width: 60px;
    height: 60px;
    background: #fff;
    display: flex;
    padding: 10px;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    border: 3px solid #bad80a;
    margin-right: 20px;
}
.navgtn-list-form ul li:hover {
    cursor: all-scroll;
}
.icon-txt-wrp {
    display: flex;
    align-items: center;
}
.navgtn-list-form ul li button.nav_edit_btn {
    background: #333;
    color: #fff;
    border: 0;
    padding: 6px 25px;
    font-size: 14px;
    border-radius: 3px;
    text-transform: uppercase;
}
.drag-icon img {
    max-width: 40px;
    margin-right: 8px;
    opacity: 0.7;
}
span.drag-icon {
    margin-left: -10px;
}

.navlist-edit-modal .modal-header {
    padding: 0;
    border: 0;
}
.navlist-edit-modal button.modal-close {
    color: #fff;
    position: absolute;
    right: -28px;
    top: -66px;
    z-index: 999;
    font-size: 26px;
}
.navlist-edit-modal .modal-content {
    background: #F1F5F9;
    border: 1px solid #ddd;
    border-radius: 0;
}
.navlist-edit-modal .modal-content label {
    margin-bottom: 10px !important;
}
.navlist-edit-modal .modal-content input.form-control {
    border: 1px solid #ddd;
    padding: 0 20px;
    min-height: 46px;
    font-size: 14px;
    color: #888;
    background: #fff;
}
.navlist-edit-modal .modal-wrapper {
    max-width: 900px;
    top: 50%;
    transform: translate(-50%,-50%) !important;
    margin-left: 0;
    width: 95%;
}
.navlist-edit-modal .form-grp-inpt.frm_inpt_nd_btn {
    flex: 0 0 100%;
}
.navlist-edit-modal .form-grp-inpt.frm_inpt_nd_btn .form-btn-group button {
    min-height: 44px;
}
.dashnavwrap .tab-content .form-group input[type="checkbox"] {
    width: auto;
}
.dashnavwrap .tab-content .form-group input[type="checkbox"]:focus{
    box-shadow: none;
}
/**********dashbord page css ends**********/



/**********blog page css start**********/
.edit_blog_btn {
    position: absolute;
    left: 15px;
    top: 15px;
}
.delete_blog_btn {
    position: absolute;
    left: 70px;
    top: 15px;
}
.edit_blog_btn a, .delete_blog_btn a {
    width: 42px;
    height: 42px;
    background: #fff;
    display: flex;
    padding: 9px;
    border-radius: 10px;
    justify-content: center;
    align-items: center;
    border: 2px solid #bad80a;
    margin-right: 0;
}
.blog_list_row {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 20px;
}
.blog_list {
    flex: 0 0 48%;
    max-width: 48%;
    margin-right: 2%;
}
.blog_list {
    flex: 0 0 48%;
    max-width: 48%;
    margin-right: 4%;
}
.blog_list:nth-child(2n) {
    margin-right: 0;
}
.add_blog_btn {
    text-align: right;
    margin-bottom: 25px;
}
.add_blog_btn a {
    background: #a9c21b;
    color: #fff !important;
    text-decoration: none;
    padding: 10px 20px;
    display: inline-block;
}
.csv_btn {
    text-align: left;
    margin-bottom: 25px;
}
.csv_btn a {
    background: #1b56c2;
    color: #fff !important;
    text-decoration: none;
    padding: 10px 20px;
    display: inline-block;
}
.read_more_btn a {
    background: #a9c21b;
    color: #fff !important;
    text-decoration: none;
    padding: 10px 20px;
    display: inline-block;
}
.read_more_btn {
    padding: 0px 20px 30px 20px;
    text-align: left;
}
.blog_img {
    position: relative;
    min-height: 300px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
}
.blog_img:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.1);
}
.blog_img .blog_date span {
    width: 100%;
    font-size: 34px;
    font-weight: 500;
    display: inline-block;
}
.blog_img .blog_date {
    position: absolute;
    right: 0;
    bottom: 0;
    background: #bad80a;
    color: #fff;
    padding: 15px 5px 15px 5px;
    font-size: 16px;
    border-radius: 12px 0px 0px 0px;
    width: 98px;
    height: 98px;
    text-align: center;
}
.blog_img .blog_date span {
    line-height: 1.2;
}
.blog_content .blog_title {
    margin-top: 15px;
    font-size: 21px;
    line-height: 1.3;
    padding-bottom: 0;
    margin-bottom: 0px;
	text-transform: capitalize;
}
.blog_img .permision {
    position: absolute;
    left: 0;
    bottom: 0;
    background: #000;
    color: #fff;
    padding: 4px 18px;
    text-transform: uppercase;
    font-family: 'Montserrat';
    letter-spacing: 0.5px;
    font-size: 13px;
    font-weight: 500;
}
.blog_list .blog_content .waste_type, .blog_list .blog_content .service_type {
    color: #7e920f;
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 0;
    text-decoration: none;
    margin-top: 15px;
    display: inline-block;
    background: #f9f9f9;
    padding: 7px 18px;
    border-radius: 30px;
    margin-right: 10px;
}
.waste_material_detail {
    margin-bottom: 25px;
}
.blog_content .blog_type a {
    color: #7e920f;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 0;
    text-decoration: none;
    margin-top: 20px;
    display: inline-block;
}
.blog_list {
    flex: 0 0 48%;
    max-width: 48%;
    margin-right: 4%;
    box-shadow: 2px 4px 20px rgba(0,0,0,0.1);
    border-radius: 30px;
    overflow: hidden;
    margin-bottom: 40px;
}
.blog_list .blog_content {
    padding: 5px 20px 10px 20px;
}

/**********blog page css ends**********/


/**********blog single page css start**********/

.single-post #main-content .container {
    max-width: 1170px !important;
}
.single-post article.et_pb_post .et_post_meta_wrapper img {
    max-width: 60%;
}
/**********blog single page css ends**********/


.dashnavwrap .tab-content .form-group.save-btnfrmgrp #save_changes, .dashnavwrap .tab-content .form-group.save-btnfrmgrp .saveNavPublish, .form-group.save-btnfrmgrp button#publish_icon {
    background: #a9c21b;
    color: #fff !important;
    text-decoration: none;
    padding: 8px 25px;
    display: inline-block;
    border-radius: 0;
}
.dashnavwrap .tab-content .form-group.save-btnfrmgrp #save_preview, .dashnavwrap .tab-content .form-group.save-btnfrmgrp .savepreview, .form-group.save-btnfrmgrp button#preview_icon {
    background: #333333;
    color: #fff !important;
    text-decoration: none;
    padding: 8px 25px;
    display: inline-block;
    border-radius: 0;
    margin-left: 10px;
}

#blogMessage{
	display:none;
}

#loader {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.5);
	z-index: 99999;
	display:none;
}
#loader img {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
}


@media (max-width: 767.98px){
    .dashnavwrap .tab-content .form-group label {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 10px;
    }
    .navgtn-list-form ul.ui-sortable {
        padding-left: 0;
    }
    .blog_list {
        flex: 0 0 100%;
        max-width: 100%;
        margin-right: 0;
    }
    .dashnavwrap .tab-content {
        padding: 15px 15px;
    }
    .blog_img .blog_date {
        font-size: 14px;
        width: 84px;
        height: 84px;
    }
    .blog_img .blog_date span {
        font-size: 28px;
    }
}

@media (max-width: 575.98px){
    .icon-txt-wrp {
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
    }
    .navgtn-list-form ul li {
        flex-wrap: wrap;
        justify-content: center;
    }
    .icon-txt-wrp > span.nav-list-text {
        flex: 0 0 100%;
        max-width: 100%;
        display: flex;
        justify-content: center;
        margin: 20px 0;
    }
    .navgtn-list-form ul li .icon-img {
        margin-right: 0;
    }
    .form-group.save-btnfrmgrp button {
        margin-top: 10px;
        width: 100%;
    }
    .frm_inpt_nd_btn {
        flex-wrap: wrap;
    }
    .form-grp-inpt .form-btn-group {
        flex: 0 0 100%;
        max-width: 100%;
        justify-content: space-between;
        margin-top: 15px;
    }
    .form-grp-inpt .upload-btn-wrapper button.btn, button.rstbtn {
        margin-left: 0;
    }
    .form-grp-inpt .form-btn-group button, .form-grp-inpt .form-btn-group .upload-btn-wrapper {
        flex: 0 0 48%;
        max-width: 48%;
    }
    .form-grp-inpt .form-btn-group .upload-btn-wrapper button.btn {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
        margin: 0 !important;
    }
    .dashnavwrap ul.nav li.nav-item {
        width: 100%;
    }
    .dashnavwrap ul.nav button.nav-link {
        width: 100%;
        text-align: left;
    }
}

/* modal css start */
	.modal {
		top: 40px !important;
	}

	.modal.is-visible {
		display: block;
	}

	.modal-overlay {
	  position: fixed;
	  z-index: 10;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background: hsla(0, 0%, 0%, 0.5);
	  visibility: hidden;
	  opacity: 0;
	  transition: visibility 0s linear 0.3s, opacity 0.3s;
	}

	.modal.is-visible .modal-overlay {
	  opacity: 1;
	  visibility: visible;
	  transition-delay: 0s;
	}

	.modal-wrapper {
	  position: absolute;
	  z-index: 9999;
	  top: 6em;
	  left: 50%;
	  width: 32em;
	  margin-left: -16em;
	  background-color: #fff;
	  box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35);
	}

	.modal-transition {
	  transition: all 0.3s 0.12s;
	  transform: translateY(-10%);
	  opacity: 0;
	}

	.modal.is-visible .modal-transition {
	  transform: translateY(0);
	  opacity: 1;
	}

	.modal-header,
	.modal-content {
	  padding: 1em;
	}

	.modal-header {
	  position: relative;
	  background-color: #fff;
	  box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.06);
	  border-bottom: 1px solid #e8e8e8;
	}

	.modal-close {
	  position: absolute;
	  top: 0;
	  right: 0;
	  padding: 1em;
	  color: #aaa;
	  background: none;
	  border: 0;
	}

	.modal-close:hover {
	  color: #777;
	}

	.modal-heading {
	  font-size: 1.125em;
	  margin: 0;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	}

	.modal-content > *:first-child {
	  margin-top: 0;
	}

	.modal-content > *:last-child {
	  margin-bottom: 0;
	}
/* modal css end */

#preview {
	background: red;
	border: 1px solid green;
}
.flex-right {
	justify-content: center;
	display: flex;
	flex-wrap: wrap;
}
.imgUpload{
	display:none;	
}
.flex-right .imgUpload {
	flex: 0 0 100%;
	max-width: 200px;
	background: #a9c21b;
	color: #fff;
	border-radius: 0;
	padding: 10px 30px;
	margin: 0 15px;
    margin-top: 20px; 
}
.flex-right #jcrop {
	flex: 0 0 100%;
	justify-content: center;
	display: flex;
	margin-bottom: 0px;
}


.jcrop-holder{direction:ltr;text-align:left;}
.jcrop-vline,.jcrop-hline{background:#FFF url(Jcrop.gif);font-size:0;position:absolute;}
.jcrop-vline{height:100%;width:1px!important;}
.jcrop-vline.right{right:0;}
.jcrop-hline{height:1px!important;width:100%;}
.jcrop-hline.bottom{bottom:0;}
.jcrop-tracker{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;height:100%;width:100%;}
.jcrop-handle{background-color:#333;border:1px #EEE solid;font-size:1px;height:7px;width:7px;}
.jcrop-handle.ord-n{left:50%;margin-left:-4px;margin-top:-4px;top:0;}
.jcrop-handle.ord-s{bottom:0;left:50%;margin-bottom:-4px;margin-left:-4px;}
.jcrop-handle.ord-e{margin-right:-4px;margin-top:-4px;right:0;top:50%;}
.jcrop-handle.ord-w{left:0;margin-left:-4px;margin-top:-4px;top:50%;}
.jcrop-handle.ord-nw{left:0;margin-left:-4px;margin-top:-4px;top:0;}
.jcrop-handle.ord-ne{margin-right:-4px;margin-top:-4px;right:0;top:0;}
.jcrop-handle.ord-se{bottom:0;margin-bottom:-4px;margin-right:-4px;right:0;}
.jcrop-handle.ord-sw{bottom:0;left:0;margin-bottom:-4px;margin-left:-4px;}
.jcrop-dragbar.ord-n,.jcrop-dragbar.ord-s{height:7px;width:100%;}
.jcrop-dragbar.ord-e,.jcrop-dragbar.ord-w{height:100%;width:7px;}
.jcrop-dragbar.ord-n{margin-top:-4px;}
.jcrop-dragbar.ord-s{bottom:0;margin-bottom:-4px;}
.jcrop-dragbar.ord-e{margin-right:-4px;right:0;}
.jcrop-dragbar.ord-w{margin-left:-4px;}
.jcrop-light .jcrop-vline,.jcrop-light .jcrop-hline{background:#FFF;filter:alpha(opacity=70)!important;opacity:.70!important;}
.jcrop-light .jcrop-handle{-moz-border-radius:3px;-webkit-border-radius:3px;background-color:#000;border-color:#FFF;border-radius:3px;}
.jcrop-dark .jcrop-vline,.jcrop-dark .jcrop-hline{background:#000;filter:alpha(opacity=70)!important;opacity:.7!important;}
.jcrop-dark .jcrop-handle{-moz-border-radius:3px;-webkit-border-radius:3px;background-color:#FFF;border-color:#000;border-radius:3px;}
.solid-line .jcrop-vline,.solid-line .jcrop-hline{background:#FFF;}
.jcrop-holder img,img.jcrop-preview{max-width:none;}
#canvas{width: 50%;}