#wrapper{overflow:hidden}

.m_bot { margin-bottom:20px !important; }
.no_pad { padding:0 !important; }
.theme-btn,
.btn { cursor:pointer; width: 100%; font-weight:500; font-size:13px; line-height: 17px; background: #36344d; display: block; padding: 10px; text-align: center; color: #fff; text-transform: uppercase; border-radius: 5px; }
.theme-btn:hover, .theme-btn:focus, .btn:focus,
.btn:hover { background: #36344d; opacity:0.8; color:#fff; }

.theme-btn { width:auto; display: inline-block; min-width:150px; }
.hide { display:none; }
.card.mb-4.shadow-sm.d-flex.row_direction {flex-direction: row;}
.card.mb-4.shadow-sm.d-flex.row_direction img {max-width: 258px;height: 258px;object-fit: cover;border-radius: 3px;}
.m-color { background:#36344d; }

p { color:#727586; font-size: 16px; line-height: 170%;}
h3 { color:#2c2c2c; font-size: 18px; line-height: 120%; font-weight: 700; }
h4 { color:#000; font-weight:600;}
h1 { font-size:25px; font-weight: 800; border-bottom:1px solid #ccc; padding:0 0 10px; margin:0 0 25px; }

body { background:url(../images/bg-ptrn.jpg) no-repeat 0 0; background-size:cover; }

/*=== HEADER ===*/
#header { background:#36344d; padding:15px 40px; position: fixed; top:0; left: 0; width: 100%; z-index: 10; display: flex; justify-content: space-between; align-items: center; }
#header .branding figure { margin:0; }
#header .branding img{width:100%;max-width:180px}
.navigation-area { padding: 0 20px }
.navigation-area li { display: inline-block; }
.navigation-area ul li a { color:rgb(255 255 255 / 70%); padding:0 10px;display:block;font-size:14px; }
.navigation-area ul li a:hover,
.navigation-area ul li.active a { color:#fff; }
.navigation-area ul li a i { padding:0 10px 0 0 }

.dropdown {position: relative; display: inline-block;}
table#user_data {width: 15px;}

.dropdown-toggle { text-decoration: none; color: #333; padding: 8px 16px; display: inline-block; }
.dropdown-toggle:hover { background-color: #ddd; }



/*my css*/

.hero-wrap .hero-mask.opacity-8 {background: #591659 !important; }
.welcome_hdn { margin-top: 65px !important; }


/* Hide dropdown menu by default */
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #36344d;
    min-width: 160px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Show dropdown menu on hover */
.dropdown:hover .dropdown-menu {
    display: block;
}

.dropdown-menu li a {
    font-size: 13px !important;
}
.dropdown-menu li {
    list-style: none;
    padding: 8px 3px;
}

.dropdown-menu li a {
    color: #333;
    text-decoration: none;
}

li.dropdown a:hover {
    background-color: transparent;
}

.profile-box { position:relative; }
.profile-box .user-avatar { display: flex; align-items: center; margin:0; }
.profile-box .user-avatar .phn { margin: 0 10px 0 0; color: rgb(0 0 0 / 70%); border:1px solid rgb(233 233 233); background: rgb(233 233 233); border-radius: 50px; padding: 8px 15px; font-size: 12px; display: inline-block; }
.profile-box .user-avatar .phn i { padding: 0 5px 0 0; }
.profile-box .user-avatar .phn:hover { opacity:0.7; }
.profile-box .user-avatar img{height:35px;width:35px;border-radius:50%;background:#eaedf7;}
.profile-box .profile-detail{position:absolute;top:50px;right:0;background:#ffffff;padding:15px;text-align:left;box-shadow:0 0 10px 0 rgb(0 0 0 / 8%);border-radius:8px;display:none;width: 100%; min-width: 315px;}
.profile-box .profile-detail figure.user-avatar img{width:100%;height:100%;border-radius:5px;}
.profile-box .profile-detail .profile-info h2{font-size:17px;color:#2d314c; margin: 0 0 5px; }
.profile-box .profile-detail .profile-info h2 span{display:block;font-size:13px;color:#a1a4b5;margin:5px 0 0;}
.profile-box .profile-detail .profile-info p { font-size:14px; color:#a1a4b5; margin: 0 0 5px; }
.profile-box .profile-detail .profile-info p a{color:#2b2b6c;}
.profile-box .profile-detail .profile-info .theme-btn{ font-size:11px; }
.profile-box .profile-detail .profile-info .theme-btn i{margin:0 7px 0 0;}
.profile-box .profile-detail .row{align-items:center;}
/*=== HEADER END HERE ===*/


.dashboard { background:#eaedf7; height: 100%;width:100%; position: relative; margin:95px 0; }

.box{ padding:20px; background:#fff; border-radius:8px; border: 1px solid #dad9da; overflow:hidden;}

.no_plan { text-align:center; padding:50px; }
.no_plan .label_tag { background:#fc5185; display:inline-block; padding: 4px 8px; line-height: 1rem; font-size: 12px; font-weight: 700; color: #fff; border-radius: 3px; }
.no_plan .p_price { display:block; font-weight: 700; font-size: 50px; line-height: 48px; margin: 10px 0; }
.no_plan .p_price small { font-size: 30%; text-transform: uppercase; line-height: 100%; margin: 5px 0 0; display: block; }
.no_plan h3 { font-size: 32px; letter-spacing: -1px; margin: 0 0 15px; }

.p_box .p_head h5 { color:#000; font-size: 16px; line-height: 24px; font-weight: 700; }
.p_box p { margin:15px 0;line-height:170%;}
.p_box table { width: 100% !important; margin:15px 0; color: #a1a4b5; font-size: 13px; } 
.p_box th { padding:10px 15px; border: 1px solid #dad9da; font-weight: 600; color: #000; }
.p_box td { padding:10px 15px; border: 1px solid #dad9da; }

.head_box { padding:0; }
.head_box .p_head h5 { padding: 16px 25px; font-size:18px; border-bottom: 1px solid #dad9da; margin:0; }
.head_box .p_cont ul li { padding:12px 25px 12px 70px; border-top: 1px dashed #dad9da; position:relative; display: flex; align-items:center; justify-content: space-between; flex-wrap: wrap; }
.head_box .p_cont ul li:before { content:""; display:block; position:absolute; top:15px; left:25px; width:30px; height:30px; background:url(../images/logo-icon.png) no-repeat; background-size:contain; }
.head_box .p_cont ul li:first-child { border:0; }
.head_box .p_cont ul li h3 { margin:0; font-size:16px; min-width: 200px; text-transform:capitalize; }
span.dm_expr { display: block; color: #000; font-size: 11px; font-weight: 400; background: #ffa8a8; padding:5px 10px; text-align: center; text-transform: uppercase; border-radius: 4px; margin: 5px 0 0; }
.head_box .p_cont ul li h3 a { display:block; }
.head_box .p_cont ul li .btn { min-width:120px; font-size: 12px; width:auto; display: inline-block; }

.view_p_dtl{ display:none; }

#admin_panel table { margin:0 0 10px; border-collapse: collapse; }
#admin_panel table td { padding:8px 10px; color:#000; font-size: 12px;  }
#admin_panel table td:last-child { text-align: center; }
#admin_panel table tr.cmnt_r.odd { background: #dffcff; }
#admin_panel table td h3 { margin:0; font-size:14px; }
#admin_panel table td span { display: inline-block; margin: 2px 0; padding:5px 10px;  background: #f6ffa8; font-size: 11px; }
#admin_panel table td .btn { font-size: 12px; padding: 5px 8px; display: initial; }
#admin_panel #user_data_wrapper label { font-size: 13px; margin: 0 0 15px; text-transform: uppercase; }
#admin_panel #user_data_wrapper a.paginate_button { line-height: 15px; font-size: 13px; }
#admin_panel .dataTables_info { font-size: 13px; text-transform: uppercase; }
.in_pro_st { background: #f6ffa8 !important; text-align:center; }
.cm_pro_st { background: #c5ffc1 !important; text-align:center; }
.un_pro_st { background: #ffd9d9 !important; text-align:center; }
.hold_pro_st { background: #ccc !important; text-align:center; }
.cls_pro_st { background: #ccc !important; text-align:center; }
#admin_panel .filter_head { margin:0 0 15px; display: flex; justify-content: space-between; gap: 20px; }
#admin_panel .filter_head select { font-size:13px; border: 1px solid #dad9da; padding: 10px; }
.pkg_clone { position:relative; }
.pkg_clone .cls_pkg { position: absolute; top: 0; right: 0; background: #272262; color: #fff; width: 30px; height: 30px; text-align: center; border-radius: 0 8px 0 0; line-height: 30px; }

.view_p_dtl { width: 100%; background: #e9edf7; padding: 10px; margin: 10px 0 0; border-radius: 3px; }
.view_p_dtl p { margin: 0; color: #000; font-size: 13px; }

/*=== PACKAGE PAGE CSS ===*/
#pkg_pg .no_plan { padding:20px; }
#pkg_pg .box.seo_pkg { padding: 18px 30px; }
.pkg_tab { display:flex; justify-content: space-between; margin: 0 0 20px; border-radius:5px; border: 1px solid #dad9da; background: #fff; overflow:hidden; }
.pkg_tab a { display: block; width: 100%; border-left: 1px solid #dad9da; text-align: center; padding: 10px; font-size: 13px; text-transform: uppercase; font-weight: 600; }
.pkg_tab a:first-child { border:0; }
.pkg_tab a.active, .pkg_tab a:hover { background:#36344d; color:#fff; }
.pricing_list { margin:20px 0; list-style-type: none; max-height: 150px; overflow: hidden; overflow-y: scroll; }
.pricing_list li { position:relative; font-size: 13px; font-weight: 400; line-height: 1.2; padding: 5px 0 5px 20px; text-align:left; }
.pricing_list li:before { content: "\f00c"; color: #d90a2c; position:absolute; top:7px; left:0; font-size: 11px; font-family:FontAwesome; }
.pricing_list li i { color: #d90a2c; font-size: 11px; margin:0 10px 0 0; }
.price-acrd	{  text-align:left; }
.price-acrd .morefeat p { margin:20px 0 10px; }
.price-acrd .checklist li { font-size:13px; line-height:25px; }
.current_plan { background: #36344d !important; position:relative; padding-top:25px; }
.current_plan:before { content: "CURRENT PLAN"; position: absolute; top: 0; left: 0; text-align: center; color: #fff; background: #ff3f7c; font-weight: 800; font-size: 12px; right: 0; }
.current_plan * { color: #fff !important; }
.current_plan .btn { background: #000; }
.ht-165 { min-height: 185px; margin: 0 0 15px; padding: 10px; }
.seo_pnl_list { position:relative; }
.seo_pnl_list span { color: #fff; font-size: 10px; text-transform: uppercase; font-weight: 600; padding: 6px 20px; display:block; }   
.seo_pnl_list li { border: 1px solid #ccc; padding: 8px; font-size: 13px; margin: 0 0 -1px -1px; font-weight:500; }
.seo_pkg .col-sm-3 { padding:0; }
/*=== PACKAGE PAGE CSS END ===*/

/*=== PROJECT DETAIL CSS ===*/
#pro_dtl_head h1 { display: flex; justify-content: space-between; align-items: center; }
#pro_dtl_head ul { display: flex; flex-wrap: wrap; align-items: flex-start; }
#pro_dtl_head ul li { position: relative; font-size: 12px; text-transform: uppercase; font-weight: 400; line-height: 1.2; padding:5px 8px 5px 25px; text-align: left; background: #fff; border-radius: 4px; border: 1px solid #dad9da; overflow: hidden; margin: 5px 5px; }
#pro_dtl_head ul li:before { content: "\f00c"; color: #d90a2c; position: absolute; top: 7px; left: 8px; font-size: 11px; font-family: FontAwesome; }
#pro_dtl_head .p_sts { text-align:left; }

.form-box h4 { margin:0; color:#fff; font-size:18px;font-weight:500; background: #36344d; padding: 10px; border-radius:5px; cursor:pointer; }
.form-box h4:hover { opacity:0.9; }
.form-box #cmnt_frm { margin:20px 0 0; display:none; }
.form-box label{font-size:13px;display:block;margin:0 0 5px;color:#0E0E23;font-weight:500;}
.form-box .form-control { box-shadow:none; background-color:#f6f9fb; border-color: #dad9da; height:auto; margin-bottom:1rem; padding:10px;     font-size: 13px; }
.form-box h4 i{margin:0 12px 0 0;}
.form-box textarea.form-control {min-height: 200px;}
figure.profile_pic { margin: 0 auto 10px; display: block; max-width: 120px; border-radius: 8px; border: 1px solid #dad9da; }

.single-comment{margin:15px 0;position:relative;}
.b_bg { background: #dedcff !important; }
.single-comment .comment-actions{position:absolute;right:30px;}
.single-comment .comment-actions ul{position:absolute;top:32px;right:0;background:#fff;box-shadow:0 0 10px 0 rgb(0 0 0 / 8%);padding:8px;width:120px;border-radius:5px;}
.single-comment .comment-actions .edit-comment{padding:10px;display:block;color:#000;}
.single-comment .comment-actions ul li{display:block;}
.single-comment .comment-actions ul li a{color:#a1a4b5;font-size:12px;}
.single-comment .comment-actions ul li a i{margin:0 2px 0 0;}
.single-comment .comment-body .comment-head ul{display:flex;align-items:center}
.single-comment .comment-body .comment-head label{background:#24243e;border-radius:50%;width:50px;height:50px;text-align:center;display:flex;justify-content:center;align-items:center;color:#fff}
.single-comment .comment-body .comment-head h4{font-size:14px;margin:0 10px}
.single-comment .comment-body .comment-head span{font-size:10px}
.comment-body .comment{margin:10px 0}
.comment-body .comment p{ font-weight:300;color:#000}
.attachment-area h4{color:#646568;font-weight:400;font-size:12px;text-transform:capitalize;}
.attachment-area figure{display:flex;align-items:center;background:rgb(232 235 245 / 50%);max-width:180px;border-radius:2px;overflow:hidden;margin:10px 0 0;padding:0 20px 0 0;}
.attachment-area figure figcaption{font-size:12px;margin:0 0 0 8px;text-transform:capitalize;}
.attachment-area figure img{max-width:60px;width:100%;height:100%;max-height:60px;object-fit:cover;}
.attachment-area{position:relative;display:inline-block;}
.attachment-area .delete-file{position:absolute;top: 42px;right:3px;background:#fff;box-shadow:0 0 10px 0 rgb(0 0 0 / 8%);padding:5px;width: 110px;border-radius:5px;display:none;}
.attachment-area .delete-file a{color:#a1a4b5;font-size:12px;display: block;padding: 3px 5px;}
#getcommentaction { display: none;}
.attachment-area .edit-attachement {position: absolute;right: 0px;top: 28px;font-size: 12px;padding: 0 10px;}

.mdl_pp { display:none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgb(0 0 0 / 70%); z-index: 11; }
.mdl_wrpr { display: flex; justify-content: center; align-items: center; height: 100%; }
.mdl_wrpr .form-box { max-width: 700px; position:relative; }
.mdl_wrpr a.cls_pkg { position: absolute; top: 0px; right: -1px; background: #272262; color: #fff; min-width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 0 10px 0 0; }
.mdl_wrpr .form-box textarea.form-control { min-height: 90px; }
#leads_mdl .mdl_wrpr .form-box { max-width:900px; }
#leads_mdl .mdl_wrpr .form-box label { font-size: 12px; margin-bottom:3px; }
.form-box .form-control.rdOnly { background: #e9e9e9; cursor: default; pointer-events: none; }

.pkg_detail { padding: 5px; }
.richText .richText-editor { height:150px; }
.pkg_detail .richText { font-size:13px; }
.pkg_detail .richText ol li { list-style-type: decimal; }
.pkg_detail .richText ul li { list-style-type: disc; }
/*
.pkg_detail ul { display: flex; flex-wrap: wrap; align-items: flex-start; }
.pkg_detail ul li { position: relative; font-size: 12px; text-transform: uppercase; font-weight: 400; line-height: 1.2; padding:5px 8px 5px 25px; text-align: left; background: #fff; border-radius: 4px; border: 1px solid #dad9da; overflow: hidden; margin: 5px 5px; }
.pkg_detail ul li:before { content: "\f00c"; color: #d90a2c; position: absolute; top: 7px; left: 8px; font-size: 11px; font-family: FontAwesome; }
*/

#assign_box { position:relative; background: #ecf2ff; box-shadow: inset 0 0 30px #b9b8ff; border:1px solid #b9c2ff; }
#assign_box .box_pkg { position: absolute; top: 5px; right: 10px; cursor:pointer; }
#assign_box p { margin:0 0 10px; font-weight: 400; color: #000; font-size: 15px; }
#assign_box .theme-btn { font-size: 12px; padding: 10px 20px; }
#cmpln_box { display:none; padding:20px 25px 25px; }

.pro_clone { position: relative; }
.pro_clone a.cls_asn { position: absolute; top: 0; right: 0; background: #272262; height: 40px; min-width: 40px; color: #fff; text-align: center; line-height: 40px; border-radius: 0 6px 6px 0; }

#exc_dtl_mdl table th,
#exc_dtl_mdl table td { min-width: 200px; padding: 8px 10px; color: #000; font-size: 12px; text-transform: uppercase; border: 1px solid #dad9da; }

/*=== PROJECT DETAIL CSS END ===*/


/*=== LOGIN PAGE CSS ===*/
.oxyy-login-register .hero-wrap {position: relative; overflow: hidden;}
.hero-content h1 {font-size: 44px; font-weight: 500;}
#main-wrapper.oxyy-login-register{background:#fff;}
.oxyy-login-register .hero-wrap .hero-mask,.oxyy-login-register .hero-wrap .hero-bg,.oxyy-login-register .hero-wrap .hero-bg-slideshow{position:absolute;top:0;left:0;height:100%;width:100%;}
.oxyy-login-register .hero-wrap .hero-mask{z-index:1;}
.oxyy-login-register .hero-wrap .hero-content{position:relative;z-index:2;}
.oxyy-login-register .hero-wrap .hero-particles{position:absolute;width:100%;height:100%;z-index:3;}
.oxyy-login-register .hero-wrap .hero-bg-slideshow{z-index:0;}
.oxyy-login-register .hero-wrap .hero-bg{z-index:0;background-attachment:fixed;background-position:center center;background-repeat:no-repeat;background-size:cover;-webkit-background-size:cover;-moz-background-size:cover;transition:background-image 300ms ease-in 200ms;}
.oxyy-login-register .hero-wrap .hero-bg.hero-bg-scroll{background-attachment:scroll;}
.oxyy-login-register .hero-wrap .hero-bg-slideshow .hero-bg{background-attachment:inherit;}
.oxyy-login-register .hero-wrap .hero-bg-slideshow.owl-carousel .owl-stage-outer,.oxyy-login-register .hero-wrap .hero-bg-slideshow.owl-carousel .owl-stage,.oxyy-login-register .hero-wrap .hero-bg-slideshow.owl-carousel .owl-item{height:100%;}
.oxyy-login-register .nav .nav-item .nav-link{color:#444;}
.oxyy-login-register .nav.nav-light .nav-item .nav-link{color:#ddd;}
.oxyy-login-register .nav:not(.nav-pills) .nav-item .nav-link.active,.oxyy-login-register .nav:not(.nav-pills) .nav-item .nav-link:hover{color:#0d6efd;}
.oxyy-login-register .nav-pills .nav-link:not(.active):hover{color:#0d6efd;}
.oxyy-login-register .nav-pills .nav-link.active,.oxyy-login-register .nav-pills.nav-light .nav-link.active,.oxyy-login-register .nav-pills .show > .nav-link{color:#fff;}
.oxyy-login-register .nav.nav-separator .nav-item .nav-link{position:relative;}
.oxyy-login-register .nav.nav-separator .nav-item + .nav-item .nav-link:after{height:14px;width:1px;content:' ';background-color:rgba(0,0,0,0.2);display:block;position:absolute;top:50%;left:0;-webkit-transform:translateY(-7px);transform:translateY(-7px);}
.oxyy-login-register .nav.nav-separator.nav-separator-light .nav-item + .nav-item .nav-link:after{background-color:rgba(250,250,250,0.2);}
.oxyy-login-register .nav.nav-sm .nav-item .nav-link{font-size:14px;}
.oxyy-login-register .opacity-8{opacity:.8;}
.oxyy-login-register .text-4{font-size:18px!important;font-size:1.125rem!important;}
.oxyy-login-register .fw-600{font-weight:600!important;}
.oxyy-login-register .form-control:not(.form-control-sm){padding:.81rem .96rem;height:inherit;}
.oxyy-login-register .btn:not(.btn-link){-webkit-box-shadow:0 5px 15px rgba(0,0,0,0.15);box-shadow:0 5px 15px rgba(0,0,0,0.15);}
.oxyy-login-register .btn{padding:.8rem 2.6rem;font-weight:500;-webkit-transition:all .5s ease;transition:all .5s ease;}
.oxyy-login-register a,a:focus{color:#0d6efd;text-decoration:none;-webkit-transition:all .2s ease;transition:all .2s ease;}
.oxyy-login-register a:hover,.oxyy-login-register a:active{color:#025bdf;-webkit-transition:all .2s ease;transition:all .2s ease;}
.oxyy-login-register .form-control{border-color:#dae1e3;font-size:16px;color:#656565;border-color:#dae1e3;font-size:16px;color:#656565;}
.oxyy-login-register .form-control.bg-light{background-color:#f5f5f6!important;}
.oxyy-login-register .form-control.border-light{border-color:#f5f5f6!important;}
.oxyy-login-register .form-control:not(.form-control-sm){padding:.81rem .96rem;height:inherit;}
.oxyy-login-register .form-control-sm{font-size:14px;}
.oxyy-login-register .icon-group{position:relative;}
.oxyy-login-register .icon-group .form-control{padding-left:44px;}
.oxyy-login-register .icon-group .icon-inside{position:absolute;width:50px;height:54px;left:0;top:0;pointer-events:none;font-size:18px;font-size:1.125rem;color:#c4c3c3;z-index:3;display:flex;-ms-flex-align:center!important;align-items:center!important;-ms-flex-pack:center!important;justify-content:center!important;}
.oxyy-login-register .icon-group.icon-group-end .form-control{padding-right:44px;padding-left:.96rem;}
.oxyy-login-register .icon-group.icon-group-end .icon-inside{left:auto;right:0;}
.oxyy-login-register .form-control-sm + .icon-inside{font-size:.875rem!important;font-size:14px;top:calc(50% - 13px);}
.oxyy-login-register select.form-control:not([size]):not([multiple]):not(.form-control-sm){height:auto;padding-top:.7rem;padding-bottom:.7rem;}
.oxyy-login-register .form-control:focus{-webkit-box-shadow:0 0 5px rgba(128,189,255,0.5);box-shadow:0 0 5px rgba(128,189,255,0.5);border-color:#80bdff!important;}
.oxyy-login-register .form-control:focus[readonly]{box-shadow:none;}
.oxyy-login-register .input-group-text{border-color:#dae1e3;background-color:#f1f5f6;color:#656565;}
.oxyy-login-register .form-control::-webkit-input-placeholder{color:#b1b4b6;}
.oxyy-login-register .form-control:-moz-placeholder{color:#b1b4b6;}
.oxyy-login-register .form-control::-moz-placeholder{color:#b1b4b6;}
.oxyy-login-register .form-control:-ms-input-placeholder,.oxyy-login-register .form-control::-ms-input-placeholder{color:#b1b4b6;}


#pkg_dtl .p_cont { padding: 20px; }
#pkg_dtl .p_cont table td, #pkg_dtl .p_cont table th { font-size: 15px; text-align:left; }
#pkg_dtl .p_cont table td span { padding: 10px; }


#projects {  }
.avatar { width:50px; }

form#checkoutForm { width: 40% !important; margin: 100px auto; padding: 40px 40px 40px 40px; box-shadow: 0px 0px 20px 0px #00000059; border-radius: 5px; }
form#checkoutForm p input, form#checkoutForm textarea#memo, form#checkoutForm select#customer_country { width: 100%; background-color: #fff; border: 1px solid #80808085; padding: 10px 10px; box-shadow: 0px 0px 2px 0px #adadad; border-radius: 5px; color: #838080; }
form#checkoutForm p input[type="submit"] { background: red; color: #fff; border: 0px; width: 20%; padding: 10px; border-radius: 25px; }
@media(max-width:1200px) and (min-width:1024px){
    form#checkoutForm { width: 75% !important; }
}
@media(max-width:1023px) and (min-width:768px){
    form#checkoutForm { width: 75% !important; }
    .card.mb-4.shadow-sm.d-flex.row_direction {flex-direction: column;}
    .card.mb-4.shadow-sm.d-flex.row_direction img {max-width: 100%;}
    #admin_panel .filter_head {justify-content: center;}
}
@media(max-width:767px){
    form#checkoutForm { width: 85% !important; padding: 40px 20px 40px 20px; }
    form#checkoutForm p input[type="submit"] { width: 40%; }
    .card.mb-4.shadow-sm.d-flex.row_direction {flex-direction: column;}
    .card.mb-4.shadow-sm.d-flex.row_direction img {max-width: 100%;}
}

.upload-form{ padding: 100px; }
.upload-image { display: flex; flex-direction: column; align-content: flex-start; align-items: flex-start; gap: 10px; width: max-content; padding: 20px 20px; margin-top: 30px; background: #36344d; color: #ffffff; }
.theme_info { display: flex; flex-direction: column; align-content: flex-start; align-items: flex-start; gap: 10px; width: max-content; padding: 20px 0px; margin-top: 30px; }
.theme_info textarea { background: #ffffff; padding: 15px; }
.upload-form button { background-color: #4CAF50; border: none; color: white; padding: 9px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; }
@media(max-width:370px){
    .change-password { display: flex; flex-direction: column; align-items: flex-start; align-content: flex-start; gap: 20px; }
    .change-password .text-end { text-align: left !important; }
}

.msger-chat .msg { display: flex; flex-wrap: nowrap; align-content: center; align-items: flex-start; justify-content: flex-start; }
.msg-text { padding: 10px 20px; background-color: #f9f9f9; border-radius: 10px; border-top-left-radius: 0px; margin-bottom: 30px; }
.msg-text p { margin: 0; }
.msg-img img { width: 40px; }
span.author-name { font-size: 18px; font-weight: 600; text-transform: capitalize; color: #000000; }
span.message-time { font-size: 12px; margin-left: 10px; font-weight: 300; color: #7a7a7a; }

/* Site logo */
.dashboard-site-logo { width: 100%; max-width: 180px; }
.dashboard-site-logo img { width:100%; }

#pre-build-section .form-box { margin-bottom:20px; padding: 8px; }
#pre-build-section .form-box img { border-radius: 5px; }
#pre-build-section .pre_bld_tab { display: flex; justify-content: space-between; }
#pre-build-section .pre_bld_tab a { background: #272262; color: #fff; display: inline-block; padding: 6px 20px; font-size: 14px; border-radius: 3px; min-width: 150px; text-align: center; }