/*================================*/
/*    COMMON STYLES               */
/*================================*/
:root{

    --gray-1: #f1f1f1;
    --gray-2: #e5e5e5;
    --gray-3: #cbcbcb;
    --gray-4: #a3a3a3;
}

*{
    /*Keep it inside 100%*/
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
*:focus{outline:0;}

.dnone{display:none !important;}
.flex{display:flex;}
.flex-c{display:flex; flex-direction:column;}
.flex-v{display:flex; align-items:center;}
.flex-ctr{display:flex; justify-content:center; align-items:center;}
.relative{position:relative;}

.bump, .bump-12{margin-top:12px !important;}
.xl-bump, .bump-32{margin-top:32px !important;}
.lg-bump, .bump-24{margin-top:24px !important;}
.sm-bump, .bump-8{margin-top:8px !important;}
.xs-bump, .bump-4{margin-top:4px !important;}
.bump-16{margin-top:16px !important;}

.tail, .tail-12{margin-bottom:12px !important;}
.xl-tail, .tail-32{margin-bottom:32px !important;}
.lg-tail, .tail-24{margin-bottom:24px !important;}
.sm-tail, .tail-8{margin-bottom:8px !important;}
.xs-tail, .tail-4{margin-bottom:4px !important;}

.padded, .pad-12{padding:12px !important;}
.xl-padded, .pad-32{padding:32px !important;}
.lg-padded, .pad-24{padding:24px !important;}
.sm-padded, .pad-8{padding:8px !important;}
.xs-padded, .pad-4{padding:4px !important;}

.side-pad-4 {padding:0 4px !important;}
.side-pad-8 {padding:0 8px !important;}
.side-pad-12 {padding:0 12px !important;}
.side-pad-16 {padding:0 16px !important;}

.center{margin:auto !important;}
.v-center{margin:auto 0 !important;}
.h-center{margin:0 auto !important;}
.r-center {margin:auto 0 auto auto !important;}
.l-center {margin:auto auto auto 0 !important;}
.b-center {margin:auto auto 0 auto !important;}
.t-center {margin:0 auto auto auto !important;}
.nm{margin:0 !important;}
.np{padding:0 !important;}

.fill{height:100% !important; width:100% !important;}
.fill-width{width:100% !important;}
.fill-height{height:100% !important;}

.auto-width{width:auto !important;}
.auto-height{height:auto !important;}

.no-decoration, .no-deco{text-decoration:none;}
.pointer{cursor: pointer; }

.gap, .gap-8{gap:8px!important;}
.gap-12 {gap:12px !important;}
.lg-gap, .gap-16{gap:16px !important;}
.sm-gap, .gap-4{gap:4px !important;}
.xs-gap, .gap-2{gap:2px !important;}
.no-gap, .gap-0{gap:0px !important;}

.fs48{font-size: 48px;}
.fs36{font-size: 36px;}
.fs32{font-size: 32px;}
.fs24{font-size: 24px;}
.fs18{font-size: 18px;}

.txt-left{text-align:left;}
.txt-right{text-align:right;}
.txt-center{text-align:center;}

.txt-red{color:var(--dcny-red);}
.txt-blue{color:var(--dcny-blue-dark);}
.txt-gold{color:var(--dcny-gold);}
.txt-gray-dark{color:var(--dcny-gray-dark);}
.txt-wrap{text-wrap: wrap;}

.txt-xl, .txt-12{font-size:1.2rem !important;}
.txt-lg, .txt-11{font-size:1.1rem !important;}
.txt-sm, .txt-09{font-size:0.9rem !important;}
.txt-xs, .txt-08{font-size:0.8rem !important;}

.ellipsis, .ellip{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
}

.false-link{
    color:var(--blood);
    cursor: pointer;
}

.corner{border-radius: 4px}
.lg-corner{border-radius: 8px}
.xl-corner{border-radius: 12px}

.flip-y{transform:scaleY(-1);}
.flip-x{transform:scaleX(-1);}

.r45{transform: rotate(45deg);}
.r90{transform: rotate(90deg);}

.floater{
    filter:         drop-shadow(0px 1px 2px rgba(0,0,0,0.3)); 
    -webkit-filter: drop-shadow(0px 1px 2px rgba(0,0,0,0.3));
}

.atlas.note{
    font-size: 0.8rem;
    font-style:italic;
    color:var(--dcny-gray-dark);
}

.scroll-y{overflow-y:auto;}
.scroll-x{overflow-x:auto;}

/*--- GRIDS ----------------------*/
.grid-1{display:grid;  grid-template-columns:1fr;             gap:8px;}
.grid-2{display:grid;  grid-template-columns:repeat(2, 1fr);  gap:8px;}
.grid-3{display:grid;  grid-template-columns:repeat(3, 1fr);  gap:8px;}
.grid-4{display:grid;  grid-template-columns:repeat(4, 1fr);  gap:8px;}
.grid-5{display:grid;  grid-template-columns:repeat(5, 1fr);  gap:8px;}
.grid-6{display:grid;  grid-template-columns:repeat(6, 1fr);  gap:8px;}
.grid-7{display:grid;  grid-template-columns:repeat(7, 1fr);  gap:8px;}
.grid-8{display:grid;  grid-template-columns:repeat(8, 1fr);  gap:8px;}
.grid-12{display:grid; grid-template-columns:repeat(12, 1fr); gap:8px;}

.grid-auto-1{display:grid; grid-template-columns: auto 1fr; gap: 8px;}
.grid-1-auto{display:grid; grid-template-columns: 1fr auto; gap: 8px;}

.grid-48-1{display:grid; grid-template-columns: 48px 1fr; gap: 8px;}
.grid-36-1{display:grid; grid-template-columns: 36px 1fr; gap: 8px;}
.grid-32-1{display:grid; grid-template-columns: 32px 1fr; gap: 8px;}
.grid-24-1{display:grid; grid-template-columns: 24px 1fr; gap: 8px;}
.grid-18-1{display:grid; grid-template-columns: 18px 1fr; gap: 8px;}

.grid-1-48{display:grid; grid-template-columns: 1fr 48px; gap: 8px;}
.grid-1-36{display:grid; grid-template-columns: 1fr 36px; gap: 8px;}
.grid-1-32{display:grid; grid-template-columns: 1fr 32px; gap: 8px;}
.grid-1-24{display:grid; grid-template-columns: 1fr 24px; gap: 8px;}
.grid-1-18{display:grid; grid-template-columns: 1fr 18px; gap: 8px;}

.span-2{grid-column: span 2;}
.span-3{grid-column: span 3;}
.span-4{grid-column: span 4;}
.span-5{grid-column: span 5;}
.span-6{grid-column: span 6;}
.span-7{grid-column: span 7;}
.span-8{grid-column: span 8;}
.span-9{grid-column: span 9;}
.span-10{grid-column: span 10;}
.span-11{grid-column: span 11;}

.grid-48-1 .material-icons.fit, .grid-1-48 .material-icons.fit{font-size:48px; margin:auto;}
.grid-32-1 .material-icons.fit, .grid-1-32 .material-icons.fit{font-size:32px; margin:auto;}
.grid-36-1 .material-icons.fit, .grid-1-36 .material-icons.fit{font-size:36px; margin:auto;}
.grid-24-1 .material-icons.fit, .grid-1-24 .material-icons.fit{font-size:24px; margin:auto;}
.grid-18-1 .material-icons.fit, .grid-1-18 .material-icons.fit{font-size:18px; margin:auto;}

.grid-48-1 img.fit, .grid-1-48 img.fit{height:48px; width:48px; margin:auto;}
.grid-32-1 img.fit, .grid-1-32 img.fit{height:32px; width:32px; margin:auto;}
.grid-36-1 img.fit, .grid-1-36 img.fit{height:36px; width:36px; margin:auto;}
.grid-24-1 img.fit, .grid-1-24 img.fit{height:24px; width:24px; margin:auto;}
.grid-18-1 img.fit, .grid-1-18 img.fit{height:18px; width:18px; margin:auto;}

.grid-c{place-items:center;}
.grid-cs{place-items:center start;}
.grid-ce{place-items:center end;}
.grid-e{place-items: end}
.grid-es{place-items: end start}
.grid-ec{place-items: end center}

/*--- SHADOWS --------------------*/
.shadow-0{box-shadow: none;}
.shadow-1{box-shadow: 0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.20);}
.shadow-2{box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.20);}
.shadow-4{box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.20);}
.shadow-6{box-shadow: 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12), 0 3px 5px -1px rgba(0,0,0,0.20);}
.shadow-8{box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.20);}
.shadow-12{box-shadow: 0 12px 17px 2px rgba(0,0,0,0.14), 0 5px 22px 4px rgba(0,0,0,0.12), 0 7px 8px -4px rgba(0,0,0,0.20);}
.shadow-16{box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -5px rgba(0,0,0,0.20);}
.shadow-24{box-shadow: 0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12), 0 11px 15px -7px rgba(0,0,0,0.20);}

.shadow-inset-1{box-shadow: inset 0 1px 1px 0 rgba(0,0,0,0.14), inset 0 2px 1px -1px rgba(0,0,0,0.12), inset 0 1px 3px 0 rgba(0,0,0,0.20);}
.shadow-inset-2{box-shadow: inset 0 2px 2px 0 rgba(0,0,0,0.14), inset 0 3px 1px -2px rgba(0,0,0,0.12), inset 0 1px 5px 0 rgba(0,0,0,0.20);}
.shadow-inset-4{box-shadow: inset 0 4px 5px 0 rgba(0,0,0,0.14), inset 0 1px 10px 0 rgba(0,0,0,0.12), inset 0 2px 4px -1px rgba(0,0,0,0.20);}
.shadow-inset-6{box-shadow: inset 0 6px 10px 0 rgba(0,0,0,0.14), inset 0 1px 18px 0 rgba(0,0,0,0.12), inset 0 3px 5px -1px rgba(0,0,0,0.20);}
.shadow-inset-8{box-shadow: inset 0 8px 10px 1px rgba(0,0,0,0.14), inset 0 3px 14px 2px rgba(0,0,0,0.12), inset 0 5px 5px -3px rgba(0,0,0,0.20);}
.shadow-inset-12{box-shadow: inset 0 12px 17px 2px rgba(0,0,0,0.14), inset 0 5px 22px 4px rgba(0,0,0,0.12), inset 0 7px 8px -4px rgba(0,0,0,0.20);}
.shadow-inset-16{box-shadow: inset 0 16px 24px 2px rgba(0,0,0,0.14), inset 0 6px 30px 5px rgba(0,0,0,0.12), inset 0 8px 10px -5px rgba(0,0,0,0.20);}
.shadow-inset-24{box-shadow: inset 0 24px 38px 3px rgba(0,0,0,0.14), inset 0 9px 46px 8px rgba(0,0,0,0.12), inset 0 11px 15px -7px rgba(0,0,0,0.20);}


/*================================*/
/*    INPUTS                      */
/*================================*/
input, select, textarea
{
    width: 100%;
    height: 32px;
    padding: 5px 12px;
    font-size: 14px;
    color: var(--dcny-gray-dark);
    background: white;
    border: 1px solid var(--dcny-gray-light);
    border-radius: 4px;
    font-family: "Roboto Mono", sans-serif;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
}

input[type='checkbox'], 
input[type='radio']
{
    accent-color: var(--blood);
    box-shadow: none;
    -webkit-box-shadow: none;
    height: 24px;
    width: auto;
    margin: auto;
    cursor: pointer;
}

input[type='range']{
    accent-color: var(--blood-dark);
    box-shadow: none;
    -webkit-box-shadow: none;
    margin:none;
    cursor: pointer;
    padding:5px 0;
}

textarea{
    height:auto;
    min-height:80px;
    width: 100%;
    resize: vertical;
}


::placeholder{
    color: var(--gray-3);
}

input.invalid, select.invalid, textarea.invalid {
    border-color: color:#dc143c;
    background-color: rgba(220,20,60,0.4);
}

.invalid::placeholder { color:#dc143c; }

input:disabled, select:disabled, textarea:disabled
{
    color: var(--gray-4);
    border-color: var(--gray-4);
    background-color: var(--gray-3);
    cursor:not-allowed;
}

input.no-shadow, 
select.no-shadow,
textarea.no-shadow {
    box-shadow: none;
}

input.bordered, 
select.bordered,
textarea.bordered {
    border:1px solid var(--gray-2);
}


/*================================*/
/*    HOVER                       */
/*================================*/
@media (hover: hover) and (pointer: fine) {
    /*Protect against click hover on touch devices;*/

    button.primary:hover:not(:disabled){background: var(--blood-hover);}
    button.secondary:hover:not(:disabled){background: var(--blood-ghost);}
    button.ghost:hover:not(:disabled){background: var(--blood-ghost);}

    button.primary.red:hover:not(:disabled){background: var(--blood-hover);}
    button.secondary.red:hover:not(:disabled){background: var(--red-ghost);}
    button.ghost.red:hover:not(:disabled){background: var(--red-ghost);}

    input.ghost:hover{background: var(--blood-ghost);}

}