/*
@File: dragondrop.cloud Template Styles

* This file contains the styling for the actual template, this
is the file you need to edit to change the look of the template.

This files table contents are outlined below>>>>>

*******************************************
/*

/*
Default Style
============================*/
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400&display=swap');
body {
	font-size: 15px;
	font-family: 'Rubik', sans-serif;
	color: rgba(21, 36, 70, 0.5);
	background-color: #f6faff;
}

a {
	transition: all ease 0.5s;
	text-decoration: none;
	color: rgba(21, 36, 70, 0.5);
}
a:hover {
	text-decoration: none;
	color: #152446;
}
a:focus {
	text-decoration: none;
}

button {
	outline: 0 !important;
	box-shadow: none;
	border: none;
	padding: 0;
}
button:focus {
	box-shadow: none;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
	color: #152446;
	font-weight: bold;
	font-family: 'Rubik', sans-serif;
}

h3 {
	font-weight: 600;
}

.d-table {
	width: 100%;
	height: 100%;
}

.d-table-cell {
	vertical-align: middle;
}

p {
	font-size: 15px;
	margin-bottom: 15px;
	line-height: 1.8;
}
p:last-child {
	margin-bottom: 0;
}

img {
	max-width: 100%;
	height: auto;
}

.form-group {
	position: relative;
	margin-bottom: 10px;
}
.form-group.mb-24 {
	margin-bottom: 24px;
}
.form-group.icon .form-control {
	padding-left: 60px;
}
.form-group.icon img {
	position: absolute;
	top: 10px;
	left: 10px;
}
.form-group.icon i {
	position: absolute;
	top: 19px;
	left: 20px;
}

.form-control {
	height: 40px;
	color: #152446;
	border: 1px solid #f1f5ff;
	background-color: #f1f5ff;
	border-radius: 10px;
	font-size: 14px;
	padding-left: 10px;
	width: 100%;
	transition: all ease 0.5s;
}
.form-control::-moz-placeholder {
	color: #67748e;
	font-size: 13px;
}
.form-control:-ms-input-placeholder {
	color: #67748e;
	font-size: 13px;
}
.form-control::placeholder {
	color: #67748e;
	font-size: 13px;
}
.form-control:focus {
	color: #152446;
	background-color: transparent;
	box-shadow: unset;
	outline: 0;
	border-color: #005597;
}

.form-control:hover:focus,
.form-control:focus {
	box-shadow: unset;
}

textarea.form-control {
	height: auto;
}

.ptb-70 {
	padding-top: 70px;
	padding-bottom: 70px;
}

.pt-70 {
	padding-top: 70px;
}

.pb-70 {
	padding-bottom: 70px;
}

/*
Bg-color Style*/
/*
Default Btn Area Style*/
.default-btn {
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
	transition: all ease 0.5s;
	text-align: center;
	position: relative;
	z-index: 1;
	overflow: hidden;
	display: inline-table;
	padding: 18px 30px;
	background-color: #005597;
	color: #ffffff;
	border-radius: 7px;
}
.default-btn:hover {
	color: #ffffff;
	background-color: #005597;
}

/*
Read More Btn Area Style*/
.read-more {
	font-size: 15px;
	color: #152446;
	font-weight: 600;
}
.read-more i {
	position: relative;
	top: 3px;
	color: #152446;
}
.read-more:hover {
	color: #005597;
}
.read-more:hover i {
	color: #005597;
}

.container-fluid {
	padding-left: 70px;
	padding-right: 70px;
	padding-bottom: 15px;
}

/*
Sidebar Area Style
========================================================*/
.sidebar-menu {
	background-color: #015597;
	width: 250px;
	padding: 30px 15px;
	height: 100vh;
	position: fixed;
	left: 0;
	top: 0;
	/*overflow: auto;*/
	z-index: 9999;
}
.sidebar-menu .logo {
	display: block;
	margin-bottom: 30px;
}
.sidebar-menu .sidebar-nav {
	padding-left: 0;
	margin-bottom: 0;
	list-style: none;
}
.sidebar-menu .nav-item {
	margin-bottom: 16px;
}
.sidebar-menu .nav-item:last-child {
	margin-bottom: 0;
}
.sidebar-menu .nav-item .nav-link {
	padding: 12px 12px;
	border-radius: 10px;
	font-size: 15px;
}
.sidebar-menu .nav-item .nav-link img {
	position: relative;
	top: -1px;
	margin-right: 10px;
}
.sidebar-menu .nav-item .nav-link span {
	color: #ffffff;
}
.sidebar-menu .nav-item .nav-link.active {
	background-color: rgba(255, 255, 255, 0.15);
}
.sidebar-menu .nav-item .nav-link:hover {
	background-color: rgba(255, 255, 255, 0.15);
}

.burger-wrapper {
	display: none;
}

/*
Main Area Style
=====================================================*/
.main-content-wrap {
	padding-left: 250px;
}

/*
Welcome Area Style
=====================================================*/
.welcome-content h2 {
	margin-bottom: 0;
	font-weight: 600;
	font-size: 48px;
}
.welcome-content p {
	font-size: 26px;
	color: rgba(21, 36, 70, 0.5);
}
.welcome-content .info {
	padding-left: 0;
	margin-bottom: 0;
	list-style: none;
	margin-top: 15px;
}
.welcome-content .info li {
	display: inline-block;
	margin-right: 70px;
}
.welcome-content .info li:last-child {
	margin-right: 0;
}
.welcome-content .info li a {
	color: #005597;
	font-size: 26px;
}
.welcome-content .info li a img {
	position: relative;
	top: -1px;
	margin-right: 10px;
}
.welcome-content .default-btn.active {
	background-color: #f63e48;
	margin-left: 22px;
}

/*
Left Sidebar Area Style
=====================================================*/
.single-fetcher {
	background-color: #ffffff;
	border-radius: 8px;
	border-left: 4px solid #005597;
	padding: 40px 50px;
}
.single-fetcher h3 {
	margin-bottom: 20px;
	font-weight: 600;
	font-size: 26px;
}
.single-fetcher .fetcher-item p {
	font-size: 20px;
	margin-right: 30px;
	margin-bottom: 0;
	position: relative;
	padding-left: 30px;
}
.single-fetcher .fetcher-item p:last-child {
	margin-right: 0;
}
.single-fetcher .fetcher-item p span {
	font-weight: 700;
	font-size: 32px;
	position: absolute;
	top: -10px;
	left: 0;
	color: #005597;
	margin-right: 10px;
}
.single-fetcher .fetcher-item p.item-color span {
	color: #f63e48;
}
.single-fetcher.fetcher-border {
	border-color: #f63e48;
}

/*
Table List Style
=====================================================*/
.table-list-area {
	border-color: rgba(21, 36, 70, 0.1);
}
.table-list-area .defined-jobs-content {
	background-color: #ffffff;
	box-shadow: 0 0 20px 3px rgba(0, 0, 0, 0.05);
	border-radius: 8px;
}
.table-list-area .defined-jobs-content h3 {
	color: #152446;
	padding: 40px 25px;
	padding-bottom: 0;
	font-size: 26px;
}
.table-list-area .defined-jobs-content.h-560 {
	height: 560px;
}
.table-list-area .defined-jobs-content.h-560 .table-responsive {
	overflow: hidden;
	max-height: 100%;
	overflow-x: auto;
}
.table-list-area .simplebar-content {
	padding: 0 !important;
}
.table-list-area .table > :not(caption) > * > * {
	padding: 20px 25px;
	font-size: 15px;
	color: rgba(21, 36, 70, 0.5);
	font-weight: 400;
	white-space: nowrap;
	width: 50%;
}
.table-list-area .table {
	margin-bottom: 0;
}
.table-list-area .table tbody tr {
	border-bottom: 1px solid rgba(21, 36, 70, 0.1);
	transition: all ease 0.5s;
	white-space: nowrap;
}
.table-list-area .table tbody tr td {
	padding: 20px 25px;
	font-size: 15px;
	color: #152446;
	vertical-align: middle;
}
.table-list-area .table tbody tr td .btn {
	background-color: #005597;
	color: #ffffff;
}
.table-list-area .table tbody tr td .edit {
	color: #005597;
}
.table-list-area .table tbody tr td .edit img {
	position: relative;
	top: -1px;
	margin-right: 5px;
}
.table-list-area .table tbody tr td .delete {
	color: #f63e48;
}
.table-list-area .table tbody tr td .delete img {
	position: relative;
	top: -2px;
	margin-right: 5px;
}
.table-list-area .table tbody tr td .text-color {
	color: #152446;
}
.table-list-area .table tbody tr td .text-color:hover {
	color: #005597;
}
.table-list-area .table tbody tr td.check-green {
	font-weight: 500;
	font-size: 22px;
	color: #152446;
}
.table-list-area .table tbody tr td.check-green img {
	margin-right: 5px;
	position: relative;
	top: -2px;
}
.table-list-area .table tbody tr td .time {
	display: block;
	margin-bottom: 5px;
	color: #505b74;
}
.table-list-area .table tbody tr td .time img {
	opacity: 0.6;
	margin-right: 5px;
}
.table-list-area .table tbody tr td .time:last-child {
	margin-bottom: 0;
}
.table-list-area .table tbody tr td .completed {
	color: #929429;
}
.table-list-area .table tbody tr td .job-rq2 {
	color: #005597;
}
.table-list-area .table tbody tr td .pr {
	color: #152446;
	font-weight: 500;
}
.table-list-area .table tbody tr td .run-btn {
	color: #005597;
	border: 1px solid #005597;
	background-color: transparent;
}
.table-list-area .table tbody tr td .run-btn:hover {
	background-color: #005597;
	color: #ffffff;
}

.pages {
	padding-left: 0;
	list-style: none;
	text-align: center;
	margin-top: 20px;
}
.pages li {
	margin-left: 1em;
	display: inline-block;
}
.pages li a {
	color: rgba(21, 36, 70, 0.5);
	font-weight: 300;
	font-size: 18px;
}
.pages li a.active {
	color: #005597;
}
.pages li a:hover {
	color: rgb(21, 36, 70);
}

.created-area .col {
	width: 20%;
	flex: 0 0 auto;
}

.single-created {
	background: #ffffff;
	box-shadow: 0px 1px 4px rgba(138, 146, 163, 0.22);
	border-radius: 8px;
	padding: 24px;
	text-align: center;
	margin-bottom: 45px;
}
.single-created span {
	color: rgba(21, 36, 70, 0.5);
	display: block;
	margin-bottom: 15px;
}
.single-created h3 {
	font-weight: 500;
	font-size: 22px;
	margin-bottom: 0;
}

.change-my-billing-plans h3 {
	font-weight: 500;
	font-size: 32px;
	color: #152446;
	margin-bottom: 30px;
}
.change-my-billing-plans ul {
	background: #ffffff;
	box-shadow: 0px 1px 4px rgba(138, 146, 163, 0.22);
	border-radius: 8px;
	padding: 35px 100px;
	list-style: none;
}
.change-my-billing-plans ul li {
	display: inline-block;
}
.change-my-billing-plans ul li:last-child .unlimited {
	margin-right: 0;
	padding-right: 0;
	border: none;
}
.change-my-billing-plans ul li .include {
	font-size: 22px;
	color: rgba(21, 36, 70, 0.5);
	margin-right: 150px;
}
.change-my-billing-plans ul li .unlimited {
	font-weight: 500;
	font-size: 26px;
	color: #152446;
	border-right: 2px solid #152446;
	padding-right: 80px;
	margin-right: 80px;
}
.change-my-billing-plans ul li .unlimited img {
	position: relative;
	top: -2px;
}

.table-responsive {
	height: 430px;
	overflow: auto;
}
.table-responsive.over {
	overflow: auto !important;
	height: 480px;
}

.table thead tr {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	background-color: #ffffff;
}

/*
number-of-units Style
=====================================================*/
.number-of-units-area .number-of-units-wrapper {
	background: #ffffff;
	box-shadow: 0px 1px 4px rgba(138, 146, 163, 0.22);
	border-radius: 8px;
	padding: 50px;
}
.number-of-units-area h3 {
	font-weight: 600;
	font-size: 20px;
	margin-bottom: 13px;
}
.number-of-units-area .range-slider {
	width: 100%;
	position: relative;
	margin-bottom: 70px;
}
.number-of-units-area .range-slider__range {
	-webkit-appearance: none;
	width: calc(100% - (73px));
	height: 10px;
	border-radius: 5px;
	background: #d7dcdf;
	outline: none;
	padding: 0;
	margin: 0;
}
.number-of-units-area .range-slider__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #ffd800;
	cursor: pointer;
	-webkit-transition: background 0.15s ease-in-out;
	transition: background 0.15s ease-in-out;
}
.number-of-units-area .range-slider__range::-webkit-slider-thumb:hover {
	background: #ffd800;
}
.number-of-units-area .range-slider__range:active::-webkit-slider-thumb {
	background: #ffd800;
}
.number-of-units-area .range-slider__range::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border: 0;
	border-radius: 50%;
	background: #152446;
	cursor: pointer;
	-moz-transition: background 0.15s ease-in-out;
	transition: background 0.15s ease-in-out;
}
.number-of-units-area .range-slider__range::-moz-range-thumb:hover {
	background: #ffd800;
}
.number-of-units-area .range-slider__range:active::-moz-range-thumb {
	background: #ffd800;
}
.number-of-units-area .range-slider__range:focus::-webkit-slider-thumb {
	box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px #ffd800;
}
.number-of-units-area .range-slider__value {
	display: inline-block;
	position: absolute;
	right: 73px;
	bottom: -40px;
	color: rgba(21, 36, 70, 0.5);
	font-weight: 600;
	font-size: 20px;
}
.number-of-units-area .count {
	position: absolute;
	left: 0;
	bottom: 0;
	left: 0;
	bottom: -40px;
	color: rgba(21, 36, 70, 0.5);
	font-weight: 600;
	font-size: 20px;
}
.number-of-units-area ::-moz-range-track {
	background: #d7dcdf;
	border: 0;
}
.number-of-units-area input::-moz-focus-inner,
.number-of-units-area input::-moz-focus-outer {
	border: 0;
}
.number-of-units-area .form-check {
	margin-bottom: 30px;
	position: relative;
	padding-left: 38px;
}
.number-of-units-area .form-check:last-child {
	margin-bottom: 0;
}
.number-of-units-area .form-check .form-check-input {
	width: 28px;
	height: 28px;
	position: absolute;
	top: -3px;
	margin-right: 10px;
	left: 22px;
}
.number-of-units-area .form-check .form-check-input:focus {
	box-shadow: none;
	border-color: #005597;
}
.number-of-units-area .form-check .form-check-input:checked {
	background-color: #005597;
	background-image: url(../images/icon/radio-check.svg);
	background-size: 75%;
}
.number-of-units-area .form-check .form-check-label {
	font-size: 20px;
	color: #152446;
}

.monthly-cost {
	background: #ffffff;
	box-shadow: 0px 1px 4px rgba(138, 146, 163, 0.22);
	border-radius: 8px;
	padding: 131px 50px;
	text-align: center;
}
.monthly-cost span {
	display: block;
	font-size: 20px;
	color: rgba(21, 36, 70, 0.5);
	margin-bottom: 22px;
}
.monthly-cost h2 {
	color: #152446;
	font-weight: 600;
	font-size: 48px;
}

/*
Variable Style
=====================================================*/
.variable-area {
	background: #ffffff;
	box-shadow: 0px 1px 4px rgba(138, 146, 163, 0.22);
	border-radius: 8px;
}
.variable-area h3 {
	padding: 40px 30px;
	font-weight: 500;
	font-size: 20px;
}
.variable-area .form-control {
	background-color: #ffffff;
	border-radius: 0;
}
.variable-area .form-control:focus {
	border: 1px solid #f1f5ff;
}
.variable-area .form-group {
	position: relative;
}
.variable-area .form-group img {
	position: absolute;
	bottom: 30px;
	right: 30px;
}

.select-variable-area {
	background: #ffffff;
	box-shadow: 0px 1px 4px rgba(138, 146, 163, 0.22);
	border-radius: 8px;
}
.select-variable-area h3 {
	font-weight: 500;
	font-size: 20px;
	border-bottom: 1px solid rgba(21, 36, 70, 0.1);
	padding-bottom: 28px;
	background-color: #ffffff;
	border-radius: 8px 8px 0 0;
	padding: 40px;
	margin-bottom: 0;
}

.variable-wrapper {
	background-color: #ffffff;
	border-radius: 0 0 8px 8px;
	padding: 40px;
}
.variable-wrapper .form-group.mb-56 {
	margin-bottom: 64px;
}
.variable-wrapper .form-group label {
	font-size: 18px;
	color: #152446;
	margin-bottom: 20px;
}
.variable-wrapper .form-group .form-control {
	border: 1px solid rgba(21, 36, 70, 0.2);
	border-radius: 10px;
	background-color: #ffffff;
	border-radius: 8px;
}

/*
Specification Style
=====================================================*/
.form-specification-area {
	background-color: rgba(0, 0, 0, 0.8);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	z-index: 99999;
	justify-content: center;
	align-items: center;
	display: flex;
}

/*.form-specification-content {*/
/*	position: relative;*/
/*	z-index: 11111;*/
/*	background: #ffffff;*/
/*	box-shadow: 0px 20px 60px rgba(20, 6, 68, 0.1);*/
/*	border-radius: 20px;*/
/*	padding: 60px;*/
/*	border-top: 10px solid #d4c5ff;*/
/*}*/
.form-specification-content .form-specification-1 {
	padding-left: 5%;
	padding-right: 5%;
	max-width: 500px;
}
.form-specification-content .form-specification-1 .form-group label {
	font-size: 18px;
	color: #152446;
}
.form-specification-content .form-specification-1 .form-group .form-control {
	background: #ffffff;
	box-shadow: 0px 0px 3px rgba(138, 146, 163, 0.58);
	border-radius: 10px;
}
.form-specification-content .form-specification-1 h3 {
	font-weight: 600;
	font-size: 32px;
	color: #152446;
	margin-bottom: 50px;
}
.form-specification-content .table-list-area .defined-jobs-content {
	box-shadow: none;
	background-color: transparent;
}
.form-specification-content .table-list-area .table-responsive {
	padding: 0;
}
.form-specification-content .job-token {
	border: 1px solid rgba(21, 36, 70, 0.2);
	border-radius: 14px;
	padding: 30px;
	margin-top: 60px;
}
.form-specification-content .job-token h3 {
	font-weight: 600;
	font-size: 32px;
}
.form-specification-content .job-token p {
	font-size: 18px;
	color: #152446;
	margin-bottom: 0;
}
.form-specification-content .job-token button {
	background-color: transparent;
	cursor: pointer;
}

/*
Landing Page Style
=====================================================*/
.landing-page-area {
	height: 100vh;
	position: relative;
	z-index: 1;
}
.landing-page-area::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 50%;
	background: linear-gradient(
		90.29deg,
		#005597 -1.33%,
		#905bae 25.59%,
		#d2486e 53.21%,
		#f53a3b 74%,
		#f63e48 101.18%
	);
	z-index: -1;
	border-radius: 0% 0% 50% 50%;
}
.landing-page-area .landing-page-wrap {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
	display: flex;
}

.landing-page-content {
	background-color: #ffffff;
	background: #ffffff;
	box-shadow: 0px 20px 60px rgba(20, 6, 68, 0.1);
	border-radius: 20px;
	height: 80%;
	min-height: 550px;
	max-height: 650px;
	width: 70%;
	text-align: center;
	padding: 50px;
	border-top: 5px solid #d4c5ff;
}
.landing-page-content .main-logo {
	margin-bottom: 50px;
	display: block;
}
.landing-page-content h3 {
	display: block;
	font-weight: 600;
	font-size: 4vw;
	letter-spacing: -0.01999em;
	color: #12193f;
	margin-bottom: 25px;
}

/*====================================================
OTHERS STYLE AREA
=====================================================*/
/*
Preloader Area Style*/
.preloader {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background-color: #f6f6f6;
	z-index: 99999;
}
.preloader img {
	max-width: 300px;
}
.preloader.preloader-deactivate {
	visibility: hidden;
}

@-webkit-keyframes rotate-five {
	0% {
		transform: rotate(180deg);
	}
	50% {
		transform: rotate(360deg);
	}
}

@keyframes rotate-five {
	0% {
		transform: rotate(180deg);
	}
	50% {
		transform: rotate(360deg);
	}
} /*# sourceMappingURL=style.css.map */