@import url(https://fonts.googleapis.com/css?family=Roboto:100,100i,400,400i,700&display=swap); @import url(https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;700&display=swap); .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle,.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle,.react-datepicker__year-read-view--down-arrow,.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view--down-arrow{margin-left:-8px;position:absolute}.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle,.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle,.react-datepicker__year-read-view--down-arrow,.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view--down-arrow,.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before,.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before,.react-datepicker__year-read-view--down-arrow::before,.react-datepicker__month-read-view--down-arrow::before,.react-datepicker__month-year-read-view--down-arrow::before{box-sizing:content-box;position:absolute;border:8px solid transparent;height:0;width:1px}.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before,.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before,.react-datepicker__year-read-view--down-arrow::before,.react-datepicker__month-read-view--down-arrow::before,.react-datepicker__month-year-read-view--down-arrow::before{content:"";z-index:-1;border-width:8px;left:-8px;border-bottom-color:#aeaeae}.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle{top:0;margin-top:-8px}.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle,.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before{border-top:none;border-bottom-color:#f0f0f0}.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before{top:-1px;border-bottom-color:#aeaeae}.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle,.react-datepicker__year-read-view--down-arrow,.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view--down-arrow{bottom:0;margin-bottom:-8px}.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle,.react-datepicker__year-read-view--down-arrow,.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view--down-arrow,.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before,.react-datepicker__year-read-view--down-arrow::before,.react-datepicker__month-read-view--down-arrow::before,.react-datepicker__month-year-read-view--down-arrow::before{border-bottom:none;border-top-color:#fff}.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before,.react-datepicker__year-read-view--down-arrow::before,.react-datepicker__month-read-view--down-arrow::before,.react-datepicker__month-year-read-view--down-arrow::before{bottom:-1px;border-top-color:#aeaeae}.react-datepicker-wrapper{display:inline-block;padding:0;border:0}.react-datepicker{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:.8rem;background-color:#fff;color:#000;border:1px solid #aeaeae;border-radius:.3rem;display:inline-block;position:relative}.react-datepicker--time-only .react-datepicker__triangle{left:35px}.react-datepicker--time-only .react-datepicker__time-container{border-left:0}.react-datepicker--time-only .react-datepicker__time{border-radius:0.3rem}.react-datepicker--time-only .react-datepicker__time-box{border-radius:0.3rem}.react-datepicker__triangle{position:absolute;left:50px}.react-datepicker-popper{z-index:1}.react-datepicker-popper[data-placement^="bottom"]{margin-top:10px}.react-datepicker-popper[data-placement="bottom-end"] .react-datepicker__triangle,.react-datepicker-popper[data-placement="top-end"] .react-datepicker__triangle{left:auto;right:50px}.react-datepicker-popper[data-placement^="top"]{margin-bottom:10px}.react-datepicker-popper[data-placement^="right"]{margin-left:8px}.react-datepicker-popper[data-placement^="right"] .react-datepicker__triangle{left:auto;right:42px}.react-datepicker-popper[data-placement^="left"]{margin-right:8px}.react-datepicker-popper[data-placement^="left"] .react-datepicker__triangle{left:42px;right:auto}.react-datepicker__header{text-align:center;background-color:#f0f0f0;border-bottom:1px solid #aeaeae;border-top-left-radius:.3rem;border-top-right-radius:.3rem;padding-top:8px;position:relative}.react-datepicker__header--time{padding-bottom:8px;padding-left:5px;padding-right:5px}.react-datepicker__year-dropdown-container--select,.react-datepicker__month-dropdown-container--select,.react-datepicker__month-year-dropdown-container--select,.react-datepicker__year-dropdown-container--scroll,.react-datepicker__month-dropdown-container--scroll,.react-datepicker__month-year-dropdown-container--scroll{display:inline-block;margin:0 2px}.react-datepicker__current-month,.react-datepicker-time__header,.react-datepicker-year-header{margin-top:0;color:#000;font-weight:bold;font-size:.944rem}.react-datepicker-time__header{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.react-datepicker__navigation{background:none;line-height:1.7rem;text-align:center;cursor:pointer;position:absolute;top:10px;width:0;padding:0;border:.45rem solid transparent;z-index:1;height:10px;width:10px;text-indent:-999em;overflow:hidden}.react-datepicker__navigation--previous{left:10px;border-right-color:#ccc}.react-datepicker__navigation--previous:hover{border-right-color:#b3b3b3}.react-datepicker__navigation--previous--disabled,.react-datepicker__navigation--previous--disabled:hover{border-right-color:#e6e6e6;cursor:default}.react-datepicker__navigation--next{right:10px;border-left-color:#ccc}.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button){right:80px}.react-datepicker__navigation--next:hover{border-left-color:#b3b3b3}.react-datepicker__navigation--next--disabled,.react-datepicker__navigation--next--disabled:hover{border-left-color:#e6e6e6;cursor:default}.react-datepicker__navigation--years{position:relative;top:0;display:block;margin-left:auto;margin-right:auto}.react-datepicker__navigation--years-previous{top:4px;border-top-color:#ccc}.react-datepicker__navigation--years-previous:hover{border-top-color:#b3b3b3}.react-datepicker__navigation--years-upcoming{top:-4px;border-bottom-color:#ccc}.react-datepicker__navigation--years-upcoming:hover{border-bottom-color:#b3b3b3}.react-datepicker__month-container{float:left}.react-datepicker__month{margin:.4rem;text-align:center}.react-datepicker__month .react-datepicker__month-text,.react-datepicker__month .react-datepicker__quarter-text{display:inline-block;width:4rem;margin:2px}.react-datepicker__input-time-container{clear:both;width:100%;float:left;margin:5px 0 10px 15px;text-align:left}.react-datepicker__input-time-container .react-datepicker-time__caption{display:inline-block}.react-datepicker__input-time-container .react-datepicker-time__input-container{display:inline-block}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input{display:inline-block;margin-left:10px}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input{width:85px}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type="time"]::-webkit-inner-spin-button,.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type="time"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type="time"]{-moz-appearance:textfield}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter{margin-left:5px;display:inline-block}.react-datepicker__time-container{float:right;border-left:1px solid #aeaeae;width:85px}.react-datepicker__time-container--with-today-button{display:inline;border:1px solid #aeaeae;border-radius:0.3rem;position:absolute;right:-72px;top:0}.react-datepicker__time-container .react-datepicker__time{position:relative;background:white}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box{width:85px;overflow-x:hidden;margin:0 auto;text-align:center}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list{list-style:none;margin:0;height:calc(195px + (1.7rem / 2));overflow-y:scroll;padding-right:0px;padding-left:0px;width:100%;box-sizing:content-box}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item{height:30px;padding:5px 10px;white-space:nowrap}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover{cursor:pointer;background-color:#f0f0f0}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected{background-color:#216ba5;color:white;font-weight:bold}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover{background-color:#216ba5}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled{color:#ccc}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover{cursor:default;background-color:transparent}.react-datepicker__week-number{color:#ccc;display:inline-block;width:1.7rem;line-height:1.7rem;text-align:center;margin:.166rem}.react-datepicker__week-number.react-datepicker__week-number--clickable{cursor:pointer}.react-datepicker__week-number.react-datepicker__week-number--clickable:hover{border-radius:.3rem;background-color:#f0f0f0}.react-datepicker__day-names,.react-datepicker__week{white-space:nowrap}.react-datepicker__day-name,.react-datepicker__day,.react-datepicker__time-name{color:#000;display:inline-block;width:1.7rem;line-height:1.7rem;text-align:center;margin:.166rem}.react-datepicker__month--selected,.react-datepicker__month--in-selecting-range,.react-datepicker__month--in-range,.react-datepicker__quarter--selected,.react-datepicker__quarter--in-selecting-range,.react-datepicker__quarter--in-range{border-radius:.3rem;background-color:#216ba5;color:#fff}.react-datepicker__month--selected:hover,.react-datepicker__month--in-selecting-range:hover,.react-datepicker__month--in-range:hover,.react-datepicker__quarter--selected:hover,.react-datepicker__quarter--in-selecting-range:hover,.react-datepicker__quarter--in-range:hover{background-color:#1d5d90}.react-datepicker__month--disabled,.react-datepicker__quarter--disabled{color:#ccc;pointer-events:none}.react-datepicker__month--disabled:hover,.react-datepicker__quarter--disabled:hover{cursor:default;background-color:transparent}.react-datepicker__day,.react-datepicker__month-text,.react-datepicker__quarter-text{cursor:pointer}.react-datepicker__day:hover,.react-datepicker__month-text:hover,.react-datepicker__quarter-text:hover{border-radius:.3rem;background-color:#f0f0f0}.react-datepicker__day--today,.react-datepicker__month-text--today,.react-datepicker__quarter-text--today{font-weight:bold}.react-datepicker__day--highlighted,.react-datepicker__month-text--highlighted,.react-datepicker__quarter-text--highlighted{border-radius:.3rem;background-color:#3dcc4a;color:#fff}.react-datepicker__day--highlighted:hover,.react-datepicker__month-text--highlighted:hover,.react-datepicker__quarter-text--highlighted:hover{background-color:#32be3f}.react-datepicker__day--highlighted-custom-1,.react-datepicker__month-text--highlighted-custom-1,.react-datepicker__quarter-text--highlighted-custom-1{color:magenta}.react-datepicker__day--highlighted-custom-2,.react-datepicker__month-text--highlighted-custom-2,.react-datepicker__quarter-text--highlighted-custom-2{color:green}.react-datepicker__day--selected,.react-datepicker__day--in-selecting-range,.react-datepicker__day--in-range,.react-datepicker__month-text--selected,.react-datepicker__month-text--in-selecting-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--selected,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__quarter-text--in-range{border-radius:.3rem;background-color:#216ba5;color:#fff}.react-datepicker__day--selected:hover,.react-datepicker__day--in-selecting-range:hover,.react-datepicker__day--in-range:hover,.react-datepicker__month-text--selected:hover,.react-datepicker__month-text--in-selecting-range:hover,.react-datepicker__month-text--in-range:hover,.react-datepicker__quarter-text--selected:hover,.react-datepicker__quarter-text--in-selecting-range:hover,.react-datepicker__quarter-text--in-range:hover{background-color:#1d5d90}.react-datepicker__day--keyboard-selected,.react-datepicker__month-text--keyboard-selected,.react-datepicker__quarter-text--keyboard-selected{border-radius:.3rem;background-color:#2a87d0;color:#fff}.react-datepicker__day--keyboard-selected:hover,.react-datepicker__month-text--keyboard-selected:hover,.react-datepicker__quarter-text--keyboard-selected:hover{background-color:#1d5d90}.react-datepicker__day--in-selecting-range ,.react-datepicker__month-text--in-selecting-range ,.react-datepicker__quarter-text--in-selecting-range {background-color:rgba(33,107,165,0.5)}.react-datepicker__month--selecting-range .react-datepicker__day--in-range ,.react-datepicker__month--selecting-range .react-datepicker__month-text--in-range ,.react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range {background-color:#f0f0f0;color:#000}.react-datepicker__day--disabled,.react-datepicker__month-text--disabled,.react-datepicker__quarter-text--disabled{cursor:default;color:#ccc}.react-datepicker__day--disabled:hover,.react-datepicker__month-text--disabled:hover,.react-datepicker__quarter-text--disabled:hover{background-color:transparent}.react-datepicker__month-text.react-datepicker__month--selected:hover,.react-datepicker__month-text.react-datepicker__month--in-range:hover,.react-datepicker__month-text.react-datepicker__quarter--selected:hover,.react-datepicker__month-text.react-datepicker__quarter--in-range:hover,.react-datepicker__quarter-text.react-datepicker__month--selected:hover,.react-datepicker__quarter-text.react-datepicker__month--in-range:hover,.react-datepicker__quarter-text.react-datepicker__quarter--selected:hover,.react-datepicker__quarter-text.react-datepicker__quarter--in-range:hover{background-color:#216ba5}.react-datepicker__month-text:hover,.react-datepicker__quarter-text:hover{background-color:#f0f0f0}.react-datepicker__input-container{position:relative;display:inline-block;width:100%}.react-datepicker__year-read-view,.react-datepicker__month-read-view,.react-datepicker__month-year-read-view{border:1px solid transparent;border-radius:.3rem}.react-datepicker__year-read-view:hover,.react-datepicker__month-read-view:hover,.react-datepicker__month-year-read-view:hover{cursor:pointer}.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow{border-top-color:#b3b3b3}.react-datepicker__year-read-view--down-arrow,.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view--down-arrow{border-top-color:#ccc;float:right;margin-left:20px;top:8px;position:relative;border-width:.45rem}.react-datepicker__year-dropdown,.react-datepicker__month-dropdown,.react-datepicker__month-year-dropdown{background-color:#f0f0f0;position:absolute;width:50%;left:25%;top:30px;z-index:1;text-align:center;border-radius:.3rem;border:1px solid #aeaeae}.react-datepicker__year-dropdown:hover,.react-datepicker__month-dropdown:hover,.react-datepicker__month-year-dropdown:hover{cursor:pointer}.react-datepicker__year-dropdown--scrollable,.react-datepicker__month-dropdown--scrollable,.react-datepicker__month-year-dropdown--scrollable{height:150px;overflow-y:scroll}.react-datepicker__year-option,.react-datepicker__month-option,.react-datepicker__month-year-option{line-height:20px;width:100%;display:block;margin-left:auto;margin-right:auto}.react-datepicker__year-option:first-of-type,.react-datepicker__month-option:first-of-type,.react-datepicker__month-year-option:first-of-type{border-top-left-radius:.3rem;border-top-right-radius:.3rem}.react-datepicker__year-option:last-of-type,.react-datepicker__month-option:last-of-type,.react-datepicker__month-year-option:last-of-type{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-bottom-left-radius:.3rem;border-bottom-right-radius:.3rem}.react-datepicker__year-option:hover,.react-datepicker__month-option:hover,.react-datepicker__month-year-option:hover{background-color:#ccc}.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming{border-bottom-color:#b3b3b3}.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous{border-top-color:#b3b3b3}.react-datepicker__year-option--selected,.react-datepicker__month-option--selected,.react-datepicker__month-year-option--selected{position:absolute;left:15px}.react-datepicker__close-icon{cursor:pointer;background-color:transparent;border:0;outline:0;padding:0px 6px 0px 0px;position:absolute;top:0;right:0;height:100%;display:table-cell;vertical-align:middle}.react-datepicker__close-icon::after{cursor:pointer;background-color:#216ba5;color:#fff;border-radius:50%;height:16px;width:16px;padding:2px;font-size:12px;line-height:1;text-align:center;display:table-cell;vertical-align:middle;content:"\00d7"}.react-datepicker__today-button{background:#f0f0f0;border-top:1px solid #aeaeae;cursor:pointer;text-align:center;font-weight:bold;padding:5px 0;clear:left}.react-datepicker__portal{position:fixed;width:100vw;height:100vh;background-color:rgba(0,0,0,0.8);left:0;top:0;justify-content:center;align-items:center;display:flex;z-index:2147483647}.react-datepicker__portal .react-datepicker__day-name,.react-datepicker__portal .react-datepicker__day,.react-datepicker__portal .react-datepicker__time-name{width:3rem;line-height:3rem}@media (max-width: 400px), (max-height: 550px){.react-datepicker__portal .react-datepicker__day-name,.react-datepicker__portal .react-datepicker__day,.react-datepicker__portal .react-datepicker__time-name{width:2rem;line-height:2rem}}.react-datepicker__portal .react-datepicker__current-month,.react-datepicker__portal .react-datepicker-time__header{font-size:1.44rem}.react-datepicker__portal .react-datepicker__navigation{border:.81rem solid transparent}.react-datepicker__portal .react-datepicker__navigation--previous{border-right-color:#ccc}.react-datepicker__portal .react-datepicker__navigation--previous:hover{border-right-color:#b3b3b3}.react-datepicker__portal .react-datepicker__navigation--previous--disabled,.react-datepicker__portal .react-datepicker__navigation--previous--disabled:hover{border-right-color:#e6e6e6;cursor:default}.react-datepicker__portal .react-datepicker__navigation--next{border-left-color:#ccc}.react-datepicker__portal .react-datepicker__navigation--next:hover{border-left-color:#b3b3b3}.react-datepicker__portal .react-datepicker__navigation--next--disabled,.react-datepicker__portal .react-datepicker__navigation--next--disabled:hover{border-left-color:#e6e6e6;cursor:default} @charset "UTF-8"; /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ .p-0 { padding: 0px; } .p-1 { padding: 1px; } .p-2 { padding: 2px; } .p-3 { padding: 3px; } .p-4 { padding: 4px; } .p-5 { padding: 5px; } .p-10 { padding: 10px; } .p-20 { padding: 20px; } .p-30 { padding: 30px; } .p-40 { padding: 40px; } .p-50 { padding: 50px; } .mb-0 { margin-bottom: 0px !important; } .mb-1 { margin-bottom: 1px !important; } .mb-2 { margin-bottom: 2px !important; } .mb-3 { margin-bottom: 3px !important; } .mb-4 { margin-bottom: 4px !important; } .mb-5 { margin-bottom: 5px !important; } .mb-10 { margin-bottom: 10px !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; } .my-0 { margin-top: 0px !important; margin-bottom: 0px !important; } .my-1 { margin-top: 1px !important; margin-bottom: 1px !important; } .my-2 { margin-top: 2px !important; margin-bottom: 2px !important; } .my-3 { margin-top: 3px !important; margin-bottom: 3px !important; } .my-4 { margin-top: 4px !important; margin-bottom: 4px !important; } .my-5 { margin-top: 5px !important; margin-bottom: 5px !important; } .my-10 { margin-top: 10px !important; margin-bottom: 10px !important; } .my-20 { margin-top: 20px !important; margin-bottom: 20px !important; } .my-30 { margin-top: 30px !important; margin-bottom: 30px !important; } .my-40 { margin-top: 40px !important; margin-bottom: 40px !important; } .my-50 { margin-top: 50px !important; margin-bottom: 50px !important; } .pb-0 { padding-bottom: 0px !important; } .pb-1 { padding-bottom: 1px !important; } .pb-2 { padding-bottom: 2px !important; } .pb-3 { padding-bottom: 3px !important; } .pb-4 { padding-bottom: 4px !important; } .pb-5 { padding-bottom: 5px !important; } .pb-10 { padding-bottom: 10px !important; } .pb-20 { padding-bottom: 20px !important; } .pb-30 { padding-bottom: 30px !important; } .pb-40 { padding-bottom: 40px !important; } .pb-50 { padding-bottom: 50px !important; } .text-black { color: #000; } .text-white { color: #FFF; } .text-gray { color: #CCC; } .text-dark-gray { color: #666; } .text-usot-blue { color: #192267; } .text-usot-light-blue { color: #3a4de0; } .text-orange { color: #ff881e; } .text-danger { color: #ff626b; } .text-success { color: #3a4de0; } .text-fail { color: #ff626b; } .text-red { color: #c10000; } .bg-blue { background-color: #192267; color: #fff; } .bg-light-gray { background-color: #f2f2f2; color: #666; } .bg-gray { background-color: #666; color: #f2f2f2; } html { -webkit-text-size-adjust: 100%; font-family: Roboto, Arial, Helvetica, sans-serif; background-color: #FFF; box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } /* ::-webkit-scrollbar { width: 0px; } ::-webkit-scrollbar-thumb { background: #FF0000; } */ body { margin: 0; background-color: #FFFFFF; min-height: 100vh; position: relative; } main { display: block; } h1 { font-size: 2em; margin: 0.67em 0; } hr { box-sizing: content-box; height: 0; overflow: visible; } pre { font-family: monospace, monospace; font-size: 1em; } a { background-color: transparent; } abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; } b, strong { font-weight: bolder; } code, kbd, samp { font-family: monospace, monospace; font-size: 1em; } small, .small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } img { border-style: none; } input:not([type='checkbox']):not([type='radio']):not([type=submit]):not([id^="react-select-"]), optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; width: 100%; } button, input { overflow: visible; } button, select { text-transform: none; } button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } fieldset { padding: 0.35em 0.75em 0.625em; } legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } progress { vertical-align: baseline; } textarea { overflow: auto; } [type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } [type="search"] { -webkit-appearance: textfield; outline-offset: -2px; } [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } details { display: block; } summary { display: list-item; } template { display: none; } [hidden] { display: none; } h1, h2, h3, h4, h5, h6 { font-weight: 400; color: #666; font-family: 'Roboto Slab', serif; } p { color: #666; margin: 0 0 14px 0; padding: 0; line-height: 1.33em; } .text-center { text-align: center; } #primary-container { max-height: 1080px; max-width: 1920px; overflow: hidden; } button { border: none; } [class^='select2'] { border-radius: 0px !important; color: #111 !important; } .select2-container--default .select2-selection--single { background-color: #fff; border: 1px solid #ccc; height: 36px !important; padding: 4px 0; } .select2-container .select2-search--inline { float: none !important; clear: both !important; padding: 10px !important; } .select2-container .select2-search--inline input { width: 100% !important; } .select2-container--default .select2-search--dropdown .select2-search__field { margin: 0 !important; padding: 4px !important; } .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: #111 transparent transparent transparent !important; border-style: solid; border-width: 8px 5px 0 5px !important; height: 0; left: 50%; margin-left: -10px !important; margin-top: 0 !important; position: absolute; top: 50%; width: 0; } footer { display: flex; flex-direction: column; align-content: center; justify-content: center; height: 50px; background-color: #192267; padding: 0 20px; margin-top: 40px; position: relative; bottom: 0; width: 100%; } footer p.legal { display: flex; align-content: center; color: #FFF; margin: 0; padding: 0; font-size: .85em; } .topnav { position: fixed; display: flex; align-content: center; flex-direction: row; width: 100%; background-color: #FFF; box-sizing: border-box; position: relative; z-index: 10; height: 60px; border-bottom: 1px solid #CCC; /*box-shadow: 0 10px 5px rgba(0,0,0,.2);*/ } .topnav .account { position: absolute; display: flex; align-content: center; justify-content: center; right: 70px; height: 60px; padding: 0; margin: 0; } @media (min-width: 600px) { .topnav .account { right: 80px; } } .topnav .account a { color: #666; padding: 0; margin: 0; text-decoration: none; display: block; line-height: 60px; } .topnav .account a.create-account { color: #FFF; margin-left: 10px; padding: 0 20px; background-color: #192267; text-decoration: none; text-align: center; } .topnav #links { display: none; position: absolute; top: 59px; right: 0; width: 400px; background-color: #FFF; padding: 24px; border-bottom: 1px solid #CCC; border-left: 1px solid #CCC; border-right: 1px solid #CCC; } .topnav #links a { color: #666; padding: 6px; text-decoration: none; display: block; } .topnav #links a:hover { background-color: #ddd; color: black; } .topnav a.icon { display: flex; align-content: center; justify-content: center; background: #c10000; position: absolute; right: 0; top: 0; color: #FFF; height: 60px; width: 60px; text-align: center; padding: 0; margin: 0; } .topnav a.icon .fa { line-height: 60px; } .topnav .logo { padding: 10px 20px 0 10px; display: flex; align-content: center; justify-content: center; box-sizing: content-box; } @media (min-width: 600px) { .topnav .logo { padding: 5px 20px 0 30px; } } .topnav .logo img { width: auto; height: 40px; } @media (min-width: 600px) { .topnav .logo img { height: 50px; } } .topnav .nav { display: flex; flex-direction: row; width: 100%; align-items: center; justify-content: center; } .header { display: flex; flex-wrap: wrap; width: 100%; align-items: center; justify-content: center; background-color: #192267; min-height: 300px; background-image: url(../images/hero.png); background-image: url("/assets/images/taking_test.jpg"); background-size: cover; background-position: 20% top; flex-direction: column; } @media (min-width: 1000px) { .header { background-position: left top; flex-direction: row; } } .header .text-container { display: flex; flex-direction: column; width: 100%; margin-left: auto; } @media (min-width: 1000px) { .header .text-container { max-width: 50%; } } .header .text-container h1 { color: #FFF; font-size: 2.3em; line-height: 1.1em; text-transform: uppercase; margin: 0 30px 10px 30px; text-align: left; padding: 0; /*text-shadow: horizontal-shadow vertical-shadow blur color;*/ text-shadow: 1px 1px 10px #192267; } .header .text-container h2 { font-family: Roboto, Arial, Helvetica, sans-serif; color: #FFF; text-align: left; text-transform: uppercase; padding: 0; margin: 0 30px; line-height: 1.1em; max-width: 100%; text-shadow: 1px 1px 10px #192267; } @media (min-width: 1000px) { .header .text-container h2 { max-width: 75%; } } .header .text-container .btn { display: block; margin: 0 30px; margin-top: 20px; background-color: #c10000; } .header .logo-container { display: flex; flex-direction: row; flex-basis: 100%; flex: 1; max-width: 380px; padding: 10px 10px 10px 10px; align-items: center; } .header .logo-container img { display: flex; align-self: center; width: 100%; height: auto; max-width: 180px; } .header .logo-container span { display: flex; width: 50%; color: #FFF; text-transform: uppercase; font-size: 1em; text-align: center; padding: 0; margin: 0; font-weight: 400; letter-spacing: 6px; border-left: 1px solid #FFF; margin-left: 20px; padding: 8px 0 6px 20px; font-weight: bold; } .hide { display: none; } /************ ACCOUNT MANGEMENT ***************/ /****************** BASICS **********************/ a, a:visited, a:active, a:hover { color: #192267; text-decoration: none; outline: none; } table { margin-top: 20px; border-collapse: collapse; } table th { text-align: left; padding: 10px 5px; border-bottom: 1px solid white; } table td { padding: 10px 5px; } .flex { display: flex; align-content: center; justify-content: center; } .d-flex { display: flex !important; } .ml-auto { margin-left: auto !important; } .flex-col { display: flex; align-content: center; justify-content: center; width: 100%; } .small-container { margin: 0px auto; width: 100%; } @media (min-width: 900px) { .small-container { width: 500px; } } .callout-box { background-color: #f2f2f2; padding: 30px; margin: 20px; } .btn { text-decoration: none; text-align: center; color: #FFF; padding: 10px 20px; background-color: #192267; display: table; margin: 0px auto; border-radius: 0; border: none; outline: 0; } .btn[disabled] { opacity: 0.5; } .btn:visited { color: #FFF; } .btn:hover:not([disabled]) { color: #FFF; background-color: #c10000; } .btn.sm { font-size: .8em; padding: 5px 10px; } .row { display: flex; align-content: center; justify-content: center; padding: 20px 20px 50px 20px; color: #666; } .row .content { display: flex; align-content: center; justify-content: center; flex-wrap: wrap; width: 100%; /* max-width: 1200px; */ } .row .content .col { width: 100%; margin: 0px auto; padding: 10px; } @media (min-width: 900px) { .row .content .col { width: 50%; } } .row .single { flex-direction: column; } p.hint { font-size: .8em; color: #666; margin: -4px 0 16px 0; padding: 0; } .alert-msg { display: none; padding: 10px; width: 100%; } .alert-success { display: block; border: #3a4de0 1px solid; color: #3a4de0; } .alert-danger { display: block; border: #ff626b 1px solid; color: #ff626b; } .alert-warning { display: block; border: #ff9262 1px solid; color: #ff9262; } .success { color: #3a4de0; } .danger { color: #ff626b; } .warning { color: #ff9262; } .simple-callout { border: 1px solid #CCC; padding: 14px; } @media print { .no-print, .no-print * { display: none !important; } } @media print { .pg-break { break-after: page; } } .hide { display: none; } .show:not(span) { display: block; } span.show { display: inline-block; } .ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .red { color: #c10000; } .green { color: #00c164; } .blue { color: #192267; } .gray { color: #CCC; } .icon-clipboard, .copy-to-clip { width: 14px; height: 16px; display: inline-block; background-image: url('data:image/svg+xml;utf-8,'); } .copy-to-clip { cursor: pointer; } .page-head-container { display: flex; flex-direction: row; align-content: center; justify-content: flex-start; flex-grow: 1; width: 100%; } .page-head-container .btn { margin: 0; margin-left: auto; } .omni-list ol, .omni-list ul { margin: 0 !important; padding: 0 !important; list-style: none; } .omni-list ol li:not(:last-child), .omni-list ul li:not(:last-child) { border-bottom: 1px solid #CCC; } .omni-list ol li .item-wrap .item, .omni-list ol li .item-wrap .controls, .omni-list ul li .item-wrap .item, .omni-list ul li .item-wrap .controls { display: inline-block; } .omni-list ol li .item-wrap .item, .omni-list ul li .item-wrap .item { width: 95%; } .omni-list ol li .item-wrap .controls, .omni-list ul li .item-wrap .controls { text-align: right; width: 5%; } span.dotted { height: 1px; display: block; border-bottom: 1px dashed #CCC; } .disable-select { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* add extra space to usot-table when tools are used so when tools are clicked you don't have to scroll to see them */ .with-tools { margin-bottom: 180px !important; } /* used in test managemnt */ .initial-caps { text-transform: capitalize; } .pointer { cursor: pointer; } .btn-back { display: inline-block; font-size: 12px !important; font-family: Roboto, Arial, Helvetica, sans-serif !important; padding: 4px 8px; position: relative; top: -8px; } .live-users-table { counter-reset: rowNumber; } .live-users-table tr > td:first-child { counter-increment: rowNumber; } .live-users-table tr th:first-child::before { content: "\0020"; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: inline-block; font-size: 0.75rem; line-height: 1.5rem; color: #FFF; text-align: center; margin-right: 0.5rem; position: relative; top: -2px; } .live-users-table tr td:first-child::before { content: counter(rowNumber); background-color: #666; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: inline-block; font-size: 0.75rem; line-height: 1.5rem; color: #FFF; text-align: center; margin-right: 0.5rem; position: relative; top: -2px; } .usot-table .fa-plus-circle { color: #192267; } .usot-table .fa-minus-circle { color: #c10000; } .usot-table .increment-time { cursor: pointer; } .usot-table .decrement-time { cursor: pointer; } .usot-table .infractions { color: #c10000; } .usot-table .centered { text-align: center; } .usot-table .cancel-btn { padding: 4px 8px 5px 8px; background-color: #c10000; cursor: pointer; display: inline-block; } .usot-table .reactivate-btn { padding: 4px 8px 5px 8px; background-color: #192267; cursor: pointer; display: inline-block; } .usot-table td.image img { max-width: 120px; height: auto; } hr { margin: 10px 0 30px 0; padding: 0; display: block; height: 1px; border: 0; border-top: 1px solid #ccc; } select.nav-select { display: block; margin-top: 10px; } select { min-width: 150px; padding: 5px 35px 5px 5px; font-size: 16px; border: 1px solid #CCC; height: 34px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-size: 20px 20px; } /* CAUTION: Internet Explorer hackery ahead */ select::-ms-expand { display: none; /* Remove default arrow in Internet Explorer 10 and 11 */ } /* Target Internet Explorer 9 to undo the custom arrow */ @media screen and (min-width: 0\0) { select { background: none\9; padding: 5px\9; } } input([type='checkbox']) { width: auto !important; } input:not([type='checkbox']):not([type='radio']):not([type=submit]):not([id^="react-select-"]), optgroup, select { border: 1px solid #CCC; height: 36px !important; padding: 0 10px; display: block; margin: 12px 0; width: 100%; box-sizing: border-box; } input[type=submit] { padding: 10px 20px; background: #c10000; cursor: pointer; border: none; color: #FFF; width: auto; height: auto !important; display: table; margin: 20px 0 0 0; font-size: 16px; outline: none; border: none; } select { outline: 0; padding: 0 5px; font-display: auto; text-align: left; border-radius: 0; -webkit-appearance: none; background-color: #fff; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAJCAYAAAA/33wPAAAAvklEQVQoFY2QMQqEMBBFv7ERa/EMXkGw11K8QbDXzuN4BHv7QO6ifUgj7v4UAdlVM8Uwf+b9YZJISnlqrfEUZVlinucnBGKaJgghbiHOyLyFKIoCbdvecpyReYvo/Ma2bajrGtbaC58kCdZ1RZ7nl/4/4d5EsO/7nzl7IUtodBexMMagaRrs+06JLMvcNWmaOv2W/C/TMAyD58dxROgSmvxFFMdxoOs6lliWBXEcuzokXRbRoJRyvqqqQvye+QDMDz1D6yuj9wAAAABJRU5ErkJggg==); background-position: right center; background-repeat: no-repeat; padding-right: 1.5em; background-size: 18px 9px; } .password-container { position: relative; } .password-container .field-icon { position: absolute; z-index: 2; cursor: pointer; top: 8px; right: 8px; } .forgot-password, .sign-up { font-size: .9em; margin: -4px 0 16px 0; padding: 0; text-align: right; display: block; } .checkbox-inline, .radio-inline { position: relative; display: inline-block; padding-left: 20px; margin-bottom: 0; font-weight: 400; vertical-align: middle; cursor: pointer; } label { display: inline-block; max-width: 100%; margin-bottom: 4px; margin-top: 10px; line-height: 1em; } .inline { width: auto !important; display: inline-block !important; height: auto !important; } .select2-container--default .select2-selection--multiple { background-color: white; border: 1px solid #CCC; border-radius: 0px !important; } .input-wrapper { position: relative; margin-top: 10px; height: 50px; } .input-wrapper label { position: absolute; cursor: text; top: 10px; opacity: 0.7; pointer-events: none; transform: scale(1) translate(10px, 0px); transform-origin: left top 0px; transition: all 200ms ease-out 0s; } .input-wrapper label.active { transform: scale(0.85) translate(0px, -1.875rem); opacity: 1; } .filters-search-container { display: flex; flex-direction: column; width: 100%; margin: 0; } @media (min-width: 800px) { .filters-search-container { flex-direction: row; align-items: center; justify-content: center; } } .filters-search-container .filters { display: flex; flex: 1; } .filters-search-container .search { max-width: 400px; width: 100%; margin: 0; } .filters-search-container .search form { display: flex; flex-direction: row; width: 100%; margin: 0; align-items: center; justify-content: center; } .filters-search-container .search form input[type=text] { margin: 0; padding: 6px; font-size: 17px; } .filters-search-container .search form button { margin: 0; padding: 6px 10px; background: #ddd; font-size: 17px; border-top: 1px solid #CCC; border-right: 1px solid #CCC; border-bottom: 1px solid #CCC; cursor: pointer; height: 36px !important; } .filters-search-container .search form button:hover { background: #ccc; } @media (max-width: 600px) { .filters-search-container .search form .topnav input[type=text] { float: none; display: block; text-align: left; width: 100%; margin: 0; padding: 14px; } } input[type="file"] { visibility: hidden; position: absolute; width: auto !important; } .custom-file-upload { border: 1px solid #ccc; display: inline-block; padding: 6px 12px; cursor: pointer; user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } #file-selected, #file-progress { display: block; font-size: 80%; color: #c10000; } .select-time-container { width: 100%; } .select-time-container .time-selector { display: flex; flex-direction: row; align-content: center; justify-content: center; flex: 1; } .select-time-container .time-selector .colon { margin: 0 6px; font-weight: 700; line-height: 36px; } .select-time-container .time-selector .exp-time { width: auto; flex: 1; min-width: unset; margin: 0; } .select-time-container .time-selector .exp-time:last-child { margin: 0 0 0 6px; } /* form with labels - helps with input spacing */ form.with-labels { /* div[class^='css-'], [class*='-container']{ margin-bottom:20px !important; } */ } form.with-labels label { display: inline-block; max-width: 100%; margin: 0 0 6px 0; line-height: 1em; color: #192267; display: block; } form.with-labels input:not([id^="react-select-"]):not(.mb-0), form.with-labels select, form.with-labels textarea, form.with-labels .input-ckeditor { margin: 0 0 20px 0 !important; } /* DASH */ .dash-user { display: flex; flex-direction: column; align-content: center; } @media (min-width: 1300px) { .dash-user { flex-direction: row; } } .dash-user img { max-width: 80px; width: 100%; height: auto; align-self: center; } .dash-user .text-container { margin: 10px 0 10px 10px; } .dash-user .text-container h1 { margin: 0px 10px 4px 0; padding: 0; white-space: normal; } @media (min-width: 1300px) { .dash-user .text-container h1 { white-space: nowrap; } } .dash-user .text-container p { font-size: .9em; margin-bottom: 4px; padding: 0; } .dash-user .text-container #change-school-form { margin-top: 10px; } .dash-user .text-container #change-school-form .change-school-btn { background-color: #c10000; font-size: .8em; margin: 6px 0 0 0; padding: 6px 10px; } .dash-user .right { display: flex; align-content: center; justify-content: flex-end; } @media (min-width: 1000px) { .dash-user .right { flex: 1; } } .dash-user .right .code-usage-container-dash { border: 1px solid #CCC; text-align: center; padding: 10px 30px; display: flex; align-content: center; justify-content: center; flex-direction: column; width: 100%; margin-top: 20px; } @media (min-width: 1300px) { .dash-user .right .code-usage-container-dash { width: auto; margin: 0; } } .dash-user .right .code-usage-container-dash .box .title { font-size: .8em; margin: 4px 0; padding: 0; text-transform: uppercase; } .dash-user .right .code-usage-container-dash .box .date { color: #192267; margin: 4px 0; } .dash-user .right .code-usage-container-dash .box .count { font-size: 1.5em; margin: 0; padding: 0; font-weight: bold; color: #192267; } .dash-user .right .code-usage-container-dash .box .name { font-size: .8em; margin: 0; padding: 0; text-transform: initial; } .dash-intro { text-align: left; margin: 20px 0; display: flex; align-content: center; justify-content: center; flex-direction: column; } @media (min-width: 1000px) { .dash-intro { flex-direction: row; } } .dash-intro .left { width: 100%; padding: 30px; border: 1px solid #CCC; } @media (min-width: 1000px) { .dash-intro .left { width: 50%; } } .dash-intro .left h2 { padding: 0; margin: 0 0 20px 0; } .dash-intro .left a { display: block; margin: 0 0 6px 0; font-size: .9em; white-space: nowrap; } .instructor-callout { border: 1px solid #CCC; padding: 10px 30px 30px 30px; margin-bottom: 30px; } .completed-tasks-container { text-align: left; background-color: #f2f2f2; padding: 30px; margin: 20px 0 0 0; } .completed-tasks-container h2 { color: #c10000; padding: 0; margin: 0 0 20px 0; } .completed-tasks-container p { margin: 0 0 30px 0; } .completed-tasks-container ul li { margin: 0 0 20px 0; } .completed-tasks-container ul li p { font-size: .9em; margin: 5px 0 10px 0; } .completed-tasks-container ul li p span { font-weight: bold; } .completed-tasks-container ul li .btn { cursor: pointer; margin: 12px 0 0 0; } .completed-tasks-container ul li.completed:before { content: '?'; } .available-tests { text-align: left; background-color: #f2f2f2; padding: 30px; margin: 20px 0 0 0; } .available-tests h2 { color: #c10000; padding: 0; margin: 0 0 20px 0; } .available-tests p { margin: 0 0 30px 0; } .available-tests ol li { margin: 0 0 20px 0; } .available-tests ol li p { font-size: .9em; margin: 5px 0 10px 0; } .available-tests ol li p span { font-weight: bold; } .available-tests ol li .btn { cursor: pointer; margin: 12px 0 0 0; } .available-tests ol li.completed:before { content: '?'; } .available-tests ol.completed { list-style: none; padding-left: 0; } .available-tests ol.completed li { position: relative; padding-left: 1.5em; /* space to preserve indentation on wrap */ } .available-tests ol.completed li:before { content: ''; /* placeholder for the SVG */ position: absolute; left: 0; /* place the SVG at the start of the padding */ width: 1em; height: 1em; background: url("data:image/svg+xml;utf8,") no-repeat; } .available-tests:first-child { margin: 0; } .retrieve-tests { text-align: left; background-color: #192267; padding: 30px; margin: 0; } .retrieve-tests h2 { color: #FFF; padding: 0; margin: 0 0 20px 0; } .retrieve-tests p, .retrieve-tests label { color: #FFF; } .table-container { text-align: left; background-color: #f2f2f2; padding: 20px 30px 0 30px; margin: 10px 10px 0 10px; overflow-x: auto; width: 100%; } .table-container h2 { color: #c10000; padding: 0; margin: 0 0 20px 0; } .table-container h4 { font-weight: 700; } table.usot-table { width: 100%; margin-bottom: 40px; } table.usot-table tr:nth-child(even) { background-color: #FFF; } table.usot-table td, table.usot-table th { padding: 10px; } table.usot-table th { border-bottom: 2px solid #CCC; } table.usot-table td { position: relative; border-bottom: 1px solid #CCC; font-size: .9em; } .btn-group { position: relative; display: inline-block; vertical-align: middle; } .btn-group .dropdown { width: 36px !important; height: 32px !important; text-align: center; cursor: pointer; line-height: 1.5; padding: 0; } .btn-group ol.dropdown-menu { position: absolute; display: none; top: 100%; left: 0; z-index: 1000; float: left; min-width: 160px; padding: 10px; margin: 0; font-size: .9em; text-align: left; list-style: none; background-color: #fff; -webkit-background-clip: padding-box; background-clip: padding-box; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 4px; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); } .btn-group ol.dropdown-menu li { margin: 0 0 14px 0; } .btn-group ol.dropdown-menu hr { margin: 10px 0; padding: 0; } .btn-group .active { display: block !important; } .home-intro { padding: 0 0 0 10px; } .home-intro h1 { color: #192267; text-align: center; padding: 0; margin: 10px 30px; font-weight: 700; } .home-intro h2 { text-align: center; padding: 0; margin: 0; margin: 6px 30px 20px 30px; } .home-intro .why-usot { display: flex; flex-wrap: wrap; flex-direction: column; padding: 0; } @media (min-width: 800px) { .home-intro .why-usot { flex-direction: row; padding: 0; } } .home-intro .why-usot h2 { text-align: left; margin: 0 20px 6px 0; padding: 0; } .home-intro .why-usot .col1 { padding: 0; border-right: none; border-bottom: 1px solid #CCC; padding-bottom: 20px; margin-bottom: 30px; width: 100%; } @media (min-width: 1000px) { .home-intro .why-usot .col1 { border-right: 1px solid #CCC; border-bottom: none; margin-bottom: 0; padding: 0 20px 0 0; flex: 1; } } .home-intro .why-usot .col1 ul { list-style: none; margin: 20px 0 0 0; padding: 0; } .home-intro .why-usot .col1 ul li { font-weight: 600; color: #192267; margin-bottom: 20px; } .home-intro .why-usot .col1 ul li span { color: #666; display: block; font-weight: normal; font-size: 90%; } .home-intro .why-usot .col2 { padding: 0; display: flex; flex-wrap: wrap; height: 100%; flex-direction: column; flex: 1; } @media (min-width: 1000px) { .home-intro .why-usot .col2 { padding: 0 10px 0 10px; } } @media (min-width: 1200px) { .home-intro .why-usot .col2 { padding: 0 30px 0 30px; } } .home-intro .why-usot .col2 .buttons-container { display: flex; flex-wrap: wrap; height: 100%; align-content: center; justify-content: center; flex-direction: row; } .home-intro .why-usot .col2 .buttons-container .btn { flex-direction: column; display: flex; align-content: center; background-color: #c10000; width: 100%; padding-bottom: 20px; min-width: 170px; margin-bottom: 20px; } @media (min-width: 800px) { .home-intro .why-usot .col2 .buttons-container .btn { width: calc(33% - 40px); } } @media (min-width: 1000px) { .home-intro .why-usot .col2 .buttons-container .btn { width: 100%; } } @media (min-width: 1500px) { .home-intro .why-usot .col2 .buttons-container .btn { width: calc(33% - 40px); } } .home-intro .why-usot .col2 .buttons-container .btn .fa-stack { margin: 0px auto; margin-bottom: 10px; } .home-intro .why-usot .col2 .buttons-container .btn .sm { margin-top: 6px; font-size: 80%; } .home-intro .callout { background-color: #f2f2f2; padding: 20px; margin-bottom: 20px; width: 100%; } .home-intro .callout h2 { text-align: left; margin: 0 0 10px 0; padding: 0; color: #c10000; } .home-intro .callout .number-circle-list { list-style: none; padding-left: 1rem; counter-reset: circle-counter; } .home-intro .callout .number-circle-list li { counter-increment: circle-counter; margin-bottom: 0.25rem; } .home-intro .callout .number-circle-list li:before { content: counter(circle-counter); background-color: #192267; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: inline-block; font-size: 0.75rem; line-height: 1.5rem; color: #FFF; text-align: center; margin-right: 0.5rem; position: relative; top: -2px; } .home-intro .callout .number-circle-list li:last-child { margin-bottom: 0; } .home-intro .callout .number-circle-list li li { margin-left: 0.25rem; } .home-intro .testimonial { background-color: #192267; padding: 40px; } .home-intro .testimonial .citation { margin-top: 20px; } .home-intro .testimonial p, .home-intro .testimonial blockquote { color: #FFF; } .home-intro .testimonial blockquote { margin: 0; padding: 0; quotes: "“" "”" "‘" "’"; } .home-intro .testimonial blockquote:before { color: #ccc; content: open-quote; font-size: 4em; line-height: 0.1em; margin-right: 0.05em; vertical-align: -0.4em; } .home-intro .testimonial blockquote p { display: inline; font-size: 1.5em; line-height: 1em; } .announce-bar { padding: 30px; width: 100%; display: flex; align-content: center; justify-content: center; flex-direction: column; background: linear-gradient(145deg, #192267 50%, #c10000 50%); flex-wrap: nowrap; } @media (min-width: 800px) { .announce-bar { flex-direction: row; padding: 0; background: linear-gradient(90deg, #192267 50%, #c10000 50%); } } .announce-bar .left { flex: 1; padding: 0 20px 20px 20px; width: 50%; align-self: center; flex-direction: column; text-align: right; } @media (min-width: 800px) { .announce-bar .left { flex-direction: row; padding: 20px; } } .announce-bar .left h1 { color: #FFF; text-align: right; text-transform: uppercase; font-weight: 700; letter-spacing: 1.2px; padding: 0; margin: 0; line-height: 1em; } .announce-bar .left h2 { font-family: Roboto, Arial, Helvetica, sans-serif; color: #FFF; text-align: center; text-transform: uppercase; padding: 0; margin: 8px 0; line-height: 1em; width: 100%; } @media (min-width: 800px) { .announce-bar .left h2 { margin: 8px 0 0 10px; } } .announce-bar .right { flex: 1; display: flex; width: 50%; padding: 20px; align-self: center; flex-direction: column; align-content: center; justify-content: center; margin: 0px auto; text-align: center; } @media (min-width: 800px) { .announce-bar .right { flex-direction: row; } } .announce-bar .right .fdny-approved { align-self: center; text-align: center; } .announce-bar .right .fdny-approved p { color: #FFF; text-align: center; margin: 0 10px; line-height: 1em; } .announce-bar .right .fdny-approved .fdny { font-size: 2em; font-weight: bold; } .announce-bar .right img { width: 150px; height: auto; } .home { flex: 1 0 auto; min-height: auto; align-content: center; justify-content: center; flex-direction: column; } @media (min-width: 1000px) { .home { flex-direction: row; } } .home .sidebar { padding: 30px; width: calc(100%-40px); margin: 20px 10px 0 10px; border: 1px solid #CCC; } @media (min-width: 1000px) { .home .sidebar { border-top: none; border-bottom: none; border-right: none; border-left: 1px solid #CCC; width: 400px; padding: 0 30px; margin: 0; } } .home .sidebar .welcome-school { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #CCC; min-width: 220px; text-align: center; } .home .sidebar .welcome-school h3 { font-weight: 700; margin: 0 20px; padding: 0; line-height: 1em; } .home .sidebar .welcome-school p { margin: 10px 20px 20px 20px; line-height: 1em; } .home .sidebar .welcome-school img { width: 100px; height: auto; margin-bottom: 10px; } .home .sidebar .welcome-school:last-child { border-bottom: none; } /* TEST */ .scroller { overflow-x: hidden; } .completed-test { max-width: 1258px; margin: 0px auto; padding: 0px; color: #000; width: 100%; } .completed-test .test-information { margin: 0 0 40px 0; display: flex; flex-direction: row; align-items: flex-start; } .completed-test .test-information .info { display: flex; flex-direction: column; flex: 1; margin: 0 30px 0 0; } .completed-test .test-information .info h2 { margin: 0 0 20px 0; padding: 0; color: #000; } .completed-test .test-information .info h2, .completed-test .test-information .info h3, .completed-test .test-information .info h4 { margin: 0; padding: 0; color: #000; } .completed-test .test-information .info .school-name-logo-container { display: flex; flex-direction: row; margin-bottom: 20px; align-items: center; } .completed-test .test-information .info .school-name-logo-container .logo-container { display: flex; flex-direction: column; } .completed-test .test-information .info .school-name-logo-container .logo-container .school-logo { max-width: 100px; height: auto; } .completed-test .test-information .info .school-name-logo-container .company-name { display: flex; flex-direction: column; } .completed-test .test-information .info .school-name-logo-container .company-name h1 { margin: 0 0 0 10px; padding: 0; color: #000; font-weight: 700; } .completed-test .test-information .details { border: 1px solid #CCC; padding: 20px; display: flex; flex-direction: column; font-size: .9em; } .completed-test .test-information .details h2, .completed-test .test-information .details h3, .completed-test .test-information .details h4 { margin: 0; padding: 0; color: #000; } .completed-test .test-information .details p { padding: 0; margin: 0; } .completed-test .test-information .details p span { font-weight: 700; } .completed-test .supporting_image { display: block; max-width: 600px; margin: 0 0 20px 0; } .completed-test .questions-answers ol { counter-reset: item; margin: 0; padding: 0; list-style: none; } .completed-test .questions-answers ol li { page-break-inside: avoid; margin: 0 0 20px 0; padding: 0; display: flex; flex-direction: row; color: #666; /* for users who use list html in their question */ } .completed-test .questions-answers ol li ul { list-style: disc; } .completed-test .questions-answers ol li ul li::before { content: ""; list-style: disc; counter-increment: none; } .completed-test .questions-answers ol li ul li { list-style: disc; color: #000; } .completed-test .questions-answers ol li ul.multiple-choice { list-style: none; column-count: 2; text-align: left; column-gap: 40px; counter-reset: none; } .completed-test .questions-answers ol li ul.multiple-choice li::before { content: ""; counter-increment: none; margin-right: 0; } .completed-test .questions-answers ol li ul.multiple-choice li { margin-bottom: 20px; pointer-events: none; } .completed-test .questions-answers ol li ul.multiple-choice li .flex { display: flex; align-content: center; justify-content: center; } .completed-test .questions-answers ol li ul.multiple-choice li .flex .label-container .checkbox-inline, .completed-test .questions-answers ol li ul.multiple-choice li .flex .label-container .radio-inline { position: relative; display: inline-block; padding-left: 20px; margin-bottom: 0; font-weight: 400; vertical-align: middle; cursor: pointer; } .completed-test .questions-answers ol li ul.multiple-choice li .flex .label-container label { margin: 0; } .completed-test .questions-answers ol li .question, .completed-test .questions-answers ol li p { color: #000; page-break-inside: avoid; } .completed-test .questions-answers ol li .answer { color: #000; display: block; padding: 20px; background-color: #f2f2f2; } .completed-test .questions-answers ol li .answer p { color: #000; page-break-inside: avoid; } .completed-test .questions-answers ol li:before { content: counters(item, "."); counter-increment: item; margin-right: 10px; font-weight: bold; } .weight { font-style: italic; color: #FFF; margin-right: 6px; font-size: 70%; white-space: nowrap; padding: 3px 8px; background-color: #c10000; display: inline-block; font-weight: 400; } .test { height: 100%; position: relative; /* prevent printing of screen with browsers print button */ } .test * { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: -moz-none; -o-user-select: none; user-select: none; } @media print { .test { display: none; /* hide whole page */ } } .test .no-focus-container { display: none; } .test .hint { border: 1px solid #c10000; padding: 8px; text-align: left; } .test #image-toggle-btn { background-color: #c10000; padding: 5px; text-align: center; color: #FFF; display: block; margin: 0; max-width: 200px; font-size: .9em; } .test #image-toggle-btn .msg { margin-left: 10px; } .test .scale-image { width: 100% !important; } .test .supporting_image { display: block; max-width: 600px; margin: 0 0 20px 0; width: 100px; margin: 25px; -webkit-transition: all .6s ease-in-out; -moz-transition: all .6s ease-in-out; -o-transition: all .6s ease-in-out; -ms-transition: all .6s ease-in-out; } .test footer { margin-top: 0; } .test .row { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; height: 100%; min-height: 100%; position: relative; padding: 0; margin: 0; flex: 0 0 100%; } .test .row .test-last-page { margin-top: 20px 0; padding-bottom: 30px; } .test .row .test-last-page .btn { padding: 14px 20px; max-width: 300px; font-size: 1.25em; height: auto !important; margin-top: 30px; cursor: pointer; } .test .row .test-information-and-controls { height: 100%; background-color: #f2f2f2; position: relative; min-height: 100vh; border-left: 1px solid #CCC; display: block; width: 100%; min-height: unset; flex: none; z-index: 100; } @media (min-width: 1000px) { .test .row .test-information-and-controls { display: flex; flex-direction: column; flex: 0 0 240px; } } .test .row .test-information-and-controls .clock { width: 100%; text-align: center; padding: 20px; color: #666; font-size: 2em; border-bottom: 1px solid #CCC; font-weight: 300; margin: 0; position: relative; top: 0px; background-color: #f2f2f2; } @media (min-width: 1000px) { .test .row .test-information-and-controls .clock { position: -webkit-sticky; position: sticky; z-index: 1; } } .test .row .test-information-and-controls .clock-warning { color: #FFF; background-color: #c10000; } .test .row .test-information-and-controls .clock-warning { color: #FFF; background-color: #c10000; } .test .row .test-information-and-controls #status-list .status-button { border: none; border-bottom: 1px solid #CCC; display: block; margin: 0; width: 100%; box-sizing: border-box; border-left: solid 10px #ff881e; cursor: pointer; color: #666; padding: 14px 10px; background-color: #f2f2f2; } .test .row .test-information-and-controls #status-list .status-button:disabled { cursor: not-allowed; pointer-events: all !important; } .test .row .test-information-and-controls #status-list .status-button.attempted:not(.answered):not(.current) { border-left: solid 10px #c10000; } .test .row .test-information-and-controls #status-list .answered { border-left: solid 10px #3a4de0; background-color: #FFF; } .test .row .test-information-and-controls #status-list .current { color: #192267; font-weight: bold; } .test .row .test-content { display: flex; flex-direction: column; flex: 1; justify-content: center; height: 100%; text-align: center; margin: 0px auto; position: relative; top: 0px; background-color: #FFF; padding: 0 30px; } @media (min-width: 1000px) { .test .row .test-content { position: -webkit-sticky; position: sticky; z-index: 1; } } .test .row .test-content .small-container { margin-top: 20px; } .test .row .test-content .step { display: flex; flex-direction: column; max-width: 1200px; margin: 0px auto; } .test .row .test-content #test_step_1 p { margin: 0 0 4px 0; padding: 0; } .test .row .test-content #test_step_1 p span { font-weight: bold; } .test .row .test-content #test_step_1 .legal-and-start-container { background-color: #f2f2f2; text-align: center; margin: 0px auto; margin-top: 30px; padding: 30px; } .test .row .test-content #test_step_1 .legal-and-start-container label { font-size: 1.3em; line-height: normal; text-align: left; } .test .row .test-content #test_step_1 .legal-and-start-container input[type=checkbox] { transform: scale(1.5); } .test .row .test-content #test_step_1 .legal-and-start-container .btn { margin-top: 20px; padding: 15px 20px; height: auto !important; max-width: 300px; cursor: pointer; } .test .row .test-content #test_step_1 .legal-and-start-container .btn:disabled { opacity: .5; } .test .row .test-content #test-navigation { display: none; flex-direction: row; margin: 0px auto; padding-bottom: 30px; } .test .row .test-content #test-navigation .btn { cursor: pointer; height: auto !important; text-decoration: none; text-align: center; color: #fff; padding: 10px 20px; background-color: #192267; display: table; margin: 0px auto; } .test .row .test-content #test-navigation .btn:hover { background-color: #c10000; } .test .row .test-content #question-container { margin-top: 40px; padding: 0 20px; } .test .row .test-content #question-container .question { text-align: left; font-size: 1.3em; font-weight: 700; margin: 10px 0; } .test .row .test-content #question-container .question .weight { align-self: flex-start; position: absolute; right: 0; top: 0; margin: 0; } .test .row .test-content #question-container .question div { margin-right: 6px; } .test .row .test-content #question-container .flex { justify-content: flex-start; } .test .row .test-content #question-container .flex .label-container label { margin: 0; } .test .row .test-content #question-container ul.multiple-choice, .test .row .test-content #question-container ol.multiple-choice { list-style: none; column-count: 1; text-align: left; column-gap: 40px; } @media (min-width: 1000px) { .test .row .test-content #question-container ul.multiple-choice, .test .row .test-content #question-container ol.multiple-choice { column-count: 2; } } .test .row .test-content #question-container ul.multiple-choice li, .test .row .test-content #question-container ol.multiple-choice li { font-size: 1.3em; margin-bottom: 20px; display: inline-block; width: 100%; } .test .row .test-content #question-container ul.multiple-choice li input, .test .row .test-content #question-container ol.multiple-choice li input { display: block; } .test .row .test-content #question-container ul.multiple-choice li label, .test .row .test-content #question-container ol.multiple-choice li label { color: #666; font-size: 1em; line-height: 1.2em; } .no-focus .no-focus-container { display: block; position: absolute; z-index: 9999; width: 100%; height: 100%; background-color: #FFF; } .no-focus .no-focus-container #return-focus { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } .intro-container { text-align: left; background-color: #f2f2f2; padding: 30px; margin: 0; } .intro-container h2 { color: #c10000; padding: 0; margin: 0 0 20px 0; } .intro-container p { margin: 0 0 30px 0; } .live-user-container { text-align: left; background-color: #f2f2f2; padding: 30px; margin: 30px 0 0 0; } .live-user-container h2 { color: #c10000; padding: 0; margin: 0 0 20px 0; } .live-user-container p { margin: 0 0 30px 0; } .live-user-container button { margin: 0; } .live-user-container .tools { display: flex; flex-direction: column; align-items: flex-start; } .live-user-container .tools .test-share-container { max-width: 400px; } .live-user-container .tools .test-share-container .btn-share-test { font-size: .8em; padding: 7px 10px; } .basic-box { text-align: left; background-color: #f2f2f2; padding: 30px; margin: 30px 10px; } .basic-box h2 { color: #c10000; padding: 0; margin: 0 0 20px 0; } .basic-box h4 { font-weight: 700; } .basic-box .download-all { padding-left: 10px; } .basic-box ol { padding: 0 0 0 1.5em; margin: 0 0 30px 0; } .basic-box ol li { font-size: .9em; padding: 0; margin: 0 0 6px 0; } .basic-box ol.ordered-by-date { padding-left: 30px; } .basic-box ol.ordered-by-date li { position: relative; padding-left: .5em; /* space to preserve indentation on wrap */ } .basic-box ol.completed { list-style: none; padding-left: 10px; } .basic-box ol.completed li { position: relative; padding-left: 1.5em; /* space to preserve indentation on wrap */ } .basic-box ol.completed li:before { content: ''; /* placeholder for the SVG */ position: absolute; left: 0; /* place the SVG at the start of the padding */ width: 1em; height: 1em; background: url("data:image/svg+xml;utf8,") no-repeat; } .basic-box ol.codes { list-style: none; padding-left: 10px; } .basic-box ol.codes li { position: relative; padding-left: 1.5em; /* space to preserve indentation on wrap */ } .basic-box ol.codes li:before { content: ''; /* placeholder for the SVG */ position: absolute; left: 0; /* place the SVG at the start of the padding */ width: 1em; height: 1em; background: url("data:image/svg+xml;utf8,") no-repeat; } .col-3 { margin: 30px 30px 30px 0; width: calc(33.33% - 20px); } @media screen and (max-width: 1000px) { .col-3 { width: 100%; margin: 15px 0; } } .col-3:last-child { margin-right: 0; } .col-2 { margin: 30px 30px 30px 0; width: calc(50% - 20px); } @media screen and (max-width: 1000px) { .col-2 { width: 100%; margin: 15px 0; } } .col-2:last-child { margin-right: 0; } .user { text-align: left; background-color: #f2f2f2; padding: 30px; margin: 20px 0 0 0; } .card { position: relative; display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; background-clip: border-box; border: "1px" solid #CCC; } .card:not(.empty) { background-color: #f2f2f2; } .card > hr { margin-right: 0; margin-left: 0; } .card .card-title { margin: 0 0 1rem 0; } .card.active { outline: 1px solid #192267; } .card .card-header { padding: 10px 10px; margin-bottom: 0; border-bottom: "1px" solid #CCC; } .card-body { flex: 1 1 auto; padding: 10px; } .card-body h1, .card-body h2, .card-body h3, .card-body h4, .card-body h5, .card-body h6 { margin-top: 0 !important; } .card-footer { padding: 10px 10px; background-color: #f2f2f2; border-top: "1px" solid #CCC; } .card-deck { display: flex; flex-direction: column; } .card-deck .card { margin-bottom: 15px; } @media (min-width: 576px) { .card-deck { flex-flow: row wrap; margin-right: -15px; margin-left: -15px; } .card-deck .card { display: flex; flex: 1 0 0%; flex-direction: column; margin-right: 15px; margin-bottom: 0; margin-left: 15px; } } dl { width: 100%; margin: 20px 0; } dt { cursor: pointer; font-size: 1.2em; padding: 1em 1em; background: #eee; border-bottom: 1px solid #ddd; border-top: 1px solid #f9f9f9; } dd { margin: 0; padding: 2em; background: #fcfcfc; } dd ol li { margin: 10px 0; } textarea.title { font-size: 18px; font-weight: bold; padding: 10px; resize: vertical; } .heading-writable:hover { outline: 1px solid darkgray; background-color: white; } a.input { cursor: text; } a.input:hover { background-color: red; border: 1px solid #192267 !important; } #test_admin .test-info { display: flex; } #test_admin .test-info .info { width: 80%; } #test_admin .test-info .settings { width: 20%; margin-left: auto !important; padding: 10px; } .test-not-saved { outline: 2px solid #c10000; } .react-datepicker__input-container input { margin: 0 0 10px 0 !important; } #usot_test_creator_app .question-list, #usot_test_admin_app .question-list { list-style: none; margin: 0; padding: 0; } #usot_test_creator_app .question-list .question-item, #usot_test_admin_app .question-list .question-item { background-color: #f2f2f2; margin-bottom: 4px; display: block; padding: 10px; } #usot_test_creator_app .question-list .question-item:hover, #usot_test_admin_app .question-list .question-item:hover { outline: 1px solid darkgray; } #usot_test_creator_app .question-list .question-item .question, #usot_test_admin_app .question-list .question-item .question { align-self: center !important; } #usot_test_creator_app .question-list .question-active, #usot_test_admin_app .question-list .question-active { outline: 1px solid darkgray; } .vertical-separator { border-left: 1px solid #dadce0; height: 32px; margin: 0 16px; width: 0; } .question-editor input { margin-top: 0 !important; } .answer-option { display: block; margin: 5px 0; } .answer-option > span { display: inline-block; } .answer-option > span:not(:first-child), .answer-option > span:not(:last-child) { margin: 0 10px; } .answer-option > span.answer { width: 80%; } .answer-option > span.answer input.answer { margin-bottom: 0 !important; } /* .usot-icon{ display: inline-block; width:32px; height:32px; &:hover{ background: $gray; -moz-border-radius: 16px; -webkit-border-radius: 16px; border-radius: 16px; } } */ .collapse:after { margin-left: 10px; font-family: FontAwesome; content: "\f0d7"; } .collapse.on:after { margin-left: 10px; font-family: FontAwesome; content: "\f0d8"; } .activity-totals-container { display: flex; flex-direction: column; width: 100%; padding: 0; margin: 0; } @media (min-width: 1000px) { .activity-totals-container { flex-direction: row; } } .activity-totals-container .col { display: flex; flex-direction: column; width: 100%; margin: 0; padding: 0; } @media (min-width: 1000px) { .activity-totals-container .col { width: 33%; } } .activity-totals-container .col p { font-size: .9em; text-transform: uppercase; width: 100%; text-align: center; padding: 10px 0 20px 0; background-color: #f2f2f2; } .activity-totals-container .col p .result { margin: 20px 0; font-size: 3em; font-weight: 700; text-align: center; display: block; } .activity-totals-container .col p .good { color: #192267; } .activity-totals-container .col p .bad { color: #c10000; } .usot-table tr.fraudulent { background-color: rgba(193, 0, 0, 0.05) !important; } /* TEST CODES */ .code-usage-container { width: 100%; margin: 0; padding: 30px; background-color: #f2f2f2; } .code-usage-container h1 { color: #c10000; } .code-usage-container h3 { text-decoration: underline; } .code-usage-container .usot-table th { text-transform: capitalize; } .modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1098; background-color: #000; } .modal-backdrop.show { opacity: 0.5; } .modal-backdrop.fade { opacity: 0; } .modal { position: fixed; top: 0; left: 0; z-index: 1099; display: none; width: 100%; height: 100%; overflow: hidden; outline: 0; } .modal.show { background-color: rgba(0, 0, 0, 0.5); } .modal.fade { background-color: rgba(0, 0, 0, 0); } .modal .modal-dialog { position: relative; width: auto; margin: .5rem; pointer-events: none; } @media (min-width: 576px) { .modal .modal-dialog { max-width: 500px; margin: 1.75rem auto; } } .modal .modal-dialog .modal-content { opacity: 1 !important; color: #666 !important; position: relative; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; width: 100%; pointer-events: auto; background-color: #fff; background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.2); outline: 0; } .modal .modal-dialog .modal-content .heading { font-weight: bold; } .modal .modal-dialog .modal-content .close { position: absolute; font-size: 1.5rem; font-weight: 700; line-height: 1; color: #000; text-shadow: 0 1px 0 #fff; opacity: .5; top: 0.5rem; right: 0.5rem; cursor: pointer; width: 20px; } .modal .modal-dialog .modal-content .close span { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; } .modal .modal-dialog .modal-content button.close { padding: 0; background-color: transparent; border: 0; } #test-response-container { margin-top: 30px; } #test-response-container .alert-danger, #test-response-container .alert-success, #test-response-container .alert-warning { padding: 0 20px 10px 20px; margin: 30px 0; } #csrf-check { position: absolute; left: -1000px; top: 0; } @media only screen and (max-width: 760px) { #desktop-element { display: none; } }