/**
 * Theme Name: Divi
 * Template:   Divi 
 */



 .canvas-container {
    width: 100% !important; 
}
canvas {
    width: 100% !important; 
}

#freehand-container {
    text-align: center; width: 100%; max-width: 1920px; margin: auto; background-color: #fff; padding: 20px 0px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    /* flex-flow: row wrap; */
    justify-content: space-around;
}

#freehand-container button {
    background-color: #00263e;
    font-family: MonumentExtendedGE-Bold, Arial, sans-serif !important;
    text-decoration: none ! Important;
    text-transform: uppercase;  
    border-radius: 10px;
    padding: 10px;
    position: relative;
    color: #fff;
    border-radius: 10px;
    transition: .4s;
    -webkit-transition: .4s;
    border:0px !important;
}

#freehand-container button:hover {
    background-color: #033d60;
    font-family: MonumentExtendedGE-Bold, Arial, sans-serif !important;
    text-decoration: none ! Important;
    text-transform: uppercase;  
    border-radius: 10px;
    padding: 10px;
    position: relative;
    color: #fff;
    border-radius: 10px;
    transition: .4s;
    -webkit-transition: .4s; 
    cursor:pointer;
}

#freehand-container label {
    float:none;
}

#commandsCanvas {
    width:30%;
    display: flex;
    justify-content: flex-start;
    margin: 10px;
    color: #003865 !important;
    flex-direction: column;
    row-gap: 5px;
    align-items: center;
}

.canvasToolContainer {
    display:flex;
    justify-content: space-between;
    width: 100%;
    gap: 5px;
}

#commandsCanvas , #commandsCanvas label, #commandsCanvas input, #commandsCanvas select, #commandsCanvas option{

    margin: 10px;  color: #003865  !important;
}
 
#main-content .h5p-content *, #main-content  fpd-main-bar *,  #main-content .fpd-confirm-msg {
    color: #003865 !important;
}

/* Small screens  */
@media (max-width: 768px) {

    #freehand-container {
        flex-flow: row wrap;
        justify-content: space-around;
    }
    #commandsCanvas {
        width: 100%; 
    }

    .canvasToolContainer {
        display: flex;
        justify-content: center;
        width: 100%;
        gap: 5px;
    }
}


/* Very small screens (e.g., narrow phones: 1 column) */
@media (max-width: 480px) {
    #freehand-container {
        flex-flow: row wrap;
        justify-content: space-around;
    }
    #commandsCanvas {
        width: 100%; 
    }
    .canvasToolContainer {
        display: flex;
        justify-content: center;
        width: 100%;
        gap: 5px;
    }
 
.page-id-2251 .n_section .n_row  {
    padding: 0px 5px !important;
    width: 100% !important;
}
.page-id-2251 .et_pb_post_content  {
    padding: 0px !important;
}

}



/* ================ */
/* tshirt selection page */
/* ================ */

#main-content .fpd-modal-overlay>.fpd-modal-inner * {
    color: #003865 !important;
}


.scelta-modalita
{
    text-align: center; padding: 20px;   margin: auto;
}

.scelta-modalita-inner {
    display: flex; justify-content: center; margin-top: 40px;       flex-wrap: wrap;
}

.scelta-modalita-inner-column {
    width: 50%; margin: 15px; justify-items: center;
}

.tshirtLinkBox {
    border: 2px solid #fff;
    border-radius: 30px;
    padding: 5%;
    margin: 15px;
    flex: 1;   text-align: center;
    width: 180px;
}

.tshirtLinkBox a {
    text-decoration: none !important;
}

.linkTshirtIcon { 
    width: auto;
    height: 100px;
    margin: 5%;
}


#fancy-product-designer-2256 fpd-actions-bar div  fpd-actions-menu div.fpd-collapsed-menu div div div  i,#fancy-product-designer-2256 fpd-actions-bar div  fpd-actions-menu div.fpd-collapsed-menu div div div span {
    color: #000 !important;
}


#main-content .gameBtnContainer .tshirtMsgComplete {
    display: none;
    visibility: hidden;
    width: 100%;
    color: #003865 !important;
    text-transform: uppercase;
    font-weight: bold;
    padding: 0 5px;
    font-family: MonumentExtended-Ultralight, Arial, sans-serif !important;
    font-size: 16.5px !important; 
    text-align: center;
    margin: 0 auto;
    background: #fff;
}



/* Small screens  */
@media (max-width: 768px) {

    .scelta-modalita   {
      padding:0px;
    }

    .scelta-modalita-inner {
        flex-direction: column;  
        align-items: center;
    }

    .scelta-modalita-inner-column {
        width: 100%; margin: 15px;
    }
}

/* Very small screens (e.g., narrow phones: 1 column) */
@media (max-width: 480px) {

    .page-id-2256 .n_section .n_row {
        padding: 5px !important;
        width: 100% !important;
    }
    .page-id-2256 .et_pb_post_content  {
        padding: 0px !important;
    }

}

/* ================ */
/* ================ */
/* ================ */

/* ================ */
/* memory selection page */
/* ================ */

.scelta-modalita-inner-column {
    flex: 0 0 33.33%; /* Makes each column take up one-third of the space */
    padding: 0 15px;
    text-align: center;
}
/* ================ */
/* ================ */
/* ================ */



#h5p-intro-1 {  display:none;}




    .gameBtnContainer  {
        display:flex;
        flex-flow: wrap;
        justify-content: space-evenly;
        width: 100%;
        gap: 5px;
        padding: 1%;
        background: #fff;
    }

    .gameBtnContainerMemory {
        justify-content: end;
        width: auto;
        gap: 0px;
        display: flex;
        padding: 0%;
        padding: 0px;
        background: #fff;
        position: absolute;
        bottom: 30px;
        right: 5%;
    }

    
    #main-content .btnBackDashboard {
        margin: 0;
        padding: 20px;
        border: 0;
        outline: 0;
        font-size: 100%;
        -ms-text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
        vertical-align: baseline; 
        text-align: center;
        z-index: 100;
      
    }


   

    #main-content .btnBackDashboard a {
        background: #ae1919 !important;
        border-radius: 0px !important;
        padding: 10px 20px !important;
        font-family: MonumentExtended-Bold, Arial, sans-serif !important;
        font-size: 16.5px !important;
        text-transform: uppercase !important;
        text-decoration: none !important;
        white-space: nowrap !important; 
        color: #fff !important;
        cursor: pointer;
        transition: .4s;
        -webkit-transition: .4s;
        font-weight: 500;
        border-radius: 10px !important;
    }


    .gameBtnContainer .btnDivGames {
        margin: 0;
        padding: 20px;
        border: 0;
        outline: 0;
        font-size: 100%;
        -ms-text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
        vertical-align: baseline;
        background: #fff;
        text-align: center; 
    }

    .gameBtnContainer .btnDivGames a {
        border-radius: 0px !important;
    padding: 10px 20px !important;
    font-family: MonumentExtended-Bold, Arial, sans-serif !important;
    font-size: 16.5px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    background: #00263e !important; 
    color: #fff !important;
    cursor: pointer;
    transition: .4s;
    -webkit-transition: .4s;
    font-weight: 500;
    border-radius: 10px !important;
    }



/* ================ */
/* ====memory card === */
/* ================ */

    .h5p-status {
        display: block;
        text-transform: uppercase;
        font-weight: bold;
        padding: 10px 20px !important;
        font-family: MonumentExtended-Bold, Arial, sans-serif !important;
        font-size: 16.5px !important;
        border: 2px solid #003865;
        width:340px;
        text-align: center; 
        margin: 2% 0 2% 6% !important;
    }

    .h5p-status dt:nth-of-type(2),
    .h5p-status dd:nth-of-type(2) {
        display: none;
    }

    .gameTextIntro {
        font-family: TomatoGrotesk-Bold,Arial,sans-serif!important;
        float: none;
    font-size: 16.5px; 
    width: 100%;
    margin: 20px 0px;
    text-align: center;
    font-weight: normal;
    }


    .h5p-memory-game .h5p-feedback {
        /* clear: both; */
        float:none !important;
        font-size:  16.5px !important;
        text-transform: uppercase !important;
        width: 100% !important;
        margin: 10px 0px !important;
        text-align: center;
        font-weight: bold;
    }



    #main-content .h5p-content .h5p-front span {
        color: #fff !important;
    }

    #main-content .h5p-content .h5p-front{
        background: #002740 !important;
        border: none;
        border-radius: 10px;
        display: flex;
        align-items: center; 
        justify-content: center;
    }

    .h5p-memory-hidden-read {
        display: none;
    }


    #main-content .h5p-content .h5p-back {
        background: #002740 !important;
        border: none;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #main-content .h5p-content .h5p-back img {
        height: 93% !important;
        border-radius: 6px;
    }

   

    .h5p-memory-game.h5p-invert-shades .h5p-memory-card .h5p-front:before, .h5p-memory-game.h5p-invert-shades .h5p-memory-card .h5p-back:before, .h5p-memory-game.h5p-invert-shades .h5p-memory-image:before {
        border-radius: 10px;
    }

    #main-content .h5p-memory-game .h5p-memory-card, #main-content .h5p-memory-game .h5p-memory-card .h5p-back, #main-content .h5p-memory-game .h5p-memory-card .h5p-front {
        width: 8.25em;
        height: 8.25em; 
    }

    .h5p-memory-game .h5p-memory-card .h5p-front > span:before {
        position: relative;
        content: "?";
        font-size: 4.75em;
        line-height: 1.67em;
    }
    

/* General layout for larger screens (default: 5 columns) */
.h5p-container.h5p-memory-game ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Spacing between cards */
    justify-content: center; /* Center the cards horizontally */
}

.h5p-container.h5p-memory-game .h5p-memory-wrap {
    width: 19% !important; /* 5 columns on larger screens */
}

/* Medium screens (e.g., tablets: 3 columns) */
@media (max-width: 1024px) {
    .h5p-container.h5p-memory-game .h5p-memory-wrap {
        width: 32% !important; /* 3 columns */
    }
}

/* Small screens (e.g., phones: 2 columns) */
@media (max-width: 768px) {
    .h5p-container.h5p-memory-game .h5p-memory-wrap {
        width: 48% !important; /* 2 columns */ 

    }

    .h5p-status {
        display: flex;
        text-transform: uppercase;
        font-weight: bold;
        padding: 10px 20px !important;
        font-family: MonumentExtended-Bold, Arial, sans-serif !important;
        font-size: 16.5px !important;
        border: 2px solid #003865;
        width: 85%;
        text-align: center;
        margin: 2% 0 20% 6% !important;
    }

    .h5p-memory-game .h5p-status > dt {
        /* float: left; */
        margin: 0 1em 0 0;
        font-weight: bold;
        width: 75%;
        text-align: left;
    }


    .gameBtnContainerMemory { 
        left: 50%;
        transform: translateX(-50%);
        right: auto;
        z-index: 100;
}

}

/* Very small screens (e.g., narrow phones: 1 column) */
@media (max-width: 480px) {
    .h5p-container.h5p-memory-game .h5p-memory-wrap {
        width: 30% !important;
        flex: auto;
    }
   
    .page-id-3781 .n_section .n_row, .page-id-3783 .n_section .n_row, .page-id-3785 .n_section .n_row {
        padding: 0px !important;
        width: 100% !important;
    }
    .page-id-3781 .et_pb_post_content, .page-id-3783 .et_pb_post_content, .page-id-3785 .et_pb_post_content {
        padding: 0px !important;
    }

    #main-content .h5p-memory-game .h5p-memory-card, #main-content .h5p-memory-game .h5p-memory-card .h5p-back, #main-content .h5p-memory-game .h5p-memory-card .h5p-front {
        width: 6.25em;
        height: 6.25em; 
    }

    .h5p-content   .h5p-memory-game .h5p-memory-wrap .h5p-memory-card     {
        margin: 0.5em 0.5em 0em 0.5em;
    }

    .h5p-status { 
        margin: 2% 0 40% 6% !important;
    }



}


/* ================ */
/* =====quiz====== */
/* ================ */

.titleQuizResult {
    margin:0 auto;
    text-align: center;
    color: #003865 !important;
    font-family: MonumentExtendedGE-Bold, Arial, sans-serif !important; 
}
 
 .quizMessageComplete {
        color: #003865 ;
        font-size: 16.5px ;
        text-transform: uppercase ;
        width: 100% ;
        margin: 10px 0px ;
        text-align: center;
        font-weight: bold;
    }
/* ================ */
/* ================ */
/* ================ */


/* ================ */
/* =====game status====== */
/* ================ */
#game-status-container {
    margin: 0px 0;
    padding: 0px;
    border-radius: 0px;
}

.game-status-message {
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 0px;
    border-left: 6px solid #007bff;
    margin-bottom: 0px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.game-status-message p {
    padding-bottom: 0px;
}

.game-status-message.game-status-new {
    border-left-color: #28a745;
}

.game-error-message {
    background-color: #fff3f3;
    padding: 15px;
    border-radius: 0px;
    border-left: 6px solid #dc3545;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* ================ */
/* ================ */
/* ================ */