html {
font-size: 14px;
}

@media (min-width: 768px) {
    html {
    font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem white, 0 0 0 0.2rem #83b304 }

html {
position: relative;
min-height: 100%;
}

body.viewport-layout { margin-bottom: 60px; height: calc(100vh - 60px); overflow: hidden; }

/*Defaults*/
* { box-sizing: border-box; padding: 0; margin: 0; outline: none; color: #303233; }
html,
body { min-width: 300px; font-family: proxima-nova, sans-serif; }
body { font-size: 16px; font-family: proxima-nova, sans-serif; background-color: #F4F4F4; }
img { max-width: 100%; height: auto !important; }
button { background: none; border: none; cursor: pointer; font-family: proxima-nova, sans-serif; }
a { color: #000; text-decoration: none; cursor: pointer; }
input,
select,
textarea { font-size: 16px; font-family: proxima-nova, sans-serif; }

.main { overflow-y: auto; height: calc(100vh - 78px); }
.main > .container { padding: 46px 60px; }
@media (max-width: 800px) {
    .main > .container { padding: 20px !important; }
}

/*Sections*/
.wrapper { background-color: #F4F4F4; }
.contain { padding: 20px; margin: 0 auto; max-width:800px; }
.container { padding: 20px; margin: 0 0 auto 106px; background-color: #F4F4F4; }
.container.no-nav { padding: 20px; max-width: 800px; margin: 0 auto; background-color: #F4F7FB; }
.section { padding-bottom: 20px; }
.content { height: calc(100vh + -111px); }

/* Header */
.header { width: 100%; min-height: 60px; max-height: 78px; background-color: #fff; box-shadow: 0px 3px 3px #00000029; display: flex; flex-wrap: wrap; position: relative; flex-shrink: 0; z-index: 200; }
.header .logo { max-width: 134px; height: 56px !important; margin-left: 125px; margin-right: 10px; margin-top: 11px; margin-bottom: 11px; }
.header .logo-alt { max-width: 134px; }
.header .h2 { margin: auto 0; }
.header button i { line-height: 50px; font-size: 25px; cursor: pointer; display: none; }
.header > a { padding: 0 15px; min-width: 50px; text-decoration: none; }
.header button { padding: 0; }
.header .user-info { flex: 1 1 0; justify-content: end; }

.headers .filter { display:none; z-index: 201; }
.headers .filter.show + .header { display: none; }
.headers .filter.show h2,
.headers .filter.show i { display: initial !important; }
.headers .filter.show h2 { margin-left: 17px; }
.headers .filter i { color: #83B304; }
.headers .filter button[data-toggle-filters] { padding: 0 17px; }

.header button[data-toggle-mobile-nav="times"] { display: none; }
.header button[data-toggle-mobile-nav="times"] i {color: #83B304; }

@media (max-width: 800px) {
    .header .h2,
    .user-info { display: none !important; }
    .header .logo { margin-left: 20px; }
    .header button i { display: initial; }
    .header button { padding: 0 20px; }
}

@media (min-width: 1080px) {
    .headers .filter.show { display: none !important; }
    .headers .filter.show + .header { display: flex; }
}

/* Side Bar */
.side-bar { width: 106px; background-color: #fff; box-shadow: 0px 3px 6px #00000029; display: flex; flex-direction: column; flex-wrap: wrap; flex-shrink: 0; position: absolute; top: 0; bottom: 0; padding-top: 70px; }
.side-bar ul { list-style: none; }
.side-bar ul li a { color: #303233; font-size: 16px; text-decoration: none; margin: 45px 0; text-align: center; display: block; }
.side-bar ul li a i { margin-bottom:10px; font-size: 35px; }
.side-bar ul li a img { margin-bottom:10px; font-size: 35px; }

@media (max-width: 800px) {
    .side-bar { display:none; }
    .container { margin-left: 0; }
}

/* Side Nav */
.sidenav .close { position: absolute; right: 0; top: 0; width: 49px; height: 49px; line-height: 49px; text-align: center; font-size: 25px; color: #1678bd; cursor: pointer; }
.sidenav .close { color: #fff; }
.sidenav { position: fixed; width: 0; right: 0; top: 0; bottom: 0; left: 0; background: rgba(0,0,0,.5); }
.sidenav nav { max-width: 400px; width: 80%; background: #1678bd; position: absolute; top: 0; right: -500px; bottom: 0; overflow-y: auto; -webkit-box-shadow: -5px 0 10px rgba(0, 0, 0, 0.1); -moz-box-shadow: -5px 0 10px rgba(0, 0, 0, 0.1); box-shadow: -5px 0 10px rgba(0, 0, 0, 0.1); -webkit-transition: right 200ms; -moz-transition: right 200ms; -o-transition: right 200ms; transition: right 200ms; }
.sidenav nav .name { padding: 60px 40px 30px 40px; color: #fff; font-size: 22px; display: block; font-weight: 600; }
.sidenav nav ul { padding: 20px 40px; list-style: none; }
.sidenav nav ul li { margin: 0 0 25px 0; }
.sidenav nav ul li a { color: #fff; font-size: 16px; display: block; font-weight: 300; text-decoration: none; }
.sidenav nav ul li a i { margin-right: 5px; }
.sidenav nav .menu-logo { padding: 10px; position: absolute; bottom: 15px; right: 0; left: 0; text-align: center; }
.sidenav nav .menu-logo img { margin: 0; max-height: 35px; }

.mobilenav { display: none; position: fixed; left: 0; right: 0; top: 0; bottom: 0; background-color: #F4F4F4; z-index: 100; }
.mobilenav ul { margin-top: 70px; padding: 30px; list-style: none; }
.mobilenav ul li { font-size: 20px; padding-bottom: 30px; }

@media (min-width: 800px) {
    .mobilenav.show { display: none; }
}

/*Menu*/
.menu-on { overflow: hidden; }
.menu-on .sidenav { width: auto; z-index: 999; }
.menu-on .sidenav nav { right: 0; }

/* Cursor */
.pointer { cursor: pointer; }
.not-clickable { pointer-events: none; }
.clickable { pointer-events: initial; }

/* Footer bar */
body.fixed-footer { padding-bottom: 56px; }
.footer { font-size: 15px; min-height: 50px; padding-left: 110px; display: flex; justify-content: start; align-items: center; width: 100%; background-color: #303233; box-shadow: 0px -3px 6px rgb(0 0 0 / 10%); z-index: 1; }
.footer.fixed { z-index: 1; position: fixed; left: 0; bottom: 0; right: 0; }
.footer a { opacity: 0.7; padding: 10px; width: 50%; font-size: 11px; text-align: center; text-decoration: none; color: #fff; }
.footer a.active { opacity: 1; }
.footer i { line-height: 24px; font-size: 22px; cursor: pointer; }
.footer-group { position: fixed; flex-direction: column; bottom: 0; left: 0; right: 0; display: flex; box-shadow: 0px -6px 12px rgba(0, 0, 0, 0.202); }
.footer.fixed p { margin-left: 125px; }

@media (max-width: 800px) {
    .footer.mobile { justify-content: center; bottom: 0; left: 0; right: 0; padding: 0; }
}

/* Buttons */
.btn { padding: 11px 52px; font-size: 20px; border-radius: 8px; display: block; background-color: #6B757D; color: #303233; text-align: center; cursor: pointer; border: none; text-decoration: none; } 
.btn i { margin-right: 4px; }
.btn.inline { display: inline-block; }
.btn.pill { font-size: 16px; font-weight: 500; border-radius: 25px; background-color: #FFFFFF; line-height: 22px; height: initial; padding: 10px 20px; box-shadow: 0px 3px 6px #00000029; margin: 5px; cursor: initial; }
.btn.pill i { font-size: 14px; margin: 0; }
.thin .btn.pill { font-size: 14px; padding: 7px 10px; line-height: initial; }
.thin .btn.pill i { font-size: 12px }
.btn.pill.dark { background-color: #f4f4f4; }
.btn [type="checkbox"],
.btn [type="radio"] { vertical-align: middle; }
.btn.sm { height: 30px; line-height: 30px; }
.btn.wide { padding-left: 40px; padding-right:40px; }
.btn.light { background-color: #fff; color: #7A7C7F; }
.btn.blue { background-color: #0057B7; color: #fff; }
.btn.light-blue { background-color: #31A8FC; color: #fff; }
.btn.green { background-color: #83B304; color: #000; }
.btn.clear { background-color: transparent; }
.btn.red { background-color: #FF0000; color: #fff; }
/*.btn.red-border { border: 2px solid #c7081a; line-height: 48px; }*/
.btn.red-border { border: 2px solid #c7081a; }
.btn.grey { background-color: #6b757d; color: #fff; }
.btn.saving { background-color: #6b757d; color: #fff; }
.btn.saving .fa-circle-notch { display: inline-block !important; }
.btn-bar { display: flex; justify-content: center; border-radius: 5px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.078); }
.btn-bar > * { flex-grow: 1; border-radius: 0; border: 1px solid #E2E6EA; }
.btn-bar > *:first-child { border-radius: 5px 0 0 5px; }
.btn-bar > *:last-child { border-radius: 0 5px 5px 0; border-right: none; }
.btn-bar.flat-top { border-top: 0; border-bottom: 0; }
.btn-bar.flat-top > *:first-child { border-radius: 0 0 0 5px; border-left: 0; }
.btn-bar.flat-top > *:last-child { border-radius: 0 0 5px 0; border-right: 0; }
.btn-bar.flat-top .only-btn { border-radius: 0 0 5px 5px; }
.btn-bar *:checked + label,
.btn-bar > *:hover,
.btn-bar > *.active { color: #0057B7; font-weight: bold; }
.btn-footer { position: fixed; bottom: 0; left: 0; right: 0; padding: 20px; font-size: 18px; line-height: 21px; border-radius: 0; height: initial; box-shadow: 0px -6px 12px rgba(0, 0, 0, 0.202); }
.btn-bar.alt { box-shadow: none; border: 1px solid #CED4DA; }
.btn-bar.alt > *.active { background: #ECF0F7; }
.btn-footer-alert { padding: 5px; color: #fff }
.btn-bar.bar-footer { margin: 0; }
.btn-bar.bar-footer > * { padding: 20px; font-size: 18px; line-height: 21px; border-radius: 0; height: initial; border-top: 0; border-bottom: 0; }
.btn-bar.bar-footer > *:hover,
.btn-bar.bar-footer > *.active { color: #fff; font-weight: 600; }
.btn-bar.bar-footer > *:first-child { border-left: 0; }
.btn-bar.bar-footer > *:last-child { border-right: 0; }
.tabs { display: flex; margin-bottom: 10px; }
.tabs .tab { border-bottom: 2px solid #d5dbe0; padding-bottom: 5px; padding-left: 20px; padding-right: 20px; font-size: 16px; }
.tabs .tab:first-child { padding-left: 5px; }
.tabs .tab.active { border-bottom: 2px solid #608103; color: #608103; font-weight: bold; }

/* Dropdown */
.dropdown { position: relative; padding-bottom: 10px; }
.dropdown-button { background: #fff; border: 1px solid #d5d5d5; height: 57px; border-radius: 5px; padding: 16px; font-size: 16px; position: relative; }
.dropdown .dropdown-button i { color: #83B304; margin-left: 15px; }
.dropdown .dropdown-button i[class*="fa-chevron-"] { position: absolute; right: 16px; }
.dropdown .dropdown-button i.icon { position: absolute; left: 0px; color: initial; }
.dropdown.open .dropdown-button i[dropdown-arrow="down"],
.dropdown .dropdown-button i[dropdown-arrow="up"] { display: none; }
.dropdown.open .dropdown-button i[dropdown-arrow="up"],
.dropdown .dropdown-button i[dropdown-arrow="down"] { display: initial; }
.dropdown .dropdown-button.open,
.dropdown .dropdown-button:focus { border-color: #83B304; }
.dropdown .dropdown-options { display: none; z-index: 2; position: absolute; left: 0; top: 100%; padding: 10px; border-radius: 5px; border: 1px solid #E2E6EA; background: #fff; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.161); }
.dropdown .dropdown-options.open-right { left:auto; right:0; }
.dropdown .dropdown-options .btn { font-size: 16px; padding: 10px }
.dropdown .dropdown-options.right-edge { right: 0; left: auto; }
.dropdown.onhover:hover .dropdown-options,
.dropdown.open .dropdown-options { display: initial; }
.dropdown .menu { display: flex; flex-direction: column; flex-wrap: nowrap; }
.dropdown .menu i { font-size: 24px; }
.dropdown .menu > .menu-item { padding: 10px; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.dropdown .menu > .menu-item .fa-check { display: none; }
.dropdown .menu > .menu-item.active { background: #F2F7E5; border-radius: 25px; }
.dropdown .menu > .menu-item.active .fa-check { display: initial; }
.dropdown .menu > .menu-item-moment { padding: 10px; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.dropdown .menu > .menu-item-moment .fa-check { display: none; }
.dropdown .menu > .menu-item-moment.active { background: #F2F7E5; border-radius: 25px; }
.dropdown .menu > .menu-item-moment.active .fa-check { display: initial; }
.dropdown .menu > .checkbox { padding: 5px 10px; }
.dropdown .menu > .checkbox:first-child { padding-top: 10px; }
.dropdown .menu > .checkbox:last-child { padding-bottom: 10px; }
.dropdown .menu > .checkbox i { margin-right: 5px;}
.dropdown .menu > .checkbox i,
.dropdown .menu > .checkbox span { font-size: 18px; }
.dropdown .menu > .checkbox input,
.dropdown .menu > .checkbox .fa-square-check { display: none; }
.dropdown .menu > .checkbox input:checked + .fa-square { display: none; }
.dropdown .menu > .checkbox input:checked + .fa-square + .fa-square-check,
.dropdown .menu > .checkbox input:checked + .fa-square + .fa-square-check + span { display: initial; color: #465E03; }


.filter-btn { display: none !important; }
@media (max-width: 1200px) {
    .filter-row { display: none !important; }
    .filter-btn { display: initial !important; }
}

.mobilefilters { display: none; padding: 90px 20px 20px 20px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: #F4F4F4; z-index: 1; }
.mobilefilters button { width: 100%; text-align:left; }
@media (min-width: 1200px) {
    .mobilefilters.show { display: none !important; }
}

/* Links */
.lnk,
.lnk:visited { display: inline-block; color: #0057B7; text-decoration: none; font-weight: 500; }
.lnk:hover { text-decoration: underline; }

/* Card */
.card-collar,
.card { padding: 20px; border-radius: 8px; border: 1px solid #E2E6EA; background: #fff; box-shadow: 0px 0px 6px #00000029; }
.card.alt { box-shadow: 0px 0px 5px #00000014; }
.card.thick { padding: 35px 55px; }
.card.thin { padding: 25px 30px; }
.card-collar { padding: 0; border: 0; }
.card-collar > .card { box-shadow: none; margin: 0; border: none; }
.card.border-red { border-left: 5px solid #FF0000; }
.card.large-shadow { box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.161); }
.card.logo-holder { padding: 5px; margin: auto; display: flex; justify-content: center; align-items: center; max-width: 128px; }
.card.logo-holder > .brand-logo-sm { max-height: 40px; }
.brand-logo-sm { max-height: 40px; }
.btn-card { padding: 20px 0; flex-basis: calc(33.33333333% - 20px); position: relative; text-align: center; font-size: 13px; }
.btn-card.lg { flex-basis: calc(50% - 20px); }
.btn-card .badge { position: absolute; top: 5px; right: 5px; }
.btn-card .fa-circle-check { font-size: 18px; position: absolute; top: 5px; right: 5px; }
.btn-card .icon { margin-bottom: 5px; font-size: 30px; }
.btn-card.lg .icon { font-size: 45px; }

/* Breadcrumb */
.breadcrumb { padding-bottom: 20px; min-width: 300px; display:block; }

/* Alerts */
.alert { margin: 20px 40px 20px 125px; padding: 15px; border-radius: 8px; border: 3px solid #999; color: #999; font-weight: 600; }
.alert.alert-error,
.alert.alert-error i { border-color: #FF0000; color: #FF0000; }
.alert.alert-warning,
.alert.alert-warning i { border-color: #f9a825; color: #f9a825; }
.alert.alert-info,
.alert.alert-info i { border-color: #1354BC; color: #1354BC; }
.alert.alert-success,
.alert.alert-success i { border-color: #54C258; color: #54C258; }
.alert i { padding-right: 10px; }

@media (max-width: 800px) {
    .alert { margin-left: 10px; }
}

/* Badge */
.badge { display: inline-block; padding: 4px 5px; min-width: 18px; height: 18px; line-height: 1em; border-radius: 10px; background: #012756; color: #fff; font-size: 11px; text-align: center; }
.icon.top-right { position: absolute; top: 5px; right: 5px; }
.icon.top-right.alt { top: 15px; right: 15px; }
.icon.top-right-large { font-size: 34px; position: absolute; top: -10px; right: -10px; }
.icon.circle-shadow { background-color: RGBA(0, 0, 0, .25); border-radius: 50%; }

/* List Items */
.list-item { display: block; padding: 10px; border-bottom: 1px solid #ccc; }
.list-item:last-child { border-bottom: none; }

/* Table */
.table { font-size: 14px; width: 100%; border-collapse: collapse; }
.table.striped-odd tr:nth-child(odd),
.table.striped-even tr:nth-child(even) { background: #fff; }
.table th,
.table td { padding: 15px 5px 15px 10px; }
.table th.text-right,
.table td.text-right { padding: 15px 10px 15px 5px; }
.table.bordered td { border: 1px solid #E2E6EA; }
.table.bordered-first-col td { border: none; }
.table.bordered-first-col td:first-child { border-right: 1px solid #E2E6EA; }

.table-alt { font-size: 14px; width: 100%; border-collapse: collapse; }
.table-alt.striped-odd tr:nth-child(odd),
.table-alt.striped-even tr:nth-child(even) {
    background: lightgrey;
}
.table-alt tr { border-top: 1px solid grey; }
.table-alt td { padding: 5px 5px; }

/* Form */
.field { position: relative; display: block; }
.field .label { margin-bottom: 5px; display: block; font-size: 14px; }
.field .item { padding: 0 15px; height: 40px; width: 100%; background-color: #fff; border: 1px solid #DCDCDC; border-radius: 5px; position: relative; text-align: left; font-size: 16px; font-weight: 400; font-family: proxima-nova, sans-serif; }
.field .item.alt { box-shadow: 0px 0px 5px #00000014; border: 1px solid #E2E6EA; }
.field .item:disabled { background-color: #F7F7F7; }
.field select.item,
.field button.item { cursor: pointer; font-weight: 500; color: #303233; border: 1px solid #DCDCDC; }
.field textarea.item { min-height: 120px; padding: 15px; height: auto; min-width: 100%; max-width: 100%; }
.field.dropdown select { -moz-appearance: none; -webkit-appearance: none; appearance: none; }
.field.dropdown:after { right: 16px; top: 16px; border-top: 8px solid #0057B7; border-left: 8px solid transparent; border-right: 8px solid transparent; content: ""; display: inline-block; position: absolute; height: 0; width: 0; }
.field [class*="fa-"] { font-size: 18px; padding: 0 10px; }
.field .icon { z-index: 2; position: absolute; left: 5px; top: 50%; transform: translate(0%, -50%); }
.field .icon:last-child { left: auto; right: 5px; }
.field .item:focus { border: 1px solid #83B304; }
.field .text-danger,
.field .text-danger span,
.field .error span { display: block; padding: 5px 0; color: #FF0000; font-size: 14px; }
.check,
.radio { padding: 5px 0; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.check input,
.radio input { width: 16px; height: 16px; }
.check:hover input,
.radio:hover input { border-color: #000; }
.field input[type="date"]::-webkit-calendar-picker-indicator { background: transparent; bottom: 0; color: transparent; cursor: pointer; height: auto; left: 0; position: absolute; right: 0; top: 0; width: auto; }
.field .date.icon { pointer-events: none; color: #303233; }

/* Modal */
.modal { display: none; overflow: auto; z-index: 99999; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.7); align-items: center; justify-content: center }
.modal.show { display: flex !important; }
.modal .frame { margin: 20px; padding: 40px 50px; border-radius: 10px; background: #fff; height: fit-content }
.modal .frame .btn { padding: 20px; font-size: 20px; font-family: sans-serif;  }

@media (min-height: 800px) {
    .modal.show { display: flex; justify-content: center; align-items: center; display: flex; }
}

@media (min-height: 600px) {
    .find-lot-image { transform: translate(0, -75px); }
}

@media (min-width: 500px) {
    .modal .frame.xsm { max-width: 440px; margin: 20px auto; }
}

@media (min-width: 600px) {
    .modal .frame.sm { max-width: 560px; margin: 20px auto; }
}

@media (min-width: 800px) {
    .modal .frame.md { max-width: 760px; margin: 20px auto; }
}

@media (min-width: 1000px) {
    .modal .frame.lg { max-width: 960px; margin: 20px auto; }
}

/* Tooltip */
.tooltip { left: 50%; bottom: 100%; transform: translate(-50%, 0%); padding: 10px; position: absolute; display: none; border-radius: 5px; background: #fff; box-shadow: 0px 0px 45px rgba(0, 0, 0, 0.161); }
.tooltip.left { top: 50%; right: 100%; left: auto; bottom: auto; transform: translate(0%, -50%); }
.tooltip.right { top: 50%; left: 100%; bottom: auto; transform: translate(0%, -50%); }
.tooltip.bottom { top: 100%; left: 50%; bottom: auto; transform: translate(-50%, 0%); }
.tooltip-holder { position: relative; }
.tooltip-holder:hover .tooltip { display: inline-block; }
.tooltip:after { left: 50%; top: 100%; margin: 0 0 0 -10px; border-bottom: 10px solid #fff; border-left: 10px solid transparent; border-right: 10px solid transparent; content: ""; display: inline-block; position: absolute; height: 0; width: 0; }
.tooltip.left:after { left: 100%; top: 50%; margin: -10px 0 0 0; border-left: 10px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.tooltip.right:after { left: auto; right: 100%; top: 50%; margin: -10px 0 0 0; border-left: none; border-right: 10px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.tooltip.bottom:after { top: auto; left: 50%; bottom: 100%; margin: 0 0 0 -10px; border-bottom: none; border-top: 10px solid #fff; border-left: 10px solid transparent; border-right: 10px solid transparent; content: ""; display: inline-block; position: absolute; height: 0; width: 0; }

/*Grid*/
.grid { display: table; width: 100%; }
.grid > * { float: left; }

/* Heights */
.h-100 { height: 100%; }
.h-50px { height: 50px; }
.h-100px { height: 100px !important; }
.h-200px { height: 200px !important; }

/* Widths */
.w-100 { width: 100%; }
.w-85 { width: 85%; }
.w-75 { width: 75%; }
.w-60 { width: 60%; }
.w-50 { width: 50%; }
.w-333 { width: 33.333333333%; }
.w-25 { width: 25%; }
.w-0 { width: 0%; }

/*Line Height*/
.lh-15 { line-height: 15px; }
.lh-20 { line-height: 20px; }

@media (max-width: 1000px) {
    .w-100-md { width: 100%; }
    .w-75-md { width: 75%; }
    .w-50-md { width: 50%; }
    .w-333-md { width: 33.333333333%; }
    .w-25-md { width: 25%; }
    .w-0-md { width: 0%; }
}

@media (max-width: 600px) {
    .w-100-sm { width: 100%; }
    .w-75-sm { width: 75%; }
    .w-50-sm { width: 50%; }
    .w-333-sm { width: 33.333333333%; }
    .w-25-sm { width: 25%; }
    .w-0-sm { width: 0%; }
}

@media (max-width: 400px) {
    .w-100-xs { width: 100%; }
    .w-75-xs { width: 75%; }
    .w-50-xs { width: 50%; }
    .w-333-xs { width: 33.333333333%; }
    .w-25-xs { width: 25%; }
    .w-0-xs { width: 0%; }
}

/* min widths */
.mw-300 { min-width: 300px; }

/* Flex */
.flex { display: flex; }
.flex.start { justify-content: flex-start; }
.flex.end { justify-content: flex-end; }
.flex.center { justify-content: center; }
.flex.between { justify-content: space-between; }
.flex.evenly { justify-content: space-evenly; }
.flex.middle { align-items: center; }
.flex.stretch { align-items: stretch; }
.flex.wrap { flex-wrap: wrap; }
.flex.nowrap { flex-wrap: nowrap; }
.flex.grow > * { flex-grow: 1; }
.flex.column { flex-direction: column; }
.flex.column-reverse { flex-direction: column-reverse; }
.flex.row { flex-direction: row; }
.flex.gap-4 { gap: 4px; }
.flex.gap-5 { gap: 5px; }
.flex.gap-10 { gap: 10px; }
.flex.gap-15 { gap: 15px; }
.flex.gap-20 { gap: 20px; }
.flex.gap-30 { gap: 30px; }
.flex.gap-40 { gap: 40px; }
.flex.gap-50 { gap: 50px; }
.flex.gap-60 { gap: 60px; }
.flex-1 { flex: 1; }
.flex-2 { flex: 2; }
.flex > *.shrink-0 { flex-shrink: 0; }
.flex.basis-45 > *, .flex.basis-45 { flex-basis: 45%; }
.flex.basis-100 > *, .flex .basis-100 { flex-basis: 100%; }
.flex > *.grow { flex-grow: 1; }
.flex.mc, .flex.cm { justify-content: center; align-items: center; }
.flex.even-size > * { flex: 1 1 0px; }
.align-center { align-content: center; }
.self-center { justify-self: center; }

@media (max-width: 1000px) {
    .flex.wrap-md { flex-wrap: wrap; }
    .flex.gap-0-md { gap: 0px; }
    .flex.gap-10-md { gap: 10px; }
    .flex.column-reverse-md { flex-direction: column-reverse; }
}

@media (max-width: 600px) {
    .flex.wrap-sm { flex-wrap: wrap; }
    .flex.gap-0-sm { gap: 0px; }
    .flex.column-reverse-sm { flex-direction: column-reverse; }
}

@media (max-width: 400px) {
    .flex.wrap-xs { flex-wrap: wrap; }
    .flex.gap-0-xs { gap: 0px; }
    .flex.column-reverse-xs { flex-direction: column-reverse; }
}


/* Fonts */
.p { font-family: proxima-nova, sans-serif; }
.h1,
.h1 a,
.h2,
.h2 a,
.h3,
.h3 a,
.h4,
.h4 a { color: #303233; text-align: center; font-family: proxima-nova, sans-serif; }
.h1 { font-size: 24px; line-height: 1.4em; font-weight: 600; }
.h2 { font-size: 20px; line-height: 1.4em; font-weight: 600; }
.h3 { font-size: 16px; line-height: 1.4em; font-weight: 600; }
.h4 { font-size: 14px; line-height: 1.2em; font-weight: 300; }
.bold { font-weight: bold; }
.light { font-weight: 300; }
.light-medium { font-weight: 500; }
.medium { font-weight: 600; }
.italic { font-style: italic; }
.fs-8  { font-size: 8px; }
.fs-12 { font-size: 12px; }
.fs-13 { font-size: 13px; }
.fs-14 { font-size: 14px; }
.fs-15 { font-size: 15px; }
.fs-16 { font-size: 16px !important; }
.fs-18 { font-size: 18px !important; }
.fs-20 { font-size: 20px; }
.fs-22 { font-size: 20px; }
.fs-24 { font-size: 24px; }
.fs-30 { font-size: 30px !important; }
.fs-35 { font-size: 35px; }
.fs-50 { font-size: 50px; }
.fs-56 { font-size: 56px; }
.nowrap { white-space: nowrap; }
.calibri { font-family: Calibri, sans-serif}
.break-word { word-break: break-all; }

/* Positioning */
.relative { position: relative; }
.absolute { position: absolute; }
.top-0 { top: 0; }
.bot-0 { bottom: 0; }
.left-0 { left: 0; }
.right-0 { right: 0; }
.block { display: block; }
.inline { display: inline-block; }
.hidden { display: none; }
.show { display: initial !important; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.pull-left { margin-right: auto; }
.pull-right { margin-left: auto; }
.float-left { float: left; }
.float-right { float: right; }
.clear-floats { clear: both; }

/* Spacing */
hr { margin-bottom: 20px; width: 100%; border: none; border-top: 1px solid #d5dbe0; }
.spacer { padding-bottom: 20px; }
.btn-bar,
.form-item,
.table,
.card,
.card-collar,
.alert,
.h1,
.h2,
.h3,
.h4 { margin-bottom: 20px; }
.field { margin-bottom: 15px; }
.p-0 { padding: 0 !important; }
.p-5 { padding: 5px !important; }
.p-10 { padding: 10px !important; }
.p-15 { padding: 15px !important; }
.p-20 { padding: 20px !important; }
.p-25 { padding: 25px !important; }
.p-30 { padding: 30px !important; }
.p-40 { padding: 40px !important; }
.pt-0 { padding-top: 0px !important; }
.pt-5 { padding-top: 5px !important; }
.pt-10 { padding-top: 10px !important; }
.pt-15 { padding-top: 15px !important; }
.pt-20 { padding-top: 20px !important; }
.pt-40 { padding-top: 40px !important; }
.pb-0 { padding-bottom: 0 !important; }
.pb-5 { padding-bottom: 5px !important; }
.pb-10 { padding-bottom: 10px !important; }
.pb-15 { padding-bottom: 15px !important; }
.pb-20 { padding-bottom: 20px !important; }
.pb-50 { padding-bottom: 50px !important; }
.pb-60 { padding-bottom: 60px !important; }
.pb-70 { padding-bottom: 70px !important; }
.pl-0 { padding-left: 0px !important; }
.pl-10 { padding-left: 10px !important; }
.pl-20 { padding-left: 20px !important; }
.pl-40 { padding-left: 40px !important; }
.pl-45 { padding-left: 45px !important; }
.pl-50 { padding-left: 50px !important; }
.pr-5 { padding-right: 5px !important; }
.pr-10 { padding-right: 10px !important; }
.pr-15 { padding-right: 15px !important; }
.pr-20 { padding-right: 20px !important; }
.pr-40 { padding-right: 40px !important; }
.m-auto { margin: auto !important; }
.m-0 { margin: 0 !important; }
.m-10 { margin: 10px !important; }
.m-15 { margin: 15px !important; }
.m-20 { margin: 20px !important; }
.m-30 { margin: 30px !important; }
.m-50 { margin: 50px !important; }
.mt-auto { margin-top: auto !important; }
.mt-0 { margin-top: 0px !important; }
.mt-5 { margin-top: 5px !important; }
.mt-10 { margin-top: 10px !important; }
.mt-15 { margin-top: 15px !important; }
.mt-20 { margin-top: 20px !important; }
.mt-30 { margin-top: 30px !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-neg20 { margin-bottom: -20px !important; }
.mb-5 { margin-bottom: 5px !important; }
.mb-10 { margin-bottom: 10px !important; }
.mb-15 { margin-bottom: 15px !important; }
.mb-20 { margin-bottom: 20px !important; }
.mb-30 { margin-bottom: 30px !important; }
.mb-40 { margin-bottom: 40px !important; }
.mb-50 { margin-bottom: 50px !important; }
.mr-5 { margin-right: 5px !important; }
.mr-10 { margin-right: 10px !important; }
.mr-20 { margin-right: 20px !important; }
.mr-30 { margin-right: 30px !important; }
.mr-50 { margin-right: 50px !important; }
.ml-auto { margin-left: auto !important; }
.ml-0 { margin-left: 0px !important; }
.ml-20 { margin-left: 20px !important; }
.ml-30 { margin-left: 30px !important; }
.ml-50 { margin-left: 50px !important; }
.ml-125 { margin-left: 125px !important; }
.mt-n20 { margin-top: -20px !important; }
.lh-0 { line-height: 0 !important; }
.b-0 { border: 0 !important; }
.b-1 { border: 1px solid !important; }
.b-2 { border: 2px solid !important; }
.bot-0 { bottom: 0 !important; }

/* Colors */
.text-initial { color: initial !important; }
.text-default { color: #303233 !important; }
.text-blue { color: #008BF8 !important; }
.text-dark-blue { color: #012756 !important; }
.text-light-blue { color: #1678BD !important; }
.text-lighter-blue { color: #0057B7 !important; }
.text-grey { color: #7A7C7F !important; }
.text-green { color: #83B304 !important; }
.text-dark-green { color: #608103 !important; }
.text-red { color: #FF0000 !important; }
.text-heart-red { color: #D1462F !important; }
.text-light-grey { color: #D3D3D3 !important; }
.text-yellow { color: #f9dc67 !important; }
.text-orange { color: #F9A825 !important; }
.text-white { color: white !important; }
.bg-lightest-grey { background-color: #EEE !important; }
.bg-light-grey { background-color: #D3D3D3 !important; }
.bg-light-grey-1 { background-color: #e8e8e8 !important; }
.bg-light-green { background-color: #EDFFEE !important; }
.bg-light-green-1 { background-color: #ecf9ec !important; }
.bg-light-green-2 { background-color: #f7f9f7 !important; }
.bg-light-green-3 { background-color: #F2F7E5 !important; }
.bg-dark-green { background-color: #608103 !important; }
.bg-blue { background-color: #1354BC !important; }
.bg-grey { background-color: #7A7C7F !important; }
.bg-light-red { background-color: #FFEDED !important; }
.bg-red { background-color: #FF0000 !important; }
.bg-yellow { background-color: #ffc107 !important; }
.bg-white-fade { background: rgba(255,255,255,.8); }

/* Border */
.br-0 { border-radius: 0 !important; }
.br-5 { border-radius: 5px !important; }
.br-6 { border-radius: 5px !important; }
.br-20 { border-radius: 20px !important; }
.br-50 { border-radius: 50% !important; }
.bl-6 { border-left: 6px solid #ddd !important; }
.bc-left-red { border-left-color: #FF0000 !important; }
.bc-left-yellow { border-left-color: #f9a825 !important; }
.bc-green { border-color: #54C258 !important; }
.bc-red { border-color: #D02020 !important; }
.bc-blue { border-color: #D02020 !important; }
.bc-light-grey { border-color: #D3D3D3 !important; }

/* Small screen adjustments */
@media all and (max-width: 390px) {
    .container.sm { padding: 5px; }
    .list-item.sm { font-size: 4vw; }
    .list-item.gap-20.sm { gap: 10px; }
    .btn-bar.sm { flex-direction: column; }
}

.login-form { max-width: 400px; margin: auto; }

.table-collapsable { padding: 10px 30px; align-items: center; min-height: 65px; }
.table-collapsable > * { flex: 1 1 0px; }
.table-collapsable-results { margin-top: 10px; font-size: 18px; }
.table-collapsable-results,
.table-collapsable .collapse-header,
.table-collapsable .link span { display: none; }
.table-collapsable .link { text-align:right; }
.table-collapsable-header > .collapsable-cell,
.table-collapsable > .collapsable-cell { margin-right: 5px; overflow: hidden; }
.table-collapsable > .collapsable-cell.actions { text-align: right; }
.table-collapsable > .collapsable-cell.actions > a:first-child { margin-right: 30px; }

@media (max-width: 1000px) {
    .table-collapsable-results { display: initial; }
    .table-collapsable-header { display:none; }
    .table-collapsable { flex-wrap: wrap; padding: 20px 0 0 0; align-items: flex-start; }
    .table-collapsable > * { flex: initial; flex-basis: 50%; margin-bottom: 25px; }
    .table-collapsable > *:nth-child(even) { padding-right: 30px; }
    .table-collapsable > *:nth-child(odd) { padding-left: 30px; }
    .table-collapsable .collapse-header { display: block; }
    .table-collapsable .link { text-align: left; flex-basis: 100%; margin: 0; border-top: 1px solid #d5dbe0; justify-content: flex-start; padding-top: 10px; padding-bottom: 10px; padding-right: 30px; }
    .table-collapsable .link span { font-weight: bold; display: initial; padding-right:40px; }
    .table-collapsable > .collapsable-cell { margin-right: 0; }
    .table-collapsable > .collapsable-cell.actions { display: flex; justify-content: space-around; }
    .table-collapsable > .collapsable-cell.actions > button,
    .table-collapsable > .collapsable-cell.actions > a { width: 50%; text-align: center; padding:20px; }
    .table-collapsable > .collapsable-cell.actions > a:first-child { border-right: 1px solid #d5dbe0; margin-right: 0; }
}

.waveform-holder { position: relative; user-drag: none; -webkit-user-drag: none; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; }
.waveform-holder .controls { display: flex; justify-content: center; align-items: center; color: #83B304; gap: 15px; font-size: 20px; margin-top: 5px; }
.waveform-holder .controls .pull-left { min-width:50px; }
.waveform-holder .controls .pull-right { min-width:50px; text-align:right; }
.waveform-holder .controls > i { color: #83B304; cursor: pointer; }
.waveform-holder .controls .pause,
.waveform-holder .controls .play { font-size: 35px; }
.waveform-holder .controls .pause { display: none; }
.waveform-holder .waveform { width: 100%; padding-top: 50px; height: 100px; }
.waveform-holder .waveform .timeline { width: 100%; height: 1px; background: #B5B7AE; position: relative; position: absolute; transform: translateY(-50%); }
.waveform-holder .waveform .timeline.played { width: 0% }
.waveform-holder .waveform .wave-bar { width: 0px; padding: 0 1px; background: #B5B7AE; transform: translate(25%, -50%); position: absolute; }
.waveform-holder .waveform .played { background: #008BF8; }
.waveform-holder .waveform .dot { z-index: 1; transform: translate(-50%, -50%); position: absolute; border-radius: 50%; background: #83B304; width: 10px; height: 10px; }

/* Metrics Dashboard */
#metrics-dashboard { height: 80%; }
#metrics-dashboard .top-bar { gap:23px; }
#metrics-dashboard .two-cards { gap:23px; white-space:nowrap; }
#metrics-dashboard .two-cards .card { display:flex; flex-direction: column; justify-content: center; padding:15px 30px; font-size: 18px; }
#metrics-dashboard .six-cards { gap: 23px; width: 100%; }
#metrics-dashboard .six-cards > div { display:flex; flex-direction: column; row-gap: 20px; }
#metrics-dashboard .six-cards .card { display:flex; align-items: center; justify-content: space-between; padding: 15px 20px; font-size: 17px; }
#metrics-dashboard .six-cards .card b { margin-top:0; }
#metrics-dashboard .card { margin-bottom:0; }    
#metrics-dashboard .top-bar b { display:block; font-size: 36px; line-height: 44px; margin-top: 10px; }    
#metrics-dashboard .chart { width:calc(60% - 13.3333333333px); }
#metrics-dashboard .chart > div { height:100%; }    
#metrics-dashboard .times { width:calc(20% - 13.3333333333px); }
#metrics-dashboard .times .flex { height:100%; }
#metrics-dashboard .times b { font-size: 36px; line-height: 44px; }    
#metrics-dashboard .top-ten { width:calc(20% - 13.3333333333px); padding-bottom: 0px; }    
#metrics-dashboard .top-ten p { display:flex; padding:10px 0; margin-bottom: 5px; border-bottom: 1.5px solid #ACACAC; } 
#metrics-dashboard .top-ten p span { margin-left: auto; }
#metrics-dashboard .top-ten p:last-child { border:none; }
.brand-selector { z-index: 999; width: 300px; position: fixed; top: 100px; right: 16px; border-radius: 8px 0px 0px 8px; border-right: none; display: none; }
.brand-select-button { z-index: 999; position: fixed; top: 100px; right: 0px; border-radius: 8px 0px 0px 8px; border-right: none; cursor: pointer; }    
.brand-dropdown { width: 100%; border: 1px solid #DCDCDC; border-radius: 5px; }
.brand-mobile-container { display: none; }

@media ( max-width: 1340px ) {
    #metrics-dashboard .top-bar.flex { flex-wrap:wrap; }
    #metrics-dashboard .two-cards .card { width: 50%;}
    #metrics-dashboard .top-ten { width: 100%; }
    #metrics-dashboard .chart { width:calc(80% - 13.3333333333px); }  
    #metrics-dashboard .times { width:calc(20% - 13.3333333333px); }
}

@media ( max-width: 1200px ) {
    #metrics-dashboard .times b,
    #metrics-dashboard .top-bar b { font-size: 26px; }

    .brand-select-button { right: 16px; }
}

@media ( max-width: 1000px ) {
    #metrics-dashboard .chart { width: 100%; }  
    #metrics-dashboard .times { width:100%; }
/*  #metrics-dashboard .flex { flex-direction: column; }
    #metrics-dashboard .flex > * { width:auto; }
    #metrics-dashboard .top-bar.flex > * { width:calc(25% - 15px); }
    #metrics-dashboard .times .flex { flex-direction: row; flex-wrap: wrap;  }
    #metrics-dashboard .times .flex > * { width:calc(50% - 10px); }*/
}

@media ( max-width: 600px  ){
    #metrics-dashboard .two-cards { flex-wrap:wrap; }
    #metrics-dashboard .two-cards .card { width: 100% !important; }
    #metrics-dashboard .six-cards { flex-wrap: wrap;}
    #metrics-dashboard .six-cards .card { width: 100%; }
/*  #metrics-dashboard .top-bar.flex { flex-direction: row; flex-wrap: wrap;  }
    #metrics-dashboard .top-bar.flex > * { width:calc(50% - 10px); }*/
    .brand-container { display: none; }
    .brand-mobile-container { display: block; }
}
@media ( max-width: 530px ) {
    #metrics-dashboard .six-cards > div { width:100%; } 

}
.dnis-dropdown { max-height: 200px; border: 1px solid #DCDCDC; border-radius: 5px; /*max-width: 250px;*/ }
.dnis-dropdown i { color: #303233; }
.dnis-option { padding: 5px 5px; }
.dnis-container { padding: 10px 0px; overflow-x: scroll; }
.checked-label { color: #608103 !important; }
.dnis-container::-webkit-scrollbar { height: 1px; width: 1px; border: 1px solid rgba(0,0,0,0); }

/* On-Call */
.oncall-list { overflow-y: auto; max-height: calc(100vh - 414px); padding-right: 10px; }
.oncall-list i { margin-left: 40px; }
.on-call-user { border-radius: 10px; border: 1px solid #E9E9E9; min-height: 50px; align-items: center; padding: 0px 20px; margin-bottom: 15px; }
.on-call-user.sortable-ghost { opacity: 0; background: white; box-shadow: none; transform: none; }
.on-call-user .drag { background-color: #F2F7E5; font-weight: 600; margin-right: 20px; padding: 0px 12px; min-height: 50px; font-size: 22px; align-content: center; cursor: grab; align-self: stretch; }
.on-call-user .num { width: 27px; height: 27px; border-radius: 25px; background-color: #F2F7E5; font-weight: 600; padding-top: 1px; margin-right: 20px; text-align: center; }
.on-call-user .name { font-weight: 600; flex: 1; color: black; }
.on-call-user .phone { color: #303233; }
.oncall-wrap .last-updated { margin-top: 20px; }
.index-oncall-container { align-items: center; }
.add-callers { flex: 1; }
.add-callers .buttons { align-self: end; gap: 40px; align-items: center; }
.add-callers .buttons button { color: black; }
.add-callers button,
.add-callers a { font-size: 16px; color: black; }
.add-callers i { margin-left: 20px; }
.remove-caller { font-size: 16px; }
.on-call-alert { border: 1px solid #83B304; background-color: #F2F7E5; border-radius: 10px; color: black; padding: 15px; font-weight: 500; position: relative; }
.on-call-alert i { color: #83B304; margin-right: 10px; }
.on-call-alert-info { border: 1px solid #b39a04; background-color: #f7f4e5; border-radius: 10px; color: black; padding: 15px; font-weight: 500; position: relative; }
.on-call-alert-info i { color: #b39a04; margin-right: 10px; }
.alert-info-i { color: rgb(255,181,69); }

/* Operations */
 .operations-wrap .oncall-list { max-height: calc(100vh - 553px); }
.operations-wrap .dropdown-button i { margin-right: 15px; margin-left: 0px; }
.operations-wrap .dropdown-button .chevron { margin-right: 0px; margin-left: 15px; }
.dropdown .menu > .menu-item-brand { padding: 10px; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.dropdown .menu > .menu-item-brand.active { background: #F2F7E5; border-radius: 25px; }
.dropdown .menu > .menu-item-table { padding: 10px; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.dropdown .menu > .menu-item-table.active { background: #F2F7E5; border-radius: 25px; }
.dropdown .menu > .menu-item-table-type { padding: 10px; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.dropdown .menu > .menu-item-table-type.active { background: #F2F7E5; border-radius: 25px; }
.operations-wrap .edit-table-btn { justify-self: center; color: black; font-size: 16px; margin-top: 15px; }
.operations-wrap .buttons { align-self: end; gap: 40px; align-items: center; margin: auto 0 auto auto; padding-bottom: 10px; }
.operations-wrap .buttons button { color: black; }
.operations-wrap .buttons.sm { display: none; }
.operations-wrap button,
.operations-wrap a { font-size: 16px; color: black; }
.operations-wrap .on-call-user .phone { flex: 1; text-align: center; }
.operations-wrap .oncall-list .text-dark-green { margin-left: 0px; margin-right: 20px; }
.operations-wrap .oncall-list .text-heart-red { margin-left: 20px; }
.operations-wrap .on-call-user.add { border: none; margin-top: 20px; margin-bottom: 0px; background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='10' ry='10' stroke='%2383B304' stroke-width='2' stroke-dasharray='3%2c 5' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e"); }
.operations-wrap .card.logo-holder { margin: 0; max-width: 83px; }
.operations-wrap h1 { align-self: end; }
.operations-wrap .title { margin-top: -10px; }
.operations-wrap .last-updated { padding-top: 30px; }
.datatable-text { line-height: 1.1rem; }
.dropdown-text { margin-right: 30px; }

@media (max-width: 400px) {
    .index-oncall-container .group { flex-direction: column; }
    .index-oncall-container .group .phone { text-align: left; }
}

@media (max-width: 500px) 
{
    .operations-wrap .group-oncall { flex-direction: column; }
    .operations-wrap .group-oncall .phone { text-align: left; }
}

@media (max-width: 600px) 
{
    .operations-wrap .buttons { margin: 0 auto; }
    .operations-wrap h1 { text-align: left; }
}

@media (max-width: 700px) 
{
    .operations-wrap .buttons.sm { display: flex; }
    .operations-wrap .buttons.lg { display: none; }
}

@media (max-width: 1000px) 
{
    .operations-wrap .card { padding: 20px; }
}

@media (max-width: 1355px) 
{
    .index-oncall-container .card { padding: 20px; }
    .edit-oncall-container .card { padding: 20px; }
    .operations-wrap .card { padding: 20px; }
    .on-call-user { min-height: 60px; }
    .on-call-user .drag { min-height: 60px; }
    .operations-wrap .group { flex-direction: column; }
    .operations-wrap .group .phone { text-align: left; }
}