/*******************************************************************************	
 *	ROOT
 *******************************************************************************/
 :root {  
    

    --header-h:               60px;

    --main-font-family:             'Cera Pro', sans-serif;
    --main-font-weight:             400;
    --main-font-size:               18px;
    --inputtext-font-family:        'Cera Pro', sans-serif;
    --inputtext-font-weight:        400;
    --inputtext-font-size:          16px;
    --controls-font-size:           16px;

    --focus-offset:                 4px;      
    --primary-text-color:           #FFFFFF;    
    --focus-color:                  #1B75D0;
    --alert-color:                  #E53935;  
    --border-color:                 #A9A9A9;   
    --alerthint-font-family:        system-ui, sans-serif;
    --alerthint-font-weight:        400;
    --alerthint-font-size:          12px;
    --alerthint-text-color:         #E53935;   
    --alerthint-text-shadow:        1px 1px 2px rgba(0, 0, 0, 0.2);

    --primary-color:                #0078D7; 
    --background-color:             #F3F3F3; 
    --inputtext-color:              #0078D7; 
    --inputtext-background:         #FFFFFF;
    --inputtext-placeholder:        #B0B0B0;
    --controls-color:               #FFFFFF;
    --controls-color-hover:         #D1D1D1;
    --controls-background:          #27498A;
    --controls-background-hover:    #003E73;
    --controls-border-color:        unset;
    --controls-border-color-hover:  unset;
    --controls-shadow-color:        unset;

    --controls-border:              unset;
    --border-radius:                unset;
    --controls-height:              48px;
    --input-height:                 40px; 



    --card-bg-color:                #FFFFFF;
    --card-br-radius:               20px;
    --card-shadow:                   0  0 16px  rgba(0, 0, 0, 0.125);
    --card-shadow-color:            #666666;

    
}

/*******************************************************************************	
 *	
 *******************************************************************************/
.default{

    --primary-color:                #27498A; 
    --primary-text-color:           #27498A; 
    --background-color:             #FFFFFF; /* Світлий сірий фон між шапкою і підвалом */
    --box-background-color:         #FFFFFF; /* Білий фон для контейнерів */
    --inputtext-color:              #000000; /* Чорний текст в полях */
    --inputtext-background:         #FFFFFF; /* Білий фон в полях */
    --inputtext-placeholder:        #B3B3B3; /* Світло-сірий для плейсхолдерів */
    --controls-color:               #FFFFFF; /* Білий текст кнопок */
    --controls-color-hover:         #F2F2F2; /* Світло-сірий текст при ховері */
    --controls-shadow-color:        rgba(0, 0, 0, 0.1); /* Легка тінь */


    
    --controls-shadow:              0 1px 4px;
    --controls-shadow-hover:        0 2px 6px;
    --controls-font-size:           16px; 
    --border-radius:                4px; /* Легке скруглення, як у Google */
    --controls-height:              40px; 
    --input-height:                 38px; 
    
    
    
}   

.default .diag-overview h2, h3 {
    font-size:       18px;
    font-weight:     bold;
    color:            var(--primary-color);
    margin:          0;
    text-align:      left;
    margin-bottom:   10px;
}




.default .diagrun{
    --primary-color:  var(--primary-text-color);
}


.default header{
    font-size:                      15px;
    font-weight:                    400;
}

.default footer{
    --background-color:                #0B3F49;
}

.default .iag-bubble{
    --primary-color:  var(--primary-color);
}

/*******************************************************************************	
 *	
 *******************************************************************************/

.default  .notification{
    --background-color:             #C4E9FB; 
    --primary-color:                #001E42;
    --controls-border-color:        #416EB6;
    --controls-border:              2px solid;
    --controls-shadow:              0 0 4px;
}

.default  .notification.error {
   
    --background-color:      #FDEDEC; 
    --controls-border-color: #B22222 ;
    --primary-color:    #330907 ;
 }

 .default  .notification.warning {
   
    --background-color:      #FFF8DC;
    --controls-border-color: #DAA520;
    --primary-color:    #DAA520;
 }
/*******************************************************************************	
 *	
 *******************************************************************************/


.default .icon3d{
    text-shadow:                    1px 1px 1px rgba(0, 0, 0, 1), 
                                    4px 8px 5px rgba(0, 0, 0, 0.4);
    color:                          #a2abbf;
}

.default .messagebox {
    color:                          #34495E;
    --controls-shadow-color:        #666666;
    --border-radius:                0;
}
.default .messagebox h1 {
    font-size:      22px; 
    margin:         20px 0;
}
.default .messagebox h2 {
    font-size:       16px;
    font-weight:     bold;
    color: #007BC0;
}
.default .messagebox p {
    font-size:      14px;
    text-align:     justify;
}

.default .messagebox .p2 {
    text-align:     justify;
    font-size:      12px;
    margin-bottom:  20px;
}


.default .cardbox {
    color:       #27498A; 
    box-shadow:  0  0 8px  rgba(0, 0, 0, 0.5);
}

.default .cardlayout{
    box-shadow:  0  0 8px  rgba(0, 0, 0, 0.5);
}

.default .cardlayout .cardbox{
    box-shadow: none;
}

.default .cardbox .editbox input {
    --controls-shadow:             none; 
}