/*
Theme Name: Divi Child
Template: Divi
Text Domain: Divi-Child
*/

/* ---------------------------------------------
    TABLE OF CONTENTS

    - COLORS
    - GENERAL ELEMENTS
    - DIVI ELEMENTS
    - HEADER
    - WIDGETS
        - ANIMATED SEARCH FORM
        - THE EVENTS CALENDAR - LIST WIDGET
--------------------------------------------- */


/* ---------------------------------------------
    COLORS

	DK BLUE		: 072c35
	LT BLUE		: 0dc0dc
	LT GREEN	: a1cd3a
--------------------------------------------- */


/* ---------------------------------------------
    GENERAL ELEMENTS
--------------------------------------------- */

/* ---------------------------------------------
    DIVI ELEMENTS
--------------------------------------------- */

/* ---------------------------------------------
    HEADER
--------------------------------------------- */


/* ---------------------------------------------
    WIDGETS
--------------------------------------------- */

    /* ---------------------------------------------
        ANIMATED SEARCH FORM
    --------------------------------------------- */

    .ism-search-toggle .search-form {
        /*    
        position: absolute;
        right: 200px;
        top: 200px;
        */
    }

    .ism-search-toggle .search-field {
        background-color: transparent;
        background-image: url(images/search-icon-white-2.png);
        background-position: 5px center;
        background-repeat: no-repeat;
        background-size: 20px 20px;
        border: none;
        cursor: pointer;
        height: 37px;
        margin: 3px 0;
        padding: 0 0 0 34px;
        position: relative;
        -webkit-transition: width 400ms ease, background 400ms ease;
        transition:         width 400ms ease, background 400ms ease;
        width: 0;
    }

    .ism-search-toggle .search-field:focus {
        background-color: #fff;
        border: 2px solid #c3c0ab;
        cursor: text;
        outline: 0;
        padding: 0 0 0 5px;
        width: 100%;
    }
    .search-form
    .search-submit { 
        display:none;
    }


    /* ---------------------------------------------
        THE EVENTS CALENDAR - LIST WIDGET
    --------------------------------------------- */

    /* note: add this class to the shortcode instead of divi element */
    /* events wrapper */
    .dh_events_list {
        background: #fff;
        padding: 0 15px 10px 15px;
    }
    .dh_events_list .type-tribe_events .tribe-mini-calendar-event {
        display: -ms-flexbox;
        display: flex;
        align-items: center;	
    }
    /* event date */
    .dh_events_list .type-tribe_events .tribe-mini-calendar-event 
    .list-date {
        flex:0 0 auto; /* Forces side columns to stay same width */
        width: 120px;
        background: transparent;
        padding: 0;
    }
    .dh_events_list .type-tribe_events .tribe-mini-calendar-event 
    .list-date .list-dayname {
        background: #a1cd3a;
        color: #fff;
        font-size: 32px;
    }
    .dh_events_list .type-tribe_events .tribe-mini-calendar-event 
    .list-date .list-daynumber {
        background: #ccc;
        color: #072c35; 
        font-size: 54px;
        line-height: 1;
    }

    /* event info */
    .dh_events_list .type-tribe_events .tribe-mini-calendar-event 
    .list-info {
            flex:1 1 auto; /* Lets column shrink/grow to available width */
    }
    .dh_events_list .type-tribe_events .tribe-mini-calendar-event 
    .list-info .tribe-events-title {
        color: #0dc0dc!important;
        font-size: 18px;
        text-transform: uppercase;
        margin-bottom: 0;
    }
    .dh_events_list .type-tribe_events .tribe-mini-calendar-event 
    .list-info .tribe-events-duration {
        color: #072c35!important;
        font-size: 16px;
        max-height: 55px;
        overflow: hidden;
    }
    .dh_events_list .type-tribe_events .tribe-mini-calendar-event 
    .list-info .tribe-events-duration a {
        color: #072c35!important;
    }
    
    /* view more button */
    .dh_events_list .tribe-events-widget-link {
        margin-top: 10px;
    }