<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="responsive-image">
<div class="browser browser-xlg desktop-size">
<div class="browser-header">
<div class="browser-buttons"><span></span><span></span><span></span></div>
<div class="browser-bar"></div>
<div class="browser-menu"><span></span><span></span><span></span></div>
</div>
<div class="browser-body">
<div class="control-panel animate animated" style="visibility: visible;">
<div class="play">
<span class="play-btn"><i class="zmdi zmdi-play"></i></span>
</div>
<div class="cp-cursor"></div>
<div class="cp-navbar">
<div class="navbar">
<span class="navbar-toggle"><i><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></i></span>
<div class="navbar-header">
<a class="navbar-brand" href="/">Vultr</a>
<a class="notification-toggle" href="/"><i class="zmdi zmdi-notifications"></i></a>
</div>
<div class="navbar-container">
<ul class="navbar-nav">
<li><span><i class="zmdi zmdi-storage"></i>Servers</span></li>
<li><span><i class="zmdi zmdi-card"></i>Billing</span></li>
<li><span><i class="zmdi zmdi-email"></i>Support</span></li>
<li><span><i class="zmdi zmdi-money-box"></i>Affiliate</span></li>
<li><span><i class="zmdi zmdi-account-o"></i>Account</span></li>
<li class="navbar-logout"><span><i class="zmdi zmdi-power"></i>Logout</span></li>
</ul>
</div>
</div>
</div>
<div class="cp-server-deploying">
<div class="cp-progress">
<div class="cp-progress-bar"></div>
</div>
</div>
<div class="cp-server-list">
<div class="cp-content">
<div class="cp-header">
<div class="cp-container">
<span class="h1">Servers</span>
<div class="tabs-container">
<ul class="nav nav-tabs">
<li class="active"><span>Instances</span></li>
<li><span>Snapshots</span></li>
<li><span>ISO</span></li>
<li><span>Startup Scripts</span></li>
<li><span>SSH Keys</span></li>
<li><span>DNS</span></li>
<li><span>Backups</span></li>
<li><span>Block Storage</span></li>
<li><span>Reserved IPs</span></li>
<li><span>Firewall</span></li>
</ul>
</div>
<div class="cp-deploy-btn"><i class="zmdi zmdi-plus"></i></div>
</div>
<!-- /.cp-header -->
</div>
<div class="cp-container">
<div class="no-data">
<div class="server"></div>
<span class="h6">There are no instances created.</span>
</div>
<div class="cp-servers-table">
<table class="table cp-table-servers table-checkbox">
<colgroup>
<col style="width: 0">
<col style="width: 40%">
<col style="width: 10%">
<col style="width: 20%">
<col style="width: 15%">
<col style="width: 15%">
<col style="width: 0">
</colgroup>
<thead>
<tr>
<th><span class="checkbox-style"></span></th>
<th class="sort-desc">Server</th>
<th>OS</th>
<th>Location</th>
<th>Charges</th>
<th>Status</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td class="cp-cell-checkbox">
<span class="checkbox-style"></span>
</td>
<td class="cp-cell-title">
<b>Cloud Instance #1</b>
<small>2048 MB VPS - 192.0.2.1</small>
</td>
<td class="cp-cell-os">
<span class="icon icon-xs icon-os icon-ubuntu"></span>
</td>
<td class="cp-cell-location mobile-size-hidden">
<span class="flag-xs flag-usa-xs"></span> New Jersey
</td>
<td class="cp-cell-costs">
<span class="cp-table-label">Costs: </span>$4.28
</td>
<td class="cp-cell-status">
<span class="status status-success">Running</span>
</td>
<td class="cell-actions mobile-size-hidden">
<button class="btn btn-sm btn-link btn-icon" type="button" data-toggle="dropdown"><i class="zmdi zmdi-more"></i></button>
</td>
</tr>
<tr>
<td class="cp-cell-checkbox">
<span class="checkbox-style"></span>
</td>
<td class="cp-cell-title">
<b>Cloud Instance #2</b>
<small>768 MB VPS - 192.0.2.2</small>
</td>
<td class="cp-cell-os">
<span class="icon icon-xs icon-os icon-ubuntu"></span>
</td>
<td class="cp-cell-location mobile-size-hidden">
<span class="flag-xs flag-singapore-xs"></span> Singapore
</td>
<td class="cp-cell-costs">
<span class="cp-table-label">Costs: </span>$2.25
</td>
<td class="cp-cell-status">
<span class="status status-success">Running</span>
</td>
<td class="cell-actions mobile-size-hidden">
<button class="btn btn-sm btn-link btn-icon" type="button" data-toggle="dropdown"><i class="zmdi zmdi-more"></i></button>
</td>
</tr>
<tr>
<td class="cp-cell-checkbox">
<span class="checkbox-style"></span>
</td>
<td class="cp-cell-title">
<b>Cloud Database</b>
<small>512 MB VPS - 192.0.2.3</small>
</td>
<td class="cp-cell-os">
<span class="icon icon-xs icon-os icon-ubuntu"></span>
</td>
<td class="cp-cell-location mobile-size-hidden">
<span class="flag-xs flag-germany-xs"></span> Frankfurt
</td>
<td class="cp-cell-costs">
<span class="cp-table-label">Costs: </span>$2.98
</td>
<td class="cp-cell-status">
<span class="status status-success">Running</span>
</td>
<td class="cell-actions mobile-size-hidden">
<button class="btn btn-sm btn-link btn-icon" type="button" data-toggle="dropdown"><i class="zmdi zmdi-more"></i></button>
</td>
</tr>
<tr>
<td class="cp-cell-checkbox">
<span class="checkbox-style"></span>
</td>
<td class="cp-cell-title">
<b>DNS Server</b>
<small>4096 MB VPS - 192.0.2.4</small>
</td>
<td class="cp-cell-os">
<span class="icon icon-xs icon-os icon-ubuntu"></span>
</td>
<td class="cp-cell-location mobile-size-hidden">
<span class="flag-xs flag-usa-xs"></span> Miami
</td>
<td class="cp-cell-costs">
<span class="cp-table-label">Costs: </span>$6.38
</td>
<td class="cp-cell-status">
<span class="status status-success">Running</span>
</td>
<td class="cell-actions mobile-size-hidden">
<button class="btn btn-sm btn-link btn-icon" type="button" data-toggle="dropdown"><i class="zmdi zmdi-more"></i></button>
</td>
</tr>
<tr>
<td class="cp-cell-checkbox">
<span class="checkbox-style"></span>
</td>
<td class="cp-cell-title">
<b>Caching Server</b>
<small>8192 MB VPS - 192.0.2.5</small>
</td>
<td class="cp-cell-os">
<span class="icon icon-xs icon-os icon-ubuntu"></span>
</td>
<td class="cp-cell-location mobile-size-hidden">
<span class="flag-xs flag-usa-xs"></span> Chicago
</td>
<td class="cp-cell-costs">
<span class="cp-table-label">Costs: </span>$8.24
</td>
<td class="cp-cell-status">
<span class="status status-success">Running</span>
</td>
<td class="cell-actions mobile-size-hidden">
<button class="btn btn-sm btn-link btn-icon" type="button" data-toggle="dropdown"><i class="zmdi zmdi-more"></i></button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="cp-servers-table-mobile" style="width: 178px; overflow: hidden;">
<div style="height: 20px"></div>
<div>
<div style="white-space: nowrap; margin:6px 0px;">
<div style="width: 30%; display: inline-block">Server:</div>
<div style="width: 70%; display: inline-block"><strong>Cloud Instance #1</strong></div>
</div>
<div style="white-space: nowrap; margin:6px 0px;">
<div style="width: 30%; display: inline-block"> </div>
<div style="width: 70%; display: inline-block">2048 MB VPS - 192.0.2.1</div>
</div>
<div style="white-space: nowrap; margin:6px 0px;">
<div style="width: 30%; display: inline-block">OS</div>
<div style="width: 70%; display: inline-block"><span class="icon icon-xs icon-os icon-ubuntu"></span></div>
</div>
<div style="white-space: nowrap; margin:6px 0px;">
<div style="width: 30%; display: inline-block">Location</div>
<div style="width: 70%; display: inline-block"><span class="flag-xs flag-usa-xs"></span> New Jersey</div>
</div>
<div style="white-space: nowrap; margin:6px 0px;">
<div style="width: 30%; display: inline-block">Costs</div>
<div style="width: 70%; display: inline-block">$4.28</div>
</div>
<div style="white-space: nowrap; margin:6px 0px;">
<div style="width: 30%; display: inline-block">Status</div>
<div style="width: 70%; display: inline-block"><span class="status status-success">Running</span></div>
</div>
</div>
<div style="margin: 16px 0px; height: 0px; border-bottom: 1px solid #edeff2"></div>
<div>
<div style="white-space: nowrap; margin:6px 0px;">
<div style="width: 30%; display: inline-block">Server:</div>
<div style="width: 70%; display: inline-block"><strong>Cloud Instance #2</strong></div>
</div>
<div style="white-space: nowrap; margin:6px 0px;">
<div style="width: 30%; display: inline-block"> </div>
<div style="width: 70%; display: inline-block">768 MB VPS - 192.0.2.2</div>
</div>
<div style="white-space: nowrap; margin:6px 0px;">
<div style="width: 30%; display: inline-block">OS</div>
<div style="width: 70%; display: inline-block"><span class="icon icon-xs icon-os icon-ubuntu"></span></div>
</div>
<div style="white-space: nowrap; margin:6px 0px;">
<div style="width: 30%; display: inline-block">Location</div>
<div style="width: 70%; display: inline-block"><span class="flag-xs flag-singapore-xs"></span> Singapore</div>
</div>
<div style="white-space: nowrap; margin:6px 0px;">
<div style="width: 30%; display: inline-block">Costs</div>
<div style="width: 70%; display: inline-block">$2.25</div>
</div>
<div style="white-space: nowrap; margin:6px 0px;">
<div style="width: 30%; display: inline-block">Status</div>
<div style="width: 70%; display: inline-block"><span class="status status-success">Running</span></div>
</div>
</div>
<div style="margin: 16px 0px; height: 0px; border-bottom: 1px solid #edeff2"></div>
</div>
</div>
</div>
</div>
<!-- /.cp-server-list -->
<div class="cp-deploy-server">
<div class="cp-content">
<div class="cp-header cp-header-hero">
<div class="cp-container">
<span class="h1">Deploy New Instance</span>
<div class="tabs-container">
<ul class="nav nav-tabs">
<li class="active"><span>Vultr Cloud Compute (VC2)</span></li>
<li><span>Bare Metal Instance</span></li>
<li><span>Storage Instance</span></li>
<li><span>Dedicated Instance</span></li>
</ul>
</div>
</div>
</div>
<div class="cp-container">
<ul class="step-list steps-order">
<li>
<span class="step">1</span>
<span class="h6">Choose Server Location</span>
<div class="tabs-container">
<ul class="nav nav-tabs">
<li><span>All Locations</span></li>
<li><span>America</span></li>
<li class="active"><span>Europe</span></li>
<li><span>Australia</span></li>
<li><span>Asia</span></li>
</ul>
<span class="btn btn-icon btn-link btn-prev"><i class="zmdi zmdi-chevron-left"></i></span>
<span class="btn btn-icon btn-link btn-next"><i class="zmdi zmdi-chevron-right"></i></span>
</div>
<div class="row">
<div class="col-sm-3">
<div class="panel">
<div class="select-header">
<span class="select-icon flag flag-sm flag-france-sm"><span></span></span>
<span class="select-name">Paris <small>France</small></span>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="panel">
<div class="select-header">
<span class="select-icon flag flag-sm flag-netherlands-sm"><span></span></span>
<span class="select-name">Amsterdam <small>Netherlands</small></span>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="panel cp-location-click">
<div class="select-header">
<span class="select-icon flag flag-sm flag-germany-sm"><span></span></span>
<span class="select-name">Frankfurt <small>Germany</small></span>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="panel">
<div class="select-header">
<span class="select-icon flag flag-sm flag-england-sm"><span></span></span>
<span class="select-name">London <small>United Kingdom</small></span>
</div>
</div>
</div>
</div>
</li>
<li>
<span class="step">2</span>
<span class="h6">Server Type</span>
<div class="tabs-container">
<ul class="nav nav-tabs">
<li class="active"><span>64 bit OS</span></li>
<li><span>32 bit OS</span></li>
<li><span>Application</span></li>
<li><span>Upload ISO</span></li>
<li><span>ISO Library</span></li>
<li><span>Backup</span></li>
<li><span>Snapshot</span></li>
</ul>
<span class="btn btn-icon btn-link btn-prev"><i class="zmdi zmdi-chevron-left"></i></span>
<span class="btn btn-icon btn-link btn-next"><i class="zmdi zmdi-chevron-right"></i></span>
</div>
<div class="row">
<div class="col-sm-3">
<div class="panel cp-os-click">
<div class="select-header">
<span class="select-icon icon icon-ubuntu"><span></span></span>
<span class="select-name">Ubuntu <small>Select Version</small></span>
</div>
<ul class="select-options">
<li data-version="18.04 x64">18.04 x64</li>
<li data-version="16.04 x64">16.04 x64</li>
<li data-version="14.04 x64">14.04 x64</li>
</ul>
</div>
</div>
<div class="col-sm-3">
<div class="panel">
<div class="select-header">
<span class="select-icon icon icon-centos"></span>
<span class="select-name">CentOS <small>Select Version</small></span>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="panel">
<div class="select-header">
<span class="select-icon icon icon-debian"></span>
<span class="select-name">Debian <small>Select Version</small></span>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="panel">
<div class="select-header">
<span class="select-icon icon icon-freebsd"></span>
<span class="select-name">FreeBSD <small>Select Version</small></span>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="panel">
<div class="select-header">
<span class="select-icon icon icon-openbsd"></span>
<span class="select-name">OpenBSD <small>Select Version</small></span>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="panel">
<div class="select-header">
<span class="select-icon icon icon-coreos"></span>
<span class="select-name">CoreOS <small>Select Version</small></span>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="panel">
<div class="select-header">
<span class="select-icon icon icon-fedora"></span>
<span class="select-name">Fedora <small>Select Version</small></span>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="panel">
<div class="select-header">
<span class="select-icon icon icon-windows"></span>
<span class="select-name">Windows <small>Select Version</small></span>
</div>
</div>
</div>
</div>
</li>
<li>
<span class="step">3</span>
<span class="h6">Choose Package</span>
<div class="packages select-group">
<div class="packages-row row">
<div class="col-sm-3 col-xs-6">
<div class="package">
<div class="package-header">
<h3 class="package-title">20GB SSD</h3>
<span class="package-price">$2.50<span class="cycle">/mo</span></span><span class="package-hourly">$0.004<span>/h</span></span>
</div>
<div class="package-body">
<ul>
<li><strong>1</strong> CPU</li>
<li><strong>512MB</strong> Memory</li>
<li><strong>500GB</strong> Bandwidth</li>
</ul>
</div>
</div>
<!-- /.package -->
</div>
<div class="col-sm-3 col-xs-6">
<div class="package cp-package-click">
<div class="package-header">
<h3 class="package-title">25GB SSD</h3>
<span class="package-price">$5<span class="cycle">/mo</span></span><span class="package-hourly">$0.007<span>/h</span></span>
</div>
<div class="package-body">
<ul>
<li><strong>1</strong> CPU</li>
<li><strong>1024MB</strong> Memory</li>
<li><strong>1000GB</strong> Bandwidth</li>
</ul>
</div>
</div>
<!-- /.package -->
</div>
<div class="col-sm-3 col-xs-6">
<div class="package">
<div class="package-header">
<h3 class="package-title">40GB SSD</h3>
<span class="package-price">$10<span class="cycle">/mo</span></span><span class="package-hourly">$0.015<span>/h</span></span>
</div>
<div class="package-body">
<ul>
<li><strong>1</strong> CPU</li>
<li><strong>2048MB</strong> Memory</li>
<li><strong>2000GB</strong> Bandwidth</li>
</ul>
</div>
</div>
<!-- /.package -->
</div>
<div class="col-sm-3 col-xs-6">
<div class="package">
<div class="package-header">
<h3 class="package-title">60GB SSD</h3>
<span class="package-price">$20<span class="cycle">/mo</span></span><span class="package-hourly">$0.030<span>/h</span></span>
</div>
<div class="package-body">
<ul>
<li><strong>2</strong> CPU</li>
<li><strong>4096MB</strong> Memory</li>
<li><strong>3000GB</strong> Bandwidth</li>
</ul>
</div>
</div>
<!-- /.package -->
</div>
</div>
<!-- /.packages-row -->
<div class="packages-row row">
<div class="col-sm-3 col-xs-6">
<div class="package">
<div class="package-header">
<h3 class="package-title">100GB SSD</h3>
<span class="package-price">$40<span class="cycle">/mo</span></span><span class="package-hourly">$0.060<span>/h</span></span>
</div>
<div class="package-body">
<ul>
<li><strong>4</strong> CPU</li>
<li><strong>8192MB</strong> Memory</li>
<li><strong>4000GB</strong> Bandwidth</li>
</ul>
</div>
</div>
<!-- /.package -->
</div>
<div class="col-sm-3 col-xs-6">
<div class="package">
<div class="package-header">
<h3 class="package-title">200GB SSD</h3>
<span class="package-price">$80<span class="cycle">/mo</span></span><span class="package-hourly">$0.119<span>/h</span></span>
</div>
<div class="package-body">
<ul>
<li><strong>6</strong> CPU</li>
<li><strong>16384MB</strong> Memory</li>
<li><strong>5000GB</strong> Bandwidth</li>
</ul>
</div>
</div>
<!-- /.package -->
</div>
<div class="col-sm-3 col-xs-6">
<div class="package">
<div class="package-header">
<h3 class="package-title">300GB SSD</h3>
<span class="package-price">$160<span class="cycle">/mo</span></span><span class="package-hourly">$0.238<span>/h</span></span>
</div>
<div class="package-body">
<ul>
<li><strong>8</strong> CPU</li>
<li><strong>32768MB</strong> Memory</li>
<li><strong>6000GB</strong> Bandwidth</li>
</ul>
</div>
</div>
<!-- /.package -->
</div>
<div class="col-sm-3 col-xs-6">
<div class="package">
<div class="package-header">
<h3 class="package-title">400GB SSD</h3>
<span class="package-price">$320<span class="cycle">/mo</span></span><span class="package-hourly">$0.476<span>/h</span></span>
</div>
<div class="package-body">
<ul>
<li><strong>16</strong> CPU</li>
<li><strong>65536MB</strong> Memory</li>
<li><strong>10000GB</strong> Bandwidth</li>
</ul>
</div>
</div>
<!-- /.package -->
</div>
<div class="col-sm-3 col-xs-6">
<div class="package">
<div class="package-header">
<h3 class="package-title">800GB SSD</h3>
<span class="package-price">$640<span class="cycle">/mo</span></span><span class="package-hourly">$0.952<span>/h</span></span>
</div>
<div class="package-body">
<ul>
<li><strong>24</strong> CPU</li>
<li><strong>98304MB</strong> Memory</li>
<li><strong>15000GB</strong> Bandwidth</li>
</ul>
</div>
</div>
<!-- /.package -->
</div>
</div>
<!-- /.packages-row -->
</div>
</li>
<li>
<span class="step">4</span>
<span class="h6">Additional Features</span>
<div class="checkbox">
<span class="checkbox-style cp-checkbox-click"></span>Enable IPv6
</div>
<div class="checkbox">
<span class="checkbox-style"></span>Enable Private Network [?]
</div>
<div class="checkbox">
<span class="checkbox-style"></span>Enable <span class="text-primary">Auto Backups</span>
<span class="label label-primary">$1.00/mo</span>
</div>
<div class="checkbox">
<span class="checkbox-style"></span>Enable <span class="text-primary">DDOS Protection</span> [?]
<span class="label label-primary">$10/mo</span>
</div>
<div style="height: 30px;"></div>
</li>
<li>
<span class="step">5</span>
<span class="h6">Startup Script <span class="text-primary">( Manage )</span></span>
<p>
There are no Startup Scripts created.
<span class="text-primary">Click here to add</span>
</p>
</li>
<li>
<span class="step">6</span>
<span class="h6">SSH Keys <span class="text-primary">( Manage )</span></span>
<p>
There are no SSH Keys created.
<span class="text-primary">Click here to add</span>
</p>
</li>
<li>
<span class="step">7</span>
<span class="h6">Server Hostname & Label</span>
<div class="row">
<div class="col-xs-6">
<div class="cp-instance-input">
<span class="form-control input-xs"><!-- Enter server hostname --></span>
<span class="cp-instance-name">cloud-database<span class=""></span></span>
</div>
</div>
<div class="col-xs-6">
<div class="cp-instance-input">
<span class="form-control input-xs"><!-- Enter server label --></span>
<span class="cp-instance-name">Cloud Database<span class=""></span></span>
</div>
</div>
</div>
</li>
</ul>
<!-- /.steps-list -->
<div class="cp-deploy-summary">
<div class="cp-container">
<span class="cp-summary-price">Summary: <span>$5/mo</span></span>
<span class="cp-summary-btn">Deploy Now</span>
</div>
</div>
</div>
<!-- /.cp-container -->
</div>
<!-- /.cp-content -->
<div class="cp-deploy-summary">
<div class="cp-container">
<span class="cp-summary-price">Summary: <span>$5.00/mo</span></span>
<span class="cp-summary-btn">Deploy Now</span>
</div>
</div>
<!-- /.cp-deploy-summary -->
</div>
<!-- /.cp-deploy-server -->
<div class="cp-server-loading">
</div>
<!-- /.cp-server-loading -->
</div>
</div>
</div>
<!-- /.browser -->
<div class="phone phone-xlg mobile-size">
<div class="phone-header">
<div class="phone-speaker"></div>
</div>
<div class="phone-body">
<div class="play">
<span class="play-btn"><i class="zmdi zmdi-play"></i></span>
</div>
<div class="control-panel">
<div class="cp-cursor"></div>
<div class="cp-navbar">
<div class="navbar">
<span class="navbar-toggle"><i><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></i></span>
<div class="navbar-header">
<a class="navbar-brand" href="/">Vultr</a>
<a class="notification-toggle" href="/"><i class="zmdi zmdi-notifications"></i></a>
</div>
<div class="navbar-container">
<ul class="navbar-nav">
<li><span><i class="zmdi zmdi-storage"></i>Servers</span></li>
<li><span><i class="zmdi zmdi-card"></i>Billing</span></li>
<li><span><i class="zmdi zmdi-email"></i>Support</span></li>
<li><span><i class="zmdi zmdi-money-box"></i>Affiliate</span></li>
<li><span><i class="zmdi zmdi-account-o"></i>Account</span></li>
<li class="navbar-logout"><span><i class="zmdi zmdi-power"></i>Logout</span></li>
</ul>
</div>
</div>
</div>
<div class="cp-server-deploying">
<div class="cp-progress">
<div class="cp-progress-bar"></div>
</div>
</div>
<div class="cp-server-list">
<div class="cp-content">
<div class="cp-header">
<div class="cp-container">
<span class="h1">Servers</span>
<div class="tabs-container">
<ul class="nav nav-tabs">
<li class="active"><span>Instances</span></li>
<li><span>Snapshots</span></li>
<li><span>ISO</span></li>
<li><span>Startup Scripts</span></li>
<li><span>SSH Keys</span></li>
<li><span>DNS</span></li>
<li><span>Backups</span></li>
<li><span>Block Storage</span></li>
<li><span>Reserved IPs</span></li>
<li><span>Firewall</span></li>
</ul>
</div>
<div class="cp-deploy-btn"><i class="zmdi zmdi-plus"></i></div>
</div>
<!-- /.cp-header -->
</div>
<div class="cp-container">
<div class="no-data">
<div class="server"></div>
<span class="h6">There are no instances created.</span>
</div>
<div class="cp-servers-table">
<table class="table cp-table-servers table-checkbox">
<colgroup>
<col style="width: 0">
<col style="width: 40%">
<col style="width: 10%">
<col style="width: 20%">
<col style="width: 15%">
<col style="width: 15%">
<col style="width: 0">
</colgroup>
<thead>
<tr>
<th><span class="checkbox-style"></span></th>
<th class="sort-desc">Server</th>
<th>OS</th>
<th>Location</th>
<th>Charges</th>
<th>Status</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td class="cp-cell-checkbox">
<span class="checkbox-style"></span>
</td>
<td class="cp-cell-title">
<b>Cloud Instance #1</b>
<small>2048 MB VPS - 192.0.2.1</small>
</td>
<td class="cp-cell-os">
<span class="icon icon-xs icon-os icon-ubuntu"></span>
</td>
<td class="cp-cell-location mobile-size-hidden">
<span class="flag-xs flag-usa-xs"></span> New Jersey
</td>
<td class="cp-cell-costs">
<span class="cp-table-label">Costs: </span>$4.28
</td>
<td class="cp-cell-status">
<span class="status status-success">Running</span>
</td>
<td class="cell-actions mobile-size-hidden">
<button class="btn btn-sm btn-link btn-icon" type="button" data-toggle="dropdown"><i class="zmdi zmdi-more"></i></button>
</td>
</tr>
<tr>
<td class="cp-cell-checkbox">
<span class="checkbox-style"></span>
</td>
<td class="cp-cell-title">
<b>Cloud Instance #2</b>
<small>768 MB VPS - 192.0.2.2</small>
</td>
<td class="cp-cell-os">
<span class="icon icon-xs icon-os icon-ubuntu"></span>
</td>
<td class="cp-cell-location mobile-size-hidden">
<span class="flag-xs flag-singapore-xs"></span> Singapore
</td>
<td class="cp-cell-costs">
<span class="cp-table-label">Costs: </span>$2.25
</td>
<td class="cp-cell-status">
<span class="status status-success">Running</span>
</td>
<td class="cell-actions mobile-size-hidden">
<button class="btn btn-sm btn-link btn-icon" type="button" data-toggle="dropdown"><i class="zmdi zmdi-more"></i></button>
</td>
</tr>
<tr>
<td class="cp-cell-checkbox">
<span class="checkbox-style"></span>
</td>
<td class="cp-cell-title">
<b>Cloud Database</b>
<small>512 MB VPS - 192.0.2.3</small>
</td>
<td class="cp-cell-os">
<span class="icon icon-xs icon-os icon-ubuntu"></span>
</td>
<td class="cp-cell-location mobile-size-hidden">
<span class="flag-xs flag-germany-xs"></span> Frankfurt
</td>
<td class="cp-cell-costs">
<span class="cp-table-label">Costs: </span>$2.98
</td>
<td class="cp-cell-status">
<span class="status status-success">Running</span>
</td>
<td class="cell-actions mobile-size-hidden">
<button class="btn btn-sm btn-link btn-icon" type="button" data-toggle="dropdown"><i class="zmdi zmdi-more"></i></button>
</td>
</tr>
<tr>
<td class="cp-cell-checkbox">
<span class="checkbox-style"></span>
</td>
<td class="cp-cell-title">
<b>DNS Server</b>
<small>4096 MB VPS - 192.0.2.4</small>
</td>
<td class="cp-cell-os">
<span class="icon icon-xs icon-os icon-ubuntu"></span>
</td>
<td class="cp-cell-location mobile-size-hidden">
<span class="flag-xs flag-usa-xs"></span> Miami
</td>
<td class="cp-cell-costs">
<span class="cp-table-label">Costs: </span>$6.38
</td>
<td class="cp-cell-status">
<span class="status status-success">Running</span>
</td>
<td class="cell-actions mobile-size-hidden">
<button class="btn btn-sm btn-link btn-icon" type="button" data-toggle="dropdown"><i class="zmdi zmdi-more"></i></button>
</td>
</tr>
<tr>
<td class="cp-cell-checkbox">
<span class="checkbox-style"></span>
</td>
<td class="cp-cell-title">
<b>Caching Server</b>
<small>8192 MB VPS - 192.0.2.5</small>
</td>
<td class="cp-cell-os">
<span class="icon icon-xs icon-os icon-ubuntu"></span>
</td>
<td class="cp-cell-location mobile-size-hidden">
<span class="flag-xs flag-usa-xs"></span> Chicago
</td>
<td class="cp-cell-costs">
<span class="cp-table-label">Costs: </span>$8.24
</td>
<td class="cp-cell-status">
<span class="status status-success">Running</span>
</td>
<td class="cell-actions mobile-size-hidden">
<button class="btn btn-sm btn-link btn-icon" type="button" data-toggle="dropdown"><i class="zmdi zmdi-more"></i></button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="cp-servers-table-mobile" style="width: 178px; overflow: hidden;">
<div style="height: 20px"></div>
<div>
<div style="white-space: nowrap; margin:6px 0px;">
<div style="width: 30%; display: inline-block">Server:</div>
<div style="width: 70%; display: inline-block"><strong>Cloud Instance #1</strong></div>
</div>
<div style="white-space: nowrap; margin:6px 0px;">
<div style="width: 30%; display: inline-block"> </div>
<div style="width: 70%; display: inline-block">2048 MB VPS - 192.0.2.1</div>
</div>
<div style="white-space: nowrap; margin:6px 0px;">
<div style="width: 30%; display: inline-block">OS</div>
<div style="width: 70%; display: inline-block"><span class="icon icon-xs icon-os icon-ubuntu"></span></div>
</div>
<div style="white-space: nowrap; margin:6px 0px;">
<div style="width: 30%; display: inline-block">Location</div>
<div style="width: 70%; display: inline-block"><span class="flag-xs flag-usa-xs"></span> New Jersey</div>
</div>
<div style="white-space: nowrap; margin:6px 0px;">
<div style="width: 30%; display: inline-block">Costs</div>
<div style="width: 70%; display: inline-block">$4.28</div>
</div>
<div style="white-space: nowrap; margin:6px 0px;">
<div style="width: 30%; display: inline-block">Status</div>
<div style="width: 70%; display: inline-block"><span class="status status-success">Running</span></div>
</div>
</div>
<div style="margin: 16px 0px; height: 0px; border-bottom: 1px solid #edeff2"></div>
<div>
<div style="white-space: nowrap; margin:6px 0px;">
<div style="width: 30%; display: inline-block">Server:</div>
<div style="width: 70%; display: inline-block"><strong>Cloud Instance #2</strong></div>
</div>
<div style="white-space: nowrap; margin:6px 0px;">
<div style="width: 30%; display: inline-block"> </div>
<div style="width: 70%; display: inline-block">768 MB VPS - 192.0.2.2</div>
</div>
<div style="white-space: nowrap; margin:6px 0px;">
<div style="width: 30%; display: inline-block">OS</div>
<div style="width: 70%; display: inline-block"><span class="icon icon-xs icon-os icon-ubuntu"></span></div>
</div>
<div style="white-space: nowrap; margin:6px 0px;">
<div style="width: 30%; display: inline-block">Location</div>
<div style="width: 70%; display: inline-block"><span class="flag-xs flag-singapore-xs"></span> Singapore</div>
</div>
<div style="white-space: nowrap; margin:6px 0px;">
<div style="width: 30%; display: inline-block">Costs</div>
<div style="width: 70%; display: inline-block">$2.25</div>
</div>
<div style="white-space: nowrap; margin:6px 0px;">
<div style="width: 30%; display: inline-block">Status</div>
<div style="width: 70%; display: inline-block"><span class="status status-success">Running</span></div>
</div>
</div>
<div style="margin: 16px 0px; height: 0px; border-bottom: 1px solid #edeff2"></div>
</div>
</div>
</div>
</div>
<!-- /.cp-server-list -->
<div class="cp-deploy-server">
<div class="cp-content">
<div class="cp-header cp-header-hero">
<div class="cp-container">
<span class="h1">Deploy New Instance</span>
<div class="tabs-container">
<ul class="nav nav-tabs">
<li class="active"><span>Vultr Cloud Compute (VC2)</span></li>
<li><span>Bare Metal Instance</span></li>
<li><span>Storage Instance</span></li>
<li><span>Dedicated Instance</span></li>
</ul>
</div>
</div>
</div>
<div class="cp-container">
<ul class="step-list steps-order">
<li>
<span class="step">1</span>
<span class="h6">Choose Server Location</span>
<div class="tabs-container">
<ul class="nav nav-tabs">
<li><span>All Locations</span></li>
<li><span>America</span></li>
<li class="active"><span>Europe</span></li>
<li><span>Australia</span></li>
<li><span>Asia</span></li>
</ul>
<span class="btn btn-icon btn-link btn-prev"><i class="zmdi zmdi-chevron-left"></i></span>
<span class="btn btn-icon btn-link btn-next"><i class="zmdi zmdi-chevron-right"></i></span>
</div>
<div class="row">
<div class="col-sm-3">
<div class="panel">
<div class="select-header">
<span class="select-icon flag flag-sm flag-france-sm"><span></span></span>
<span class="select-name">Paris <small>France</small></span>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="panel">
<div class="select-header">
<span class="select-icon flag flag-sm flag-netherlands-sm"><span></span></span>
<span class="select-name">Amsterdam <small>Netherlands</small></span>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="panel cp-location-click">
<div class="select-header">
<span class="select-icon flag flag-sm flag-germany-sm"><span></span></span>
<span class="select-name">Frankfurt <small>Germany</small></span>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="panel">
<div class="select-header">
<span class="select-icon flag flag-sm flag-england-sm"><span></span></span>
<span class="select-name">London <small>United Kingdom</small></span>
</div>
</div>
</div>
</div>
</li>
<li>
<span class="step">2</span>
<span class="h6">Server Type</span>
<div class="tabs-container">
<ul class="nav nav-tabs">
<li class="active"><span>64 bit OS</span></li>
<li><span>32 bit OS</span></li>
<li><span>Application</span></li>
<li><span>Upload ISO</span></li>
<li><span>ISO Library</span></li>
<li><span>Backup</span></li>
<li><span>Snapshot</span></li>
</ul>
<span class="btn btn-icon btn-link btn-prev"><i class="zmdi zmdi-chevron-left"></i></span>
<span class="btn btn-icon btn-link btn-next"><i class="zmdi zmdi-chevron-right"></i></span>
</div>
<div class="row">
<div class="col-sm-3">
<div class="panel cp-os-click">
<div class="select-header">
<span class="select-icon icon icon-ubuntu"><span></span></span>
<span class="select-name">Ubuntu <small>Select Version</small></span>
</div>
<ul class="select-options">
<li data-version="18.04 x64">18.04 x64</li>
<li data-version="16.04 x64">16.04 x64</li>
<li data-version="14.04 x64">14.04 x64</li>
</ul>
</div>
</div>
<div class="col-sm-3">
<div class="panel">
<div class="select-header">
<span class="select-icon icon icon-centos"></span>
<span class="select-name">CentOS <small>Select Version</small></span>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="panel">
<div class="select-header">
<span class="select-icon icon icon-debian"></span>
<span class="select-name">Debian <small>Select Version</small></span>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="panel">
<div class="select-header">
<span class="select-icon icon icon-freebsd"></span>
<span class="select-name">FreeBSD <small>Select Version</small></span>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="panel">
<div class="select-header">
<span class="select-icon icon icon-openbsd"></span>
<span class="select-name">OpenBSD <small>Select Version</small></span>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="panel">
<div class="select-header">
<span class="select-icon icon icon-coreos"></span>
<span class="select-name">CoreOS <small>Select Version</small></span>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="panel">
<div class="select-header">
<span class="select-icon icon icon-fedora"></span>
<span class="select-name">Fedora <small>Select Version</small></span>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="panel">
<div class="select-header">
<span class="select-icon icon icon-windows"></span>
<span class="select-name">Windows <small>Select Version</small></span>
</div>
</div>
</div>
</div>
</li>
<li>
<span class="step">3</span>
<span class="h6">Choose Package</span>
<div class="packages select-group">
<div class="packages-row row">
<div class="col-sm-3 col-xs-6">
<div class="package">
<div class="package-header">
<h3 class="package-title">20GB SSD</h3>
<span class="package-price">$2.50<span class="cycle">/mo</span></span><span class="package-hourly">$0.004<span>/h</span></span>
</div>
<div class="package-body">
<ul>
<li><strong>1</strong> CPU</li>
<li><strong>512MB</strong> Memory</li>
<li><strong>500GB</strong> Bandwidth</li>
</ul>
</div>
</div>
<!-- /.package -->
</div>
<div class="col-sm-3 col-xs-6">
<div class="package cp-package-click">
<div class="package-header">
<h3 class="package-title">25GB SSD</h3>
<span class="package-price">$5<span class="cycle">/mo</span></span><span class="package-hourly">$0.007<span>/h</span></span>
</div>
<div class="package-body">
<ul>
<li><strong>1</strong> CPU</li>
<li><strong>1024MB</strong> Memory</li>
<li><strong>1000GB</strong> Bandwidth</li>
</ul>
</div>
</div>
<!-- /.package -->
</div>
<div class="col-sm-3 col-xs-6">
<div class="package">
<div class="package-header">
<h3 class="package-title">40GB SSD</h3>
<span class="package-price">$10<span class="cycle">/mo</span></span><span class="package-hourly">$0.015<span>/h</span></span>
</div>
<div class="package-body">
<ul>
<li><strong>1</strong> CPU</li>
<li><strong>2048MB</strong> Memory</li>
<li><strong>2000GB</strong> Bandwidth</li>
</ul>
</div>
</div>
<!-- /.package -->
</div>
<div class="col-sm-3 col-xs-6">
<div class="package">
<div class="package-header">
<h3 class="package-title">60GB SSD</h3>
<span class="package-price">$20<span class="cycle">/mo</span></span><span class="package-hourly">$0.030<span>/h</span></span>
</div>
<div class="package-body">
<ul>
<li><strong>2</strong> CPU</li>
<li><strong>4096MB</strong> Memory</li>
<li><strong>3000GB</strong> Bandwidth</li>
</ul>
</div>
</div>
<!-- /.package -->
</div>
</div>
<!-- /.packages-row -->
<div class="packages-row row">
<div class="col-sm-3 col-xs-6">
<div class="package">
<div class="package-header">
<h3 class="package-title">100GB SSD</h3>
<span class="package-price">$40<span class="cycle">/mo</span></span><span class="package-hourly">$0.060<span>/h</span></span>
</div>
<div class="package-body">
<ul>
<li><strong>4</strong> CPU</li>
<li><strong>8192MB</strong> Memory</li>
<li><strong>4000GB</strong> Bandwidth</li>
</ul>
</div>
</div>
<!-- /.package -->
</div>
<div class="col-sm-3 col-xs-6">
<div class="package">
<div class="package-header">
<h3 class="package-title">200GB SSD</h3>
<span class="package-price">$80<span class="cycle">/mo</span></span><span class="package-hourly">$0.119<span>/h</span></span>
</div>
<div class="package-body">
<ul>
<li><strong>6</strong> CPU</li>
<li><strong>16384MB</strong> Memory</li>
<li><strong>5000GB</strong> Bandwidth</li>
</ul>
</div>
</div>
<!-- /.package -->
</div>
<div class="col-sm-3 col-xs-6">
<div class="package">
<div class="package-header">
<h3 class="package-title">300GB SSD</h3>
<span class="package-price">$160<span class="cycle">/mo</span></span><span class="package-hourly">$0.238<span>/h</span></span>
</div>
<div class="package-body">
<ul>
<li><strong>8</strong> CPU</li>
<li><strong>32768MB</strong> Memory</li>
<li><strong>6000GB</strong> Bandwidth</li>
</ul>
</div>
</div>
<!-- /.package -->
</div>
<div class="col-sm-3 col-xs-6">
<div class="package">
<div class="package-header">
<h3 class="package-title">400GB SSD</h3>
<span class="package-price">$320<span class="cycle">/mo</span></span><span class="package-hourly">$0.476<span>/h</span></span>
</div>
<div class="package-body">
<ul>
<li><strong>16</strong> CPU</li>
<li><strong>65536MB</strong> Memory</li>
<li><strong>10000GB</strong> Bandwidth</li>
</ul>
</div>
</div>
<!-- /.package -->
</div>
<div class="col-sm-3 col-xs-6">
<div class="package">
<div class="package-header">
<h3 class="package-title">800GB SSD</h3>
<span class="package-price">$640<span class="cycle">/mo</span></span><span class="package-hourly">$0.952<span>/h</span></span>
</div>
<div class="package-body">
<ul>
<li><strong>24</strong> CPU</li>
<li><strong>98304MB</strong> Memory</li>
<li><strong>15000GB</strong> Bandwidth</li>
</ul>
</div>
</div>
<!-- /.package -->
</div>
</div>
<!-- /.packages-row -->
</div>
</li>
<li>
<span class="step">4</span>
<span class="h6">Additional Features</span>
<div class="checkbox">
<span class="checkbox-style cp-checkbox-click"></span>Enable IPv6
</div>
<div class="checkbox">
<span class="checkbox-style"></span>Enable Private Network [?]
</div>
<div class="checkbox">
<span class="checkbox-style"></span>Enable <span class="text-primary">Auto Backups</span>
<span class="label label-primary">$1.00/mo</span>
</div>
<div class="checkbox">
<span class="checkbox-style"></span>Enable <span class="text-primary">DDOS Protection</span> [?]
<span class="label label-primary">$10/mo</span>
</div>
<div style="height: 30px;"></div>
</li>
<li>
<span class="step">5</span>
<span class="h6">Startup Script <span class="text-primary">( Manage )</span></span>
<p>
There are no Startup Scripts created.
<span class="text-primary">Click here to add</span>
</p>
</li>
<li>
<span class="step">6</span>
<span class="h6">SSH Keys <span class="text-primary">( Manage )</span></span>
<p>
There are no SSH Keys created.
<span class="text-primary">Click here to add</span>
</p>
</li>
<li>
<span class="step">7</span>
<span class="h6">Server Hostname & Label</span>
<div class="row">
<div class="col-xs-6">
<div class="cp-instance-input">
<span class="form-control input-xs"><!-- Enter server hostname --></span>
<span class="cp-instance-name">cloud-database<span></span></span>
</div>
</div>
<div class="col-xs-6">
<div class="cp-instance-input">
<span class="form-control input-xs"><!-- Enter server label --></span>
<span class="cp-instance-name">Cloud Database<span></span></span>
</div>
</div>
</div>
</li>
</ul>
<!-- /.steps-list -->
<div class="cp-deploy-summary">
<div class="cp-container">
<span class="cp-summary-price">Summary: <span>$5/mo</span></span>
<span class="cp-summary-btn">Deploy Now</span>
</div>
</div>
</div>
<!-- /.cp-container -->
</div>
<!-- /.cp-content -->
<div class="cp-deploy-summary">
<div class="cp-container">
<span class="cp-summary-price">Summary: <span>$5.00/mo</span></span>
<span class="cp-summary-btn">Deploy Now</span>
</div>
</div>
<!-- /.cp-deploy-summary -->
</div>
<!-- /.cp-deploy-server -->
<div class="cp-server-loading">
</div>
<!-- /.cp-server-loading -->
</div>
</div>
<div class="phone-footer">
<div class="phone-btn"></div>
</div>
</div>
<!-- /.phone -->
<div class="image image-lines"></div>
<div class="image image-lines image-lines-right"></div>
</div>
<!-- /.responsive-image -->
</div>
/*! CSS Used from: https://www.vultr.com/dist/css/core.css?v=401 */
a{background-color:transparent;-webkit-transition:color ease-in .15s;transition:color ease-in .15s;}
a:active,a:hover{outline:0;}
p{margin:0 0 17px 0;}
b,strong{font-weight:bold;}
small{font-size:80%;}
button{margin:0;font:inherit;color:inherit;}
button{overflow:visible;}
button{text-transform:none;}
button{-webkit-appearance:button;cursor:pointer;}
button::-moz-focus-inner{padding:0;border:0;}
table{border-spacing:0;border-collapse:collapse;}
td,th{padding:0;}
@media print{
*,*:before,*:after{color:#000!important;text-shadow:none!important;background:transparent!important;-webkit-box-shadow:none!important;box-shadow:none!important;}
a,a:visited{text-decoration:underline;}
a[href]:after{content:" (" attr(href) ")";}
thead{display:table-header-group;}
tr{page-break-inside:avoid;}
p,h3{orphans:3;widows:3;}
h3{page-break-after:avoid;}
.navbar{display:none;}
.label{border:1px solid #000;}
.table{border-collapse:collapse!important;}
.table td,.table th{background-color:#fff!important;}
}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
button{font-family:inherit;font-size:inherit;line-height:inherit;}
a{color:#1e88e5;text-decoration:none;}
a:hover,a:focus{color:#3ba3ff;text-decoration:none;}
.h1,h3,.h6{color:#363b40;font-weight:500;letter-spacing:-0.1px;}
.h1{margin-top:38px;margin-bottom:38px;font-size:33px;line-height:46px;}
h3{margin-top:25px;margin-bottom:25px;font-size:20px;line-height:28px;}
.h6{margin-top:18px;margin-bottom:18px;font-size:14px;font-weight:bold;line-height:20px;}
small{font-size:85%;}
.text-primary{color:#1e88e5!important;}
ul{margin-top:0;margin-bottom:10px;}
ul ul{margin-bottom:0;}
.container{padding-right:10px;padding-left:10px;margin-right:auto;margin-left:auto;}
@media (min-width: 768px){
.container{width:100%;}
}
@media (min-width: 992px){
.container{width:970px;}
}
@media (min-width: 1200px){
.container{width:1170px;}
}
.row{margin-right:-10px;margin-left:-10px;}
.col-sm-3,.col-xs-6{position:relative;min-height:1px;padding-right:10px;padding-left:10px;}
.col-xs-6{float:left;}
.col-xs-6{width:50%;}
@media (min-width: 768px){
.col-sm-3{float:left;}
.col-sm-3{width:25%;}
}
table{background-color:transparent;}
th{text-align:left;}
.table{width:100%;max-width:100%;margin-bottom:25px;}
.table > thead > tr > th,.table > tbody > tr > td{padding:12px 10px;line-height:1.42857143;vertical-align:middle;border-bottom:1px solid #edf0f2;}
.table > tbody > tr > td.cell-actions{padding-top:6px;padding-bottom:6px;}
.table > tbody > tr > td.cell-actions:last-child{text-align:right;white-space:nowrap;}
.table > thead > tr > th{padding:16px 10px;vertical-align:bottom;border-bottom:1px solid #edeff2;color:#9da2a6;font-size:13px;font-weight:300;}
.table > colgroup + thead > tr:first-child > th{border-top:0;}
@media (max-width: 767px){
.table-checkbox > tbody > tr{padding-left:40px;}
}
.form-control{display:block;width:100%;height:50px;padding:8px 12px;font-size:14px;line-height:1.42857143;color:#555;background-color:#fff;background-image:none;border:1px solid #dcdee0;border-radius:3px;-webkit-transition:border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s;}
.form-control:focus{border-color:#1e88e5;outline:0;}
.form-control::-moz-placeholder{color:#999;opacity:1;}
.form-control:-ms-input-placeholder{color:#999;}
.form-control::-webkit-input-placeholder{color:#999;}
.checkbox{position:relative;display:block;margin-top:10px;margin-bottom:10px;}
.checkbox + .checkbox{margin-top:-5px;}
.input-xs{height:36px;padding:5px 5px;font-size:14px;line-height:1.5;border-radius:3px;}
.btn{display:inline-block;min-width:100px;padding:12px 24px;margin-bottom:0;font-size:15px;font-weight:bold;line-height:24px;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:none;border:1px solid transparent;border-radius:3px;}
@media (max-width: 991px){
.btn{min-width:86px;}
}
.btn:focus,.btn:active:focus{outline:none;}
.btn:hover,.btn:focus{text-decoration:none;}
.btn:active{background-image:none;outline:0;}
.btn-link{color:#1e88e5;}
.btn-link,.btn-link:active{background-color:transparent;-webkit-box-shadow:none;box-shadow:none;}
.btn-link,.btn-link:hover,.btn-link:focus,.btn-link:active{border-color:transparent;}
.btn-link:hover,.btn-link:focus{color:#1e88e5;background-color:transparent;}
.btn-sm.btn-link{padding-left:8px;padding-right:8px;}
.btn i{margin-right:16px;font-size:24px;vertical-align:bottom;}
.btn-icon{min-width:0;padding-left:12px;padding-right:12px;}
.btn-icon.btn-sm{line-height:24px;}
.btn-icon.btn-sm{padding:9px;font-size:19px;}
.btn.btn-icon i{float:none;display:block;height:24px;width:24px;margin:0 auto;font-size:24px;}
.btn.btn-icon i:before{line-height:24px;}
.btn-icon.btn-sm > i{font-size:19px;}
.btn.btn-icon.btn-link{color:#616366;}
.btn.btn-icon.btn-link:hover,.btn.btn-icon.btn-link:active{color:#1e88e5;}
.nav{padding-left:0;margin-bottom:0;list-style:none;}
.nav > li{position:relative;display:block;}
.nav-tabs{margin:0 -16px;border-bottom:1px solid #edf0f2;white-space:nowrap;}
.nav-tabs > li{display:inline-block;}
.nav-tabs > li > span{position:relative;padding:14px 2px;margin:0 14px;color:#616366;line-height:20px;-webkit-transition:color ease-in .15s;transition:color ease-in .15s;}
.nav-tabs > li > span:after{position:absolute;bottom:0;left:50%;display:block;content:"";height:2px;width:0;-webkit-transition:ease-in all .15s;transition:ease-in all .15s;}
.nav-tabs > li.active > span{color:#1e88e5;cursor:default;}
.nav-tabs > li.active > span:after{width:100%;margin-left:-50%;background-color:#1e88e5;}
@media (max-width: 767px){
.nav-tabs{margin:0 -12px;}
}
@media (min-width: 768px){
.navbar{border-radius:4px;}
}
@media (min-width: 768px){
.navbar-header{float:left;}
}
.navbar-brand{height:58px;padding:0;margin:-6px 0 -6px;font-size:18px;line-height:20px;}
.navbar-brand:hover,.navbar-brand:focus{text-decoration:none;}
@media (min-width: 768px){
.navbar-brand{float:left;}
}
.navbar-toggle:focus{outline:0;}
.navbar-toggle .icon-bar{display:block;width:24px;height:2px;border-radius:1px;}
.navbar-toggle i{padding:4px 0;}
.navbar-toggle .icon-bar + .icon-bar{margin-top:5px;}
@media (min-width: 768px){
.navbar-toggle{display:none;}
}
.navbar-nav{margin:7.5px -15px;}
@media (min-width: 768px){
.navbar-nav{float:left;margin:0;}
.navbar-nav > li{float:left;}
}
.label{display:inline-block;padding:4px 6px;font-size:11px;font-weight:300;line-height:11px;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:2px;}
.label:empty{display:none;}
.label-primary{background-color:#1e88e5;}
.status{display:inline-block;white-space:nowrap;}
.status:before{display:inline-block;content:"";height:8px;width:8px;margin:-6px 6px 0 0;vertical-align:middle;-webkit-border-radius:4px;border-radius:4px;}
.status-success{color:#43A047;}
.status-success:before{background-color:#43A047;}
.panel{position:relative;display:block;margin-bottom:20px;background-color:#fff;border:1px solid #e3e5e8;-webkit-border-radius:3px;border-radius:3px;text-align:left;}
.container:before,.container:after,.row:before,.row:after,.nav:before,.nav:after,.navbar:before,.navbar:after,.navbar-header:before,.navbar-header:after{display:table;content:" ";}
.container:after,.row:after,.nav:after,.navbar:after,.navbar-header:after{clear:both;}
.flag{display:inline-block;height:36px;width:54px;margin-right:10px;vertical-align:middle;-webkit-border-radius:3px;border-radius:3px;}
.flag-sm{display:inline-block;height:18px;width:27px;-webkit-border-radius:3px;border-radius:3px;}
.flag-england-sm{background-image:url(https://www.vultr.com/dist/img/flags/flagsm_gb.png);}
.flag-france-sm{background-image:url(https://www.vultr.com/dist/img/flags/flagsm_fr.png);}
.flag-germany-sm{background-image:url(https://www.vultr.com/dist/img/flags/flagsm_de.png);}
.flag-netherlands-sm{background-image:url(https://www.vultr.com/dist/img/flags/flagsm_nl.png);}
.flag-xs{display:inline-block;height:13px;width:16px;vertical-align:middle;-webkit-border-radius:2px;border-radius:2px;}
.flag-germany-xs{background-image:url(https://www.vultr.com/dist/img/flags/flagxs_de.png);}
.flag-singapore-xs{background-image:url(https://www.vultr.com/dist/img/flags/flagxs_sg.png);}
.flag-usa-xs{background-image:url(https://www.vultr.com/dist/img/flags/flagxs_us.png);}
.zmdi{display:inline-block;font:normal normal normal 14px/1 'Material-Design-Iconic-Font';font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.zmdi-card:before{content:'\f129';}
.zmdi-email:before{content:'\f15a';}
.zmdi-money-box:before{content:'\f198';}
.zmdi-more:before{content:'\f19c';}
.zmdi-power:before{content:'\f1af';}
.zmdi-storage:before{content:'\f1d2';}
.zmdi-notifications:before{content:'\f1fe';}
.zmdi-account-o:before{content:'\f206';}
.zmdi-plus:before{content:'\f278';}
.zmdi-chevron-left:before{content:'\f2fa';}
.zmdi-chevron-right:before{content:'\f2fb';}
.zmdi-play:before{content:'\f3aa';}
.zmdi-card:before{content:'\f129';}
.zmdi-email:before{content:'\f15a';}
.zmdi-money-box:before{content:'\f198';}
.zmdi-more:before{content:'\f19c';}
.zmdi-power:before{content:'\f1af';}
.zmdi-storage:before{content:'\f1d2';}
.zmdi-notifications:before{content:'\f1fe';}
.zmdi-account-o:before{content:'\f206';}
.zmdi-plus:before{content:'\f278';}
.zmdi-chevron-left:before{content:'\f2fa';}
.zmdi-chevron-right:before{content:'\f2fb';}
.zmdi-play:before{content:'\f3aa';}
.icon{display:inline-block;color:#1e88e5;font-family:'icons';font-size:24px;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.icon-xs{height:18px;width:18px;font-size:18px;}
.icon-os{color:#1e88e5;}
.icon-debian:before{content:"\e90b";}
.icon-centos:before{content:"\e90d";}
.icon-ubuntu:before{content:"\e90e";}
.icon-windows:before{content:"\e90f";}
.icon-coreos:before{content:"\e92e";}
.icon-freebsd:before{content:"\e92f";}
.icon-fedora:before{content:"\e93b";}
.icon-openbsd:before{content:"\e942";}
/*! CSS Used from: https://www.vultr.com/dist/css/main.css?v=401 */
a{-webkit-transition:color ease-in .15s;-moz-transition:color ease-in .15s;-ms-transition:color ease-in .15s;-o-transition:color ease-in .15s;transition:color ease-in .15s;}
.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;}
@media (max-width: 991px){
.container{padding-left:24px;padding-right:24px;}
}
@media (max-width: 767px){
.container{padding-left:20px;padding-right:20px;}
}
.navbar-brand{height:58px;width:167px;background:url(https://www.vultr.com/dist/img/logo.svg) no-repeat 0 0;background-size:cover;}
@media (max-width: 767px){
.navbar-header .navbar-brand{display:inline-block;float:none;height:52px;width:152px;}
.navbar-brand{margin:-3px 0 -11px;}
}
.navbar-toggle{position:absolute;z-index:10;left:10px;}
.navbar-toggle .icon-bar{background-color:#fff;}
@media (min-width: 767px){
.navbar-container{float:right;}
}
@media (max-width: 767px){
.navbar-container{position:fixed;left:0;top:0;height:100%;width:100%;padding-top:25px;background-color:transparent;-webkit-transition:linear background .15s;transition:linear background .15s;visibility:hidden;overflow-y:auto;}
}
.page-banner .container{height:100%;position:relative;z-index:999;}
.banner-image .image{display:inline-block;}
.packages{padding:32px 0 5px 0;}
.package{position:relative;display:block;margin:0 0 20px 0;border:1px solid #e6e9eb;-webkit-border-radius:4px;border-radius:4px;text-align:center;}
@media (max-width: 379px){
.packages .col-xs-6{width:100%;}
}
.package-header{padding:22px 20px 26px;border-bottom:1px solid #e6e9eb;}
.package-title{margin:0 0 10px 0;font-size:15px;font-weight:bold;}
.package-price{display:block;color:#1e88e5;font-size:33px;font-weight:500;line-height:40px;}
.package-price .cycle{font-size:20px;font-weight:300;}
.package-hourly{display:block;color:#8a9399;font-size:16px;line-height:15px;}
.package-body{padding:24px;}
.package-body ul{margin:0;padding:0;list-style:none;}
.package-body ul > li{margin:0 0 4px 0;color:#616366;}
.package-body ul > li:last-child{margin:0;}
@media (max-width: 991px){
.package-body{padding:24px 10px;}
}
.package,.package:after{-webkit-transition:all ease-in .3s;-moz-transition:all ease-in .3s;-ms-transition:all ease-in .3s;-o-transition:all ease-in .3s;transition:all ease-in .3s;}
.table{font-size:14px;}
.table small{padding-top:4px;display:block;}
.table b{color:#2b3033;}
.table > thead > tr > th:first-child,.table > tbody > tr > td:first-child{padding-left:5px;}
.table > thead > tr > th:last-child,.table > tbody > tr > td:last-child{padding-right:5px;}
.table .cell-actions .btn > i{font-size:24px;}
.browser{position:relative;z-index:2;padding:36px 10px 10px 10px;margin:0 auto;background-color:#39444d;border-radius:6px;overflow:hidden;}
.browser-xlg{height:634px;}
.browser-header{position:absolute;top:0;left:0;height:36px;width:100%;padding:8px 35px 8px 55px;}
.browser-buttons{position:absolute;left:0;top:0;float:left;padding:6px 10px;}
.browser-buttons span{display:inline-block;height:8px;width:8px;margin:0 5px 0 0;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
.browser-buttons span:nth-child(1){background-color:#d74645;}
.browser-buttons span:nth-child(2){background-color:#d7c045;}
.browser-buttons span:nth-child(3){background-color:#43ab9b;}
.browser-bar{width:100%;height:20px;background-color:#2d363d;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;}
.browser-menu{position:absolute;right:0;top:0;padding:14px 10px;}
.browser-menu span{display:block;height:1px;width:16px;margin:0 0 3px 0;background-color:#2d363d;}
.browser-body{position:relative;height:100%;width:100%;background-color:#fff;overflow:hidden;}
.phone{background-color:#333d45;}
.phone-xlg{height:445px;width:215px;padding:50px 10px;-webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px;}
.phone-header{position:absolute;top:0;left:0;height:50px;width:100%;}
.phone-body{position:relative;height:100%;width:100%;background-color:#fff;overflow:hidden;}
.phone-speaker{height:3px;width:40px;margin:23px auto;background-color:#22292e;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;}
.phone-footer{position:absolute;bottom:0;left:0;height:50px;width:100%;}
.phone-btn{height:34px;width:34px;margin:8px auto;background-color:#22292e;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;}
@media (max-width: 1199px){
.phone-xlg{height:405px;width:200px;}
}
.server{position:relative;height:112px;width:90px;background:url(https://www.vultr.com/dist/img/section/server.svg);}
.row > div:focus{outline:0;}
/*! CSS Used from: https://www.vultr.com/dist/css/panel.css?v=401 */
.responsive-image .browser{width:86%;-webkit-box-shadow:0 10px 60px -10px rgba(37,45,51, .5);box-shadow:0 10px 60px -10px rgba(37,45,51, .5);}
.responsive-image .phone{-webkit-box-shadow:0 10px 70px -10px rgba(37,45,51, .5);box-shadow:0 10px 70px -10px rgba(37,45,51, .5);}
.responsive-image .play:after,.responsive-image .browser:after,.responsive-image .phone:after{display:block;content:"";position:absolute;right:0;top:0;bottom:0;z-index:999;width:50%;background-color:rgba(0,0,0, 0.05);}
.image-lines{position:absolute;top:100px;left:-80px;height:54px;width:300px;background:url(https://www.vultr.com/dist/img/section/lines.svg);}
.image-lines-right{left:auto;right:-84px;}
@media (max-width: 1199px){
.page-banner-home .responsive-image .phone{left:-30px;}
}
@media (max-width: 991px){
.page-banner-home .responsive-image .phone{display:none;left:-20px;}
.responsive-image{margin:0 -24px;}
.responsive-image .browser:not(.mobile-size){min-width:758px;}
}
.responsive-image{position:relative;}
.responsive-image .phone{position:absolute;left:-20px;bottom:-19px;z-index:3;overflow:hidden;}
.play{position:absolute;top:0;bottom:0;left:0;right:0;z-index:1001;cursor:pointer;background:#026FCE;background:linear-gradient(45deg, #0B4182 1%, #1e88e5 64%, #40BAF5 97%);background-image:-ms-linear-gradient(45deg, #0B4182 1%, #1e88e5 64%, #40BAF5 97%);background-image:-moz-linear-gradient(45deg, #0B4182 1%, #1e88e5 64%, #40BAF5 97%);background-image:-o-linear-gradient(45deg, #0B4182 1%, #1e88e5 64%, #40BAF5 97%);background-image:-webkit-linear-gradient(45deg, #0B4182 1%, #1e88e5 64%, #40BAF5 97%);background-image:linear-gradient(45deg, #0B4182 1%, #1e88e5 64%, #40BAF5 97%);-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;transition:all .25s ease-in-out;}
.animated .play{opacity:0;visibility:hidden;}
.play-btn{position:absolute;top:50%;left:50%;right:0;display:inline-block;height:52px;width:52px;margin:-26px 0 0 -26px;border:2px solid rgba(196, 227, 255, 0.8);color:rgba(196, 227, 255, 0.8);font-size:24px;line-height:50px;text-align:center;-webkit-border-radius:100%;border-radius:100%;-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;transition:all .25s ease-in-out;}
.play-btn > i{margin-left:2px;}
.play:hover .play-btn{color:#fff;border-color:#fff;}
.browser .play-btn{display:inline-block;height:100px;width:100px;margin:-50px 0 0 -50px;font-size:42px;line-height:98px;}
.responsive-image .browser{-webkit-transition:all ease 0.5s;}
.mobile-size .mobile-size-hidden{display:none!important;}
.control-panel{position:absolute;height:100%;width:100%;color:#616366;font-size:11px;line-height:15px;text-align:left;visibility:visible!important;}
.control-panel p{margin-bottom:10px;}
.cp-navbar{position:absolute;top:0;left:0;height:100%;width:68px;padding:24px 0;overflow:hidden;}
.cp-navbar > *{position:relative;z-index:1;}
.cp-navbar:after{position:absolute;top:0;left:0;display:block;content:"";height:100%;width:350px;background:#026FCE;background:linear-gradient(80deg, #0B4182 1%, #1e88e5 64%, #40BAF5 97%);background-image:-ms-linear-gradient(80deg, #0B4182 1%, #1e88e5 64%, #40BAF5 97%);background-image:-moz-linear-gradient(80deg, #0B4182 1%, #1e88e5 64%, #40BAF5 97%);background-image:-o-linear-gradient(80deg, #0B4182 1%, #1e88e5 64%, #40BAF5 97%);background-image:-webkit-linear-gradient(80deg, #0B4182 1%, #1e88e5 64%, #40BAF5 97%);background-image:linear-gradient(80deg, #0B4182 1%, #1e88e5 64%, #40BAF5 97%);}
.cp-navbar .navbar-header{float:none;margin-bottom:30px;text-align:center;}
.cp-navbar .navbar-brand{display:inline-block;float:none;height:32px;width:32px;background-image:url(https://www.vultr.com/dist/img/section/bird2.svg);background-size:32px auto;font-size:0;line-height:32px;text-indent:-9999px;}
.cp-navbar .navbar-nav{display:block;width:68px;margin:0;padding:0;list-style:none;}
.cp-navbar .navbar-nav > li{float:none;margin-bottom:12px;}
.cp-navbar .navbar-nav > li > span{display:block;padding:6px 0;color:rgba(196, 227, 255, 0.8);font-size:10px;font-weight:bold;text-align:center;line-height:16px;}
.cp-navbar .navbar-nav > li > span > i{position:relative;display:block;margin-bottom:5px;font-size:17px;}
.desktop-size .navbar-toggle,.desktop-size .notification-toggle,.desktop-size .cp-navbar .navbar-logout{display:none;}
.mobile-size .cp-navbar:after{width:120%;}
.mobile-size .cp-navbar{height:38px;width:100%;padding:4px 0;}
.mobile-size .cp-navbar .navbar-container{display:none;}
.mobile-size .cp-navbar .navbar{padding:0 10px;}
.mobile-size .cp-navbar .navbar-header{padding-left:18px;margin:0;}
.mobile-size .cp-navbar .navbar-brand{margin-top:-3px;margin-bottom:-3px;}
.mobile-size .cp-navbar .navbar-toggle{display:block;position:absolute;top:6px;left:6px;z-index:3;padding:5px;}
.mobile-size .cp-navbar .navbar-toggle .icon-bar{height:1px;width:14px;background-color:#fff;}
.mobile-size .cp-navbar .navbar-toggle .icon-bar + .icon-bar{margin-top:3px;}
.mobile-size .cp-navbar .navbar-header .notification-toggle{float:right;padding:9px 5px;}
.mobile-size .cp-navbar .navbar-header .notification-toggle > i{color:#fff;font-size:15px;}
.cp-content .row{margin-left:-5px;margin-right:-5px;}
.cp-content [class*="col-"]{padding-right:5px;padding-left:5px;}
.cp-content .h6{display:block;margin:0 0 20px 0;}
.cp-content .panel{padding:14px;margin-bottom:12px;-webkit-border-radius:2px;border-radius:2px;}
.cp-content .tabs-container{margin-bottom:20px;}
.cp-content .tabs-container > .btn{display:none;}
.cp-content .nav-tabs{margin:0 -8px;border-bottom:none;}
.cp-content .nav-tabs > li > span{display:inline-block;padding:10px 1px;margin:0 8px;line-height:10px;}
.mobile-size .cp-content{margin:38px 0 0 0;}
.mobile-size .cp-content .h6{margin-top:6px;font-size:12px;line-height:16px;}
.mobile-size .step-list > li:nth-child(2) .h6{margin-bottom:10px;}
.cp-server-list{opacity:0;visibility:hidden;}
.no-data{width:200px;padding-top:100px;margin:0 auto;text-align:center;}
.no-data .server{display:inline-block;margin-bottom:10px;}
.mobile-size .no-data{width:150px;padding-top:40px;}
.mobile-size .no-data .server{height:59px;width:47px;}
.cp-servers-table{position:absolute;top:20px;opacity:0;visibility:hidden;}
.desktop-size .cp-servers-table{width:700px;}
.desktop-size .cp-servers-table-mobile{display:none;}
.cp-server-deploying{position:absolute;left:0;right:0;top:0;bottom:0;z-index:999;background:#fff;height:100%;margin-left:68px;opacity:0;visibility:hidden;}
.mobile-size .cp-server-deploying{margin-left:0;}
.cp-content .step-list{padding:10px 0 24px 0;margin:0;list-style:none;}
.cp-content .step-list > li{position:relative;padding:0 0 0 40px;margin:24px 0 0 0;}
.cp-content .step-list > li:after,.cp-content .step-list > li:before{display:table;content:"";clear:both;}
.cp-content .step-list li > .step{display:inline-block;height:26px;width:26px;border:1px solid #D2D8DC;color:#8a9399;font-size:11px;font-weight:bold;text-align:center;line-height:26px;-webkit-border-radius:26px;border-radius:26px;}
.desktop-size .cp-content .step-list li > .step{position:absolute;top:-3px;left:0;}
.mobile-size .cp-content .step-list > li{padding:0;margin-top:14px;}
.mobile-size .cp-content .step-list li > .step{float:left;}
.mobile-size .cp-content .step-list li > .h6{margin-left:36px;white-space:nowrap;}
.cp-content .panel .select-icon{position:relative;font-size:28px;}
.cp-content .panel .select-icon:before{color:#1e88e5;}
.cp-content .panel .select-icon span,.cp-content .panel .select-icon span:before{position:absolute;top:0;left:0;display:block;height:100%;width:102%;background:#fff;opacity:0;}
.cp-content .panel .select-icon span:before{left:50%;top:50%;content:"\f26b";height:26px;width:26px;margin:-13px 0 0 -13px;background:#1e88e5;-webkit-border-radius:40px;border-radius:40px;color:#fff;font-size:14px;font-family:'Material-Design-Iconic-Font';text-align:center;line-height:26px;-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);}
.cp-content .select-name{display:block;margin:0;color:#363b40;font-size:11px;font-weight:bold;line-height:11px;}
.cp-content .select-name small{display:block;margin-top:4px;color:#919699;font-size:8px;font-weight:300;text-transform:uppercase;}
.cp-content .select-header{position:relative;padding-left:44px;}
.cp-content .select-header:after,.cp-content .select-header:before{display:table;content:"";clear:both;}
.cp-content .select-header .select-icon{position:absolute;top:50%;left:0;}
.cp-content .select-header .select-icon.icon{margin-top:-15px;}
.cp-content .select-header .select-icon.flag{margin-top:-10px;}
.cp-content .select-options{position:absolute;top:-1px;left:-1px;right:-1px;z-index:1;display:none;width:101%;padding:55px 0 14px 0;margin:0;-webkit-border-radius:3px;border-radius:3px;list-style:none;}
.cp-content .select-options > li{padding:2px 14px;color:#616366;font-size:10px;}
.cp-content .packages{padding:0;}
.cp-content .package{margin-bottom:12px;-webkit-border-radius:2px;border-radius:2px;}
.cp-content .package-header{padding:12px;}
.cp-content .package-title{margin-bottom:4px;font-size:11px;line-height:16px;}
.cp-content .package-price{font-size:24px;font-weight:300;line-height:24px;}
.cp-content .package-price .cycle{font-size:12px;}
.cp-content .package-body ul > li{margin-bottom:2px;}
.cp-content .package-hourly{font-size:10px;line-height:10px;}
.cp-content .package-body{padding:12px;}
.cp-content .form-control{height:28px;font-size:11px;-webkit-border-radius:1px;border-radius:1px;}
.cp-content .checkbox-style{position:relative;display:inline-block;height:12px;width:12px;margin-top:-6px;margin-right:6px;background:#fff;border:2px solid #cacdcf;border-radius:2px;-webkit-transition:all .15s ease;transition:all .15s ease;cursor:pointer;vertical-align:middle;}
.cp-content .checkbox-style:before{position:absolute;top:-2px;left:-2px;display:block;content:"\f26b";height:12px;width:12px;opacity:0;color:#fff;font-size:12px;font-family:'Material-Design-Iconic-Font';text-align:center;line-height:12px;-webkit-transition:0.15s ease-in-out;transition:0.15s ease-in-out;-webkit-transform:scale(.7);-ms-transform:scale(.7);transform:scale(.7);}
.cp-content .checkbox{white-space:nowrap;}
.cp-content .label{padding:3px 4px;font-size:8px;-webkit-border-radius:1px;border-radius:1px;}
.cp-deploy-summary{position:absolute;right:0;left:0;z-index:9999;padding:14px 0;background:#fff;}
.cp-deploy-summary:after,.cp-deploy-summary:before{display:table;content:"";clear:both;}
.cp-summary-price{display:inline-block;padding:8px 0;font-size:13px;font-weight:bold;}
.cp-summary-price span{color:#1e88e5;}
.cp-summary-btn{float:right;display:block;padding:8px 14px;background:#1e88e5;color:#fff;font-weight:bold;-webkit-border-radius:2px;border-radius:2px;}
.desktop-size .cp-deploy-summary{bottom:0;margin-left:68px;-webkit-box-shadow:0 0 15px rgba(0,0,0, 0.1);box-shadow:0 0 15px rgba(0,0,0, 0.1);}
.desktop-size .cp-deploy-server .cp-content .cp-container > .cp-deploy-summary{display:none;}
.mobile-size .cp-deploy-server > .cp-deploy-summary{display:none;}
.mobile-size .cp-summary-price{padding-top:0;padding-bottom:15px;}
.mobile-size .cp-deploy-summary{border-top:1px solid #edf0f2;text-align:center;}
.mobile-size .cp-summary-btn{display:block;width:100%;}
.cp-header{margin-bottom:0px;border-bottom:1px solid #edf0f2;text-align:left;}
.cp-header .h1{display:inline-block;margin:30px 0 18px;font-size:17px;line-height:20px;}
.cp-header .tabs-container{margin:0 0 -1px 0;}
.cp-header-hero{text-align:center;}
.cp-header-hero .h1{margin:38px 0 32px;font-size:20px;line-height:24px;}
.mobile-size .cp-header .h1{margin:10px 0 0;font-size:14px;font-weight:500;}
.mobile-size .cp-header-hero .h1{margin:15px 0 10px;}
.cp-deploy-btn{position:absolute;height:36px;width:36px;background:#1e88e5;color:#fff;font-size:18px;text-align:center;line-height:36px;-webkit-border-radius:100%;border-radius:100%;-webkit-box-shadow:0 3px 10px rgba(0,0,0, 0.2);box-shadow:0 3px 10px rgba(0,0,0, 0.2);}
.desktop-size .control-panel .cp-deploy-btn{bottom:-15px;right:20px;-webkit-animation:all ease .4s 0.5s;animation:all ease .4s .5s;}
.mobile-size .control-panel .cp-deploy-btn{bottom:-42px;right:10px;z-index:9999;-webkit-animation:all ease .4s 0.5s;animation:all ease .4s .5s;}
.cp-content{position:absolute;left:0;right:0;top:0;bottom:0;margin-left:68px;}
.cp-container{position:relative;max-width:776px;margin:0 auto;padding:0 20px;}
.mobile-size .cp-container{padding:0 10px;}
.mobile-size .cp-content .col-sm-3{width:100%;}
.cp-cursor{position:absolute;z-index:1000;right:300px;top:200px;width:28px;height:31px;}
.desktop-size .cp-cursor:before{position:absolute;z-index:1;display:block;content:"";width:28px;height:31px;background:url(https://www.vultr.com/dist/img/panel/cursor-pointer@2x.png);background-size:cover;}
.animated .cp-cursor:after{position:absolute;top:-5px;left:0;z-index:-1;height:40px;width:40px;display:block;content:"";background:#1e88e5;margin:-10px;-webkit-border-radius:100%;border-radius:100%;opacity:1;-ms-filter:none;filter:none;-webkit-transform:scale(0);transform:scale(0);}
.mobile-size .cp-cursor{right:100px;top:100px;}
@media (max-width: 1199px){
.cp-cursor{right:210px;}
}
@media (max-width: 991px){
.cp-cursor{right:220px;}
}
.cp-deploy-server{position:relative;z-index:998;height:100%;opacity:0;}
.mobile-size .cp-deploy-server .cp-content,.desktop-size .cp-deploy-server .cp-content{z-index:9999;height:1400px;background:#fff;}
.mobile-size .cp-deploy-server .cp-content{height:2960px;}
.cp-servers-table{padding-top:20px;}
.cp-servers-table .table{font-size:11px;}
.cp-servers-table .table thead th{padding:6px 10px;}
.cp-servers-table .table > thead > tr > th,.cp-servers-table .table > tbody > tr > td{padding:6px 7px;}
.cp-servers-table .table .flag-xs{margin-right:4px;margin-bottom:-3px;}
.mobile-size .cp-servers-table{top:0;left:0;right:0;}
.mobile-size .cp-servers-table .table thead{display:none;}
.mobile-size .cp-servers-table .cp-table-servers > tbody > tr{position:relative;padding-left:20px;}
.mobile-size .cp-servers-table .cp-table-servers > tbody > tr > .cp-cell-title{padding-right:30px;}
.mobile-size .cp-servers-table .cp-table-servers > tbody > tr > .cp-cell-os{display:none;}
.mobile-size .cp-servers-table .cp-table-servers > tbody > tr > .cp-cell-checkbox{display:none;}
.mobile-size .cp-servers-table .table,.mobile-size .cp-servers-table .table tbody,.mobile-size .cp-servers-table .table tr,.mobile-size .cp-servers-table .table td{display:block;}
.mobile-size .cp-servers-table .table td{border:none;padding-top:3px;padding-bottom:3px;}
.mobile-size .cp-servers-table{display:none;}
.mobile-size .cp-servers-table-mobile{position:absolute;top:20px;opacity:0;visibility:hidden;}
.mobile-size .cp-cell-costs,.mobile-size .cp-cell-status{float:left;width:50%;}
.mobile-size .cp-cell-status{text-align:right;margin-bottom:12px;}
.cp-table-label{display:none;}
.cp-cell-location{white-space:nowrap;}
.cp-progress{position:absolute;left:50%;top:50%;height:12px;width:160px;margin:-6px 0 0 -80px;border:1px solid #e6e9eb;-webkit-border-radius:30px;border-radius:30px;}
.cp-progress-bar{position:absolute;top:2px;left:2px;height:6px;width:0;background:#1e88e5;-webkit-border-radius:30px;border-radius:30px;}
.animated .cp-cursor:after{-webkit-animation:cursorTap .4s .5s, cursorTap .4s 1.9s, cursorTap .4s 3s, cursorTap .4s 3.8s, cursorTap .4s 5s, cursorTap .4s 6.2s, cursorTap .4s 7.4s, cursorTap .4s 9.8s;animation:cursorTap .4s .5s, cursorTap .4s 1.9s, cursorTap .4s 3s, cursorTap .4s 3.8s, cursorTap .4s 5s, cursorTap .4s 6.2s, cursorTap .4s 7.4s, cursorTap .4s 9.8s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;}
.desktop-size .animated .cp-deploy-btn{-webkit-animation:all ease .25s .5s;animation:all ease .25s .5s;}
.desktop-size .animated .cp-cursor{-webkit-animation:cursorMove .5s, cursorMove2 .6s 1.5s, cursorMove3 .8s 2.3s, cursorMove4 .3s 3.5s, cursorMove5 .4s 4s, cursorMove6 .4s 5.8s, cursorMove7 1s 6.5s, cursorMove8 .8s 9.1s;animation:cursorMove .5s, cursorMove2 .6s 1.5s, cursorMove3 .8s 2.3s, cursorMove4 .3s 3.5s, cursorMove5 .4s 4s, cursorMove6 .4s 5.8s, cursorMove7 1s 6.5s, cursorMove8 .8s 9.1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;}
.desktop-size .animated .cp-deploy-btn{-webkit-animation-name:click;animation-name:click;}
.animated .cp-server-list{-webkit-animation:show 0s 0s, hide .5s .7s, show .5s 12s;animation:show 0s 0s, hide .5s .7s, show .5s 12s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;}
.animated .cp-server-list .no-data{-webkit-animation:hide 0s 1s;animation:hide 0s 1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;}
.animated .cp-servers-table{-webkit-animation:show 0s 1s;animation:show 0s 1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;}
.animated .cp-servers-table-mobile{-webkit-animation:show 0s 1s;animation:show 0s 1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;}
.animated .cp-deploy-server{-webkit-animation:show .5s .9s, hide 0s 11s;animation:show .5s .9s, hide 0s 11s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;}
.desktop-size .animated .cp-deploy-server .cp-content{-webkit-animation:contentMove 1s 2.3s, contentMove2 1s 4s, contentMove3 .8s 5.2s, contentMove4 1s 6.5s;animation:contentMove 1s 2.3s, contentMove2 1s 4s, contentMove3 .8s 5.2s, contentMove4 1s 6.5s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;}
.animated .cp-location-click,.animated .cp-location-click .select-icon span,.animated .cp-location-click .select-icon span:before{-webkit-transition:all ease .15s 2s;transition:all ease .15s 2s;}
.animated .cp-location-click{border-color:#1e88e5;}
.animated .cp-location-click .select-icon span{opacity:1;}
.animated .cp-location-click .select-icon span:before{opacity:1;-webkit-transform:scale(1);transform:scale(1);}
.animated .cp-os-click{-webkit-transition:all ease .15s 3.1s;transition:all ease .15s 3.1s;}
.animated .cp-os-click{border-color:#1e88e5;}
.animated .cp-os-click .select-header{position:relative;z-index:2;}
.cp-os-click .select-options{opacity:0;display:block;background:#fff;border:1px solid #1e88e5;-webkit-box-shadow:0 0 40px -10px rgba(37,45,51, .5);box-shadow:0 0 40px -10px rgba(37,45,51, .5);}
.animated .cp-os-click .select-options{-webkit-animation:show .15s 3.1s, hide .15s 3.9s;animation:show .15s 3.1s, hide .15s 3.9s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;}
.animated .cp-os-click .select-icon span,.animated .cp-os-click .select-icon span:before{-webkit-transition:all ease .15s 3.9s;transition:all ease .15s 3.9s;}
.animated .cp-os-click .select-options > li:first-child{-webkit-transition:all ease .15s 3.5s;transition:all ease .15s 3.5s;}
.animated .cp-os-click .select-options > li:first-child{color:#1e88e5;}
.animated .cp-os-click .select-icon span{opacity:1;}
.animated .cp-os-click .select-icon span:before{opacity:1;-webkit-transform:scale(1);transform:scale(1);}
.animated .cp-package-click{-webkit-transition:all ease .15s 5s;transition:all ease .15s 5s;}
.animated .cp-package-click{border-color:#1e88e5;}
.animated .cp-checkbox-click,.animated .cp-checkbox-click:before{-webkit-transition:all ease .15s 6.2s;transition:all ease .15s 6.2s;}
.animated .cp-checkbox-click:before{opacity:1;-webkit-transform:scale(1);transform:scale(1);}
.animated .cp-checkbox-click{border-color:#1e88e5;background-color:#1e88e5;}
.cp-instance-input{position:relative;color:#999;overflow:hidden;border:1px solid #dcdee0;}
.cp-instance-input .form-control{white-space:nowrap;border-width:0px;}
.cp-instance-name{position:absolute;top:7px;left:10px;display:block;width:160px;background:#fff;color:#616366;overflow:hidden;}
.cp-instance-name > span{position:absolute;top:0;right:0;display:block;width:200px;height:100%;background:#fff;}
.animated .cp-instance-input .form-control{-webkit-animation:borderColor .15s 7.5s;animation:borderColor .15s 7.5s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;}
.animated .cp-instance-name > span{-webkit-animation:typing 1.5s steps(36, end) 7.6s;animation:typing 1.5s steps(36, end) 7.6s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;}
.animated .cp-server-deploying{-webkit-animation:show .5s 10s, hide .5s 12s;animation:show .5s 10s, hide .5s 12s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;}
.animated .cp-progress-bar{-webkit-animation:load 2s 10s;animation:load 2s 10s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;}
/*! CSS Used from: https://www.vultr.com/_css/global.css?v=401 */
@media only screen and (device-width : 375px) and (device-height : 812px) and (-webkit-device-pixel-ratio : 3) and (orientation : landscape){
.container{padding:constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);}
.col-sm-3{width:50%!important;}
}
/*! CSS Used keyframes */
@keyframes cursorTap{0%{opacity:1;-webkit-transform:scale(0);transform:scale(0);}100%{opacity:0;-webkit-transform:scale(1);transform:scale(1);}}
@keyframes cursorMove{0%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}100%{-webkit-transform:translate3d(200px, -100px, 0);transform:translate3d(200px, -100px, 0);}}
@keyframes cursorMove2{0%{-webkit-transform:translate3d(200px, -100px, 0);transform:translate3d(200px, -100px, 0);}100%{-webkit-transform:translate3d(-70px, 90px, 0);transform:translate3d(-70px, 90px, 0);}}
@keyframes cursorMove3{0%{-webkit-transform:translate3d(-70px, 90px, 0);transform:translate3d(-70px, 90px, 0);}100%{-webkit-transform:translate3d(-370px, 70px, 0);transform:translate3d(-370px, 70px, 0);}}
@keyframes cursorMove4{0%{-webkit-transform:translate3d(-370px, 70px, 0);transform:translate3d(-370px, 70px, 0);}100%{-webkit-transform:translate3d(-420px, 90px, 0);transform:translate3d(-420px, 90px, 0);}}
@keyframes cursorMove5{0%{-webkit-transform:translate3d(-420px, 90px, 0);transform:translate3d(-420px, 90px, 0);}100%{-webkit-transform:translate3d(-200px, -20px, 0);transform:translate3d(-200px, -20px, 0);}}
@keyframes cursorMove6{0%{-webkit-transform:translate3d(-200px, -20px, 0);transform:translate3d(-200px, -20px, 0);}100%{-webkit-transform:translate3d(-460px, 40px, 0);transform:translate3d(-460px, 40px, 0);}}
@keyframes cursorMove7{0%{-webkit-transform:translate3d(-460px, 40px, 0);transform:translate3d(-460px, 40px, 0);}100%{-webkit-transform:translate3d(-300px, 280px, 0);transform:translate3d(-300px, 280px, 0);}}
@keyframes cursorMove8{0%{-webkit-transform:translate3d(-300px, 280px, 0);transform:translate3d(-300px, 280px, 0);}100%{-webkit-transform:translate3d(150px, 360px, 0);transform:translate3d(150px, 360px, 0);}}
@-webkit-keyframes click{0%{-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1);}50%{background:#3ba3ff;-webkit-transform:scale3d(.8, .8, .8);transform:scale3d(.8, .8, .8);}100%{background:#1e88e5;-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1);}}
@keyframes click{0%{-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1);}50%{background:#3ba3ff;-webkit-transform:scale3d(.8, .8, .8);transform:scale3d(.8, .8, .8);}100%{background:#1e88e5;-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1);}}
@-webkit-keyframes show{0%{opacity:0;visibility:hidden;}100%{opacity:1;visibility:visible;}}
@keyframes show{0%{opacity:0;visibility:hidden;}100%{opacity:1;visibility:visible;}}
@-webkit-keyframes hide{0%{opacity:1;visibility:visible;}100%{opacity:0;visibility:hidden;}}
@keyframes hide{0%{opacity:1;visibility:visible;}100%{opacity:0;visibility:hidden;}}
@keyframes contentMove{0%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}100%{-webkit-transform:translate3d(0, -200px, 0);transform:translate3d(0, -200px, 0);}}
@keyframes contentMove2{0%{-webkit-transform:translate3d(0, -200px, 0);transform:translate3d(0, -200px, 0);}100%{-webkit-transform:translate3d(0, -600px, 0);transform:translate3d(0, -600px, 0);}}
@keyframes contentMove3{0%{-webkit-transform:translate3d(0, -600px, 0);transform:translate3d(0, -600px, 0);}100%{-webkit-transform:translate3d(0, -980px, 0);transform:translate3d(0, -980px, 0);}}
@keyframes contentMove4{0%{-webkit-transform:translate3d(0, -980px, 0);transform:translate3d(0, -980px, 0);}100%{-webkit-transform:translate3d(0, -1110px, 0);transform:translate3d(0, -1110px, 0);}}
@-webkit-keyframes borderColor{from{border-color:#e6e9eb;}to{border-color:#1e88e5;}}
@keyframes borderColor{from{border-color:#e6e9eb;}to{border-color:#1e88e5;}}
@-webkit-keyframes typing{from{width:200px;}to{width:0;}}
@keyframes typing{from{width:200px;}to{width:0;}}
@-webkit-keyframes load{0%{width:0;}100%{width:154px;}}
@keyframes load{0%{width:0;}100%{width:154px;}}
/*! CSS Used fontfaces */
@font-face{font-family:Material-Design-Iconic-Font;src:url(https://www.vultr.com/dist/fonts/Material-Design-Iconic-Font.woff2?v=2.2.0) format('woff2'),url(https://www.vultr.com/dist/fonts/Material-Design-Iconic-Font.woff?v=2.2.0) format('woff'),url(https://www.vultr.com/dist/fonts/Material-Design-Iconic-Font.ttf?v=2.2.0) format('truetype');}
@font-face{font-family:'icons';src:url(https://www.vultr.com/dist/fonts/icons/icons.eot?v=401);src:url(https://www.vultr.com/dist/fonts/icons/icons.eot?v=401) format('embedded-opentype'), url(https://www.vultr.com/dist/fonts/icons/icons.ttf?v=401) format('truetype'), url(https://www.vultr.com/dist/fonts/icons/icons.woff?v=401) format('woff'), url(https://www.vultr.com/dist/fonts/icons/icons.svg?v=401) format('svg');font-weight:normal;font-style:normal;}
