dominicana-indotel-ui/dist/atomos.min.css

AtomOS - A modular and efficient design system based on Atomic Design principles

:root{--white:#fff;--black-50:#bfbfbf;--black-100:#aaa;--black-200:#959595;--black-300:grey;--black-400:#6a6a6a;--black-500:#555;--black-600:#404040;--black-700:#2b2b2b;--black-800:#151515;--black-900:#000;--blue-50:#adc9fe;--blue-100:#91b7fd;--blue-200:#76a5fd;--blue-300:#5a93fc;--blue-400:#3f81fc;--blue-500:#236ffb;--blue-600:#085dfb;--blue-700:#0452e3;--blue-800:#0348c7;--blue-900:#033eac;--green-50:#c8f4d8;--green-100:#b5f1ca;--green-200:#a3edbd;--green-300:#90e9b0;--green-400:#7ee6a3;--green-500:#6be296;--green-600:#59df89;--green-700:#46db7b;--green-800:#34d76e;--green-900:#28cd63}.bg-white{background-color:var(--white)}.bg-black-50{background-color:var(--black-50)}.bg-black-100{background-color:var(--black-100)}.bg-black-200{background-color:var(--black-200)}.bg-black-300{background-color:var(--black-300)}.bg-black-400{background-color:var(--black-400)}.bg-black-500{background-color:var(--black-500)}.bg-black-600{background-color:var(--black-600)}.bg-black-700{background-color:var(--black-700)}.bg-black-800{background-color:var(--black-800)}.bg-black-900{background-color:var(--black-900)}.bg-blue-50{background-color:var(--blue-50)}.bg-blue-100{background-color:var(--blue-100)}.bg-blue-200{background-color:var(--blue-200)}.bg-blue-300{background-color:var(--blue-300)}.bg-blue-400{background-color:var(--blue-400)}.bg-blue-500{background-color:var(--blue-500)}.bg-blue-600{background-color:var(--blue-600)}.bg-blue-700{background-color:var(--blue-700)}.bg-blue-800{background-color:var(--blue-800)}.bg-blue-900{background-color:var(--blue-900)}.bg-green-50{background-color:var(--green-50)}.bg-green-100{background-color:var(--green-100)}.bg-green-200{background-color:var(--green-200)}.bg-green-300{background-color:var(--green-300)}.bg-green-400{background-color:var(--green-400)}.bg-green-500{background-color:var(--green-500)}.bg-green-600{background-color:var(--green-600)}.bg-green-700{background-color:var(--green-700)}.bg-green-800{background-color:var(--green-800)}.bg-green-900{background-color:var(--green-900)}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,font,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font-size:100%;margin:0;padding:0;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}input,textarea{font-family:inherit;font-size:100%;margin:0;outline:none;padding:0;vertical-align:baseline}button{background-color:transparent;color:inherit;font:inherit;line-height:normal;overflow:visible;padding:0;text-transform:none}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-justify{text-align:justify}.text-start{text-align:start}.text-end{text-align:end}.text-underline{text-decoration:underline}.text-no-underline{text-decoration:none}.text-uppercase{text-transform:uppercase}.text-lowercase{text-transform:lowercase}.text-capitalize{text-transform:capitalize}.text-spacing-wide{letter-spacing:.1em}.text-spacing-tight{letter-spacing:-.05em}.text-spacing-normal{letter-spacing:normal}.text-lineheight-normal{line-height:1.6}.text-lineheight-tight{line-height:1.2}.text-lineheight-loose{line-height:2}.text-color-white{background-color:var(--white)}.text-color-black-50{background-color:var(--black-50)}.text-color-black-100{background-color:var(--black-100)}.text-color-black-200{background-color:var(--black-200)}.text-color-black-300{background-color:var(--black-300)}.text-color-black-400{background-color:var(--black-400)}.text-color-black-500{background-color:var(--black-500)}.text-color-black-600{background-color:var(--black-600)}.text-color-black-700{background-color:var(--black-700)}.text-color-black-800{background-color:var(--black-800)}.text-color-black-900{background-color:var(--black-900)}.text-color-blue-50{background-color:var(--blue-50)}.text-color-blue-100{background-color:var(--blue-100)}.text-color-blue-200{background-color:var(--blue-200)}.text-color-blue-300{background-color:var(--blue-300)}.text-color-blue-400{background-color:var(--blue-400)}.text-color-blue-500{background-color:var(--blue-500)}.text-color-blue-600{background-color:var(--blue-600)}.text-color-blue-700{background-color:var(--blue-700)}.text-color-blue-800{background-color:var(--blue-800)}.text-color-blue-900{background-color:var(--blue-900)}.text-color-green-50{background-color:var(--green-50)}.text-color-green-100{background-color:var(--green-100)}.text-color-green-200{background-color:var(--green-200)}.text-color-green-300{background-color:var(--green-300)}.text-color-green-400{background-color:var(--green-400)}.text-color-green-500{background-color:var(--green-500)}.text-color-green-600{background-color:var(--green-600)}.text-color-green-700{background-color:var(--green-700)}.text-color-green-800{background-color:var(--green-800)}.text-color-green-900{background-color:var(--green-900)}.text-h1{font-size:2.5rem;font-weight:700;line-height:1.2}.text-h2{font-size:2rem;font-weight:700;line-height:1.3}.text-h3{font-size:1.75rem;font-weight:700;line-height:1.4}.text-h4{font-size:1.5rem;font-weight:700;line-height:1.5}.text-h5{font-size:1.25rem}.text-h5,.text-h6{font-weight:700;line-height:1.6}.text-h6{font-size:1rem}.text-xs{font-size:.75rem}.text-sm{font-size:.875rem}.text-md{font-size:1rem}.text-lg{font-size:1.125rem}.text-xl{font-size:1.25rem}.text-2xl{font-size:1.5rem}.text-3xl{font-size:1.875rem}.text-4xl{font-size:2.25rem}.text-5xl{font-size:3rem}.text-6xl{font-size:4rem}body{background-color:var(--white);color:var(--black-700);font-family:Open Sans,sans-serif;line-height:1.6;margin:0;padding:0}h1,h2,h3{color:var(--black-600);font-family:Montserrat,sans-serif;margin:1rem 0}h1{font-size:2.5rem}h1,h2{font-weight:700}h2{font-size:2rem}h3{font-size:1.5rem;font-weight:semi-bold}button{background-color:var(--green-800);border:none;border-radius:5px;color:var(--white);cursor:pointer;font-family:Montserrat,sans-serif;padding:10px 20px;transition:background-color .3s ease}button:hover{background-color:var(--green-900)}.container{max-width:1200px}.container,.container-fluid{margin:0 auto;padding:0 1rem}.container-fluid{width:100%}.grid-container{align-items:start;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));justify-items:stretch}.col{grid-column:span var(--col-span,1);min-height:150px;padding:8px;transition:transform .3s ease-in-out}.col[data-col-span="6"]{--col-span:6}.col:hover{transform:scale(1.05)}.gap-small{gap:.5rem}.gap-tiny{gap:.25rem}@media (max-width:768px){.col{grid-column:span 12}}@media (min-width:768px) and (max-width:992px){.col{grid-column:span 6}}@media (min-width:992px){.col{grid-column:span 3}}@supports not (display:grid){.grid-container{display:flex;flex-wrap:wrap;gap:16px}.col{flex:1 1 100%;max-width:100%}}.hidden-xs{display:none}@media (min-width:768px){.hidden-xs{display:block}}@media (max-width:480px){.col{grid-column:span 12}}a{color:var(--blue-700);font-weight:700;text-decoration:none}.navbar{align-items:center;background-color:var(--black-800);color:var(--white);display:flex;font-family:Arial,sans-serif;justify-content:space-between;padding:15px 20px}.nav-logo{color:var(--green-800);font-size:1.5rem;font-weight:700;text-decoration:none}.nav-links{display:flex;list-style:none;margin:0;padding:0}.nav-link{color:var(--white);font-size:1rem;margin:0 15px;text-decoration:none;transition:color .3s ease}.nav-link:hover{color:var(--green-800);text-decoration:none}.navbar-toggle{color:var(--white);cursor:pointer;display:none;font-size:1.5rem}@media (max-width:768px){.navbar{align-items:flex-start;flex-direction:column}.navbar-toggle{align-self:flex-end;display:block}.nav-links{display:none;flex-direction:column;width:100%}.nav-links.active{display:flex}.nav-link{margin:0 10px;padding:10px 0;text-align:left;width:100%}}blockquote{border-left:5px solid var(--amarillo-suave);color:var(--verde-claro);font-family:Playfair Display,serif;font-size:1.2rem;margin:20px 0;padding-left:10px}.section{border-radius:10px;margin:20px 0;padding:20px}:root{--padding-small:10px;--padding-medium:15px;--padding-large:20px;--max-width-mobile:100%;--max-width-tablet:720px;--max-width-desktop:1200px;--max-width-large:1400px}.main{box-sizing:border-box;display:block;margin:20px auto;max-width:var(--max-width-mobile);padding:var(--padding-small);width:100%}@media (min-width:480px){.main{max-width:90%;padding:var(--padding-medium)}}@media (min-width:768px){.main{max-width:var(--max-width-tablet);padding:var(--padding-large)}}@media (min-width:1200px){.main{max-width:var(--max-width-desktop);padding:var(--padding-large)}}@media (min-width:1600px){.main{max-width:var(--max-width-large);padding:var(--padding-large)}}@media (max-width:768px){.container,.container-fluid,.grid-container{padding:0 1rem}}.color-box{border-radius:12px;box-shadow:0 4px 6px rgba(0,0,0,.1);font-family:Arial,sans-serif;height:140px;margin:5px;overflow:hidden;width:120px}.color-box .top{color:var(--white);font-weight:700;height:70%}.color-box .bottom,.color-box .top{align-items:center;display:flex;justify-content:center}.color-box .bottom{background:var(--white);color:var(--black-900);font-size:12px;height:30%;padding:5px 10px}.grid-container-color-box{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}@media (max-width:1200px){.grid-container-color-box{gap:10px;grid-template-columns:repeat(6,1fr)}}@media (max-width:992px){.grid-container-color-box{gap:10px;grid-template-columns:repeat(5,1fr)}}@media (max-width:768px){.grid-container-color-box{gap:10px;grid-template-columns:repeat(4,1fr)}}@media (max-width:576px){.grid-container-color-box{gap:10px;grid-template-columns:repeat(2,1fr)}}@media (max-width:400px){.grid-container-color-box{gap:10px;grid-template-columns:repeat(2,1fr)}}