/*
 * It is advised not to edit the smartadmin_production.css
 * as this will override any changes you make in the 
 * later versions of this theme. 
 * 
 * We advise that you use use this CSS to override 
 * SmartAdmin styles. 
 * 
 * Rename the stylesheet to whatever your liking so it will stay
 * unique to you with each update of SmartAdmin.
 */

/*
 * INDEX
 * 
 * - HTML
 * - BODY
 * - CUSTOM STYLES
 */
@media only screen and (max-width:340px)
{
     body > div.image-container.set-full-height > h3{
         line-height:35px !important;
     }
}
@media only screen and (max-width:480px)
{
     h3.fix-font 
    {
        font-size:20px !important;
    }
 
     div.captcha-container > div{
         position:absolute;
         right:-4px;
     }
     div.fix-padding{
         padding-left:3px;
         padding-right:3px;
     }
     div.captcha-container{
         height:75px;
     }
    
/*.captcha-container {
  max-width: 200px;
  background: #ccc;
  padding: 20p;x
}

.g-recaptcha {
  transform-origin: left top;
  -webkit-transform-origin: left top;
}*/
}
 
@media only screen and (max-width:400px) {
      
     div.k-pager-wrap.k-grid-pager.k-widget{
       font-size:13px;
   }
    .my-h2 {
        margin-top: 20px;
        font-size: 27px;
    }

    .my-contain {
        display: inline-flex;
        width: 100%;
        margin-top: 20px;
    }

    .my-tile {
        height: 80px;
    }

    .my-tile-petition {
        height: 120px;
    }

    .myDesc {
        font-size: 23px;
    }

    .my-textarea {
        height: 125px;
    }

    #txtTitle {
        font-size: 20px !important;
    }

    .paymentCC {
        font-size: 10px !important;
    }

    .k-widget.k-window {
        width: 100% !important;
        left: 0 !important;
    }

        .k-widget.k-window.paywithoutmyCC {
            top: 460px !important;
        }
}

@media only screen and (max-width:720px) {
    .searchGrid {
        width: 80%;
    }

        .searchGrid > table {
            line-height: 20px;
        }

    .my-iframe {
        width: 325px;
        height: 260px;
    }

    .my-iframeSurvey {
        width: 325px;
        height: 210px;
    }

    .my-iframeCancel {
        width: 325px;
        height: 350px;
    }

    .my-model {
        width: 350px !important;
        margin-top: 200px;
    }

    .my-modelCancel {
        width: 350px !important;
        margin-top: 100px;
    }

    @media only screen and (min-width:401px) {

        .my-h2 {
            margin-top: 30px;
            font-size: 45px;
        }

        .my-contain {
            display: inline-flex;
            width: 100%;
            margin-top: 50px;
        }

        .my-tile {
            height: 150px;
        }

        .my-tile-petition {
            height: 210px;
        }

        .myDesc {
            font-size: 30px !important;
        }

        .my-textarea {
            height: 125px;
        }
    }
}

@media only screen and (min-width:721px) {
    .searchGrid {
        width: 50%;
    }

        .searchGrid > table {
            line-height: 40px;
        }

    #tile div .description {
        font-size: 20px !important;
    }

    .my-iframe {
        width: 588px;
        height: 420px;
    }

    .my-iframeSurvey {
        width: 588px;
        height: 420px;
    }

    .my-iframeCancel {
        width: 588px;
        height: 420px;
    }

    .my-model {
        width: 610px !important;
    }

    .my-modelCancel {
        width: 610px !important;
    }
}
div[data-dob=true]
{
    width:100%;
    direction: ltr;
    text-align: right;
}
div[data-dob=true] > select{
    padding:8px;
    width:28%;
     border: 1px solid #dadada;
}
div[data-dob=true] > select.day,
div[data-dob=true] > select.month{
    
}
div[data-dob=true] > select.day
{
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
div[data-dob=true] > select.year
{
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
