/* Add CiddiLabs - Vivian Nguyen Added 07/28/2026*/
@charset "UTF-8";
/*********************************************************************/
/***** BEGIN DESIGNPLUS THEME IMPORT & CUSTOMIZATION  ****************/
/*********************************************************************/
/* Import statements need to be at the top of your CSS file */

/* For Main CSS files */
@import url(https://designplus.ciditools.com/css/content.css);
@import url(https://designplus.ciditools.com/css/editor.css);
/* For Mobile app CSS file */
/*@import url(https://designplus.ciditools.com/css/mobile.css);*/

:root {
    --dt-color-primary: #A20032;
    --dt-color-primary-contrast: #FFFFFF;
    --dt-color-primary-dark-text: #A20032;
    --dt-color-secondary: #050505;
    --dt-color-secondary-contrast: #FFFFFF;
    --dt-color-secondary-dark-text: #050505;
    --dt-color-accent: #666666;
    --dt-color-accent-contrast: #FFFFFF;
    --dt-color-accent-dark-text: #666666;
    --dt-color-gray: #CCCCCC;
    --dt-color-gray-contrast: #000000;
    --dt-color-gray-dark-text: #636363;
    --dt-color-white: #FFFFFF;
    --dt-color-white-contrast: #000000;
    --dt-color-white-dark-text: #707070;
}

/*********************************************************************/
/***** END DESIGNPLUS THEME IMPORT & CUSTOMIZATION   *****************/
/*********************************************************************/

/* Hide Other contacts on user profile settings page - Vivian Nguyen Edited 02/17/2021*/

table.channel_list.other_channels.ic-Table.ic-Table--condensed.other_channels {
   display: none;
 
}
a.add_email_link.icon-add {
    visibility: hidden;
}

/* Hide Canvas Login footer links to Instructure social media sites - Vivian Nguyen Edited 02/18/2021 */ 
body.ic-Login-Body .ic-Login__content {height:630px;}
body.ic-Login-Body #footer-links.ic-Login-footer__links {display:none !important;}
body.ic-Login-Body .ic-Login-footer__logo-link {display:none !important;}

/* Last 
Edited by Vivian Nguyen 2/17/2021 
Modified by Jolie  6/5/20 */
/* add this to the outer container of layout to see grid */
.ccc_showlayout {
    background-color: #dddbdb;
    color: white;
    border: 1px solid #a3a3a3;
}

.ccc_showlayout div,
.ccc_showlayout p,
.ccc_showlayout h2,
.ccc_showlayout h3,
.ccc_showlayout h4,
.ccc_showlayout h5,
.ccc_showlayout h6  {
    background-color: #fafafa;
    color: Black;
    border: 1px solid #a3a3a3;
}
/*/////// Begin Atomic Design - Generic for State Wide distribution ///////////*/
/* Begin Auto Grid.  */
/* Author: Paula & Jolie */
/* COMMENTS: Autofill Grid. Use ANY container for Card with one of the two (round or square)
    Use grid class as outside grid wrapper
    Use ' ccc_card-square' or ' ccc_card-round' as internal card
    rather than having my-container contain center and margin, it is here in the card
*/
.ccc_grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    justify-items: center;
    justify-content: space-evenly;
    object-fit: contain;
}

/* end Auto Grid */
/* ------------------------------------------------------------------ */

/* Begin Fixed Col Grid.  */
/* Author: Paula & Jolie */
/* COMMENTS: 2 and 3 column Grid. Use ANY container for Card with one of the two (round or square)
    Use grid class as outside grid wrapper
    Use ' ccc_card-square' or ' ccc_card-round' as internal card
    rather than having my-container contain center and margin, it is here in the card
*/
@media (min-width: 768px) {

    .ccc_grid-2col {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
        padding: 10px;
        justify-items: center;
        /* justify-content: space-evenly; */
        object-fit: contain;
    }
    .ccc_grid-1col {
        display: grid;
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 10px;
        justify-items: center;
        justify-content: space-evenly;
        object-fit: contain;
    }
}

@media (max-width: 768px) {

    .ccc_grid-2col {
        display: grid;
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 10px;
        justify-items: center; 
        justify-content: space-evenly;
        object-fit: contain;
    }
    .ccc_grid-1col {
        display: grid;
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 10px;
        justify-items: center;
        justify-content: space-evenly;
        object-fit: contain;
    }
}

/* end Fixed Col Grid */
/* ------------------------------------------------------------------ */

/* Begin Grid Cards.  */
/* Author: Jolie (based on Article cards/tiles by Paula) */
/* COMMENTS:  Use ANY container for Card with one of the two (round or square)
    Use grid class as outside grid wrapper
    Use ' ccc_card-square' or ' ccc_card-round' as internal card
    rather than having my-container contain center and margin, it is here in the card
*/
.ccc_card-round,
.ccc_card-square {
    text-align: center;
    border: 3px solid #e7e7e7;
    margin: 0px 10px;
}
.ccc_card-none{
    text-align: center;
    border: 0;
    margin: 0px 10px;
}
.ccc_card-round {
    border-radius: 10px;
}

.ccc_grid-2col > .ccc_card-round,
.ccc_grid-2col > .ccc_card-square,
.ccc_grid-2col > .ccc_card-none,
.ccc_grid-3col > .ccc_card-round,
.ccc_grid-3col > .ccc_card-square {
    padding: 20px 10px;
}

/* end Auto Grid */
/* ------------------------------------------------------------------ */

/* Begin Interior Grids */
/* Author: Jolie */
/* COMMENTS: fixed 2 column Grid. Use any thing inside but every other container will alternate 1/4 and 3/4 of container width or 50/50
    Atomic Design: Molecule
    Use grid class as outside grid wrapper
    Was created for Student Support Portal header on front home page with an icon image and on left and text header on right
    NOTE: There are two Media Queries  min-width means that for medium tablet screen and larger 
    and a smaller screen for media table where these stack in 2 equal single columns with some child modifications
    >>see also 50-50 version also used for Student Support Portal
*/

@media (min-width: 768px) {

    .ccc_grid-interior-25-75{
        display: grid;
        grid-template-columns: 1fr 3fr;
        object-fit: contain;
    }
    
    .ccc_grid-interior-50-50 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        object-fit: contain;
    }
    .ccc_grid-interior-25-75>article {
        padding: 8px;
    }
    .ccc_grid-interior-100{
        display: grid;
        grid-template-columns: 1fr;
        object-fit: contain;
    }
}

@media (max-width: 768px) {

    .ccc_grid-interior-25-75{
        display: grid;
        grid-template-columns: 1fr;
        margin-top: 0px;
        object-fit: contain;
    }
    
    .ccc_grid-interior-50-50 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin-top: 0px;
        object-fit: contain;
    }
    /* .ccc_grid-interior-25-75>div:nth-child(2) {
        padding-bottom: 2em;
    } */
    .ccc_grid-interior-100{
        display: grid;
        grid-template-columns: 1fr;
        object-fit: contain;
    }
}

/* End Interior Grids */

/* ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ */
/* Begin Home page headers */
/* Author: Jolie */
/* COMMENTS: 
    Created for home pages in Student Support Portal
    This collection assumes the top level container (e.g. DIV) then headers and images that follow are styled 
    so class is only needed at the top level
    Important:  These color variables pickup the primary background color and complementaty text set in sub-accounts Active Theme.  They can be changed if another color is desired.
*/
.ccc_home-header {
    min-height: 72px;
    margin: 8px;
    padding: 0px 8px 8px 8px;
    background-color: #a20032;
    align-items: center;
    justify-content: center;
    object-fit: contain;
}

.ccc_home-header>h2 {
    color: #ffffff;
    /* margin-top: 30px;  */
    font-size: 20px;
    line-height: 22px;
    margin: 0px;
}

.ccc_home-header>img {
    margin: 0px auto;
    object-fit: contain;
}

.ccc_home-body {
    height: 5em;
}

.ccc_home-body p {
    margin: 15px 1.8em;
    line-height: 20px;
}

.ccc_home-btn_bottom-right {
    text-align: right;
    padding-right: 20px;
    font-size: .8em;
}

/* delete these before upload  */
a{
    color:#a20032;
    text-decoration-style: solid;
}
a:hover{
    color:#a20032;
    text-decoration-style: solid;
}
/* End Home Header collection */

/* ------------------------------------------------------------------ */

/* Begin Button Bottom*/
/* Author: Jolie */
/* COMMENTS: 
    Created for SSP.  Uses absolute positioning to keep the zoom room buttons 
    at bottom of tile regardless of tile height
    NOTE:  The button outline uses canvas theme primary color variable which can be overridden with inline border color.
    Important:  These color variables pickup the primary background color and complementaty text set in sub-accounts Active Theme.  They can be changed if another color is desired.
*/
@media (max-width: 768px) {
    .ccc_btn-bottom {
        right: 5%;
    }
}

.ccc_btn-bottom {
    text-align: center;
    font-size: .8em;
    border: 2px solid #a20032;
    padding: 8px 8px;
    width: 80%;
    position: absolute;
    right: 10%;
    bottom: 1em;
    border-radius: 13px;
}

/* End Button Bottom/*/

/* ------------------------------------------------------------------ */

/* Begin Corners - square/*/
/* Author: Jolie */
/* COMMENTS: fixed 2 column Grid. Use any thing inside but every other container will alternate 1/4 and 3/4 of container width or 50/50
    Atomic Design: Molecule
    Use grid class as outside grid wrapper
    Was created for Student Support Portal header on front home page with an icon image and on left and text header on right
    NOTE: There are two Media Queries  min-width means that for medium tablet screen and larger 
    and a smaller screen for media table where these stack in 2 equal single columns with some child modifications
    >>see also 50-50 version also used for Student Support Portal
*/
.ccc_square-corner {
    /* this is actually default so its not needed but for continuity with roundish corners */
    border-radius: 0px;
}

.ccc_roundish-corner {
    border-radius: 5px;
}

.ccc_round-corner {
    border-radius: 10px;
}

/* ------------------------------------------------------------------ */

/**/
/* Begin Brand Color Variables/*/
/* Author: Jolie */
/* COMMENTS: This uses the Theme variables loaded inside Canvas.  
Important:  These color variables pickup the primary background color and complementaty text set at root of this file.  They can be changed if another color is desired.
*/
.ccc_theme-primary-color {

    background-color: #a20032;
    color: #ffffff;
}

/* End Brand Colors */
/* Begin Box Shadows/*/
/* Author: Jolie */
/* COMMENTS: 
    1 = bold shadow.  The others are more subtle 
    Adds a box shadow to a container such as an image or a box
*/

/* COMMENTS: 
    1 = bold shadow.  The others are more subtle 
    Adds a box shadow to a container such as an image or a box
*/

.ccc_shadow-1 {
    box-shadow: 10px 10px 5px grey;
}

.ccc_shadow-2 {
    box-shadow: 0px 0px 8px #bebaba;
}

.ccc_shadow-3 {
    box-shadow: 3px 3px 8px 0px #a2a2a2;
}

.ccc_shadow-4 {
    box-shadow: 1px -4px 6px 2px #a2a2a2;
}

.ccc_shadow-5 {
  box-shadow: -5px 5px 3px 3px #aaaaaa;
}

.ccc_shadow-6 {
  box-shadow: -3px 3px 8px 3px #a2a2a2;
}

/* End Box Shadows/*/

/* ------------------------------------------------------------------ */


/* Begin SSP Tile Header/*/
/* Author: Jolie */
/* COMMENTS: 
    Was created for Student Support Portal header on front home page with an icon image and on left and text header on right
    NOTE: There are two Media Queries  min-width means that for medium tablet screen and larger 
    and a smaller screen Which assumes a single column grid so centers instead of left align
    Important:  These color variables pickup the primary background color and complementaty text set in sub-accounts Active Theme.  They can be changed if another color is desired.
*/

@media (min-width: 768px) {
    .ccc_tile-header {
        text-align: left;
        font-family: sans-serif;
        color: #a20032;
        font-weight: 800;
    }
}

@media (max-width: 768px) {
    .ccc_tile-header {
        text-align: center;
        font-family: sans-serif;
        color: #a20032;
        font-weight: 800;
    }
}

/* End SSP Tile Header/*/


/* ------------------------------------------------------------------ */

/* Begin Button Bottom*/
/* Author: Jolie */
/* COMMENTS: 
    Created for SSP.  Uses absolute positioning to keep the zoom room buttons 
    at bottom of tile regardless of tile height
    Important:  These color variables pickup the primary background color and complementaty text set in sub-accounts Active Theme.  They can be changed if another color is desired.
*/
@media (max-width: 768px) {
    .ccc_btn-bottom {
        right: 5%;
    }
}

.ccc_btn-bottom {
    text-align: center;
    font-size: .8em;
    border: 2px solid #a20032;
    padding: 8px 8px;
    width: 80%;
    position: absolute;
    right: 10%;
    bottom: 1em;
    border-radius: 13px;
}

/* End Button Bottom/*/

/* end CCC Atomic design created for SSP Developed at Foothill College */
/* ------------------------------------------------------------------ */

.ccc_layout-top {
    display: grid;
    align-items: start;
}

.ccc_layout-middle {
    display: grid;
    align-items: center;
}

.ccc_layout-bottom {
    display: grid;
    align-items: end;
}

.ccc_layout-left {
    display: grid;
    text-align: left;
    justify-content: start;
}

.ccc_layout-center {
    display: grid;
    text-align: center;
    justify-content: center;
}

.ccc_layout-right {
    display: grid;
    text-align: right;
    justify-content: end;
}