devframeui-beta
Version:
2 lines • 10.4 kB
CSS
@charset "UTF-8";@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap);*,::after,::before{box-sizing:border-box}a,abbr,acronym,address,applet,article,aside,audio,big,blockquote,body,button,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,iframe,img,input,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,select,small,span,strike,sub,summary,sup,table,tbody,td,textarea,tfoot,th,thead,time,tr,tt,ul,var,video{margin:0;padding:0;font:inherit;vertical-align:baseline;border:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1.5;font-family:"Poppins",sans-serif;background-color:#fefefe}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:none}table{border-collapse:collapse;border-spacing:0}a{text-decoration:none;color:#474747}:focus{outline:0}.clear{clear:both}a:hover{color:#f6b81c}h1{font-size:2.5rem}h2{font-size:2.25rem}h3{font-size:2rem}h4{font-size:1.75rem}h5{font-size:1.5rem}h6{font-size:1.25rem}.text--center{text-align:center}.text--right{text-align:right}.text--left{text-align:left}.bg--light,.bg--light a,.text--dark{color:#474747}.bg--dark a:hover,.bg--light a:hover,.navbar_nav .nav_item .nav_dropdown li .nav_dropdown_alt:hover a,.navbar_nav .nav_item .nav_dropdown li:hover a,.text--primary{color:#f6b81c}.bg--dark,.bg--dark a,.text--light{color:#fefefe}.text--medium{font-weight:600}.table thead,.text--bold{font-weight:700}.text--italic{font-style:italic}.bg--light{background:#fefefe}.bg--dark{background:#474747}.container{margin:0 auto}@media only screen and (min-width:576px){.container{max-width:576px}}@media only screen and (min-width:768px){.container{max-width:768px}}@media only screen and (min-width:992px){.container{max-width:992px}}@media only screen and (min-width:1200px){.container{max-width:1200px}}.container--fluid{margin:0 auto;max-width:100%;padding-right:15px;padding-left:15px}.row{display:flex;flex-wrap:wrap;width:100%}.col_1{flex-basis:8.3333333333%}.col_2{flex-basis:16.6666666667%}.col_3{flex-basis:25%}.col_4{flex-basis:33.3333333333%}.col_5{flex-basis:41.6666666667%}.col_6{flex-basis:50%}.col_7{flex-basis:58.3333333333%}.col_8{flex-basis:66.6666666667%}.col_9{flex-basis:75%}.col_10{flex-basis:83.3333333333%}.col_11{flex-basis:91.6666666667%}.col_12{flex-basis:100%}@media screen and (min-width:576px){.col_sm_1{flex-basis:8.3333333333%}.col_sm_2{flex-basis:16.6666666667%}.col_sm_3{flex-basis:25%}.col_sm_4{flex-basis:33.3333333333%}.col_sm_5{flex-basis:41.6666666667%}.col_sm_6{flex-basis:50%}.col_sm_7{flex-basis:58.3333333333%}.col_sm_8{flex-basis:66.6666666667%}.col_sm_9{flex-basis:75%}.col_sm_10{flex-basis:83.3333333333%}.col_sm_11{flex-basis:91.6666666667%}.col_sm_12{flex-basis:100%}}@media screen and (min-width:768px){.col_md_1{flex-basis:8.3333333333%}.col_md_2{flex-basis:16.6666666667%}.col_md_3{flex-basis:25%}.col_md_4{flex-basis:33.3333333333%}.col_md_5{flex-basis:41.6666666667%}.col_md_6{flex-basis:50%}.col_md_7{flex-basis:58.3333333333%}.col_md_8{flex-basis:66.6666666667%}.col_md_9{flex-basis:75%}.col_md_10{flex-basis:83.3333333333%}.col_md_11{flex-basis:91.6666666667%}.col_md_12{flex-basis:100%}}@media screen and (min-width:992px){.col_lg_1{flex-basis:8.3333333333%}.col_lg_2{flex-basis:16.6666666667%}.col_lg_3{flex-basis:25%}.col_lg_4{flex-basis:33.3333333333%}.col_lg_5{flex-basis:41.6666666667%}.col_lg_6{flex-basis:50%}.col_lg_7{flex-basis:58.3333333333%}.col_lg_8{flex-basis:66.6666666667%}.col_lg_9{flex-basis:75%}.col_lg_10{flex-basis:83.3333333333%}.col_lg_11{flex-basis:91.6666666667%}.col_lg_12{flex-basis:100%}}@media screen and (min-width:1200px){.col_xl_1{flex-basis:8.3333333333%}.col_xl_2{flex-basis:16.6666666667%}.col_xl_3{flex-basis:25%}.col_xl_4{flex-basis:33.3333333333%}.col_xl_5{flex-basis:41.6666666667%}.col_xl_6{flex-basis:50%}.col_xl_7{flex-basis:58.3333333333%}.col_xl_8{flex-basis:66.6666666667%}.col_xl_9{flex-basis:75%}.col_xl_10{flex-basis:83.3333333333%}.col_xl_11{flex-basis:91.6666666667%}.col_xl_12{flex-basis:100%}}.my_1{margin-top:.5rem;margin-bottom:.5rem}.mx_1{margin-left:.5rem;margin-right:.5rem}.mt_1{margin-top:.5rem}.mb_1{margin-bottom:.5rem}.ml_1{margin-left:.5rem}.mr_1{margin-right:.5rem}.py_1{margin-top:.5rem;margin-bottom:.5rem}.px_1{margin-left:.5rem;margin-right:.5rem}.pt_1{margin-top:.5rem}.pb_1{margin-bottom:.5rem}.pl_1{margin-left:.5rem}.pr_1{margin-right:.5rem}.my_2{margin-top:1rem;margin-bottom:1rem}.mx_2{margin-left:1rem;margin-right:1rem}.mt_2{margin-top:1rem}.mb_2{margin-bottom:1rem}.ml_2{margin-left:1rem}.mr_2{margin-right:1rem}.py_2{margin-top:1rem;margin-bottom:1rem}.px_2{margin-left:1rem;margin-right:1rem}.pt_2{margin-top:1rem}.pb_2{margin-bottom:1rem}.pl_2{margin-left:1rem}.pr_2{margin-right:1rem}.my_3{margin-top:1.5rem;margin-bottom:1.5rem}.mx_3{margin-left:1.5rem;margin-right:1.5rem}.mt_3{margin-top:1.5rem}.mb_3{margin-bottom:1.5rem}.ml_3{margin-left:1.5rem}.mr_3{margin-right:1.5rem}.py_3{margin-top:1.5rem;margin-bottom:1.5rem}.px_3{margin-left:1.5rem;margin-right:1.5rem}.pt_3{margin-top:1.5rem}.pb_3{margin-bottom:1.5rem}.pl_3{margin-left:1.5rem}.pr_3{margin-right:1.5rem}.my_4{margin-top:2rem;margin-bottom:2rem}.mx_4{margin-left:2rem;margin-right:2rem}.mt_4{margin-top:2rem}.mb_4{margin-bottom:2rem}.ml_4{margin-left:2rem}.mr_4{margin-right:2rem}.py_4{margin-top:2rem;margin-bottom:2rem}.px_4{margin-left:2rem;margin-right:2rem}.pt_4{margin-top:2rem}.pb_4{margin-bottom:2rem}.pl_4{margin-left:2rem}.pr_4{margin-right:2rem}.my_5{margin-top:2.5rem;margin-bottom:2.5rem}.mx_5{margin-left:2.5rem;margin-right:2.5rem}.mt_5{margin-top:2.5rem}.mb_5{margin-bottom:2.5rem}.ml_5{margin-left:2.5rem}.mr_5{margin-right:2.5rem}.py_5{margin-top:2.5rem;margin-bottom:2.5rem}.px_5{margin-left:2.5rem;margin-right:2.5rem}.pt_5{margin-top:2.5rem}.pb_5{margin-bottom:2.5rem}.pl_5{margin-left:2.5rem}.pr_5{margin-right:2.5rem}.d_flex{display:flex}.d_block,.navbar_nav .nav_item .nav_dropdown li:hover .nav_dropdown_alt,.navbar_nav .nav_item:hover .nav_dropdown{display:block}.d_inline_block{display:inline-block}.justify_content_center{justify-content:center}.justify_content_between{justify-content:space-between}.justify_content_arround{justify-content:space-around}.align_items_center{align-items:center}.w_25{width:25%}.w_50{width:50%}.w_75{width:75%}.w_100{width:100%}.btn{display:inline-block;padding:.5rem .8rem;transition:all .4s;cursor:pointer}.btn--primary{color:#fefefe;background-color:#f6b81c;border:2px solid #f6b81c}.btn--primary:hover{background-color:#e0a309;border:2px solid #e0a309}.btn--secondary{color:#fefefe;background-color:#474747;border:2px solid #474747}.btn--secondary:hover{background-color:#333;border:2px solid #333}.btn--success{color:#fefefe;background-color:#00923f;border:2px solid #00923f}.btn--success:hover{background-color:#00692d;border:2px solid #00692d}.btn--primary--outline{border:2px solid #f6b81c;color:#f6b81c;background:0 0}.btn--primary--outline:hover{background-color:#f6b81c;color:#fff}.btn--secondary--outline{border:2px solid #474747;color:#474747;background:0 0}.btn--secondary--outline:hover{background-color:#474747;color:#fff}.btn--success--outline{border:2px solid #00923f;color:#00923f;background:0 0}.btn--success--outline:hover{background-color:#00923f;color:#fff}.btn--modal--close{background:0 0;font-size:2.3rem;font-weight:200}.modal,.modal::after{width:100%;height:100%}.modal{overflow:hidden;transition:all .4s;opacity:0;visibility:hidden}.modal .modal__box{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;background-color:#fff;padding:1rem;max-width:40%;width:100%}@media only screen and (min-width:768px){.modal .modal__box{max-width:75%}}.modal .modal__box__head{display:flex;align-items:center;justify-content:space-between;border-bottom:.8px solid #dfdfdf}.modal .modal__box__content{padding:1rem 0;max-height:500px;height:100%;overflow-y:auto}.modal .modal__box__footer{display:flex;align-items:center;justify-content:flex-end}.modal::after{content:"";position:absolute;background-color:#474747;opacity:.5;top:0;left:0}.modal.closed{opacity:0;visibility:hidden}.modal.active{opacity:1;visibility:visible}@media (max-width:996px){.table--responsive{overflow-x:auto}}.table{width:100%;color:#474747}.table td,.table th{padding:.7rem 1.5rem}.table thead{text-align:left;background-color:#ededed}.table tbody,.table--striped thead{background-color:#fff}.table--bordered td,.table--bordered th{border:2px solid #eaeaea}.table--striped tr:nth-child(even){background-color:#ededed}.navbar_nav,.navbar_nav .nav_item .nav_dropdown li,.navbar_nav .nav_item .nav_dropdown li .nav_dropdown_alt li{display:flex}.navbar_nav .nav_item{margin:0 5px;padding:.5rem;position:relative}.navbar_nav .nav_item .nav_dropdown{display:none;position:absolute;background-color:#474747;white-space:nowrap;top:100%}.navbar_nav .nav_item .nav_dropdown li .nav_dropdown_alt{display:none;position:absolute;background-color:#474747;white-space:nowrap;left:100%}.navbar_nav .nav_item .nav_dropdown li .nav_dropdown_alt li a,.navbar_nav .nav_item .nav_dropdown li a{padding:.5rem 1.5rem}.navbar_nav .nav_item .nav_dropdown li:hover{background:#656565}.form_element[type=date],.form_element[type=number],.form_element[type=password],.form_element[type=text],.form_element[type=time],select.form_element{border:2px solid #474747;padding:.3rem .5rem;transition:all .4s;display:block;margin-bottom:1rem;width:100%}.form_element[type=date] :nth-last-child(1),.form_element[type=number] :nth-last-child(1),.form_element[type=password] :nth-last-child(1),.form_element[type=text] :nth-last-child(1),.form_element[type=time] :nth-last-child(1),select.form_element :nth-last-child(1){margin-bottom:0}.form_element[type=date]:focus,.form_element[type=number]:focus,.form_element[type=password]:focus,.form_element[type=text]:focus,.form_element[type=time]:focus,select.form_element:focus{border:2px solid #f6b81c}
.container{max-width:1750px;width:100%}.top_header{line-height:2.5rem}.brand_logo img{width:auto;height:60px}.searchbar{position:relative}.searchbar input{width:30vw;border:0;outline:0;padding:1rem;outline:1px solid rgba(244,123,34,.3)}.searchbar a{display:flex;position:absolute;top:50%;transform:translateY(-50%);right:8px;outline:0;border:0}