/* -------------------------
+ Author : Marcus Briggs
+ © Viral Effect LTD
------------------------- */

/* ===================
	TAKEOVER WINDOW
=================== */

.global-takeover { position:fixed; z-index:9999; height:100%; width:100%; top:0; left:0; background: #353b45; display: flex; justify-content: center; align-items: center; flex-direction: column;  }
.global-takeover .takeover-container { display: flex; justify-content: center; align-items: center; flex-direction: column; }
.global-takeover .takeover-content { display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center; }
.global-takeover .takeover-content p { font-size: 1.2rem; color:white; text-align: center; }
.global-takeover .takeover-content p i { font-size: 1.4rem; color:white; }

/* =================
	MODAL :: CORE
================= */

.my-modal-cover { position:fixed; z-index:9999; height:100%; width:100%; top:0; background: rgba(0,0,0,0.9);  }
.my-modal-cover:after { content:""; position:absolute; width: 100%; height: 100%; background: url('../img/ajax-loader-cover.gif') no-repeat center; }
.my-modal-outter { position:fixed; height:100%; width:100%; z-index: 99999; top:0; padding:5px; display: table; text-align: center; }
.my-modal-inner { margin: 0 auto; width:100%; max-width:600px; display: table-cell; vertical-align: middle;  }
.my-modal-container { width:100%; max-width: 600px; background:white; border-radius:4px; padding:20px; display: inline-block; text-align: left; }
.modal-header { float:left; width:100%; padding:0 0 20px 0; margin-bottom:20px; position: relative; border-bottom:1px dotted #cfcfcf; }
.modal-header .md-l { float:left; }
.modal-header .md-r { float:right; position: absolute; right: 0; top: 0; }
.modal-header .md-r .close { display:inline-block; width:30px; height:30px; text-align:center; font-size: 22px; }
.modal-header .md-r .close i { color:black; line-height:30px; }
.modal-header h1 { float:left; color: #382643; font-size:22px; font-weight: 400; line-height: 30px; }
.modal-header p { float:left; width:100%; font-size:14px; color:#303030; line-height: 16px; padding: 10px 0 0 5px;  margin: 0;  }
.modal-header p b { color:#9B28B1; }
.modal-content { float:left; width:100%; }
.modal-content .mod-controls { float:left; width:100%; padding: 20px 0 0 0; border-top:1px dotted #cfcfcf;  }

/* =================
	MODAL :: INFO
================= */

.mod-info { float:left; width:100%; padding: 0 0 20px 0; }
.mod-info p { float:left; width:100%; color:black; line-height: 18px; }
.mod-info .list-type-1 { float:left; width:100%; background: #d7d7d7; border-radius: 6px; padding: 5px; }
.mod-info .list-type-1 li { float:left; width:100%; background: white; border-radius: 6px; padding: 20px; margin-bottom: 1px; color:black; }
.mod-info .list-type-1 li .col { float:left; }
.mod-info .list-type-1 li:last-child { margin:0; }

.mod-info-error { float:left; width:100%; }
.mod-info-error p { float:left; width:100%; color:black; font-size:16px; line-height:26px; padding:30px 20px; text-align: center; border-radius: 6px; background: #ffd7d7; border: 1px solid #e67979; color: #6c1818; }

/* ====================
	MODAL :: WAITING
==================== */

.mod-waiting { float:left; width:100%; padding: 60px 40px 60px 40px; background: #131313; border-radius: 6px; }
.mod-waiting i { font-size: 1.6rem; color:white; }
.mod-waiting p { float:left; width:100%; margin-top:20px; color:white; font-size: 0.9rem; line-height: 1.5em; }

/* =================
	MODAL :: FORM
================= */

.mod-form-row { float:left; width:100%; padding: 0 0 20px 0; }
.mod-form-row label { float:left; width:100%; padding: 0 0 10px 0; font-size:14px; color:#7f4f9c; }
.mod-form-row p { float:left; width:100%; color:black; line-height: 18px; }
.mod-form-row .input-date { float:left; /*width:150px; text-align: center;*/ margin-right:12px; }
.mod-form-row .input-time { float:left; /*width:100px; text-align: center;*/ }
.mod-form-row .input-spacer { float:left; margin-right:12px; padding: 13px 0 0 0; }

.mod-form-result { float:left; width:100%; padding: 0 0 0 0; }
.mod-form-result p { float:left; width:100%; color:black; font-size:16px; line-height:26px; padding:30px 20px; text-align: center; border-radius: 6px; }
.mod-form-result p i { font-size: 30px; }
.mod-form-result p.complete { background: #f2f2f2; border: 1px solid #d9d9d9; color: black; }
.mod-form-result p.redirecting { background: #d7ffd7; border: 1px solid #79e68d; color: #186c1f; }

.mod-form-timelist .timelist { float:left; width:100%; }
.mod-form-timelist .timelist li { float:left; width:100%; border:1px solid #c8c8c8; padding:6px; margin-bottom: 5px; border-radius: 6px; }
.mod-form-timelist .timelist li .r { float:left; width:100%; padding: 5px 0 0 0; }
.mod-form-timelist .timelist li .r:first-child { padding: 0; }
.mod-form-timelist .timelist li .label { float:left; }
.mod-form-timelist .timelist li .label span { display: inline-block; padding: 13px 10px 0 8px;  }
.mod-form-timelist .timelist li .label input { width:56px; text-align: center; }
.mod-form-timelist .timelist li .time { float:right;  }
.mod-form-timelist .timelist li .time input { width:94px; text-align: center; }
.mod-form-timelist .timelist li .time input[type="date"] { width:142px; margin-right: 6px; }
.mod-form-timelist .timelist li .time input[type="time"] { width:100px; }
.mod-form-timelist .timelist li .time a { padding: 0 6px 0 10px; display: inline; }
.mod-form-timelist .timelist li a.add-break { float:left; width:100%; padding: 6px 0 5px 0; text-align: center; }
.mod-form-timelist .timelist li a.add-break i { color:green; }
.mod-form-timelist .timelist li:last-child { margin-bottom: 0; }

/* ===================
	MODAL :: SHIFTS
=================== */

.mod-shift-overview .mr-info { float:left; width:100%; padding: 0 0 15px 0; margin-bottom: 10px; font-size: 14px; border-bottom: 1px dotted #cfcfcf;  }
.mod-shift-overview .mr-info div { line-height: 18px; }
.mod-shift-overview .mr-info strong { font-size: 14px; }
.mod-shift-overview .mr-breakdown { float:left; width:100%; padding: 0 0 5px 0; font-size: 14px; }
.mod-shift-overview .mr-breakdown li { float:left; width:100%; border:1px solid #c8c8c8; padding:10px; margin-bottom: 5px; border-radius: 6px; }
.mod-shift-overview .mr-breakdown li .label { float:left; }
.mod-shift-overview .mr-breakdown li .time { float:right; }

.mod-shift-overview .mr-breakdown-edit { float:left; width:100%; padding: 0 0 5px 0; font-size: 14px; }
.mod-shift-overview .mr-breakdown-edit li { float:left; width:100%; border:1px solid #c8c8c8; padding:6px; margin-bottom: 5px; border-radius: 6px; }
.mod-shift-overview .mr-breakdown-edit li .r { float:left; width:100%; padding: 5px 0 0 0; }
.mod-shift-overview .mr-breakdown-edit li .r:first-child { padding: 0; }
.mod-shift-overview .mr-breakdown-edit li .label { float:left; }
.mod-shift-overview .mr-breakdown-edit li .label span { display: inline-block; padding: 11px 10px 0 8px;  }
.mod-shift-overview .mr-breakdown-edit li .label input { width:56px; text-align: center; }
.mod-shift-overview .mr-breakdown-edit li .time { float:right;  }
.mod-shift-overview .mr-breakdown-edit li .time input { width:94px; text-align: center; }
.mod-shift-overview .mr-breakdown-edit li .time input[type="date"] { width:142px; margin-right: 6px; }
.mod-shift-overview .mr-breakdown-edit li .time input[type="time"] { width:100px; }
.mod-shift-overview .mr-breakdown-edit li .time a { padding: 0 6px 0 10px; display: inline; }
.mod-shift-overview .mr-breakdown-edit li a.add-break { float:left; width:100%; padding: 6px 0 5px 0; text-align: center; }
.mod-shift-overview .mr-breakdown-edit li a.add-break i { color:green; }

.mod-shift-overview .mr-totals { float:left; width:100%; padding: 15px 0 15px 0; font-size: 14px; border-top: 1px dotted #cfcfcf;  }
.mod-shift-overview .mr-totals div { line-height: 18px; }

/* =================================
	MODAL :: HOLIDAYS :: APPROVAL
================================= */

.mod-holiday-request-approve ul { float: left; width: 100%; padding:1px; background: #f2f2f2; border:1px solid #d2d2d2; border-radius: 6px; }
.mod-holiday-request-approve li { float: left; width: 50%; padding:1px; }
.mod-holiday-request-approve li .wrap { float: left; width: 100%; border:1px solid #d2d2d2; background: white; padding: 6px 6px 6px 30px; position: relative; border-radius: 6px; }
.mod-holiday-request-approve li input { position: absolute; left:4px; top:4px; }
.mod-holiday-request-approve li label { float: left; width: 100%; }
.mod-holiday-request-approve li label span { color:#7f4f9c; }
.mod-holiday-request-approve li:hover .wrap { border:1px solid #aeaeae; }