string(96) "https://api.templatemonster.com/products/v2/products/en?language=en&ids=164145&expand=properties"
string(16595) "[{"templateId":164145,"typeId":86,"typeName":"Admin Template","typeUrl":"admin-templates","categoryId":346,"categoryName":"Software Company Templates","templateTitle":"Software Company Responsive Admin Template","templatePreviewHtmlTitle":"Gradient Able Reactjs Dashboard Admin Template","templateDemoHtmlTitle":"Live demo for Gradient Able Reactjs Dashboard Admin Template #164145","typeShortName":"Admin","templatePreviewFBTitle":"<h2><strong>Gradient Able ReactJS Admin Template</strong></h2><p>Gradient Able React Admin Dashboard Template is built using ReactJS. It fully supports React Hooks functionality with having the support of React Strap (i.e.Bootstrap 5) for any easy or complex dashboard need.</p><h3><strong>Technology Stack</strong></h3><p>Following are the technology we used to build Gradient able React Template. We used the latest technology for building this template.</p><ul><li><strong>React Hook</strong> - Users can use state and other React features without writing a class. It is new concept introduced in React 16.8.</li><li><strong>React Redux</strong> - It is an official React binding for Redux. Using this method you can read data from Redux store, Update data, and Dispatch data.</li><li><strong>Reactstrap</strong> - Using Reactstrap users can easily use Bootstrap 4 components.</li><li><strong>JWT</strong> - JSON Web Token (JWT) is a compact URL- which representing claims to be transferred between parties. JWT are encoded as a JSON object that is digitally signed using JWT and encrypted using JSON web Encryption</li><li><strong>Auth0</strong> - Auth0 is a flexible, drop-in solution to check the authentication of users in the app. It is easy to implement and authenticate.</li><li><strong>Firebase Auth</strong> - Firebase Authentication provides backend services, easy-to-use SDKs, and ready-made UI libraries to check the authenticity of users to your app.</li><li><strong>Create React App</strong> - Create React App provide a quick start of your React application. It saves time for installing and configuring. You have to simply run one command to create an App.</li></ul><h3><strong>Features</strong></h3><p>Here are the top features come with Gradient Able admin theme.</p><ul><li>11+ Page layouts</li><li>Live customizer to choose what setting your project desire</li><li>Well structured code styles</li><li>Fully responsive and browser tested design</li><li>Eye-catchy Gradient warm color styles</li><li>Made for performance</li></ul><h3><strong>About Design</strong></h3><p>Pure eye-catchy and warm Gradient colors are used in Gradient Able Dashboard Template. More than 12+ preset color combinations come up with a template.</p><h3><strong>Layouts</strong></h3><ul><li>Default (Light)</li><li>Dark</li><li>Dark Light</li></ul><h3><strong>Layout setting presets</strong></h3><ul><li>Vertical</li><li>Horizontal</li><li>RTL</li><li>Box</li><li>Header fixed</li><li>Menu fixed</li><li>Collapse</li></ul><h3><strong>Chart</strong></h3><p>The dashboard needs a chart to highlight statistics data in your project. We've implemented more than 40+ charts with tons of various options.</p><p><strong>Chart types</strong></p><ul><li>Apex Chart</li><li>Chart JS</li><li>Highchart</li><li>Rechart</li></ul><p><strong>Maps</strong></p><ul><li>Google maps</li><li>Vector</li></ul><h3><strong>Responsive</strong></h3><p>Gradient Able design is fully responsive. The size can be adjusted according to screen size. It is compatible with every device (iPad, Tablet) and browser (Mozilla, Safari). We have improved Gradient Able design in various aspects like smooth rendering, easy scroll, reduce design glitch, etc…</p><h3><strong>Widgets</strong></h3><p>150+ ready to use widget collection like statistics, analytics, user cards, charts, tables, charts, data widgets, slider widgets.</p><h3><strong>Components</strong></h3><p>Gradient Able Admin Template comes with all Bootstrap basic components and also implemented third-party components listed below.</p><h3><strong>Advance components</strong></h3><ul><li>Sweet alert</li><li>Date Picker</li><li>Grid Helper</li><li>LightBox</li><li>Modal</li><li>Notification</li><li>Nestable</li><li>pNotify</li><li>Rating</li><li>Range Slider</li><li>Syntax Highlighter</li><li>Tour</li><li>Tree view</li><li>Toolbar</li></ul><h3><strong>Form Components</strong></h3><ul><li>Switches, Radio, Checkbox, Tags input, max length</li><li>Redux Form</li><li>Formik</li><li>Form Masking</li><li>Form Masking 2</li><li>Form Wizard</li><li>Form pickers, Datepicker, color picker</li><li>Select 2</li><li>React Dual List Box</li></ul><h3><strong>Tables</strong></h3><ul><li>Bootstrap Table</li><li>React Tables</li></ul><h3><strong>Performance</strong></h3><p>Performance is our key point before developing Gradient Able Admin Theme and we made it with lots of testing and efforts on code improvement.</p><h3><strong>App-Extensions</strong></h3><p>Gradient Able comes with a variety of 3rd party apps/extensions which directly usable in your project.</p><p><strong>App</strong></p><ul><li>Task</li><li>To-do</li><li>Gallery</li></ul><p><strong>Extensions</strong></p><ul><li>Editor, ckEditor, Tinymce</li><li>Invoice</li><li>Full Calendar</li><li>File upload</li><li>Image Cropper</li></ul><h3><strong>Flexibility</strong></h3><p>Design and code are fully flexible to use directly in your project setup via a Documentation helper.</p><h3><strong>Support</strong></h3><p>Separate support desk for quick resolution of your query.</p><h3><strong>Purchased Package Includes</strong></h3><p>- Live demo preview image is not included in the package</p><p>- Documentation</p><h3><strong>Resources-Credits</strong></h3><ul><li>ReactJS</li><li>React Redux</li><li>ReactStrap 4</li><li>Google Font</li></ul>","templateFullTitle":"Gradient Able Reactjs Dashboard Admin Template","templatePreviewMetaDescription":"Gradient Able ReactJS Admin TemplateGradient Able React Admin Dashboard Template is built using ReactJS. It fully supports React Hooks functionality with","templateDemoMetaDescription":"Explore the live preview for the top quality Gradient Able Reactjs Dashboard Admin Template (#164145) to get a better knowledge of what this design is before you buy it. Go through the pages, check the images, click the buttons, explore the functionality.","specificTemplateNameListing":null,"specificTemplateNamePreview":null,"anchorTitle":"Gradient Able Reactjs Dashboard Admin Template","anchorFeature":"Bootstrap","isInvertOrder":true,"isRTL":true,"anchorType":"","templateUrl":"/admin-templates/gradient-able-reactjs-dashboard-admin-template-164145.html","userRating":"5","designIndex":1,"authorUserId":"1572603","exclusive":"0","state":1,"price":39,"inserted_date":"2021-02-04","sent":0,"downloads":11,"search_words":"admin dashboard bootstrap admin template react admin react templates reactjs","is_adult":0,"exc_price":2100,"sent_date":"2021-02-05 00:12:30","last_upload":"2021-02-04 11:44:14","package_id":295,"hasExclusivePrice":1,"screenshots":[{"id":2247874,"templ_id":164145,"filename":"164145-original.png","width":1600,"height":1000,"href":"","window_params":"","scr_type_id":334,"banner_url":"","banner_open_url":"","banner_open_window_params":"","wide":0},{"id":2247875,"templ_id":164145,"filename":"164145-big.png","width":1600,"height":1000,"href":"","window_params":"","scr_type_id":311,"banner_url":"","banner_open_url":"","banner_open_window_params":"","wide":0},{"id":2247876,"templ_id":164145,"filename":"164145-med.jpg","width":370,"height":370,"href":"","window_params":"","scr_type_id":312,"banner_url":"","banner_open_url":"","banner_open_window_params":"","wide":0},{"id":2247877,"templ_id":164145,"filename":"164145-m.jpg","width":145,"height":156,"href":"","window_params":"","scr_type_id":9,"banner_url":"","banner_open_url":"","banner_open_window_params":"","wide":0},{"id":2247878,"templ_id":164145,"filename":"164145-b.jpg","width":430,"height":269,"href":"","window_params":"","scr_type_id":57,"banner_url":"","banner_open_url":"","banner_open_window_params":"","wide":0}],"demoUrl":"/demo/164145.html","image":"https://s.tmimgcdn.com/scr/164100/gradient-able-reactjs-dashboard-admin-template_164145-original.png","searchHash":"63241397b06bf2a54ccb2273a52d1a09","previewHash":"467c051059236fdcf969a0b519d1819f","authorNickname":"CodedThemes","lowLevelTopic":"Software Company Templates; Web Development Templates; Web Design Templates","weightedRating":4.25,"annualSale":2,"monthlySales":0,"quarterlySales":0,"productBoost":0,"onSale":0,"finalPrice":39,"discountPercent":0,"discountAmount":0,"semiannualSales":1,"properties":{"features":["Responsive","Admin Panel","Bootstrap","Retina Ready","Advanced Theme Options","HTML 5","JQuery"],"topic":["Software Company Templates","Web Development Templates","Software Templates","Web Design Templates","Design","Design & Photography","Computers & Internet"],"isFree":"none","color":["black","white","blue","cyan"],"showVariantForcibly":"b","exclusive":"0","authorUserId":"1572603","alreadyPacked":"1","imagesIncluded":"Yes","tags":["admin dashboard","bootstrap admin template","react admin","react templates","reactjs"],"marketplaceMembership":"None","nameOfTheTemplate":"Gradient Able Reactjs Dashboard Admin Template","shortDescription":"<h2><strong>Gradient Able ReactJS Admin Template</strong></h2><p>Gradient Able React Admin Dashboard Template is built using ReactJS. It fully supports React Hooks functionality with having the support of React Strap (i.e.Bootstrap 5) for any easy or complex dashboard need.</p><h3><strong>Technology Stack</strong></h3><p>Following are the technology we used to build Gradient able React Template. We used the latest technology for building this template.</p><ul><li><strong>React Hook</strong> - Users can use state and other React features without writing a class. It is new concept introduced in React 16.8.</li><li><strong>React Redux</strong> - It is an official React binding for Redux. Using this method you can read data from Redux store, Update data, and Dispatch data.</li><li><strong>Reactstrap</strong> - Using Reactstrap users can easily use Bootstrap 4 components.</li><li><strong>JWT</strong> - JSON Web Token (JWT) is a compact URL- which representing claims to be transferred between parties. JWT are encoded as a JSON object that is digitally signed using JWT and encrypted using JSON web Encryption</li><li><strong>Auth0</strong> - Auth0 is a flexible, drop-in solution to check the authentication of users in the app. It is easy to implement and authenticate.</li><li><strong>Firebase Auth</strong> - Firebase Authentication provides backend services, easy-to-use SDKs, and ready-made UI libraries to check the authenticity of users to your app.</li><li><strong>Create React App</strong> - Create React App provide a quick start of your React application. It saves time for installing and configuring. You have to simply run one command to create an App.</li></ul><h3><strong>Features</strong></h3><p>Here are the top features come with Gradient Able admin theme.</p><ul><li>11+ Page layouts</li><li>Live customizer to choose what setting your project desire</li><li>Well structured code styles</li><li>Fully responsive and browser tested design</li><li>Eye-catchy Gradient warm color styles</li><li>Made for performance</li></ul><h3><strong>About Design</strong></h3><p>Pure eye-catchy and warm Gradient colors are used in Gradient Able Dashboard Template. More than 12+ preset color combinations come up with a template.</p><h3><strong>Layouts</strong></h3><ul><li>Default (Light)</li><li>Dark</li><li>Dark Light</li></ul><h3><strong>Layout setting presets</strong></h3><ul><li>Vertical</li><li>Horizontal</li><li>RTL</li><li>Box</li><li>Header fixed</li><li>Menu fixed</li><li>Collapse</li></ul><h3><strong>Chart</strong></h3><p>The dashboard needs a chart to highlight statistics data in your project. We've implemented more than 40+ charts with tons of various options.</p><p><strong>Chart types</strong></p><ul><li>Apex Chart</li><li>Chart JS</li><li>Highchart</li><li>Rechart</li></ul><p><strong>Maps</strong></p><ul><li>Google maps</li><li>Vector</li></ul><h3><strong>Responsive</strong></h3><p>Gradient Able design is fully responsive. The size can be adjusted according to screen size. It is compatible with every device (iPad, Tablet) and browser (Mozilla, Safari). We have improved Gradient Able design in various aspects like smooth rendering, easy scroll, reduce design glitch, etc…</p><h3><strong>Widgets</strong></h3><p>150+ ready to use widget collection like statistics, analytics, user cards, charts, tables, charts, data widgets, slider widgets.</p><h3><strong>Components</strong></h3><p>Gradient Able Admin Template comes with all Bootstrap basic components and also implemented third-party components listed below.</p><h3><strong>Advance components</strong></h3><ul><li>Sweet alert</li><li>Date Picker</li><li>Grid Helper</li><li>LightBox</li><li>Modal</li><li>Notification</li><li>Nestable</li><li>pNotify</li><li>Rating</li><li>Range Slider</li><li>Syntax Highlighter</li><li>Tour</li><li>Tree view</li><li>Toolbar</li></ul><h3><strong>Form Components</strong></h3><ul><li>Switches, Radio, Checkbox, Tags input, max length</li><li>Redux Form</li><li>Formik</li><li>Form Masking</li><li>Form Masking 2</li><li>Form Wizard</li><li>Form pickers, Datepicker, color picker</li><li>Select 2</li><li>React Dual List Box</li></ul><h3><strong>Tables</strong></h3><ul><li>Bootstrap Table</li><li>React Tables</li></ul><h3><strong>Performance</strong></h3><p>Performance is our key point before developing Gradient Able Admin Theme and we made it with lots of testing and efforts on code improvement.</p><h3><strong>App-Extensions</strong></h3><p>Gradient Able comes with a variety of 3rd party apps/extensions which directly usable in your project.</p><p><strong>App</strong></p><ul><li>Task</li><li>To-do</li><li>Gallery</li></ul><p><strong>Extensions</strong></p><ul><li>Editor, ckEditor, Tinymce</li><li>Invoice</li><li>Full Calendar</li><li>File upload</li><li>Image Cropper</li></ul><h3><strong>Flexibility</strong></h3><p>Design and code are fully flexible to use directly in your project setup via a Documentation helper.</p><h3><strong>Support</strong></h3><p>Separate support desk for quick resolution of your query.</p><h3><strong>Purchased Package Includes</strong></h3><p>- Live demo preview image is not included in the package</p><p>- Documentation</p><h3><strong>Resources-Credits</strong></h3><ul><li>ReactJS</li><li>React Redux</li><li>ReactStrap 4</li><li>Google Font</li></ul>","lastmod":"2022-02-18T14:16:26-05:00","uniqueKeywords":"admin dashboard,bootstrap admin template,react admin,react templates,reactjs","advImage":"https://s3u.tmimgcdn.com/u1572603/dXPEYAZojsb4GoqgmAPG.png","affiliateSells":"1","authorMainScreenshot":"https://s3u.tmimgcdn.com/u1572603/VqhsSMHf2ZSQEbADef33.png","changeLog":"March 31, 2023 (v18.0.1)\r\n---------\r\nFix Build Issue\r\n\r\nFeb 07, 2023 (v18.0.0)\r\n---------\r\nPackage upgrades\r\n\r\nMay 24, 2022 (v17.0.4)\r\n---------\r\nPackage upgrades\r\nAdded prettier\r\n\r\nV17.0.1(31-01-2021)\r\n---------\r\ninitial release","imageKeyFeatures":"https://s3u.tmimgcdn.com/u1572603/Wy1wU4D9mIxhazNsqE2Y.jpg","livePreviewURL":"https://codedthemes.com/demos/admin-templates/gradient-able/react/default/","metaDescription":"Gradient Able ReactJS Admin TemplateGradient Able React Admin Dashboard Template is built using ReactJS. It fully supports React Hooks functionality with","saleSells":"1","templateSupportOptions":"[]","bitLyUrl":"https://bit.ly/3oHKsQU","customUrl":"/admin-templates/gradient-able-reactjs-dashboard-admin-template-164145.html","demoMetaDescription":"Explore the live preview for the top quality Gradient Able Reactjs Dashboard Admin Template (#164145) to get a better knowledge of what this design is before you buy it. Go through the pages, check the images, click the buttons, explore the functionality.","productSize":"34902987","paidSupport":"Yes","trendiness":"1","changeLogDate":"2023-03-31","frameworks":"React.js v17.x","webServerCompatibility":["Apache 2.4","Nginx 1.2x"],"generalSoftwareRequirements":["Code editing tool","ZIP unarchiver"],"excerpt":"Pure eye-catchy and warm Gradient colors are used in Gradient Able Dashboard Template. More than 12+ preset color combinations come up with a template.","reviewsTotal":"2","reviewAverageScore":"5","types":"Admin Templates","templateIcon":"icon-admin","productFamily":"None","templateGroup":"HTML Templates","category":"Website templates"}}]"
array(17) {
  [0]=>
  string(15) "HTTP/1.1 200 OK"
  [1]=>
  string(20) "Server: nginx/1.22.0"
  [2]=>
  string(35) "Date: Sun, 17 Nov 2024 16:50:12 GMT"
  [3]=>
  string(45) "Content-Type: application/json; charset=UTF-8"
  [4]=>
  string(17) "Connection: close"
  [5]=>
  string(130) "Access-Control-Expose-Headers: X-Pagination-Current-Page, X-Pagination-Page-Count, X-Pagination-Per-Page, X-Pagination-Total-Count"
  [6]=>
  string(12) "Vary: Accept"
  [7]=>
  string(27) "X-Pagination-Total-Count: 1"
  [8]=>
  string(26) "X-Pagination-Page-Count: 1"
  [9]=>
  string(28) "X-Pagination-Current-Page: 1"
  [10]=>
  string(25) "X-Pagination-Per-Page: 20"
  [11]=>
  string(293) "Link: <http://products/api/v2/products/en?language=en&ids=164145&expand=properties&page=1>; rel=self, <http://products/api/v2/products/en?language=en&ids=164145&expand=properties&page=1>; rel=first, <http://products/api/v2/products/en?language=en&ids=164145&expand=properties&page=1>; rel=last"
  [12]=>
  string(38) "Expires: Sun, 17 Nov 2024 16:55:12 GMT"
  [13]=>
  string(26) "Cache-Control: max-age=300"
  [14]=>
  string(16) "Direct_API: true"
  [15]=>
  string(22) "X-Cache-Status: BYPASS"
  [16]=>
  string(24) "X-Up: 165.227.251.218:80"
}
https://codedthemes.com/demos/admin-templates/gradient-able/react/default/<!DOCTYPE html>
<html lang="en">
<head>
    <title>#164145 Preview</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=11; IE=10; IE=9; IE=8;"/>
    <link rel="canonical" href="https://rms.templates.com/demo/164145.html">
    <link rel="stylesheet" type="text/css" href="/themes/theme-2018-v03-en/css/normalize.css"/>
    <link rel="stylesheet" type="text/css" href="/themes/theme-2018-v03-en/css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="/themes/theme-2018-v03-en/css/styles.css"/>
    <link rel="stylesheet" type="text/css" href="/themes/theme-2018-v03-en/css/demo.css"/>
    <link rel="stylesheet" type="text/css" href="/themes/theme-2018-v03-en/css/jquery.fancybox.css" />
    <link rel="icon" type="image/png" href="/themes/theme-2018-v03-en/images/favicon.png"/>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript" src="/themes/theme-2018-v03-en/js/jquery.form.js"></script>
    <script type="text/javascript" src="/themes/theme-2018-v03-en/js/jquery.validate.js"></script>
    <script type="text/javascript" src="/themes/theme-2018-v03-en/js/jquery.fancybox.js"></script>
    <script type="text/javascript" src="/themes/theme-2018-v03-en/js/demo-main.js"></script>
    <link rel="stylesheet" type="text/css" href="/themes/theme-2018-v03-en/css/fontello-embedded.css"/>
    <script charset="utf-8">
        //TODO: some strange value
        var min_height = 600;
        $(function () {
            resizeFrame();
        });
        function resizeFrame() {
            if (0 == 0
        )
            return false;
            var main_iframe = $('#preview');
            var height = $(window).height() - $('#preview-bar:visible').outerHeight();
            /* if ($.browser.opera)
                height += 5; */
            if (height < min_height)
                height = min_height;
            $('#preview').height(height);
            $('#iframelive').height(height);
            if ($(window).width() < 1400)
                $('#min-hide-this').hide();
            else
                $('#min-hide-this').show();
        }
        $(window).resize(function () {
            resizeFrame();
        }).load(function () {
            resizeFrame();
        });
        $(document).ready(function(){
            $('#close').click(function(e){
                e.preventDefault();
                $('#preview-bar').hide();
            });
        })
    </script>
    <script type="text/javascript">
        window.su = 'https://rms.templates.com/';
    </script>
    

    <script>
    $(function () {

    $('#frame_controls .device_item').click(function(){
            $(this).siblings().removeClass('device_current');
            $(this).addClass('device_current');
            var className = $(this).data('device');
            $('#showframe').attr('class', className);
            return false;
        });

    });
    </script>
    <style>
    /* Frame with demo-----  */

/* Desktop */
#showframe {
    width: 100%;
    margin: 0 auto;
    /*
    position: relative;
    z-index: 1;
    */
}
    #showframe .hide_wrap {
        overflow: hidden;
    }
    #showframe iframe {
        width: 100%;
        height: 100%;
        display:block;
        vertical-align: top;
    }

/* Tablet landscape */
#showframe.tab_land {
    margin-top: 30px;
    /*width: 1224px;*/
    width: 1200px;
    padding: 38px 103px 37px 85px;
    background: url(../images/tab_landscape.png) 0 0 no-repeat;
}
    #showframe.tab_land .hide_wrap {
        width: 1024px;
                height: 640px;
        -webkit-border-radius: 3px;
            -ms-border-radius: 3px;
                border-radius: 3px;
    }
    #showframe.tab_land .hide_wrap iframe {
        width: 1041px !important;
        height: 640px !important;
    }

/* Tablet portrait */
#showframe.tab_port {
    margin-top: 30px;
    /*width: 480px;*/
    width: 540px;
    padding: 65px 27px 78px 28px;
    background: url(../images/tab_portrait.png) 0 0 no-repeat;
}
    #showframe.tab_port .hide_wrap {
        width: 480px;
        height: 640px;
        -webkit-border-radius: 3px;
            -ms-border-radius: 3px;
                border-radius: 3px;
    }
    #showframe.tab_port .hide_wrap iframe {
    	width: 497px !important;
		height: 640px !important;
	}

/* Tablet mobile */
#showframe.mobile {
	margin-top: 30px;
	/*width: 320px;*/
	width: 360px;
	padding: 92px 19px 102px 19px;
	background: url(../images/mobile.png) 0 0 no-repeat;
}
	#showframe.mobile .hide_wrap {
		width: 320px;
		height: 520px;
		-webkit-border-radius: 3px;
			-ms-border-radius: 3px;
				border-radius: 3px;
	}
	#showframe.mobile .hide_wrap iframe {
		width: 337px !important;
		height: 520px !important;
	}
#frame_controls .device_tablet_landscape:before{
    transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);

}

/* Mobile landscape */
#showframe.mobile_land {
	margin-top: 30px;
	/*width: 1024px;*/
	width: 800px;
	padding: 15px 103px 37px 90px;
	background: url(../images/mobile_landscape.png) 0 0 no-repeat;
}
	#showframe.mobile_land .hide_wrap {
		width: 1024px;
				height: 640px;
		-webkit-border-radius: 3px;
			-ms-border-radius: 3px;
				border-radius: 3px;
	}
	#showframe.mobile_land .hide_wrap iframe {
		width: 520px !important;
		height: 320px !important;
	}
	#frame_controls .device_mobile_landscape:before{
    transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);

}

/*Device Styles start*/
#frame_controls {
	display: inline-block;
	vertical-align: top;
	height:100%;
	/*
	margin-left:10em;
	*/
}
	#frame_controls .device_item {
		display: inline-block;
		vertical-align: top;
		/*font-size: 1.5em;*/
		height: 54px;
		/*line-height: 54px;*/
		text-align:center;

		width: 54px;
		margin-left:2px;
		/*background-color: #233448;*/

		/*padding: 0 12px;*/
		color: #546171;
	}
	#frame_controls .device_item:hover {
		color: #fff;
		/*
		background-color: #15e27f;
		*/
	}
	#frame_controls .device_current {
		color: #fff;	/* #15e27f; */
		/*
		background-color: #15e27f;
		*/
	}
/*Device Styles End*/
	.pricer{
		max-width:100px!important;
		min-width:100px!important;
		}

    </style>
    <style>
	/*Advanced Styles*/
a {
	text-decoration: none;
	-webkit-transition: color .3s ease, background-color .3s ease;
	    -ms-transition: color .3s ease, background-color .3s ease;
	        transition: color .3s ease, background-color .3s ease;
}
body, a, a:visited, a:active {
	color: #fff;
}
a:active {
	outline: none;
}

[class*="icon-"]:before {
	margin:0;
	padding:0;
	line-height:inherit;
	vertical-align:baseline;
}


#header {
	background-color: #0a1d33;
	height: 54px;
	text-align: center;
	position: relative;
	z-index: 2;
}
#header:after {
	content:' ';
	display:block;
	width: 100%;
	height:0;
	clear:both;
}

#header .left_col {
	float: left;
	height: 54px;
}

	#logo {
		display: inline-block;
		vertical-align: top;
		text-align:center;
		/*margin-right: 1px;*/
	}
		#logo img {
			vertical-align: top;
			width: auto;
			height: 54px;
			max-height:100%;
		}

	#socials {
		display: inline-block;
		vertical-align: top;
		height:100%;
	}
		#socials .social_item {
			display: inline-block;
			vertical-align: top;
			font-size: 16px;
			width: 54px;
			height: 54px;
			line-height: 54px;
			text-align:center;
			/*
			margin-left:2px;
			background-color: #233448;
			*/
			border-right: 1px solid #2f3f51;
		}


	#theme_selector {
		display: inline-block;
		vertical-align: top;
		color: #dedfe0;
		position:relative;
		/*
		background-color: #233448;
		margin-left: 2px;
		*/
		border-right: 1px solid #2f3f51;
		text-align: left;
	}
		#theme_selector .current_theme {
			display: block;
			width: 390px;
			height: 54px;
			line-height: 54px;
			overflow:hidden;
			padding: 0 3em 0 2em;
			color: #dedfe0;
			-webkit-box-sizing: border-box;
				-ms-box-sizing: border-box;
					box-sizing: border-box;
		}
		#theme_selector .current_theme:hover {
			color: #fff;
		}
		#theme_selector .current_theme:after {
			content: '\e825';
			font-family: 'fontello';
			display:inline-block;
			vertical-align:top;
			line-height: 56px;
			font-size: 1.25em;
			position:absolute;
			z-index:1;
			right: 1.5em;
			top: 0;
			-webkit-transition: -webkit-transform 0.5s ease;
			-ms-transition: -ms-transform 0.5s ease;
			transition: transform 0.5s ease;
		}
		#theme_selector .current_theme:hover:after {
			color: #fff;
		}
		#theme_selector .theme_selector_opened:after {
			-webkit-transform: rotate(180deg);
			-ms-transform: rotate(180deg);
			transform: rotate(180deg);
		}
			#theme_selector .current_theme_name {
				width: 100%;
				overflow: hidden;
			}
		#theme_selector .related_themes {
			display: none;
			width: 390px;
			padding: 2em;
			-webkit-box-sizing: border-box;
				-ms-box-sizing: border-box;
					box-sizing: border-box;
			position: absolute;
			left: 0;
			top: 54px;
			background-color: #0a1d33;
		}
			#theme_selector .themes_list {
				list-style: none;
				padding: 0;
				margin: 0;
			}
			#theme_selector .themes_list li {
				position: relative;
				padding-left: 2em;
			}
			#theme_selector .themes_list li:before {
				content: " ";
				display: block;
				position: absolute;
				top: 11px;
				left: 0;
				width: 1em;
				height: 2px;
				background-color: #15e27f;
			}
			#theme_selector .themes_list li a {
				display:block;
				color: #dedfe0;
			}
			#theme_selector .themes_list li.active a,
			#theme_selector .themes_list li a:hover {
				color: #15e27f;
			}
			#theme_selector .themes_list li + li {
				margin-top: 0.5em;
			}
			#theme_selector .placeholder {
				width: 100%;
				margin-top: 1em;
			}
			#theme_selector .placeholder img {
				width: 100%;
				max-width:100%;
				height: auto;
				vertical-align: top;
			}

#frame_controls {
	display: inline-block;
	vertical-align: top;
	height:100%;
	/*
	margin-left:10em;
	*/
}
	#frame_controls .device_item {
		display: inline-block;
		vertical-align: top;
		font-size: 1.5em;
		height: 54px;
		line-height: 54px;
		text-align:center;
		/*
		width: 54px;
		margin-left:2px;
		background-color: #233448;
		*/
		padding: 0 12px;
		color: #546171;
	}
	#frame_controls .device_item:hover {
		color: #fff;
		/*
		background-color: #15e27f;
		*/
	}
	#frame_controls .device_current {
		color: #fff;	/* #15e27f; */
		/*
		background-color: #15e27f;
		*/
	}
	#frame_controls .device_tablet_landscape:before {
		-webkit-transform:rotate(-90deg);
			-ms-transform:rotate(-90deg);
				transform:rotate(-90deg);
	}


#header .right_col {
	float: right;
	display:inline-block;
	vertical-align: top;
	height: 54px;
}
	#header .right_col > a {
		display: inline-block;
		vertical-align:top;
		height: 54px;
		line-height:54px;
		text-align:center;
		padding: 0 3.4em;
		font-size: 10px;
		font-weight:bold;
		text-transform: uppercase;
		letter-spacing:1px;
		/*
		margin-left: 2px;
		background-color: #233448;
		*/
		border-left: 1px solid #2f3f51;
	}
	#header .right_col > a:hover {
		background-color: #ff1f00;
	}
	#header .right_col > a:before {
		margin-right: 0.5em;
		vertical-align: top;
		font-size:1.25em;
	}
	#header .right_col > a.docs {
		padding: 0 3.6em;
	}
	#header .right_col > a.purchase {
		color: #fff;
		background-color: #15e27f;
		padding: 0 4em;
		border-left: none;
	}
	#header .right_col > a.purchase:hover,
	#header .right_col > a.docs:hover {
		color: #0a1d33;
		background-color: #f7f7f7;
	}
	#header .right_col > a.closeframe {
		padding:0 !important;
		letter-spacing:0 !important;
		width: 54px;
		visibility: hidden;
	}
	#header .right_col > a.closeframe:hover {
		color: #15e27f;
		background-color: #0a1d33;
	}
	#header .right_col > a.closeframe:before {
		margin-right: 0;
	}


.openframe,
.basket {
	display: block;
	width: 54px;
	height: 54px;
	line-height:54px;
	background-color: #0a1d33;
	text-align:center;
	font-size: 14px;
	font-weight:bold;
	text-transform: uppercase;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 3;
	-webkit-transition: color 0.3s ease, background-color 0.3s ease;
	-ms-transition: color 0.3s ease, background-color 0.3s ease;
	transition: color 0.3s ease, background-color 0.3s ease;
}
.basket {
	background-color:#15e27f;
	z-index: 1;
	font-size: 18px;
}
.basket:hover {
	color: #0a1d33;
	background-color: #f7f7f7;
}
.openframe:before {
	content: '\e815';
	font-family: 'fontello';
	display: inline-block;
	width: 1em;
	height: 1em;
	line-height: 1em;
	-webkit-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	transform: rotate(-90deg);
	-webkit-transition: -webkit-transform 0.5s ease;
	-ms-transition: -ms-transform 0.5s ease;
	transition: transform 0.5s ease;
}
body.header_off .openframe:before {
	/*
	content: '\e829';
	*/
	-webkit-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
}
.openframe:hover {
	color: #15e27f;
	background-color: #0a1d33;
}


/* Frame with demo
-----------------------------  */

/* Desktop */
#showframe {
	width: 100%;
	margin: 0 auto;
	/*
	position: relative;
	z-index: 1;
	*/
}
	#showframe .hide_wrap {
		overflow: hidden;
	}
	#showframe iframe {
		width: 100%;
		height: 100%;
		display:block;
		vertical-align: top;
	}

/* Tablet landscape */
#showframe.tab_land {
	margin-top: 30px;
	width: 1224px;
	padding: 38px 103px 37px 85px;
	background: url(../images/tab_landscape.png) 0 0 no-repeat;
}
	#showframe.tab_land .hide_wrap {
		width: 1024px;
		height: 640px;
		-webkit-border-radius: 3px;
			-ms-border-radius: 3px;
				border-radius: 3px;
	}
	#showframe.tab_land .hide_wrap iframe {
		width: 1041px !important;
		height: 640px !important;
	}

/* Tablet portrait */
#showframe.tab_port {
	margin-top: 30px;
	width: 540px;
	padding: 65px 27px 78px 28px;
	background: url(../images/tab_portrait.png) 0 0 no-repeat;
}
	#showframe.tab_port .hide_wrap {
		width: 480px;
		height: 640px;
		-webkit-border-radius: 3px;
			-ms-border-radius: 3px;
				border-radius: 3px;
	}
	#showframe.tab_port .hide_wrap iframe {
		width: 497px !important;
		height: 640px !important;
	}

/* Tablet mobile */
#showframe.mobile {
	margin-top: 30px;
	width: 360px;
	padding: 92px 19px 102px 19px;
	background: url(../images/mobile.png) 0 0 no-repeat;
}
	#showframe.mobile .hide_wrap {
		width: 320px;
		height: 520px;
		-webkit-border-radius: 3px;
			-ms-border-radius: 3px;
				border-radius: 3px;
	}
	#showframe.mobile .hide_wrap iframe {
		width: 337px !important;
		height: 520px !important;
	}




@media (max-width: 1529px) {
	body {
		font-size:13px;
		line-height:20px;
	}
	#header,
	#header .left_col,
	#header .right_col,
	#logo img {
		height:42px;
	}
	#socials .social_item {
		font-size: 14px;
		width: 42px;
		height: 42px;
		line-height: 42px;
	}
	#theme_selector .current_theme {
		width: 300px;
		height: 42px;
		line-height: 42px;
		padding: 0 2em 0 1.5em;
	}
	#theme_selector .current_theme:after {
		line-height: 42px;
		right: 1em;
	}
	#theme_selector .related_themes {
		width: 300px;
		padding: 1.5em;
		top: 42px;
	}
	#frame_controls .device_item {
		height: 42px;
		line-height: 42px;
		padding: 0 10px;
	}
	#header .right_col > a {
		height: 42px;
		line-height:42px;
		padding: 0 2em !important;
	}
	#header .right_col > a.closeframe {
		width: 42px;
	}
	.openframe,
	.basket {
		width: 42px;
		height: 42px;
		line-height:42px;
		font-size: 12px;
	}
}
@media (max-width: 1199px) {
	#frame_controls {
		display:none;
	}
}
@media (max-width: 1023px) {
	#header .right_col > a.docs {
		display: none;
	}
}
@media (max-width: 959px) {
	#header .right_col > a.customization {
		display: none;
	}
}
@media (max-width: 767px) {
	#socials {
		display: none;
	}
	#theme_selector .current_theme {
		width: 270px;
		padding: 0 1.5em 0 1em;
	}
	#theme_selector .current_theme:after {
		right: 0.5em;
	}
	#theme_selector .related_themes {
		width: 270px;
		padding: 1em;
	}
	#header .right_col > a {
		font-size: 10px;
	}
}
@media (max-width: 639px) {
	#theme_selector .current_theme {
		display: none;
	}
}
@media (max-width: 479px) {
	body {
		font-size:12px;
		line-height:18px;
	}
	#header,
	#header .left_col,
	#header .right_col,
	#logo img {
		height:36px;
	}
	#socials .social_item {
		font-size: 14px;
		width: 36px;
		height: 36px;
		line-height: 36px;
	}
	#header .right_col > a {
		height: 36px;
		line-height:36px;
		font-size: 10px;
	}
	#header .right_col > a.purchase {
		letter-spacing:0;
	}
	#header .right_col > a.closeframe {
		width: 36px;
	}
	.openframe,
	.basket {
		width: 36px;
		height: 36px;
		line-height:36px;
	}
}
	</style>



</head>
<body id="fullscreen-preview">
    <div id="preview-bar">
        <ul id="bar-inner">
            <li class="tm-logo block">
                <a href="https://rms.templates.com/">
                    <img src="/themes/theme-2018-v03-en/images/Logo_white.png" alt="">
                </a>
            </li>
            <li class="block inner info">
                Admin Templates #164145            </li>
            <!--responsivator HTML-->
            <li class="block inner info" id="frame_controls">
                <a href="#" class="icon-desktop device_item device_desktop device_current" data-width="100%" data-device="desktop"></a>
                <!--<a href="#" class="icon-tablet device_item device_tablet_landscape" data-width="960" data-device="tab_land"></a>-->
                <a href="#" class="icon-tablet device_item device_tablet_portrait" data-width="480" data-device="tab_port"></a>
                <a href="#" class="icon-mobile device_item device_mobile" data-width="320" data-device="mobile"></a>
                <!--<a href="#" class="icon-mobile device_item device_mobile_landscape" data-width="320" data-device="mobile_land"></a>-->
			</li>

                        <li class="block inner"><a href="https://www.templatehelp.com/preset/cart.php?act=add&amp;templ=164145&amp;pr_code=11111111" class="btn2">
            	Buy Now
            	                <span>
                    $36                <span>
                        </a></li>
                        <a href="#" id="close">Close</a>
        </ul>
    </div>
    <!--<div id="iframelive" class="no-responsive">-->
    <div id="showframe">

        <div id="preview-wrapper" class="hide_wrap">

                            <div class="technical-problems">
                    <p>Technical operations</p>
                    <p class="problems-message">Live demo of this template will be available within 5-6 hours.</p>
                    <p>
                        <a href="/admin-templates-type">Go back to the template gallery</a>
                    </p>
                </div>
                    </div>
    </div>
</body>
</html>