/* General styles for the modals*/
.m-title {
    width: 100%;
    text-align: center;
    /* margin: 0;
    padding: 0; */
}
 /* Styles for News Modal */

 /* #NewsModal {
    margin-top: -70px;
    height: 100vh + 70px !important;
} */
.nm-container{
    margin-top: -70px;
    width: calc(600px + 2*16px);
    margin: -50px auto auto auto;
    height: 800px;
    display: flex;
    flex-direction: column;
}
.nm-content-container{
    height: 100%;
    width: 600px;
    display: flex;
    flex-direction: column;
    margin: auto;
}

.nm-container video, .nm-container img {
    width: 600px;   
    height: auto;   
}

.nm-news-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.nm-title {
    width: 600px;
    margin: auto;
    padding: 32px 0;
    border-bottom: 1px solid var(--primary-color);
    text-align: center;
}
.nm-info-text {
    margin: auto;
    width: 500px;
    margin-bottom: 8px;
}

.nm-info-text>p {
    overflow-y: auto;
    height: 200px;
}
.nm-footer {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.nm-news-controls {
    margin: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}


/* *********************************
    CONSTRUCTION RULES MODAL 
*************************************/
#rm-container{
    width: calc(100vw - 120px);
    height: calc(100vh - 110px);
    top: -30px;
    padding: 0 16px 16px 16px;
    display: flex;
    
}

#rm-content-container{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  /* overflow-y: auto; */
}
#rm-title {
  flex: 0 0 auto;
}
#rm-rules-content {
  flex: 1 1 auto;
  min-height: 0;  /* IMPORTANT */           
  width: 100%;
  display: grid;
  grid-template-rows: auto 1fr; 
    
}
#rm-containers{
  width: 100%;
  height: 100%;
  min-height: 0;  /* IMPORTANT */
  overflow: auto;  
  border: 1px solid var(--primary-color);          
}
#rm-pages {
    width: 100%;
    border: 1px solid var(--primary-color);
    height: 100%;
    overflow-y: auto;
}
.rm-page{
    display: flex;
    flex-direction: column;
}
#rm-construction-selector, #rm-construction-pages {
    width:100%;
}
#rm-construction-pages {
    overflow-y: auto;
    border-top: 1px solid var(--primary-color);
}
#construction-selector-section {
    margin: 16px;
    display: grid;
    grid-template-columns: auto var(--tab-width) 1fr;
    gap: 4px;
}

.rm-cards-container {
    width: 100%;
    padding: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    overflow-y: auto;
}

.rule-card {
    flex: 0 1 calc((100% - 32px) / 3); /* 3 cards in a row*/
    min-width: 0; /* IMPORTANT */
    box-sizing: border-box;
    padding: 4px 8px 8px 8px;
    border-radius: 0 0 20px 0;
    
    display: flex;          
    flex-direction: column; 
    justify-content: space-between;
    gap: 8px;

    /* background-color: var(--primary-pale-pale); */
    /* background-color: var(--light-grey); */
    background-color: var(--primary-pale-pale-pale);

    --rule-card-icon-size: 16px;
    --rule-card-image-size: 75px;
    --rule-card-i-size: 55px;
}
@media (max-width: 1000px) { .rule-card { flex: 0 1 calc((100% - 16px) / 2) } } /* 2 cards in a row*/
@media (max-width: 750px) { .rule-card { flex: 0 1 100% } } /* 1 card in a row*/

.rule-card .m-title {
    text-decoration: underline;
    text-decoration-color: var(--primary-color);
    position: relative
}

.rule-card > * { margin: 0 }

.rm-title-classes-fields {
    display: flex;
    flex-direction: column;
    gap: 4px
}
.rule-card .column { gap: 4px; justify-content: start}
.rule-card .classes-container {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px;
    border-bottom: 1px solid var(--primary-color);
    padding-bottom: 4px
}
.rule-card div.radio-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
}

.rule-card .info-container {
    display: flex;
    align-items: center;
    gap: 8px;
}
.rule-card .info-container img.rule-image {
    width:  var(--rule-card-image-size);
    height: var(--rule-card-image-size);
    border: 1px solid var(--primary-pale-pale);
}
.rule-card .info-container img.i-icon {
    width:  var(--rule-card-i-size);
    height: var(--rule-card-i-size);
    /* border: 1px solid var(--primary-color); */
}
.rule-card .info-container p {
    font-size: small;
    font-style: italic;
    color: var(--primary-darker);
}

/* ICONS */
.rule-card .small-icon,
#construction-selector-icons .small-icon
{
    height: var(--rule-card-icon-size);
    width: auto;
    opacity: 0.3;
}
.rule-card .small-icon:hover, 
#construction-selector-icons .small-icon:hover {opacity: 1}

/* HARDWARE LIST in Editor */
.e-hardware-row {
    width: fit-content;
    display: grid;
    grid-template-columns: 1fr 5rem;
    margin: auto;
}
.e-hardware-row>h6 {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid var(--primary-color);
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* SELECT Mat-Cab Group */
#mcm-container {
    width: fit-content;
    padding: 24px 36px;
    display: flex;
    gap: 24px;
    margin: auto;
    --item-width: 200px;
}

#mcm-container > * {
    width: var(--item-width);
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
#mcm-container img {
    width: var(--item-width);
    height: var(--item-width);
}
#mcm-container > * > h5:hover {
    background-color: var(--light-grey);
}