/*font-family: 'Montserrat', sans-serif;
font-family: 'Poppins', sans-serif;*/

/***********************************
Style Guide
***********************************/

*,
*:before,
*:after { box-sizing: border-box; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body { font-family: 'Poppins', sans-serif; font-size: 1rem; line-height: 1.7; background-color: #f7f7f7; color: #000; margin: 0; }

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { clear: both; font-weight: 700; margin-bottom: 1.25rem; }
h1, .h1 { font-size: 1.5625rem; }
h2, .h2 { font-size: 1.25rem; }
h3, .h3 { font-size: 1.125rem; }
h4, .h4 { font-size: 1rem; }
h5, .h5 { font-size: .875rem; }
h6, .h6 { font-size: .75rem; }

p { margin-bottom: 1.25rem; }

ul,
ol { margin: 0 0 1.25rem 3em; }
ul { list-style: disc; }
ol { list-style: decimal; }
li > ul,
li > ol { margin-bottom: 0; margin-left: 1.25rem; }

select { background-image: url(../images/icons/select-arrow.svg); background-position: center right; background-size: 8px 8px; background-repeat: no-repeat; -webkit-appearance: none;}
.custom-form-light select { background-image: url(../images/icons/select-white-arrow.svg); }
.form-group { margin-bottom: 1.6rem; }



.bg-orange { background-color: #ff6b53 !important; }
.bg-green { background-color: #38e784 !important; }
.bg-primary { background-color: #118df0 !important; }
.bg-blue { background-color: #034182 !important; }
.bg-light { background-color: #f9f9f9 !important; }

.text-orange { color: #ff6b53 !important; }
.text-green { color: #38e784 !important; }
.text-primary { color: #118df0 !important; }
.text-blue { color: #034182 !important; }

.shadow-sm { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16) !important; }
.rounded { border-radius: 2px !important; }

.panel-scroller { position: relative; z-index: 2; overflow-y: hidden; }
.panel-scroller > .scroller { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }

::-webkit-scrollbar {width: 5px; height: 5px;  }
::-webkit-scrollbar-track {opacity: 0.13; background-color: rgba(112, 112, 112, .13); border-radius: 1rem; }
::-webkit-scrollbar-thumb {background-color: rgb(17, 141, 240, 0.5); opacity: .5; border-radius: 1rem; }

.scrollbar-hide::-webkit-scrollbar { width: 0px; display: none; }

hr {margin-top: 1rem; margin-bottom: 1rem; border: 0; height: 5px; background-color: #f9f9f9; }
.theme-font-size { font-size: .75rem; }
.font-style-normal { font-style: normal; }


::-webkit-input-placeholder { color: #000; opacity: .2; }  /* Chrome/Opera/Safari */
::-moz-placeholder { color: #000; opacity: .2; } /* Firefox 19+ */
:-ms-input-placeholder { color: #000; opacity: .2; } /* IE 10+ */
:-moz-placeholder { color: #000; opacity: .2; } /* Firefox 18- */

.custom-form-light ::-webkit-input-placeholder { color: #fff; opacity: .2; }  /* Chrome/Opera/Safari */
.custom-form-light ::-moz-placeholder { color: #fff; opacity: .2; } /* Firefox 19+ */
.custom-form-light :-ms-input-placeholder { color: #fff; opacity: .2; } /* IE 10+ */
.custom-form-light :-moz-placeholder { color: #fff; opacity: .2; } /* Firefox 18- */

.modal-dialog { pointer-events: inherit; }

.panel-scrollbar {max-height: calc(100vh - 28rem); min-height: calc(100vh - 28rem); overflow-y: scroll; margin-bottom: 1.5rem; padding-right: 1rem; }
.panel-scrollbar-attachment {max-height: calc(100vh - 20.8rem); min-height: calc(100vh - 20.8rem); }

.site:not(.open-intro) .site-header { width: 3.5rem; }
.site:not(.open-intro) .header-intro { display: none; }
.site:not(.open-intro) .site-content { padding-left: 3.5rem; }



/* Links
--------------------------------------------- */

a { color: inherit; }
a:hover,
a:focus,
a:active { color: inherit; }
a:focus { outline: none; }

/* buttons
--------------------------------------------- */

.btn { font-family: 'Poppins', sans-serif; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.16) !important; border-radius: 2px; letter-spacing: 0.6px; font-size: .75rem; font-weight: 600; padding: .44rem .8rem; }
.btn-primary { color: #fff; background-color: #118df0; border-color: #118df0; }
.btn-light { color: #034182; background-color: #fff; border-color: #fff; }
.btn-outline-primary { box-shadow: none !important; color: #118df0; border-color: #118df0; }
.btn-minw { min-width: 7.5rem; }

.plus-btn {letter-spacing: 1.5px; font-family: 'Montserrat', sans-serif; font-size: 30px; height: 43px; padding: 0; width: 43px; line-height: 1; }

.btn.disabled,
.btn:disabled { opacity: .2; }
.page-link.disabled,
.page-link:disabled { opacity: .2; }

.btn-light:not(:disabled):not(.disabled).active,
.btn-light:not(:disabled):not(.disabled):active,
.show>.btn-light.dropdown-toggle,
.btn-light.focus,
.btn-light:focus,
.btn-light:hover {color: #fff; background-color: #034182; border-color: #034182; }

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle,
.btn-primary.focus,
.btn-primary:focus,
.btn-primary:hover {color: #fff; background-color: #38e784; border-color: #38e784; }

.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.show>.btn-outline-primary.dropdown-toggle,
.btn-outline-primary.focus,
.btn-outline-primary:focus,
.btn-outline-primary:hover {color: #fff; background-color: #38e784; border-color: #38e784; }

.form-control { height: 2.125rem; border-radius: 2px; background-color: #f9f9f9; border-color: #f9f9f9; color: #000; font-size: .75rem; }
.form-control:focus { border-color: #f9f9f9; color: #000; background-color: #f1f1f1; }

.pagination .page-link {margin-left: 0; height: 34px; width: 34px; font-size: .75rem; border-color: #118df0; text-align: center; box-shadow: none !important; }
.pagination .page-link:hover {color: #fff; background-color: #118df0; border-color: #118df0; }
.pagination .page-item + .page-item { margin-left: .875rem; }

.attachment-button { padding: .4rem; box-shadow: none !important }
.attachment-button img,
.attachment-button svg { fill: #118df0; width: 1.25rem; height: 1.25rem }

/*////////// STYLE GUIDE /////////////*/

.login { height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-form { max-width: 22rem; width: 100%; }
.login-title { margin-bottom: 2rem; border-bottom: 4px solid #f5f5f5; padding-bottom: 1rem; padding-top: .5rem; }

.site-header { position: fixed; top: 0; bottom: 0; left: 0; width: 20.625rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16); background-color: #fff; }
.sidebar-menu { background-color: #118df0; width: 3.5rem; min-width: 3.5rem; /*overflow-y: auto; height: 100%;*/ padding-top: 7.5rem; }
.sidebar-menu .nav-button { display: flex; border: none; background-color: transparent; padding: 0; height: 3.5rem; width: 3.5rem; fill: #f7f7f7; outline: none; }
.sidebar-menu .nav-button + .nav-button { margin-bottom: .875rem;  }
.sidebar-menu .nav-button img,
.sidebar-menu .nav-button svg { display: block; width: 1.0625rem; height: 1.25rem; margin: auto; fill: inherit; stroke: inherit; }
.fill-color { fill: #fff; }
.stroke-color { stroke: #fff; }
.sidebar-menu .nav-button:hover { background-color: #fff; fill: #034182; }
.sidebar-menu .nav-button:hover .fill-color { fill: #034182; }
.sidebar-menu .nav-button:hover .stroke-color { stroke: #034182; }

.site-title { margin-bottom: 1.5rem; }
.header-intro { width: 100%; overflow-y: auto; max-height: 100vh; }
.header-intro-inner { padding: 3.5rem 1.375rem 1.375rem; }
.nav-link { box-shadow: none !important; font-size: .625rem; letter-spacing: 0.5px; padding: .54rem 1rem; background-color: #f9f9f9; }
.nav-pills { margin: 0; }
.nav-pills .nav-item + .nav-item { margin-left: .625rem; }
.btn .badge { position: absolute; top: -.5rem; right: -.5rem; background-color: #ff6b53; color: #fff; width: 1rem; height: 1rem; line-height: 1.8; font-weight: normal; }

.header-tabs .nav-pills .nav-link.active,
.header-tabs .nav-pills .show > .nav-link { background-color: #034182; font-weight: 500; }

.header-search { margin: .75rem 0 2rem; }
.header-search .form-control { padding-right: 2.5rem; }
.search-button { position: absolute; right: 0; top: 0; height: 2.125rem; background-color: transparent; border: none; padding: 0; width: 2.5rem; }
.search-button img,
.search-button svg { width: .8125rem; height: .8125rem; fill: #5067d3; }


.list-title { color: #118df0; margin-bottom: 1.25rem; margin-top: 1.5rem; }
.list-item { background-color: #ffffff; padding: .8125rem 1.125rem; display: flex; align-items: center; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16); border-radius: 2px; }
.list-item.active { background-color: #034182; color: #fff; }
.time { margin-right: 1rem; font-size: 14px; }
.info-border { border-right-width: 4px; border-right-style: solid; border-right-color: #118df0; }
.list-item + .list-item { margin-top: .75rem; }
.list-item h5 { margin-bottom: 0; }
.list-item span { display: block; font-size: .75rem; }
.list-item:hover { text-decoration: none; }



.site-content { padding-left: 20.625rem; }
.content-inner { padding: 1.5rem; }

.content-title { margin-bottom: 1.4rem; }
.content-title h1 { margin-bottom: 2px; }
.content-title p { margin-bottom: 0; font-size: .75rem; }


.gutters-8 { margin-left: -.5rem; margin-right: -.5rem; }
.gutters-8 > .col,
.gutters-8 > [class*=col-],
.gutters-8 > [class*=panel-] { padding-left: .5rem; padding-right: .5rem; }

.gutters-10 { margin-left: -.625rem; margin-right: -.625rem; }
.gutters-10 > .col,
.gutters-10 > [class*=col-] { padding-left: .625rem; padding-right: .625rem; }

.user-verified-block { margin-bottom: 2rem; }
.panel { display: flex; flex-wrap: wrap; }
.panel-item { min-width: 5.875rem; max-width: 5.875rem; margin-bottom: 2px; }
.panel-item + .panel-item { margin-left: 1rem; }
.panel-card { height: 100%; background-color: #ff6b53; color: #fff; fill: #fff; padding: .85rem .6rem; text-align: center; }
.panel-card img,
.panel-card svg { width: .875rem; height: 1.0625rem; fill: inherit; margin: 0 auto .65rem; }
.panel-card span { font-size: .75rem; display: block; font-weight: 700; line-height: 1.3; }


.upcoming-events-block .panel { margin-bottom: 2rem; }
.upcoming-event-date { max-width: 3.25rem; min-width: 3.25rem; margin-right: 1.5rem; background-color: #034182; color: #fff; font-size: .75rem; margin-bottom: 2px; }

.event-item { min-width: 9.25rem; max-width: 9.25rem; margin-bottom: 2px; }
.event-item + .event-item { margin-left: 1rem; }
.event-item + .upcoming-event-date { margin-left: 1.5rem; }

.event-card { padding: 1rem 1rem 1.25rem; }
.card-subtitle { font-size: .875rem; color: #034182; margin-top: 0; margin-bottom: 5px; }
.card-title { margin-bottom: .4rem; font-size: .875rem; line-height: 1.4; }
.card-text { font-size: .75rem; margin-bottom: .7rem; }



.statistics-item { margin-bottom: 2px; }
.statistics-item + .statistics-item { margin-left: 1rem; }
.statistics-card {padding: 1.3rem 1rem .8rem; }
.card-inner {max-width: 7.25rem; min-width: 7.25rem; text-align: center; }
.statistics-status {font-size: .875rem; border-bottom: 2px solid #f4f4f4; display: block; line-height: 1.5; padding-bottom: .25rem; margin-bottom: .625rem; }
.statistics-date strong {font-size: 2.5rem; display: block; line-height: 1; }
.statistics-date span {display: block; font-size: .75rem; }
.card-graph { margin-left: 1.6rem; margin-right: .75rem; }

.block-panel { background-color: #fff; padding: 1.5rem 2.25rem; }
.panel-heading { margin-bottom: 1.5rem; }
.panel-heading h2 { margin-bottom: .25rem; }
.panel-heading p { margin-bottom: 0; font-size: .75rem; }



.contact-links a { display: table; }
.contact-links span { display: table; font-weight: 600; }
.contact-links a + a { margin-top: .625rem; }
.contact-links span + span { margin-top: .25rem; }
.contact-links span img,
.contact-links span svg,
.contact-links a img,
.contact-links a svg { width: 1rem; height: 1rem; fill: #118df0; margin-right: .875rem; }
.inner-content { color: #fff; text-align: center; }
.inner-content p { font-size: .75rem; }

.media h5 { color: #118df0; }
.media-head {width: 2.375rem; height: 2.375rem; border-radius: 2px; background-color: #f9f9f9; font-size: 1rem; font-weight: 600; text-transform: uppercase; text-align: center; line-height: 2.375rem; margin-right: .75rem; }



.indoors-card { text-align: center; background-color: #fff; padding: .875rem .875rem 1.1rem; min-height: 12rem; }
.indoors-card-title {font-size: .875rem; border-bottom: 2px solid #f4f4f4; font-weight: 600; padding-bottom: .3rem; margin-bottom: .5rem; } 
.indoors-card-number strong {display: block; font-size: 2.5rem; line-height: 1; }
.indoors-card-number span {display: block; font-weight: 700; font-size: .75rem; }
.indoors-card-btn {margin-top: .875rem; }


.radio { display: flex; flex-wrap: wrap; }
.radio-item input[type=radio] { display: none; }
.radio-item + .radio-item { margin-left: 1rem; }
.radio .radio-item label { margin-bottom: 0; }

.radio-item .btn-outline-primary { min-width: 130px; }
.radio-item input[type=radio]:checked + .btn-outline-primary {color: #fff; background-color: #38E784; border-color: #38E784; }
.custom-form label {font-weight: bold; margin-bottom: .75rem; display: block; }
.custom-form hr { margin: 0 0 1.475rem; }
.form-control-custom {border: none; border-bottom: 1px solid #118df0 !important; background-color: transparent !important; border-radius: 0; padding: 0; }
.custom-form-light .form-control-custom {border-bottom-color: #fff !important; color: #fff; }
.note-custom-form .form-control-custom { background-color: #f9f9f9 !important; border-color: #f9f9f9 !important; height: 90px; }

textarea.form-control-custom { padding: .8rem; border: 1px solid #118df0 !important; border-radius: 2px; height: 140px; }

.modal-popup { background-color: #f7f7f7; min-height: 100%; }
/*.modal-popup { background-color: #f7f7f7; min-height: 100%; width: 454px }
.modal-popup-max { width: 670px; }*/
.modal-content { border: none; border-radius: 0; background-color: transparent; padding: 2rem 2.5rem; }
.modal-content .modal-body { padding: 0; }

.modal-panel { background-color: #fff; padding: 2rem 2.325rem 2.375rem;  }
.modal-panel-title { border-bottom: 4px solid #f9f9f9; padding-bottom: 1rem; margin-bottom: 1.875rem; }
.close-modal { position: absolute; right: 100%; top: 3rem; margin-right: 2rem; min-width: 5rem; }

.modal-form-title { border-bottom: 4px solid #f9f9f9; padding-bottom: 12px; margin-bottom: 1.425rem; margin-top: .625rem; }
.modal-form-title h2 { margin-bottom: .625rem; }
.modal-form-title p { margin-bottom: 0; }


.alert {background-color: #ff6b53; font-weight: 600; color: #FFF; padding: 1rem 2rem; display: flex; flex-wrap: wrap; align-items: center; line-height: 1.6; }
.alert span {width: calc(100% - 40px); }
.alert:before {content: "!"; display: inline-block; font-size: 1.875rem; font-weight: 600; letter-spacing: 1.5px; line-height: 1; font-family: 'Montserrat', sans-serif; margin-right: 1.125rem; }

.room-type-item {min-width: 20%; max-width: 20%; margin-bottom: 1rem; }
.room-type-card {height: 100px; border-radius: 2px; border: 2px solid #ffffff; display: flex; padding: .5rem; }
.room-type-name {margin-top: auto; width: 100%; text-align: center; }



.filter-item + .filter-item { margin-left: .5rem; } 
.list-unstyled .media {padding: 1.5rem 0; }
.list-unstyled table tr td { padding: 1.5rem 0; border-bottom: 3px solid #f9f9f9; }
.list-unstyled table tr:last-child td { border-bottom: none; }
.list-unstyled .media h5 {font-size: .75rem; color: #000; }
.list-unstyled .media + .media {border-top: 3px solid #f9f9f9; }
.trunking-outer-item span {padding: .4375rem 1rem; font-weight: 600; }
.trunking-outer-item span:last-child {min-width: 45px; max-width: 45px; margin-left: 10px; }
.product-color {display: flex; flex-direction: column; } 
.product-color button {padding: 0; width: 34px; height: 34px; border: 1px solid rgba(0,0,0,.1); margin: 4px 0; display: block; box-shadow: none !important; outline: none !important; }


.profile-avatar {text-align: center; }
.avatar {max-width: 8rem; }
.avatar img {max-width: 100%; }


.btn-icon { width: 2.2rem; height: 2.2rem; padding: 0; box-shadow: none !important; }
.btn-icon img,
.btn-icon svg { width: .975rem; height: .975rem; }
.edit-btn svg { fill: #118df0; }
.delete-btn svg { fill: #ff6b53; }

.claimed-box h2 {
    font-weight: normal;
    font-size: 48px;
}

@media (min-width: 576px) {

    .modal-dialog-scrollable {max-height: calc(100%); min-height: calc(100%); }
    .modal-dialog { margin-top: 0; margin-bottom: 0; margin-right: 0; }
    .modal-popup {transition: transform .2s ease; transform: translateX(100%); }
	
}

@media (min-width: 768px) {

    .modal-popup { max-width: 454px }
    .modal-popup-max { max-width: 670px; }

}

@media (max-width: 767px) {

    .modal-dialog { max-width: 100%; }
    .modal-content { padding: 5rem 1.25rem 1.25rem 1.25rem; }
    .close-modal { right: auto; left: 1.25rem; top: 1.25rem; z-index: 10; }
    .radio-item .btn-outline-primary { min-width: 110px; }
    .modal-panel { padding: 1.25rem; }
    .block-panel { padding: 1.25rem; }

}

@media (max-width: 575px) {

    .modal-dialog { margin: 0; }

}





.loader {position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #118df0; z-index: 100; display: flex; align-items: center; justify-content: center; }
.loader-inner {color: #ffffff; font-size: 6px; width: 1em; height: 1em; border-radius: 50%; position: relative; text-indent: -9999em; -webkit-animation: load4 1.3s infinite linear; animation: load4 1.3s infinite linear; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); }
@-webkit-keyframes load4 {
	0%, 100% {box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0; }
	12.5% {box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em; }
	25% {box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em; }
	37.5% {box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em; }
	50% {box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em; }
	62.5% {box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em; }
	75% {box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0; }
	87.5% {box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em; }
}
@keyframes load4 {
	0%, 100% {box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0; }
	12.5% {box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em; }
	25% {box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em; }
	37.5% {box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em; }
	50% {box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em; }
	62.5% {box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em; }
	75% {box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0; }
	87.5% {box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em; }
}
