/** * INFO-SUPENSION FRONT-END */ #infos-suspension {margin: 1em;} /* HEADER */ #cssccis-header {height: 100px; position: relative;background: rgb(36,106,178); background: linear-gradient(90deg, rgba(36,106,178,1) 22%, rgba(102,160,223,1) 100%);} #cssccis-header >.container {display: flex; align-items: center; height: 100%} #cssccis-header .cssccis-header-title {width: min(36%, 500px);} #cssccis-header .cssccis-header-title h1 {font-family: 'Roboto', sans-serif; font-size: 2.65em; font-weight: bold; color: #fff; text-transform: uppercase; line-height: 1em; letter-spacing: 0.2em; margin-bottom: 5px;} #cssccis-header .cssccis-header-title h1 span {font-style: italic; font-weight: 400; line-height: 1em; margin-top: 10px; margin-bottom: 0;} /* MENU */ #cssccis-menu {background-color: #032156; padding:20px 0; } #cssccis-menu .container {column-gap: 20px; display: flex;} #cssccis-menu .container > div {flex-grow: 1; position: relative; text-align: center; align-self: center; min-height: 45px; display: flex; justify-content: center; align-items: center; } #cssccis-menu .toggle-block-button {cursor: pointer; width: 100%; height: 45px; vertical-align: middle; display: flex; align-items: center; justify-content: center; background: white;} #cssccis-menu .toggle-block-button:hover {opacity: 0.6; } #cssccis-menu .toggle-block-button i {font-size: 0.8em; font-weight: bold; -webkit-text-stroke: 1px #002865; margin-left: 5px;} #cssccis-menu .toggle-block-content {position: absolute; left: 0; top: 100%; background-color: #fff; z-index: 2; margin-top: 0; text-align: left; padding: 14px; border: solid 1px #999; box-sizing: border-box; width: 100%; display: none;} #cssccis-menu .toggle-block-button, #cssccis-lastupdate {font-family: 'Roboto Condensed', sans-serif; font-weight: bold; font-size: 1.3em;} #cssccis-lastupdate {background-color: #fd3939; color: #fff;} .span-note {font-style: italic; font-size: 0.9em; margin-top: 10px; display: block;} #cssccis-subscribe-form {text-align: center;} #cssccis-subscribe-form .subscribe {display: block; color: var(--main-light-blue); font-weight: bold; border: 3px solid var(--main-light-blue); border-radius: 5px; font-size: 1.05em; padding: 15px; transition: all 0.35s; cursor: pointer; text-transform: uppercase; background-color: transparent; margin: 10px auto 10px auto;} #cssccis-subscribe-form .subscribe:hover {color: #fff; background-color: var(--main-light-blue);} #cssccis-subscribe-form .modify {text-decoration: underline; background: none; border: none; cursor: pointer;} #cssccis-subscribe-form .row-checkbox, #cssccis-subscribe-form .row-input {margin-top: 8px;} #cssccis-subscribe-form button {padding: 15px;} #cssccis-subscribe-form input { text-align:center; } #cssccis-subscribe-form input::placeholder { font-style:italic; color:#CCC; } #cssccis-subscribe-response {margin:1em; color: red; font-weight: bold;} /* CONTENT */ #cssccis-content-wrapper {background-image: url('../images/page-bg.png'); background-repeat: no-repeat; background-position: center bottom;} #cssccis-content {margin-top: 35px; margin-bottom: 50px;} /* MAP AND LEGEND */ #cssccis-map-container { display:flex; } /* legend */ #cssccis-legend {width: min(400px, 35%);} #cssccis-legend h3 {color: #032156; font-size: 2.65em; font-family: 'Roboto', sans-serif; margin-bottom: 30px;} #cssccis-legend .cssccis-legend-wrapper {font-family: 'Roboto Condensed', sans-serif;} #cssccis-legend .cssccis-legend-wrapper>div {font-size: 1.45em; display: flex; flex-direction: row; align-items: center;} #cssccis-legend .cssccis-legend-wrapper {margin-bottom: 50px;} #cssccis-legend .cssccis-legend-wrapper>div:not(:last-child){margin-bottom: 20px;} #cssccis-legend .cssccis-legend-wrapper .status-icon {width: min(50px, 30%); display: inline-block; font-size: 35px; text-align: center; margin-right: 5px;} #cssccis-legend .cssccis-legend-wrapper-status {display: flex; flex-direction: row; flex-wrap: wrap;} #cssccis-legend .cssccis-legend-wrapper-status>div {min-width: 50%;} #cssccis-legend .status-circle {margin-right: 10px;} /* map */ #cssccis-map {flex: 1 1 auto; margin-left: min(70px, 5%); height:500px;} #cssccis-map #cssccis-canvas {width: 100%; height:100%; background: gray; } /* info window, should copy list */ #cssccis-canvas .cssccis-infowindow {max-width:360px; display: flex; flex-direction: column;} #cssccis-canvas .cssccis-infowindow .school-title {display: flex;} #cssccis-canvas .cssccis-infowindow .school-title h3 {font-size: 1.7em; margin: 0; font-family: 'Roboto', sans-serif; font-weight: 400!important;} #cssccis-canvas .cssccis-infowindow .school-title .status-circle {width: 24px; min-width: 24px; height: 24px; font-size: 24px; line-height: 24px; margin-left: 10px; } #cssccis-canvas .cssccis-infowindow .school-date { color: #0b2865; margin: 0.2em 0 1em;} #cssccis-canvas .cssccis-infowindow .school-date:first-letter {text-transform: capitalize;} #cssccis-canvas .cssccis-infowindow .school-content {display: flex; font-size: 1.1em; margin-bottom: 1em;} #cssccis-canvas .cssccis-infowindow .school-content .status-icon {width: 30px; min-width: 30px; height: 30px; font-size: 30px; line-height: 30px; margin-right: 10px; text-align: center; } #cssccis-canvas .cssccis-infowindow .school-content .comment {margin: 0; font-weight: 500; display: flex; min-height: 100%; align-items: center;} #cssccis-canvas .cssccis-infowindow .school-content .comment p {margin: 0; margin-bottom: 2px; } #cssccis-canvas .cssccis-infowindow .school-content .comment a {color: #3478be; text-transform:uppercase; font-weight:bold; } #cssccis-canvas .cssccis-infowindow .school-content .comment a:hover {text-decoration:underline; } /* GENERIC */ /* LIST AND FILTER */ /* filter */ #cssccis-list-controls {display: flex; justify-content:end; align-items: center; column-gap: 10px; font-size: 1.35em; margin-top: 25px; text-transform: uppercase; color: #7ac2ea; font-family: 'Roboto Condensed', sans-serif;} #cssccis-list-controls .order-button {cursor: pointer;} #cssccis-list-controls .order-button:hover {opacity: 0.6;} #cssccis-list-controls .order-button.active {text-decoration: underline;} #cssccis-list-controls .cssccis-search-block {position: relative; margin-left: 20px; display: flex;} #cssccis-list-controls .cssccis-search-block input {padding: 5px; height: 30px; border: none; border-radius: 0; background-color: #ededed; color: #666; margin-bottom: 0; box-sizing: border-box; outline: none; max-width: 100%; font-size: 18px; margin-right: 0px;} #cssccis-list-controls .cssccis-search-block input::placeholder {font-style: italic; color: #ccc;} #cssccis-list-controls .cssccis-search-block i {height:30px; width: 30px; font-size: 22px; line-height: 30px; text-align: center;background-color: #7ac2ea; color: #FFF; margin: 0px;} #cssccis-list-controls .cssccis-search-block input::placeholder {font-weight: 300; color: #9f9f9f;} /* school list */ #cssccis-list {font-family: 'Roboto', sans-serif; margin-top: 40px;} #cssccis-list #cssccis-list-schools {display: flex; justify-content:start; flex-wrap: wrap; justify-content: space-between; row-gap: 50px; margin: 0 -15px 0 -15px;} #cssccis-list #cssccis-list-schools .cssccis-school {width: calc((100% / 3) - 50px); margin: 0 15px; display: flex; flex-direction: column;} #cssccis-list #cssccis-list-schools .cssccis-school .school-title {display: flex;} #cssccis-list #cssccis-list-schools .cssccis-school .school-title h3 {font-size: 1.7em; margin: 0; font-family: 'Roboto', sans-serif; font-weight: 400!important;} #cssccis-list #cssccis-list-schools .cssccis-school .school-title .status-circle {width: 24px; min-width: 24px; height: 24px; font-size: 24px; line-height: 24px; margin-left: 10px; } #cssccis-list #cssccis-list-schools .cssccis-school .school-date { color: #0b2865; margin: 0.2em 0 1em;} #cssccis-list #cssccis-list-schools .cssccis-school .school-date:first-letter {text-transform: capitalize;} #cssccis-list #cssccis-list-schools .cssccis-school .school-content {display: flex; font-size: 1em; margin-bottom: 1em;} #cssccis-list #cssccis-list-schools .cssccis-school .school-content .status-icon {width: 30px; min-width: 30px; height: 30px; font-size: 30px; line-height: 30px; margin-right: 10px; text-align: center; } #cssccis-list #cssccis-list-schools .cssccis-school .school-content .comment {margin: 0; font-weight: 500; display: flex; min-height: 100%; align-items: center;} #cssccis-list #cssccis-list-schools .cssccis-school .school-content .comment p {margin: 0; margin-bottom: 2px; } #cssccis-list #cssccis-list-schools .cssccis-school .school-content .comment a {color: #3478be; text-transform:uppercase; font-weight:bold; } #cssccis-list #cssccis-list-schools .cssccis-school .school-content .comment a:hover {text-decoration:underline; } /*#cssccis-list #cssccis-list-schools .cssccis-school .school-content .comment p.servicegarde {font-style: italic; } #cssccis-list #cssccis-list-schools .cssccis-school .school-content .comment p.courssoiree {font-style: italic; }*/ #cssccis-list #cssccis-list-schools .cssccis-school .school-favorite {font-size: 1em; cursor: pointer; font-weight: 300;} #cssccis-list #cssccis-list-schools .cssccis-school .school-favorite i {font-size: 0.8em; font-weight: bold; -webkit-text-stroke: 1px #002865; margin:0 1em;} #cssccis-list #cssccis-list-schools .cssccis-school .school-unfavorite {display: none; font-size: 1em; color: #549ac3; cursor: pointer; font-weight: 300;} #cssccis-list #cssccis-list-schools .cssccis-school .school-unfavorite i {font-size: 0.8em; font-weight: bold; -webkit-text-stroke: 1px #549ac3; margin:0 1em;} #cssccis-list #cssccis-list-schools .cssccis-school .school-favorite:hover, #cssccis-list #cssccis-list-schools .cssccis-school .school-unfavorite:hover {/*opacity: 0.6;*/ text-decoration: underline;} #cssccis-list #cssccis-list-schools .cssccis-school.is_favorite .school-unfavorite {display: block;} #cssccis-list #cssccis-list-schools .cssccis-school.is_favorite .school-favorite {display: none;} #cssccis-list #cssccis-list-schools .cssccis-school-separator {width: 100%; margin-bottom:-25px; background: #549ac3; color: white; padding: 10px 20px; text-transform: uppercase;} #cssccis-list #cssccis-list-schools #no-search-result {margin: 1em auto; text-align: center; color: #d12c2c;} /* SUB PAGES AND FORMS */ #cssccis-main {text-align: center;} #cssccis-main .subform {} #cssccis-main .subform input[type=text] { display:inline-block; } #cssccis-main .subform input[type=text] { text-align: center; font-size: 1.1em; width:300px; } #cssccis-main .subform input[type=text]::placeholder { font-style:italic; color:#CCC; } #cssccis-main .subform input[type=submit] {max-width: 360px; display: block; color: var(--main-light-blue); font-weight: bold; border: 3px solid var(--main-light-blue); border-radius: 5px; font-size: 1.05em; padding: 15px; transition: all 0.35s; cursor: pointer; text-transform: uppercase; background-color: transparent; margin: 10px auto 10px auto; } #cssccis-main .subform input[type=submit]:hover {color: #fff; background-color: var(--main-light-blue);} #cssccis-main .subform.list hr {border: dashed 1px;} #cssccis-main .subform.list .all {} #cssccis-main .subform.list .all .input-wrapper {width: 260px; margin: 0 auto;} #cssccis-main .subform.list .list {display: flex; justify-content:start; flex-wrap: wrap; row-gap: 18px; margin: 0 -3px 0 -3px;} #cssccis-main .subform.list .list .input-wrapper {width: calc((100% / 4) - 6px); margin: 0 3px; min-width: 200px; text-align: left;} #cssccis-main .subform.list .list.disabled {opacity: 0.5; pointer-events: none;} #cssccis-main .subform.delete {margin-top: 30px;} #cssccis-main .subform.delete input[type=submit] { color: #F00; border: solid 3px #F00; scale:0.8;} #cssccis-main .subform.delete input[type=submit]:hover {color: #FFF; background-color: #F00;} #cssccis-main p.success {margin-top:2em;} #cssccis-main p.success span {font-weight:bold; color: green; background-color:#a9d5a9; border: solid green 2px; padding: 1em;} .hidden-box { display: none; } .fa-exclamation-triangle {font-size: 0.9em;} .checkbox-label {display: flex; cursor: pointer; margin: 0;} .checkbox-label-box {display: inline-block; position: relative; height: 18px; width: 18px; min-width: 18px; margin-top: 2px; margin-right: 0.3em; border: 2px solid #1b366f; box-sizing: border-box;} .checkbox-label-text {margin-right: 0.6em;} .hidden-box:checked + .checkbox-label .checkbox-label-box:after {content: ''; display: block; position: absolute; top: -1px; left: 4px; width: 4px; height: 10px; border: solid #000; border-width: 0 2px 2px 0; transform: rotate(45deg);} /* mobile */ @media screen and (max-width: 991px) { #cssccis-header {flex-wrap: wrap; row-gap: 5px;} #cssccis-map #cssccis-legend {padding: 10px; font-size: 1.2em;} #cssccis-map #cssccis-legend h3 {width: 100%;} #cssccis-list #cssccis-list-controls {font-size: 1em;} #cssccis-list #cssccis-list-schools .cssccis-school {width: calc((100% / 2) - 30px); margin: 0 15px;} } @media screen and (max-width: 768px) { #cssccis-alert {font-size: 1.2em;} #cssccis-map #cssccis-legend {padding: 10px; font-size: 1em;} #cssccis-map #cssccis-legend h3 {width: 100%;} #cssccis-list-controls {font-size: 0.8em; flex-wrap: wrap; justify-content: center;} #cssccis-list-controls .cssccis-search-block {font-size: 1.2em; margin-right: 15px; width: 100%; margin-top: 15px;} #cssccis-list-controls .cssccis-search-block #cssccis-search {width: 100%;} #cssccis-list #cssccis-list-schools .cssccis-school {width: calc(100% - 50px); margin: 0 25px;} #cssccis-menu .container {flex-direction: column;} #cssccis-menu .container>* {width: 100%;} #cssccis-menu .container>*:not(:last-child) {margin-bottom: 15px;} #cssccis-map-container {flex-direction: column;} #cssccis-legend {order: 2; width: 100%;} #cssccis-map {margin-left: 0; margin-bottom: 30px;} }